/* ============================================================
   Motion system
   The signature: every line of type lives in an overflow-hidden
   box and slides up from 100% on a long expo ease, staggered by
   --stagger (set per line by js/split.js).
   ============================================================ */

/* ---- line-mask type reveal ---- */

[data-line] {
  display: block;
  overflow: hidden;
}

[data-line] > span {
  display: block;
  transform: translateY(110%);
  transition: transform 0.3s calc(var(--stagger, 0) * 80ms) var(--ease-in-quad);
  will-change: transform;
}

.is-inview [data-line] > span {
  transform: translateY(0);
  transition: transform 1.4s calc(var(--stagger, 0) * 80ms + 0.1s) var(--ease-out-expo);
}

/* ---- simple fade / rise ---- */

.anim-fade {
  opacity: 0;
  transition: opacity 1.1s calc(var(--stagger, 0) * 90ms) var(--ease-out-quart);
}
.is-inview.anim-fade,
.is-inview .anim-fade { opacity: 1; }

.anim-rise {
  opacity: 0;
  transform: translateY(34px);
  transition:
    opacity 1s calc(var(--stagger, 0) * 90ms) var(--ease-out-quart),
    transform 1.2s calc(var(--stagger, 0) * 90ms) var(--ease-out-expo);
}
.is-inview.anim-rise,
.is-inview .anim-rise {
  opacity: 1;
  transform: translateY(0);
}

/* ---- image mask reveal ----
   The image sits at scale(1.18) behind a curtain that lifts.
   Scaling the <img> back to 1 as the curtain clears gives the
   slow "settling" push Vero uses on every photo. */

.anim-mask { position: relative; overflow: hidden; }

.anim-mask > img,
.anim-mask > picture > img {
  transform: scale(1.18);
  transition: transform 1.8s calc(var(--stagger, 0) * 90ms) var(--ease-out-expo);
}

.anim-mask::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--color-background-primary);
  transform: translateY(0);
  transition: transform 1.35s calc(var(--stagger, 0) * 90ms) var(--ease-in-out-quart);
}

.is-inview.anim-mask > img,
.is-inview .anim-mask > img,
.is-inview.anim-mask > picture > img,
.is-inview .anim-mask > picture > img { transform: scale(1); }

.is-inview.anim-mask::after,
.is-inview .anim-mask::after { transform: translateY(-101%); }

/* ---- keyframes ---- */

@keyframes reveal {
  0% { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slide-down {
  0% { transform: translateY(-100%); }
  to { transform: translateY(0); }
}

@keyframes slide-up {
  0% { transform: translateY(0); }
  to { transform: translateY(-100%); }
}

@keyframes pulsate {
  0%, to { opacity: 1; }
  50% { opacity: 0.35; }
}

@keyframes scroll-cue {
  0% { transform: translateY(-100%); }
  50% { transform: translateY(0); }
  to { transform: translateY(100%); }
}

@keyframes marquee {
  0% { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes spin-slow {
  0% { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes accordion-down {
  0% { height: 0; }
  to { height: var(--accordion-h); }
}

@keyframes accordion-up {
  0% { height: var(--accordion-h); }
  to { height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  [data-line] > span,
  .anim-fade,
  .anim-rise {
    opacity: 1 !important;
    transform: none !important;
  }
  .anim-mask::after { transform: translateY(-101%) !important; }
  .anim-mask > img { transform: none !important; }
}