/* Homepage-only motion refinement. Content remains visible unless the
   corresponding progressive-enhancement class is present. */

body[data-page="home"] .home-enter,
body[data-page="home"] .home-reveal {
  opacity: 1;
  transform: none;
  translate: none;
  clip-path: none;
}

/* The above-the-fold sequence is a one-time page entrance, not a scroll
   reveal. The independent translate property leaves the rating-card tilt
   transform available to its existing pointer interaction. */
.home-js body[data-page="home"] .home-enter {
  animation: home-enter 380ms var(--ease-out) both;
  animation-delay: calc(var(--home-enter-order, 0) * 65ms);
}

@keyframes home-enter {
  from {
    opacity: 0;
    translate: 0 14px;
  }

  to {
    opacity: 1;
    translate: none;
  }
}

/* The controller adds home-motion-ready only after IntersectionObserver has
   been initialised. This keeps no-JavaScript and unsupported-browser content
   readable by default. */
html.home-motion-ready body[data-page="home"] .home-reveal {
  transition:
    opacity 280ms var(--ease-out),
    transform 280ms var(--ease-out),
    clip-path 280ms var(--ease-out);
  transition-delay: var(--home-stagger, 0ms);
}

html.home-motion-ready body[data-page="home"] .home-reveal:not(.is-home-visible) {
  opacity: 0;
  transform: translateY(15px);
}

html.home-motion-ready body[data-page="home"] .home-reveal.is-home-visible {
  opacity: 1;
  transform: none;
  clip-path: none;
}

html.home-motion-ready body[data-page="home"] .home-reveal--from-right:not(.is-home-visible) {
  transform: translateX(15px);
}

html.home-motion-ready body[data-page="home"] .home-reveal--mask:not(.is-home-visible) {
  clip-path: inset(0 0 0 12%);
  transform: translateX(12px);
}

/* Preserve the restrained row reveal at multi-column breakpoints. Mobile
   cards use the reversible sticky stack defined below instead. */
@media (min-width: 621px) {
  html.home-motion-ready body[data-page="home"] .service-grid__cards .service-card.home-reveal {
    clip-path: none !important;
    transition:
      opacity 280ms var(--ease-out),
      transform 280ms var(--ease-out),
      background 450ms ease,
      box-shadow 450ms ease,
      translate 450ms var(--ease-out) !important;
    transition-delay: var(--home-stagger, 0ms), var(--home-stagger, 0ms), 0ms, 0ms, 0ms !important;
  }

  html.home-motion-ready body[data-page="home"] .service-grid__cards .service-card.home-reveal:not(.is-home-visible) {
    opacity: 0 !important;
    transform: translateY(14px) !important;
  }

  html.home-motion-ready body[data-page="home"] .service-grid__cards .service-card.home-reveal.is-home-visible {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* The posture photograph keeps its restrained mask entrance. Once that
   entrance has settled, a single soft reflection crosses the image. */
body[data-page="home"] .posture__image.home-reveal--sheen .posture__sheen {
  z-index: 1;
  width: 42%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgb(255 255 255 / 0.02) 22%,
    rgb(223 242 250 / 0.26) 50%,
    rgb(255 255 255 / 0.04) 78%,
    transparent 100%
  );
  position: absolute;
  inset-block: -12%;
  left: -55%;
  transform: skewX(-12deg);
}

body[data-page="home"] .posture__image.home-reveal--sheen figcaption {
  z-index: 2;
}

html.home-motion-ready body[data-page="home"] .posture__image.home-reveal--sheen.is-home-visible .posture__sheen {
  animation: posture-sheen-pass 820ms var(--ease-out) 290ms both;
}

@keyframes posture-sheen-pass {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) skewX(-12deg);
  }

  18%,
  78% {
    opacity: 0.62;
  }

  100% {
    opacity: 0;
    transform: translate3d(390%, 0, 0) skewX(-12deg);
  }
}

/* Group wrappers preserve the original section layouts. */
body[data-page="home"] .reviews__experience {
  display: block;
}

body[data-page="home"] .final-cta__copy,
body[data-page="home"] .final-cta__actions {
  display: grid;
  justify-items: center;
}

body[data-page="home"] .final-cta__copy > p:not(.eyebrow) {
  color: #ffffffa3;
  max-width: 37rem;
  margin: 1.8rem 0 2.2rem;
}

body[data-page="home"] .final-cta__actions .final-cta__phone {
  display: inline-block;
}

/* The service section uses a shorter closing rhythm than its opening rhythm.
   This keeps the final card connected to the following section on wide
   screens without changing the treatment grid or its row composition. */
body[data-page="home"] .service-grid {
  padding-bottom: clamp(3rem, 5vw, 5rem);
}

@media (max-width: 680px) {
  html.home-motion-ready body[data-page="home"] .home-reveal:not(.is-home-visible),
  html.home-motion-ready body[data-page="home"] .home-reveal--from-right:not(.is-home-visible),
  html.home-motion-ready body[data-page="home"] .home-reveal--mask:not(.is-home-visible) {
    clip-path: none;
    transform: translateY(8px);
  }

  body[data-page="home"] .posture__image.home-reveal--sheen .posture__sheen {
    width: 36%;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgb(255 255 255 / 0.01) 24%,
      rgb(223 242 250 / 0.18) 50%,
      rgb(255 255 255 / 0.03) 76%,
      transparent 100%
    );
  }

  html.home-motion-ready body[data-page="home"] .posture__image.home-reveal--sheen.is-home-visible .posture__sheen {
    animation-duration: 720ms;
  }
}

/* Mobile treatment cards form a native, reversible sticky deck. Each later
   card stops 1.125rem below the previous one, leaving a calm exposed tier.
   Because the effect is positional rather than timeline-driven, scrolling up
   dismantles the deck without replay logic or a scroll listener. */
@media (max-width: 620px) {
  body[data-page="home"] .service-grid {
    overflow: clip;
  }

  body[data-page="home"] .service-grid__cards.fx-grid {
    display: block;
    isolation: isolate;
    padding-bottom: clamp(1.5rem, 6svh, 3rem);
    background: transparent;
  }

  body[data-page="home"] .service-grid__cards .service-card.home-reveal {
    --service-stack-offset: 0rem;
    --service-stack-layer: 10;
    position: sticky;
    top: calc(6.25rem + var(--service-stack-offset));
    z-index: var(--service-stack-layer) !important;
    margin: 0 0 clamp(3.5rem, 10svh, 5.5rem);
    opacity: 1 !important;
    clip-path: none !important;
    transform: none !important;
    transition:
      background 450ms ease,
      box-shadow 450ms ease,
      translate 450ms var(--ease-out) !important;
    transition-delay: 0ms !important;
    scroll-margin-top: calc(6.25rem + var(--service-stack-offset));
  }

  body[data-page="home"] .service-card.home-reveal {
    box-shadow:
      inset 0 1px rgb(120 208 231 / 0.18),
      0 -0.7rem 1.8rem rgb(2 23 34 / 0.22),
      0 1.4rem 3.2rem rgb(2 23 34 / 0.2);
  }

  body[data-page="home"] .service-grid__cards .service-card.home-reveal:nth-of-type(1) {
    --service-stack-offset: 0rem;
    --service-stack-layer: 10;
  }

  body[data-page="home"] .service-grid__cards .service-card.home-reveal:nth-of-type(2) {
    --service-stack-offset: 1.125rem;
    --service-stack-layer: 11;
  }

  body[data-page="home"] .service-grid__cards .service-card.home-reveal:nth-of-type(3) {
    --service-stack-offset: 2.25rem;
    --service-stack-layer: 12;
  }

  body[data-page="home"] .service-grid__cards .service-card.home-reveal:nth-of-type(4) {
    --service-stack-offset: 3.375rem;
    --service-stack-layer: 13;
  }

  body[data-page="home"] .service-grid__cards .service-card.home-reveal:nth-of-type(5) {
    --service-stack-offset: 4.5rem;
    --service-stack-layer: 14;
  }

  body[data-page="home"] .service-grid__cards .service-card.home-reveal:nth-of-type(6) {
    --service-stack-offset: 5.625rem;
    --service-stack-layer: 15;
  }

  body[data-page="home"] .service-grid__cards .service-card.home-reveal:nth-of-type(7) {
    --service-stack-offset: 6.75rem;
    --service-stack-layer: 16;
    margin-bottom: 0;
  }

  body[data-page="home"] .service-grid__cards .service-card.home-reveal:focus-visible {
    z-index: 100 !important;
  }
}

@supports not (overflow: clip) {
  @media (max-width: 620px) {
    body[data-page="home"] .service-grid {
      overflow: visible;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-js body[data-page="home"] .home-enter {
    animation: none !important;
    opacity: 1 !important;
    translate: none !important;
  }

  html.home-motion-ready body[data-page="home"] .home-reveal,
  html.home-motion-ready body[data-page="home"] .service-grid__cards .service-card.home-reveal {
    opacity: 1 !important;
    transform: none !important;
    translate: none !important;
    clip-path: none !important;
    transition: none !important;
  }

  body[data-page="home"] .posture__image.home-reveal--sheen .posture__sheen {
    animation: none !important;
    opacity: 0 !important;
  }

  body[data-page="home"] .service-grid__cards.fx-grid {
    display: grid;
    padding-bottom: 0;
    background: #ffffff26;
  }

  body[data-page="home"] .service-grid__cards .service-card.home-reveal {
    position: relative;
    top: auto;
    z-index: 1 !important;
    margin-bottom: 0;
    box-shadow: none;
    scroll-margin-top: 0;
  }
}

@media print {
  .home-js body[data-page="home"] .home-enter,
  html.home-motion-ready body[data-page="home"] .home-reveal,
  html.home-motion-ready body[data-page="home"] .service-grid__cards .service-card.home-reveal {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    translate: none !important;
    clip-path: none !important;
    transition: none !important;
  }


  body[data-page="home"] .posture__image.home-reveal--sheen .posture__sheen {
    animation: none !important;
    opacity: 0 !important;
  }

  body[data-page="home"] .service-grid__cards.fx-grid {
    display: grid;
    padding-bottom: 0;
    background: #ffffff26;
  }

  body[data-page="home"] .service-grid {
    padding-bottom: 2rem;
  }

  body[data-page="home"] .service-grid__cards .service-card.home-reveal {
    position: relative;
    top: auto;
    z-index: 1 !important;
    margin-bottom: 0;
    box-shadow: none;
    scroll-margin-top: 0;
  }
}