/*
 * QWEB Website Builder - motion layer (optional).
 * Loaded only when theme.motion.preset is not "none" or a hero uses
 * settings.background.attachment "fixed" / "parallax". Never loaded in the Editor.
 *
 * Safety rules:
 * - Content is hidden only while html.qm-js is present (set in <head>) and
 *   html.qm-off is absent. qm-off is added if motion.js does not start in time,
 *   so a failed script never leaves content invisible.
 * - prefers-reduced-motion disables every effect.
 * - Only opacity and transform are animated.
 */

:root {
  --qm-ease: cubic-bezier(.22, 1, .36, 1);
  --qm-duration: .7s;
  --qm-distance: 18px;
  --qm-zoom: .96;
}

body[data-motion="dynamic"] {
  --qm-duration: 1s;
  --qm-distance: 44px;
  --qm-zoom: .9;
}

/* ---------- Entrance (scroll reveal) ---------- */

/* Start transform per entrance type (section override or preset default). */
body[data-motion] .section { --qm-from: translate3d(0, var(--qm-distance), 0); }
body[data-motion] .section[data-motion-entrance="fade"] { --qm-from: none; }
body[data-motion] .section[data-motion-entrance="zoom"] { --qm-from: scale(var(--qm-zoom)); }
body[data-motion] .section[data-motion-entrance="slide-left"] { --qm-from: translate3d(calc(var(--qm-distance) * -2), 0, 0); }
body[data-motion] .section[data-motion-entrance="slide-right"] { --qm-from: translate3d(calc(var(--qm-distance) * 2), 0, 0); }
body[data-motion="dynamic"] .section:not([data-motion-entrance]) .image-frame { --qm-from: scale(var(--qm-zoom)); }

/* Hidden start state: the same element list motion.js animates. */
html.qm-js:not(.qm-off) body[data-motion] main .section:not([data-motion-entrance="none"]) :is(
  .eyebrow, h1, h2, .lead, .lead-sm, .section-heading > p, .cta-box > p,
  .button-row, .card, .contact-card, .image-frame, .check-list > li
):not(.qm-in) {
  opacity: 0;
  transform: var(--qm-from);
}

body[data-motion] .qm-target {
  transition:
    opacity var(--qm-duration) var(--qm-ease) var(--qm-delay, 0s),
    transform var(--qm-duration) var(--qm-ease) var(--qm-delay, 0s);
}

/* Cards keep their own hover transition once revealed. */
body[data-motion] .card.qm-done {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/* ---------- Text presentation ---------- */
/* motion.js splits titles (and, with scope "all", paragraphs) into word or
   letter spans and adds .qm-text-in when the element enters the screen.
   Until the script has prepared them, the elements stay hidden so the
   visitor never sees the text appear and then restart. */

html.qm-js:not(.qm-off) body[data-motion-text] main .section:not([data-motion-text="none"]) :is(h1, h2):not(.qm-text),
html.qm-js:not(.qm-off) main .section[data-motion-text]:not([data-motion-text="none"]) :is(h1, h2):not(.qm-text),
html.qm-js:not(.qm-off) body[data-motion-text-scope="all"] main .section:not([data-motion-text="none"]) :is(.lead, .lead-sm, .section-heading > p, .cta-box > p):not(.qm-text) {
  opacity: 0;
}

.qm-text .qm-w { display: inline-block; white-space: nowrap; }

/* words: each word rises from behind a mask (room kept for accents and descenders). */
.qm-fx-words .qm-w {
  overflow: hidden;
  padding: .12em .03em .16em;
  margin: -.12em -.03em -.16em;
  vertical-align: bottom;
}
.qm-fx-words .qm-wi {
  display: inline-block;
  transform: translate3d(0, 115%, 0);
  transition: transform .85s var(--qm-ease) calc(var(--i, 0) * var(--qm-step, 60ms));
}
.qm-fx-words.qm-text-in .qm-wi { transform: none; }

/* blur: words go from blurred to sharp. */
.qm-fx-blur .qm-w {
  opacity: 0;
  filter: blur(12px);
  transform: translate3d(0, .3em, 0);
  transition:
    opacity .8s ease calc(var(--i, 0) * var(--qm-step, 60ms)),
    filter .8s ease calc(var(--i, 0) * var(--qm-step, 60ms)),
    transform .8s var(--qm-ease) calc(var(--i, 0) * var(--qm-step, 60ms));
}
.qm-fx-blur.qm-text-in .qm-w { opacity: 1; filter: none; transform: none; }

/* typewriter: letters appear one by one; the cursor follows the last letter. */
.qm-fx-typewriter .qm-c { opacity: 0; position: relative; }
.qm-fx-typewriter .qm-c.qm-on { opacity: 1; }
.qm-fx-typewriter .qm-c.qm-cur::after {
  content: "";
  position: absolute;
  left: 100%;
  top: .12em;
  width: .07em;
  min-width: 2px;
  height: .9em;
  margin-left: .04em;
  background: currentColor;
  animation: qmCaret .6s steps(1) infinite;
}
@keyframes qmCaret { 50% { opacity: 0; } }

/* ---------- Hero background: parallax ---------- */

.hero-attachment-parallax .hero-background-media {
  top: -15%;
  height: 130%;
  will-change: transform;
}

/* ---------- Hero background: fixed (pure CSS) ---------- */

.hero-attachment-fixed {
  clip-path: inset(0);
}

.hero-attachment-fixed .hero-background-media {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
}

/* ---------- Transitions between sections ---------- */
/* motion.js sets --qm-cover (0..1, how much of a block is covered by the next
   one), --qm-top (sticky offset), --qm-hold (pause length), --qm-item (pin)
   and, for some effects, transform or clip-path directly. Only transform,
   opacity and clip-path change. */

/* Sections without a background class get the page background so an
   overlapping section never shows the one below through it. */
:where(.qm-under, .qm-over) { background-color: var(--color-background); }

/* The covered block holds still; its bottom margin is the pause during which
   it rests before the next section starts to arrive. */
.qm-under {
  position: sticky;
  top: var(--qm-top, var(--qm-header, 76px));
  margin-bottom: var(--qm-hold, 0px);
}
.qm-under, .qm-over { z-index: 1; }
.qm-over:not(.qm-under) { position: relative; }

/* Full-screen "cards" with centred content, so a short section never leaves
   part of the one below visible. */
section.qm-under:not(.qm-pin),
section.qm-over:not(.qm-pin) {
  min-height: calc(100vh - var(--qm-header, 76px));
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Measuring natural positions: no sticky offsets and no effects. */
html.qm-measuring .qm-under { position: relative !important; top: auto !important; }
html.qm-measuring .qm-under,
html.qm-measuring .qm-over { transform: none !important; }

/* A block fully covered by the next one is not painted. */
.qm-covered { visibility: hidden; }

/* cover from the side: no horizontal scrollbar while a section slides in. */
body.qm-has-side main { overflow-x: clip; }
.qm-side { will-change: transform; }

/* depth: the covered block shrinks and darkens. */
body.qm-has-depth main { background: var(--color-primary-dark); }
.qm-depth {
  transform: scale(calc(1 - var(--qm-cover, 0) * .07));
  border-radius: calc(var(--qm-cover, 0) * 28px);
  overflow: clip;
}
.qm-depth::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  background: #000;
  opacity: calc(var(--qm-cover, 0) * .45);
  pointer-events: none;
}

/* reveal: transform and clip-path are set by motion.js; the section below
   dims slightly so the opening circle is clearly visible. */
.qm-t-reveal { will-change: clip-path, transform; }
.qm-dim::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  background: #000;
  opacity: calc(var(--qm-cover, 0) * .35);
  pointer-events: none;
}

/* horizontal: consecutive sections become side-by-side panels. */
.qm-h:not(.qm-h-off) .qm-h-sticky {
  position: sticky;
  top: var(--qm-header, 76px);
  height: calc(100vh - var(--qm-header, 76px));
  overflow: hidden;
}
.qm-h:not(.qm-h-off) .qm-h-track,
.qm-h.qm-h-measure .qm-h-track {
  display: flex;
  align-items: stretch;
  width: max-content;
  height: 100%;
  will-change: transform;
}
.qm-h.qm-h-right:not(.qm-h-off) .qm-h-track,
.qm-h.qm-h-right.qm-h-measure .qm-h-track { flex-direction: row-reverse; }
.qm-h:not(.qm-h-off) .qm-h-track > .section,
.qm-h.qm-h-measure .qm-h-track > .section {
  flex: 0 0 var(--qm-panel, 100vw);
  width: var(--qm-panel, 100vw);
  padding-block: clamp(32px, 6vh, 64px);
  display: flex;
  align-items: center;
}
.qm-h.qm-h-measure .qm-h-sticky { height: auto; }
.qm-h.qm-h-measure .qm-h-track { height: auto; align-items: flex-start; }
.qm-h:not(.qm-h-off) .qm-h-track > .section { height: 100%; }
.qm-h:not(.qm-h-off) .qm-h-track > .section > .container { width: min(calc(100% - 2 * var(--gutter)), var(--container-width)); }

/* pin: the section holds while its items appear one by one. */
.qm-pin > .container {
  position: sticky;
  top: var(--qm-header, 76px);
  min-height: calc(100vh - var(--qm-header, 76px));
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.qm-pin .qm-pin-item {
  opacity: var(--qm-item, 0);
  transform: translate3d(0, calc((1 - var(--qm-item, 0)) * 90px), 0) scale(calc(.9 + var(--qm-item, 0) * .1));
  transition: none;
}

/* Menu navigation whose way crosses a "pin" section: short fade instead of
   flying through the pinned items. Stays below the sticky header (z-index 30). */
.qm-curtain {
  position: fixed;
  inset: 0;
  z-index: 25;
  background: var(--color-background);
  opacity: 0;
  pointer-events: none;
  transition: opacity .19s ease;
}
.qm-curtain.on { opacity: 1; }

/* ---------- Smooth scroll (Lenis, MIT) ---------- */

html.lenis, html.lenis body { height: auto; }
html.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ---------- Print: everything visible ---------- */

@media print {
  main .section * {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---------- Reduced motion: everything static ---------- */

@media (prefers-reduced-motion: reduce) {
  html.qm-js body[data-motion] main .section :is(
    .eyebrow, h1, h2, .lead, .lead-sm, .section-heading > p, .cta-box > p,
    .button-row, .card, .contact-card, .image-frame, .check-list > li
  ) {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .hero-attachment-parallax .hero-background-media {
    top: 0;
    height: 100%;
    transform: none !important;
  }

  .hero-attachment-fixed {
    clip-path: none;
  }

  .hero-attachment-fixed .hero-background-media {
    position: absolute;
    height: 100%;
  }

  .qm-under, .qm-pin > .container, .qm-h .qm-h-sticky { position: static !important; }
  section.qm-under, section.qm-over { min-height: 0 !important; display: block !important; }
  .qm-depth, .qm-side, .qm-pin .qm-pin-item { transform: none !important; opacity: 1 !important; }
  .qm-depth::after { display: none; }
  .qm-covered { visibility: visible !important; }
  .qm-under { margin-bottom: 0 !important; }
  .qm-t-reveal { clip-path: none !important; transform: none !important; }
  .qm-dim::before { display: none; }
  main .section :is(h1, h2, .lead, .lead-sm, .section-heading > p, .cta-box > p) { opacity: 1 !important; }
}