/* ==========================================================
   THE QUIET RESET — animations
   ========================================================== */

@keyframes scrollLine{
  0%{ top: -100%; }
  100%{ top: 100%; }
}

@keyframes ripple{
  from{ transform: scale(0); opacity: 0.5; }
  to{ transform: scale(2.4); opacity: 0; }
}

@keyframes fadeUp{
  from{ opacity: 0; transform: translateY(28px); }
  to{ opacity: 1; transform: translateY(0); }
}

@keyframes floatSlow{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}

@keyframes pulseGlow{
  0%, 100%{ opacity: 0.55; }
  50%{ opacity: 1; }
}

/* ---------- scroll reveal ---------- */
.reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: calc(var(--d, 0) * 90ms);
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* stagger helper for direct children when parent gets is-visible */
.story-body:nth-of-type(2){ transition-delay: .12s; }

/* hero specific: slower, larger travel for cinematic feel */
.hero .reveal{
  transform: translateY(36px);
  transition-duration: 1.1s;
}

/* ---------- buttons ---------- */
[data-ripple]{ isolation: isolate; }
.ripple-el{
  position: absolute;
  border-radius: 50%;
  background: rgba(11,11,12,0.35);
  transform: scale(0);
  pointer-events: none;
  animation: ripple .7s ease-out forwards;
}

/* ---------- compass ---------- */
#compass-needle{
  transition: transform 1.4s var(--ease);
}

/* ---------- play button hover ---------- */
.play-btn{ transition: transform .3s var(--ease), background .3s; }
.video-card:hover .play-btn{ transform: scale(1.1); background: rgba(227,189,109,0.16); }

/* ---------- gentle float for compass / icons ---------- */
.story-compass svg{ animation: floatSlow 6s ease-in-out infinite; }

/* ---------- final cta glow ---------- */
.final-cta::before{
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 60vw; height: 60vw;
  max-width: 900px; max-height: 900px;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(227,189,109,0.16), transparent 70%);
  z-index: -1;
  animation: pulseGlow 5s ease-in-out infinite;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .reveal{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .story-compass svg,
  .final-cta::before{ animation: none !important; }
  #compass-needle{ transition: none !important; }
}