/* ==========================================================================
   WealthS marketing — animations.css
   GPU-friendly (transform/opacity). All disabled under reduced-motion.
   ========================================================================== */

/* ---- Scroll reveal ----
   The hidden initial state is gated behind html.js so that WITHOUT JavaScript
   (or if main.js fails to load) every section is fully visible — never a blank
   page. With JS, the inline head snippet adds .js before first paint (no flash);
   the IntersectionObserver then adds .in to fade content up on scroll. */
:where(html.js) .reveal { opacity: 0; transform: translateY(22px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 80ms; }
.reveal[data-delay="2"] { transition-delay: 160ms; }
.reveal[data-delay="3"] { transition-delay: 240ms; }
.reveal[data-delay="4"] { transition-delay: 320ms; }
.reveal[data-delay="5"] { transition-delay: 400ms; }

/* ---- Hero gradient mesh ---- */
.mesh { position: absolute; inset: -20% -10% auto; height: 720px; z-index: -1; pointer-events: none; filter: blur(60px); opacity: .55; }
.mesh .blob { position: absolute; border-radius: 50%; mix-blend-mode: multiply; animation: float 14s var(--ease) infinite alternate; }
[data-theme="dark"] .mesh .blob, :root:not([data-theme="light"]) .mesh .blob { mix-blend-mode: screen; opacity: .5; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mesh .blob { mix-blend-mode: screen; opacity:.5; } }
.mesh .b1 { width: 420px; height: 420px; left: 4%;  top: 0;   background: #10B981; }
.mesh .b2 { width: 380px; height: 380px; right: 8%; top: 40px; background: #6E45E2; animation-delay: -4s; }
.mesh .b3 { width: 340px; height: 340px; left: 38%; top: 120px; background: #FBBF24; animation-delay: -8s; opacity: .5; }

@keyframes float {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(0,-30px,0) scale(1.08); }
}

/* ---- Logo draw-on (chart line) ---- */
.logo-draw .wpath {
  stroke-dasharray: 1700; stroke-dashoffset: 1700;
  animation: draw 1500ms var(--ease) 250ms forwards;
}
.logo-draw .dot { transform-box: fill-box; transform-origin: center; transform: scale(0); opacity: 0;
  animation: pop 480ms var(--ease) 1500ms forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop  { 0% { transform: scale(0); opacity: 0; } 70% { transform: scale(1.25); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }

/* ---- Sparkline draw ---- */
.spark path.line { stroke-dasharray: 600; stroke-dashoffset: 600; }
.in .spark path.line, .phone .spark path.line { animation: draw 1400ms var(--ease) 400ms forwards; }
.spark path.fill { opacity: 0; }
.phone .spark path.fill, .in .spark path.fill { animation: fadein 700ms var(--ease) 1200ms forwards; }
@keyframes fadein { to { opacity: 1; } }

/* ---- Floating phone idle ---- */
.float-soft { animation: bob 6s var(--ease) infinite alternate; }
@keyframes bob { from { transform: translateY(0); } to { transform: translateY(-12px); } }

/* ---- Account-type tile pop on reveal ---- */
:where(html.js) .pop-in { opacity: 0; transform: translateY(14px) scale(.96); transition: opacity 480ms var(--ease), transform 480ms var(--ease); }
.in .pop-in { opacity: 1; transform: none; }

/* ---- Settle-up flow (splits) ---- */
.settle .edge { stroke: rgba(255,255,255,.55); stroke-width: 3; fill: none; stroke-dasharray: 220; stroke-dashoffset: 220; }
.settle.in .edge { animation: draw 900ms var(--ease) forwards; }
.settle .edge.e2 { animation-delay: 300ms; }
.settle .edge.e3 { animation-delay: 600ms; }
.settle .node { opacity: 0; transform: scale(.5); transform-box: fill-box; transform-origin: center; }
.settle.in .node { animation: pop 420ms var(--ease) forwards; }
.settle.in .node.n2 { animation-delay: 150ms; }
.settle.in .node.n3 { animation-delay: 300ms; }

/* ---- Reduced motion: turn everything off ---- */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .pop-in { opacity: 1 !important; transform: none !important; transition: none !important; }
  .mesh .blob, .float-soft { animation: none !important; }
  .logo-draw .wpath { stroke-dashoffset: 0 !important; animation: none !important; }
  .logo-draw .dot { transform: none !important; opacity: 1 !important; animation: none !important; }
  .spark path.line { stroke-dashoffset: 0 !important; animation: none !important; }
  .spark path.fill { opacity: 1 !important; animation: none !important; }
  .settle .edge { stroke-dashoffset: 0 !important; animation: none !important; }
  .settle .node { opacity: 1 !important; transform: none !important; animation: none !important; }
  /* Hero deck — no transitions on screens; rotator caret + blink off. */
  .hero-deck .scr { transition: none !important; }
  .hero-rotator__word.is-typing { padding-right: 0; }
  .hero-rotator__word.is-typing::after { content: none !important; animation: none !important; }
}