/* =====================================================================
   ANIMATION LAYER — presentation only; no content or layout changes.
   Everything here respects prefers-reduced-motion (the global reduce
   block in style.css also collapses all durations as a safety net).
   ===================================================================== */

/* ---------- header elevation on scroll ---------- */
.site-header{transition:box-shadow .3s var(--ease)}
.site-header.scrolled{box-shadow:0 10px 30px rgba(35,29,124,.08)}

/* ---------- animated nav underline (draws in when active) ---------- */
.nav-menu a::after{
  content:'';position:absolute;left:14px;right:14px;bottom:2px;height:2px;
  background:#2CA323;border-radius:2px;
  transform:scaleX(0);transform-origin:left center;
  transition:transform .32s var(--ease);
}
.nav-menu a.active::after{transform:scaleX(1)}

/* ---------- press feedback on buttons ---------- */
.btn:active{transform:translateY(0) scale(.97)}
.rail-ctl button:active{transform:scale(.92)}
.filter-btn:active,.ptab:active,.node:active{transform:scale(.98)}

@media (prefers-reduced-motion:no-preference){

  /* ---------- scroll reveal (JS adds html.anim + .reveal/.in-view) ----------
     Elements are hidden ONLY when JavaScript is present, so content is
     always visible without JS or when reduced motion is requested. */
  .anim .reveal{
    opacity:0;transform:translateY(26px);
    transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);
  }
  .anim .reveal.in-view{opacity:1;transform:none}

  /* ---------- hero entrance (staggered; replays on every route change) ---------- */
  @keyframes riseIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
  .view.active .hero-tag     {animation:riseIn .6s .05s var(--ease) both}
  .view.active .hero h1      {animation:riseIn .6s .14s var(--ease) both}
  .view.active .hero-sub     {animation:riseIn .6s .24s var(--ease) both}
  .view.active .hero-actions {animation:riseIn .6s .34s var(--ease) both}
  .view.active .hero-points  {animation:riseIn .6s .44s var(--ease) both}
  .view.active .hero-visual  {animation:riseIn .7s .30s var(--ease) both}
  .view.active .page-hero .container{animation:riseIn .55s .05s var(--ease) both}

  /* hero tag dot blink */
  @keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}
  .view.active .hero-tag i{animation:blink 2.2s ease-in-out infinite}

  /* ---------- floating mock dashboard ---------- */
  @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
  .view.active .hero-visual .mock{animation:floaty 6.5s 1.2s ease-in-out infinite}

  /* ---------- live status dots in mock rows ---------- */
  @keyframes softPulse{0%,100%{opacity:1}50%{opacity:.45}}
  .mock-row .dot{animation:softPulse 2.6s ease-in-out infinite}
  .mock-row .dot.dev{animation-delay:.5s}
  .mock-row .dot.soon{animation-delay:1s}

  /* ---------- progress bar shimmer ---------- */
  #progress{transition:width .12s linear}

}