/* ==========================================================================
   Motion language (zero JavaScript). Enabled by Theme settings > Animations
   (body.motion-on, plus .motion-expressive for the bolder effects).
   Everything is off for prefers-reduced-motion. Scroll-linked effects use
   CSS scroll-driven animations and simply stay static where unsupported.
   ========================================================================== */

.kinetic__mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* Room for descenders/accents, italic overhang and offset shadows inside the mask. */
  padding: 0.06em 0.14em 0.06em 0.04em;
  margin: -0.06em -0.14em -0.06em -0.04em;
}

.kinetic__word {
  display: inline-block;
}

@media (prefers-reduced-motion: no-preference) {
  /* ---------- Kinetic headlines: words rise out of their masks ---------- */
  .motion-expressive .kinetic__word {
    animation: kinetic-rise 1100ms cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: calc(var(--i) * 80ms + 120ms);
  }

  /* ---------- Campaign hero settles in on load ---------- */
  .motion-expressive .campaign__media > picture img,
  .motion-expressive .campaign__media > img,
  .motion-expressive .campaign__video {
    animation: hero-settle 1800ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .motion-on .campaign__button,
  .motion-on .campaign__eyebrow {
    animation: fade-up 900ms cubic-bezier(0.16, 1, 0.3, 1) 450ms both;
  }

  /* ---------- Buttons: fill wipes in from the left ---------- */
  .motion-on .button--ghost {
    background-image: linear-gradient(var(--color-foreground), var(--color-foreground));
    background-repeat: no-repeat;
    background-size: 0% 100%;
    transition: background-size 350ms cubic-bezier(0.16, 1, 0.3, 1), color 200ms ease;
  }

  .motion-on .button--ghost:hover {
    background-color: transparent;
    background-size: 100% 100%;
  }

  @supports (animation-timeline: view()) {
    /* ---------- Reveal on scroll ---------- */
    .motion-on :is(
        .product-grid > li,
        .tiles__grid .tile,
        .look,
        .lookbook-list__item,
        .split__media,
        .split__content,
        .rich-text,
        .featured-collection__header,
        .faq__item,
        .drop,
        .salon__header,
        .stream__header
      ) {
      animation: fade-up linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 35%;
    }

    /* Image wipes open as it enters (expressive). */
    .motion-expressive :is(.tile__media, .look__open, .split__media, .lookbook-list__media) {
      animation: wipe-open linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 30%;
    }

    /* Hero drifts and darkens as it scrolls away (expressive). */
    .motion-expressive .campaign__media {
      animation: hero-exit linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }

    /* Collection titles track horizontally while scrolling. */
    .motion-expressive .collection__title {
      animation: title-track linear both;
      animation-timeline: scroll(root);
      animation-range: 0 60vh;
    }
  }
}

@keyframes kinetic-rise {
  from {
    transform: translateY(110%);
  }
}

@keyframes hero-settle {
  from {
    transform: scale(1.12);
    filter: brightness(0.6);
  }
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
}

@keyframes wipe-open {
  from {
    clip-path: inset(0 0 100% 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes hero-exit {
  to {
    transform: translateY(18%) scale(1.06);
    opacity: 0.55;
  }
}

@keyframes title-track {
  to {
    transform: translateX(-4vw);
  }
}