/* SchemaCart v2 motion reference. Load after tokens.css, schemacart.css,
   and schemacart-v2.css. Baseline styles are complete and static; motion is
   progressive enhancement. */

/* Keep anchored headings below the sticky global header. */
:where([id]) {
  scroll-margin-top: 88px;
}

/* A layered slot contains two or three semantic/decorative image planes. */
.sc-parallax-slot {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
}

.sc-parallax-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }

  /* Unsupported browsers keep the static baseline above. */
  @supports (animation-timeline: view()) {
    .sc-reveal {
      animation: sc-reveal linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 32%;
    }

    .sc-parallax-layer {
      --sc-parallax-distance: var(--sc-8);
      animation: sc-parallax linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
      will-change: transform;
    }

    .sc-parallax-layer--slow {
      --sc-parallax-distance: var(--sc-4);
    }

    .sc-parallax-layer--medium {
      --sc-parallax-distance: var(--sc-8);
    }

    .sc-parallax-layer--fast {
      --sc-parallax-distance: var(--sc-12);
    }

    /* The server-rendered is-lit-* class remains the score source of truth. */
    .sc-meter > i[class*="is-lit-"] {
      transform-origin: center bottom;
      animation: sc-meter-fill linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 30%;
    }
  }
}

@keyframes sc-reveal {
  from {
    opacity: .55;
    transform: translate3d(0, var(--sc-6), 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes sc-parallax {
  from {
    transform: translate3d(0, calc(0px - var(--sc-parallax-distance)), 0);
  }
  to {
    transform: translate3d(0, var(--sc-parallax-distance), 0);
  }
}

@keyframes sc-meter-fill {
  from {
    opacity: .5;
    transform: scaleY(.25);
  }
  to {
    opacity: 1;
    transform: scaleY(1);
  }
}

/* Reduced motion overrides this entire additive layer, including scrolling. */
@media (prefers-reduced-motion: reduce) {
  :root {
    scroll-behavior: auto;
  }

  .sc-reveal,
  .sc-parallax-layer,
  .sc-meter > i[class*="is-lit-"] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    will-change: auto;
  }
}

/* MOBILE ADAPTATION · v2.1 mobile run, 2026-08-04.
   Restrained motion on small screens: layered parallax is dropped below
   640px, leaving the static composition the Design System already
   requires to be complete. Reduced motion still wins over this block. */
@media (max-width:639px){
  .sc-parallax-layer,
  .sc-imgslot__layer--back,
  .sc-imgslot__layer--mid,
  .sc-imgslot__layer--front{
    animation: none;
    transform: none;
    will-change: auto;
  }
}