/* Motion — reveal, marquee. Everything here is switched off for reduced motion. */

/* Reveal on scroll: hidden only after motion.js marks the page as ready,
   so content stays visible without JavaScript. */
.motion-ready [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--motion-slow) var(--ease-standard),
    transform var(--motion-slow) var(--ease-standard);
}
.motion-ready [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Hero: words rise one by one */
.motion-ready [data-reveal="hero"] {
  opacity: 1;
  transform: none;
}
.motion-ready [data-reveal="hero"] .hero__word {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 500ms var(--ease-standard), transform 500ms var(--ease-standard);
}
.motion-ready [data-reveal="hero"].is-visible .hero__word {
  opacity: 1;
  transform: none;
}
.motion-ready [data-reveal="hero"] .hero__word:nth-child(2) { transition-delay: 120ms; }
.motion-ready [data-reveal="hero"] .hero__word:nth-child(3) { transition-delay: 240ms; }

/* Stagger cards inside grids */
.motion-ready .feature-grid > :nth-child(3n + 2)[data-reveal],
.motion-ready .blog__grid > :nth-child(3n + 2)[data-reveal],
.motion-ready .steps > :nth-child(2)[data-reveal] { transition-delay: 80ms; }
.motion-ready .feature-grid > :nth-child(3n)[data-reveal],
.motion-ready .blog__grid > :nth-child(3n)[data-reveal],
.motion-ready .steps > :nth-child(3)[data-reveal] { transition-delay: 160ms; }
.motion-ready .steps > :nth-child(4)[data-reveal] { transition-delay: 240ms; }

/* Keep the desktop stagger offset on the middle clinic column */
@media (min-width: 1200px) {
  .motion-ready .feature-grid > :nth-child(3n + 2)[data-reveal] {
    transform: translateY(calc(var(--space-40) + 24px));
  }
  .motion-ready .feature-grid > :nth-child(3n + 2)[data-reveal].is-visible {
    transform: translateY(var(--space-40));
  }
}

/* Hero — Marqo motion (measured on marqo.framer.website)
   1) Entrance, once on load: phones rise 64px + fade in (sides start skewed ±2°);
      floating cards fade in while rotating outward to their final angle.
   2) Scroll motion: motion.js writes an eased (lerp) scroll offset to --hero-scroll on .hero.
      Center phone sinks (0.16 px per px), side phones rise (left 0.12, right 0.14), so the
      three phones cross over smoothly while scrolling; top cards rise, bottom cards sink.
      Uses `translate`, so it stacks with the entrance `transform` and the card `rotate`. */
.device,
.float-card {
  translate: 0 calc(var(--hero-scroll, 0) * var(--parallax, 0) * 1px);
  will-change: translate;
}
.device--center { --parallax: 0.16; }
.device--left { --parallax: -0.12; }
.device--right { --parallax: -0.14; }
/* Mobile: side phones don't rise while scrolling, so they never ride up into the hero buttons */
@media (max-width: 767.98px) {
  .device--left,
  .device--right { --parallax: 0; }
}
.float-card--tl,
.float-card--tr { --parallax: -0.12; }
.float-card--bl { --parallax: 0.1; }
.float-card--br { --parallax: 0.12; }

@keyframes device-in {
  from {
    opacity: 0;
    transform: translateY(64px) skewX(var(--device-skew, 0deg));
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes float-in {
  from {
    opacity: 0;
    rotate: calc(var(--float-rot) * 0.5);
  }
  to {
    opacity: 1;
    rotate: var(--float-rot);
  }
}
.motion-ready .device {
  animation: device-in 1600ms var(--ease-out-gentle) 150ms both;
}
.motion-ready .device--left {
  --device-skew: 2deg;
  animation-delay: 400ms;
}
.motion-ready .device--right {
  --device-skew: -2deg;
  animation-delay: 400ms;
}
.motion-ready .float-card {
  animation: float-in 1400ms var(--ease-out-gentle) 700ms both;
}
.motion-ready .float-card--tr,
.motion-ready .float-card--br {
  animation-delay: 850ms;
}

/* ==========================================================================
   Intro — Medlume-style opening (measured on medlume.framer.website)
   1) 0.1–1.5s  logo builds up from the bottom (soft-edged mask sweep) on a full CI-teal screen
   2) ~2.0s     logo shrinks and flies onto the header logo icon (motion.js sets
                --intro-dx / --intro-dy / --intro-scale, then adds .intro--fly)
   3) +0.7s     screen fades out; header + hero entrances start (html loses .is-intro)
   No JS: the screen hides itself after 3.8s. Reduced motion: never shown.
   ========================================================================== */
.intro {
  position: fixed;
  inset: 0;
  z-index: var(--z-intro);
  display: grid;
  place-items: center;
  background: var(--gradient-intro);
  transition: opacity 400ms var(--ease-standard);
  animation: intro-fallback 400ms var(--ease-standard) 3800ms forwards;
}
.intro__logo {
  display: block;
  width: var(--intro-logo-size);
  height: auto;
  transform: translate(var(--intro-dx, 0px), var(--intro-dy, 0px)) scale(var(--intro-scale, 1));
  transform-origin: center;
  transition: transform 700ms var(--ease-in-out-strong);
  /* soft-edged mask sweeps from the bottom up (Medlume "builds up" the mark) */
  -webkit-mask-image: var(--mask-reveal-up);
  mask-image: var(--mask-reveal-up);
  -webkit-mask-size: 100% 300%;
  mask-size: 100% 300%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 50% 100%;
  mask-position: 50% 100%;
  animation: intro-draw 1400ms var(--ease-in-out-soft) 100ms both;
  will-change: transform;
}
.intro--fly {
  animation: none; /* JS is in control: cancel the no-JS fallback */
}
.intro--out {
  opacity: 0;
  pointer-events: none;
}
@keyframes intro-draw {
  from {
    -webkit-mask-position: 50% 0%;
    mask-position: 50% 0%;
  }
  to {
    -webkit-mask-position: 50% 100%;
    mask-position: 50% 100%;
  }
}
@keyframes intro-fallback {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

/* While the intro runs: header + hero wait in their start state */
.site-header__logo,
.site-nav,
.site-header__actions {
  transition: opacity 500ms var(--ease-standard);
}
.is-intro .site-header__bar .site-header__logo,
.is-intro .site-nav,
.is-intro .site-header__actions {
  opacity: 0;
}
.is-intro .site-header__bar .site-header__logo {
  transition: none;
}
.is-intro .device,
.is-intro .float-card {
  animation-play-state: paused;
}
.motion-ready.is-intro [data-reveal].is-visible {
  opacity: 0;
  transform: translateY(24px);
}
.motion-ready.is-intro [data-reveal="hero"].is-visible {
  opacity: 1;
  transform: none;
}
.motion-ready.is-intro [data-reveal="hero"].is-visible .hero__word {
  opacity: 0;
  transform: translateY(16px);
}

/* Marquee */
@keyframes marquee-scroll {
  to {
    transform: translateX(-50%);
  }
}
.marquee__track {
  animation: marquee-scroll var(--marquee-duration) linear infinite;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track,
.marquee.is-paused .marquee__track {
  animation-play-state: paused;
}

/* Reduced motion: no movement at all */
/* Word reveal (Clearpath): motion.js splits [data-word-reveal] into .word spans and
   sets --word-on (0 → 1) per word from the scroll position. Without JS, text is fully shown. */
.word {
  opacity: calc(var(--word-dim-opacity) + (1 - var(--word-dim-opacity)) * var(--word-on, 1));
  transition: opacity 120ms linear;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .marquee__track {
    animation: none;
  }
  .marquee__viewport {
    overflow-x: auto;
  }
  .marquee__group[aria-hidden="true"],
  .marquee__toggle,
  [data-carousel-pause] {
    display: none;
  }
  .review-flip__inner {
    transition: none;
  }
  .device,
  .float-card {
    animation: none;
    translate: none;
  }
  .call__live::after {
    animation: none;
    opacity: 0;
  }
  .intro {
    display: none;
  }
  .word {
    opacity: 1;
  }
  .coverflow__slide {
    transition: none;
  }
  .hr-stat__dot::after {
    animation: none;
  }
  .hr-stat__chip {
    opacity: 1;
    transform: none;
  }
}