/* =============================================================
   animations.css — splash + scroll reveals + chart draw
   ============================================================= */

/* ───── splash ───── */
#splash {
  position:fixed; inset:0; z-index:200;
  background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:32px;
  transition:opacity 0.9s cubic-bezier(.65,0,.2,1), visibility 0.9s;
}
#splash.gone { opacity:0; visibility:hidden; pointer-events:none; }

#splash .splash-mark {
  width:48px; height:48px; border-radius:50%;
  border:0.5px solid var(--hair-strong);
  position:relative;
  opacity:0; transform:scale(0.6);
  animation:splashMarkIn 1.1s cubic-bezier(.2,.7,.2,1) 0.05s forwards;
}
#splash .splash-mark::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--accent) 0%, var(--accent) 28%, transparent 60%);
  animation:splashMarkSpin 2.4s ease-in-out infinite;
}
#splash .splash-mark::after{
  content:""; position:absolute; inset:9px; border-radius:50%;
  border:0.5px solid rgba(255,255,255,0.18);
}

#splash .splash-word {
  font-family:var(--serif); font-size:clamp(48px, 7vw, 88px);
  letter-spacing:-0.02em; line-height:1;
  color:var(--fg);
  display:flex; gap:0.06em;
}
#splash .splash-word span {
  display:inline-block; opacity:0; transform:translateY(40%);
  animation:splashLetterIn 0.9s cubic-bezier(.2,.7,.2,1) forwards;
}
#splash .splash-word span:nth-child(1) { animation-delay:0.10s; }
#splash .splash-word span:nth-child(2) { animation-delay:0.16s; }
#splash .splash-word span:nth-child(3) { animation-delay:0.22s; }
#splash .splash-word span:nth-child(4) { animation-delay:0.28s; }
#splash .splash-word span:nth-child(5) { animation-delay:0.34s; }
#splash .splash-word span:nth-child(6) { animation-delay:0.40s; }

#splash .splash-rule {
  width:0; height:0.5px; background:var(--hair-strong); position:relative;
  animation:splashRule 1.2s cubic-bezier(.65,0,.2,1) 0.6s forwards;
}
#splash .splash-rule::after{
  content:""; position:absolute; right:0; top:-1.5px; width:6px; height:3.5px;
  background:var(--accent);
}

#splash .splash-tag {
  font-family:var(--mono); font-size:11px; letter-spacing:0.32em;
  color:var(--fg-mute); text-transform:uppercase;
  display:flex; gap:18px; align-items:center;
  opacity:0;
  animation:splashFadeIn 0.7s ease 0.85s forwards;
}
#splash .splash-tag .ctr { color:var(--accent); min-width:32px; display:inline-block; text-align:right; font-variant-numeric:tabular-nums; }

@keyframes splashMarkIn {
  to { opacity:1; transform:scale(1); }
}
@keyframes splashMarkSpin {
  0%   { transform:rotate(0deg); }
  100% { transform:rotate(360deg); }
}
@keyframes splashLetterIn {
  to { opacity:1; transform:translateY(0); }
}
@keyframes splashRule {
  to { width:240px; }
}
@keyframes splashFadeIn {
  to { opacity:1; }
}

/* lock scroll while splash visible */
body.splash-active { overflow:hidden; }

/* ───── page-load reveal (hero) ───── */
.reveal-init { opacity:0; transform:translateY(28px); }
.reveal-on   { opacity:1; transform:translateY(0); transition:opacity 0.9s cubic-bezier(.2,.7,.2,1), transform 0.9s cubic-bezier(.2,.7,.2,1); }
.reveal-on.d1 { transition-delay:0.08s; }
.reveal-on.d2 { transition-delay:0.18s; }
.reveal-on.d3 { transition-delay:0.30s; }
.reveal-on.d4 { transition-delay:0.42s; }
.reveal-on.d5 { transition-delay:0.54s; }
.reveal-on.d6 { transition-delay:0.66s; }

/* ───── scroll reveal ───── */
.sr { opacity:0; transform:translateY(36px); transition:opacity 0.9s cubic-bezier(.2,.7,.2,1), transform 0.9s cubic-bezier(.2,.7,.2,1); }
.sr.in { opacity:1; transform:translateY(0); }

/* staggered children */
.sr-stagger > * { opacity:0; transform:translateY(24px); transition:opacity 0.8s cubic-bezier(.2,.7,.2,1), transform 0.8s cubic-bezier(.2,.7,.2,1); }
.sr-stagger.in > *:nth-child(1) { transition-delay:0.05s; opacity:1; transform:translateY(0); }
.sr-stagger.in > *:nth-child(2) { transition-delay:0.13s; opacity:1; transform:translateY(0); }
.sr-stagger.in > *:nth-child(3) { transition-delay:0.21s; opacity:1; transform:translateY(0); }
.sr-stagger.in > *:nth-child(4) { transition-delay:0.29s; opacity:1; transform:translateY(0); }
.sr-stagger.in > *:nth-child(5) { transition-delay:0.37s; opacity:1; transform:translateY(0); }
.sr-stagger.in > *:nth-child(6) { transition-delay:0.45s; opacity:1; transform:translateY(0); }
.sr-stagger.in > *:nth-child(7) { transition-delay:0.53s; opacity:1; transform:translateY(0); }
.sr-stagger.in > *:nth-child(8) { transition-delay:0.61s; opacity:1; transform:translateY(0); }

/* ───── hero video-frame scan line ───── */
.hero-frame .scan {
  position:absolute; left:0; right:0; height:1.5px;
  background:linear-gradient(90deg, transparent, color-mix(in oklab, var(--accent) 80%, transparent), transparent);
  top:0;
  animation:scan 6s cubic-bezier(.45,0,.55,1) infinite;
  opacity:0.7;
  mix-blend-mode:screen;
}
@keyframes scan {
  0%   { top:-2%; opacity:0; }
  10%  { opacity:0.8; }
  90%  { opacity:0.8; }
  100% { top:102%; opacity:0; }
}

.hero-frame .rec-pulse {
  display:inline-block; width:7px; height:7px; border-radius:50%;
  background:#e23a3a; margin-right:8px; vertical-align:0px;
  animation:recPulse 1.4s ease-in-out infinite;
  box-shadow:0 0 0 0 rgba(226,58,58,0.5);
}
@keyframes recPulse {
  0%, 100% { opacity:1; box-shadow:0 0 0 0 rgba(226,58,58,0.5); }
  50%      { opacity:0.6; box-shadow:0 0 0 6px rgba(226,58,58,0); }
}

.hero-frame .play {
  transition:transform 0.5s cubic-bezier(.2,.7,.2,1), background 0.3s ease;
  cursor:default;
}
.hero-frame:hover .play { transform:scale(1.08); background:rgba(0,0,0,0.6); }

/* ───── ambient accent halo (hero) ───── */
.hero::before {
  animation:haloDrift 12s ease-in-out infinite alternate;
}
@keyframes haloDrift {
  0%   { transform:translate3d(0,0,0); }
  100% { transform:translate3d(-4%, 3%, 0); }
}

/* ───── ticker on trend board ───── */
.trend-row .delta { transition:color 0.3s ease, transform 0.3s ease; }
.trend-row:hover { background:rgba(255,255,255,0.02); }
.trend-row:hover .delta { transform:translateX(-4px); }

/* ───── dashboard chart draw ───── */
.dash-chart .line {
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  transition:stroke-dashoffset 2.4s cubic-bezier(.65,0,.2,1);
}
.dash-chart.in .line { stroke-dashoffset: 0; }
.dash-chart .area {
  opacity:0;
  transition:opacity 1.2s ease 0.9s;
}
.dash-chart.in .area { opacity:1; }
.dash-chart .dot {
  opacity:0;
  transition:opacity 0.4s ease;
}
.dash-chart.in .dot:nth-of-type(1) { opacity:1; transition-delay:1.6s; }
.dash-chart.in .dot:nth-of-type(2) { opacity:1; transition-delay:1.9s; }
.dash-chart.in .dot:nth-of-type(3) { opacity:1; transition-delay:2.2s; }

/* ───── dashboard stat count-up (number flips up) ───── */
.dash-stat .num {
  overflow:hidden;
}
.dash-stat .num span {
  display:inline-block;
  transform:translateY(110%);
  transition:transform 0.9s cubic-bezier(.2,.7,.2,1);
}
.dash-stat.in .num span { transform:translateY(0); }
.dash-stat:nth-child(2) .num span { transition-delay:0.08s; }
.dash-stat:nth-child(3) .num span { transition-delay:0.16s; }
.dash-stat:nth-child(4) .num span { transition-delay:0.24s; }

/* ───── case-card number wipe ───── */
.case-card .num {
  position:relative;
  overflow:hidden;
}
.case-card .num span {
  display:inline-block;
  transform:translateY(110%);
  transition:transform 1s cubic-bezier(.2,.7,.2,1);
}
.case-card.in .num span { transform:translateY(0); }

/* ───── faq smooth open ───── */
.faq-row .a {
  display:block;
  max-height:0;
  overflow:hidden;
  margin-top:0;
  opacity:0;
  transition:max-height 0.5s cubic-bezier(.2,.7,.2,1), opacity 0.4s ease, margin-top 0.4s ease;
}
.faq-row.open .a {
  max-height:240px;
  opacity:1;
  margin-top:14px;
}
.faq-row .t { transition:transform 0.4s cubic-bezier(.2,.7,.2,1); }
.faq-row.open .t { transform:rotate(180deg); }

/* ───── button micro polish ───── */
.btn {
  position:relative;
  overflow:hidden;
}
.btn > * { position:relative; z-index:1; }
.btn::before {
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%);
  transform:translateX(-100%);
  transition:transform 0.7s cubic-bezier(.45,0,.2,1);
  pointer-events:none;
}
.btn:hover::before { transform:translateX(100%); }

/* ───── nav slide-down on splash dismiss ───── */
.nav { transform:translateY(-100%); transition:transform 0.9s cubic-bezier(.2,.7,.2,1) 0.2s; }
body.ready .nav { transform:translateY(0); }

/* ───── final-section halo pulse ───── */
.final::before {
  animation:haloPulse 8s ease-in-out infinite;
}
@keyframes haloPulse {
  0%, 100% { opacity:1; }
  50%      { opacity:0.6; }
}

/* ───── reduced motion respect ───── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
  #splash { display:none; }
  .reveal-init, .sr { opacity:1 !important; transform:none !important; }
  .nav { transform:none !important; }
}