/* ============================================================
   HALE & CROW — MOTION
   Keyframes, reveal states, reduced-motion overrides.
   Everything animates transform / opacity / clip-path only.
   ============================================================ */

/* ---- Keyframes ---- */
@keyframes strokeDraw {
  to { stroke-dashoffset: 0; }
}

/* ---- Shared reveal (IntersectionObserver adds .is-in) ---- */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}
/* optional per-element delay steps */
.reveal[data-delay="1"] { transition-delay: 100ms; }
.reveal[data-delay="2"] { transition-delay: 200ms; }
.reveal[data-delay="3"] { transition-delay: 300ms; }

/* ---- Clip-path wipe reveal (lookbook entries) ---- */
.wipe,
.wipe--left,
.wipe--right {
  transition: clip-path var(--dur-slow) var(--ease-inout);
}
.wipe        { clip-path: inset(0 0 100% 0); }
.wipe--left  { clip-path: inset(0 100% 0 0); }
.wipe--right { clip-path: inset(0 0 0 100%); }
.wipe.is-in,
.wipe--left.is-in,
.wipe--right.is-in {
  clip-path: inset(0 0 0 0);
}

/* ---- Line-mask states (hero / page titles; GSAP animates spans) ----
   The mask window gets breathing room (padding offset by negative
   margin) so Boska Italic's ascenders and descenders aren't clipped
   by the tight line-height once the line settles. */
.line {
  padding-block: 0.14em;
  margin-block: -0.14em;
}
.line > span {
  transform: translateY(120%);
}
.lines-in .line > span {
  transform: translateY(0);
  transition: transform var(--dur-slow) var(--ease-out);
}
.lines-in .line:nth-child(2) > span { transition-delay: 90ms; }
.lines-in .line:nth-child(3) > span { transition-delay: 180ms; }

/* ---- Footer wordmark per-letter settle ---- */
.footer__mark .letter {
  transform: translateY(35%);
  opacity: 0;
  transition: transform var(--dur-slow) var(--ease-out),
              opacity var(--dur-slow) var(--ease-out);
}
.footer__mark.is-in .letter {
  transform: translateY(0);
  opacity: 1;
}

/* ============================================================
   REDUCED MOTION — one global override.
   All scroll choreography, pinning, parallax, scatter and flips
   are also guarded in JS (never initialized). This layer makes
   every CSS-driven state instantly visible and static.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .reveal,
  .wipe,
  .wipe--left,
  .wipe--right {
    opacity: 1;
    transform: none;
    clip-path: none;
  }
  .line > span {
    transform: none;
  }
  .footer__mark .letter {
    transform: none;
    opacity: 1;
  }
  .preloader {
    display: none;
  }
  .hero__media {
    width: 100%;
    height: 100%;
    outline: none;
  }
  .review__quote {
    filter: none;
  }
  .cursor {
    display: none !important;
  }
}