/* =========================================================
   ANIMATIONS.CSS — slow, deliberate, never bouncy
========================================================= */

/* ---------------------------------------------------------
   Scroll-reveal primitives (JS toggles .is-visible)
--------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

[data-reveal-mask] { overflow: hidden; }
[data-reveal-mask] > * {
  display: block;
  transform: translateY(105%);
  transition: transform 1.1s var(--ease-out);
}
[data-reveal-mask].is-visible > * { transform: translateY(0); }

[data-reveal-scale] {
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.3s var(--ease-out), transform 1.6s var(--ease-out);
}
[data-reveal-scale].is-visible { opacity: 1; transform: scale(1); }

/* stagger via inline custom property --d set by PHP/JS */
[data-reveal], [data-reveal-mask] > *, [data-reveal-scale] {
  transition-delay: var(--d, 0ms);
}

/* ---------------------------------------------------------
   Hero load sequence
--------------------------------------------------------- */
@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.hero__eyebrow, .hero__lede, .hero__cta {
  opacity: 0;
  animation: fade-up 1s var(--ease-out) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero__media { animation: hero-zoom 12s var(--ease-out) forwards; }
@keyframes hero-zoom {
  from { transform: scale(1.12); }
  to { transform: scale(1); }
}

/* ---------------------------------------------------------
   Scroll progress — "the knight's line"
   A vertical index on the left edge; each scene gets a tick.
   As the reader passes a scene, the tick lights and a short
   diagonal stroke draws in — a nod to the chess-knight motif
   running through the brand's own imagery.
--------------------------------------------------------- */
.scroll-index {
  position: fixed;
  left: clamp(1rem, 2.4vw, 2rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: none;
  flex-direction: column;
  gap: 22px;
}
@media (min-width: 1080px) { .scroll-index { display: flex; } }

.scroll-index__tick {
  position: relative;
  width: 34px; height: 10px;
}
.scroll-index__tick::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 10px; height: 1px;
  background: var(--mist-dim);
  transition: background .5s ease, width .5s ease;
}
.scroll-index__tick.is-active::before {
  background: var(--sky);
  width: 34px;
  box-shadow: 0 0 12px var(--sky-dim);
}
.scroll-index__tick.is-active::after {
  content: '';
  position: absolute;
  left: 10px; top: -8px;
  width: 1px; height: 8px;
  background: var(--sky);
  animation: knight-drop .5s var(--ease-out);
}
@keyframes knight-drop { from { height: 0; opacity: 0; } to { height: 8px; opacity: 1; } }

/* ---------------------------------------------------------
   Ambient cursor glow (desktop only, decorative)
--------------------------------------------------------- */
.cursor-glow {
  position: fixed;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(95,169,222,0.06), transparent 70%);
  pointer-events: none;
  z-index: 1;
  transform: translate(-50%, -50%);
  transition: opacity .4s ease;
  display: none;
}
@media (min-width: 1024px) and (hover:hover) { .cursor-glow { display: block; } }

/* ---------------------------------------------------------
   Counter number roll
--------------------------------------------------------- */
[data-counter] { font-variant-numeric: tabular-nums; }