/* =========================================================
   Cinelution — scroll & entrance animations
   Single-responsibility layer: motion only. Structure lives in style.css.
   All effects are disabled under prefers-reduced-motion.
   ========================================================= */

/* ---- Reveal (fade + rise) ---- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---- Staggered children (cards, list items) ---- */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(42px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
  will-change: opacity, transform;
}
[data-stagger].is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Word-by-word heading reveal ---- */
.split .split-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  line-height: inherit;
  padding-bottom: 0.08em; /* keep descenders from being clipped */
  margin-bottom: -0.08em;
}
.split .split-word > span {
  display: inline-block;
  transform: translateY(115%);
  transition: transform 0.95s var(--ease);
  will-change: transform;
}
.split.is-visible .split-word > span {
  transform: translateY(0);
}

/* ---- Hero mask reveal (title with markup) ---- */
.hero__title.mask {
  overflow: hidden;
  padding-bottom: 0.06em;
}
.hero__title .mask-inner {
  display: block;
  transform: translateY(115%);
  transition: transform 1.15s var(--ease) 0.15s;
  will-change: transform;
}
body.is-loaded .hero__title .mask-inner {
  transform: translateY(0);
}

/* ---- Hero aside intro stagger ---- */
.hero__aside > * {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
  will-change: opacity, transform;
}
body.is-loaded .hero__aside > * { opacity: 1; transform: none; }
body.is-loaded .hero__aside > *:nth-child(1) { transition-delay: 0.35s; }
body.is-loaded .hero__aside > *:nth-child(2) { transition-delay: 0.45s; }
body.is-loaded .hero__aside > *:nth-child(3) { transition-delay: 0.55s; }

/* ---- Process sticky-stack: smooth depth change as cards get buried ---- */
.process-step {
  transition: transform 0.4s var(--ease), filter 0.4s var(--ease);
}

/* ---- Card media zoom-in on reveal ---- */
.media-zoom img {
  transform: scale(1.18);
  transition: transform 1.3s var(--ease);
  will-change: transform;
}
.media-zoom.is-visible img { transform: scale(1); }

/* ---- Parallax images (JS-driven translate; scaled to avoid edge gaps) ---- */
.parallax {
  transform: scale(1.2);
  will-change: transform;
}

/* ---- Accordion row hover (FAQ + What we do): fill sweep + text roll + cursor blob ---- */
.accordion-item__head {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  padding-left: 22px;
  padding-right: 22px;
  isolation: isolate;
}
/* Black pill (kept black per brand) fills up from the bottom on hover */
.accordion-item__head::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--black);
  border-radius: 16px;
  transform: translateY(101%);
  transition: transform 0.55s var(--ease);
  z-index: -1;
}
.accordion-item__head:hover::before { transform: translateY(0); }

/* Keep content above the fill and let colours cross-fade to cream */
.accordion-item__num,
.accordion-item__title,
.accordion-item__icon { position: relative; z-index: 1; }
.accordion-item__num { transition: color 0.4s var(--ease); }
.accordion-item__head:hover .accordion-item__num { color: var(--lime); }
.accordion-item__head:hover .accordion-item__icon { color: var(--lime); border-color: var(--lime); }

/* Vertical text roll: original slides up, a cream copy rolls in.
   The cream copy is absolutely positioned just below, so the row height stays
   correct even when a title wraps to two lines on narrow screens. */
.accordion-item__title.roll { overflow: hidden; }
.accordion-item__title .roll__inner {
  position: relative;
  display: block;
  transition: transform 0.55s var(--ease);
}
.accordion-item__title .roll__a { display: block; }
.accordion-item__title .roll__b {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  color: var(--cream);
}
.accordion-item__head:hover .roll__inner { transform: translateY(-100%); }

/* Magnetic cursor blob that follows the pointer inside the row */
.accordion-cursor {
  position: absolute;
  top: 0; left: 0;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--cream);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.2);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
  z-index: 2;
  mix-blend-mode: difference;
}
.accordion-item__head:hover .accordion-cursor { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* ---- Reduced-motion: everything visible, nothing moves ---- */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  [data-stagger] > *,
  .split .split-word > span,
  .hero__title .mask-inner,
  .hero__aside > *,
  .media-zoom img {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .parallax { transform: none !important; }
  .marquee__track { animation: none !important; }
  .process-step { transform: none !important; filter: none !important; transition: none !important; }
  .accordion-cursor { display: none !important; }
}