/* Scroll-animation layer: reveal-on-scroll, progress bar, four-moves choreography,
   converge moment, hero drift. Survives x-dc hydration replace via scroll.js re-tagging. */

/* --- Reveal --- */
.sa-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition-delay: calc(var(--sa-i, 0) * 60ms);
}
.sa-reveal.sa-in {
  opacity: 1;
  transform: none;
  transition: opacity 600ms cubic-bezier(0.22,1,0.36,1), transform 600ms cubic-bezier(0.22,1,0.36,1);
  transition-delay: calc(var(--sa-i, 0) * 60ms);
}
@media (prefers-reduced-motion: reduce) {
  .sa-reveal { opacity: 0; transform: none; }
  .sa-reveal.sa-in { opacity: 1; transition: opacity 200ms ease-out; transition-delay: 0ms; }
}

/* --- Progress bar (functional, indicates scroll position — no reduced-motion override) --- */
.sa-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #2ee6a0;
  transform-origin: left;
  transform: scaleX(var(--sa-p, 0));
  z-index: 60;
  pointer-events: none;
}
/* No @media (prefers-reduced-motion) override here on purpose: this bar communicates
   scroll position (functional state), not decorative motion. */

/* --- Four-moves choreography --- */
.sa-step {
  /* dim but keep muted body text readable; .45 made grey-on-dark text vanish */
  opacity: .68;
  transform: translateY(10px);
  transition: opacity 450ms cubic-bezier(0.22,1,0.36,1), transform 450ms cubic-bezier(0.22,1,0.36,1), border-color 450ms cubic-bezier(0.22,1,0.36,1), box-shadow 450ms cubic-bezier(0.22,1,0.36,1);
}
.sa-step.sa-active {
  opacity: 1;
  transform: none;
  border-color: rgba(46,230,160,.5);
  box-shadow: 0 0 24px rgba(46,230,160,.12);
}
.sa-step.sa-amber.sa-active {
  border-color: rgba(245,158,11,.4);
  box-shadow: 0 0 24px rgba(245,158,11,.10);
}
@media (prefers-reduced-motion: reduce) {
  .sa-step { opacity: 1; transform: none; }
  .sa-step.sa-active { transform: none; }
}

/* --- Converge moment --- */
.sa-chip {
  position: absolute;
  background: #181a21;
  border: 1px solid #2a2d38;
  border-radius: 999px;
  font-family: 'Satoshi', 'Inter', sans-serif;
  font-size: 13px;
  color: #8b8f9e;
  padding: 6px 14px;
  transform: translate(var(--sa-x), var(--sa-y)) scale(1);
  opacity: .85;
  transition: transform 900ms cubic-bezier(0.16,1,0.3,1), opacity 900ms cubic-bezier(0.16,1,0.3,1);
  transition-delay: calc(var(--sa-i) * 45ms);
}
.sa-converged .sa-chip {
  transform: translate(0,0) scale(.6);
  opacity: 0;
}
.sa-core {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #2ee6a0;
  box-shadow: 0 0 32px rgba(46,230,160,.5);
  transform: scale(0);
  opacity: 0;
}
.sa-core::after {
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  width:56px;
  height:56px;
  border-radius:50%;
  border:1px solid rgba(46,230,160,.35);
  transform:translate(-50%,-50%) scale(0);
  opacity:0;
}
@keyframes sa-core-pulse {
  0%, 100% { box-shadow:0 0 32px rgba(46,230,160,.5); }
  50% { box-shadow:0 0 44px rgba(46,230,160,.3); }
}
.sa-converged .sa-core {
  transform: scale(1);
  opacity: 1;
  transition: 500ms cubic-bezier(0.16,1,0.3,1) 500ms;
  animation: sa-core-pulse 3s ease-in-out infinite;
}
.sa-converged .sa-core::after {
  transform:translate(-50%,-50%) scale(1);
  opacity:1;
  transition:500ms cubic-bezier(0.16,1,0.3,1) 500ms;
}
#sa-converge {
  pointer-events: none;
}
.sa-converge-caption {
  opacity: 0;
  transition: opacity 600ms cubic-bezier(0.22,1,0.36,1);
  transition-delay: 700ms;
  text-align:center;
  font-size:17px;
  color:#8b8f9e;
  max-width:46ch;
  margin:28px auto 0;
}
.sa-converge-caption.sa-in {
  opacity: 1;
}
@media (max-width: 700px) {
  #sa-converge { transform: scale(.55); }
}
@media (prefers-reduced-motion: reduce) {
  .sa-chip { transform: translate(0,0) scale(1); opacity: .85; }
  .sa-converged .sa-chip { transform: translate(0,0) scale(1); opacity: 0; transition: opacity 300ms ease-out; }
  .sa-converged .sa-core { animation:none; }
}

/* --- Hero drift --- */
.sa-hero-drift {
  transition: none;
  will-change: transform;
  transform: translateY(calc(var(--sa-scroll, 0) * -0.06px));
}
.sa-hero-text {
  transition: none;
  will-change: transform, opacity;
  transform: translateY(calc(var(--sa-scroll, 0) * -0.03px));
  opacity: calc(1 - var(--sa-scroll, 0) / 900);
}
@media (prefers-reduced-motion: reduce) {
  .sa-hero-drift, .sa-hero-text { transform: none !important; }
  .sa-hero-text { opacity: 1 !important; }
}