/* =========================================================================
   Animations — all @keyframes plus the single reduced-motion policy that
   turns them off. Keeping motion in one file makes it easy to audit
   everything that moves on its own (without the person triggering it).
   ========================================================================= */

@keyframes scrollLeft{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes scrollRight{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }

@keyframes radarPing{
  0%{ transform:scale(0.8); opacity:1; }
  70%{ transform:scale(2.4); opacity:0; }
  100%{ transform:scale(2.4); opacity:0; }
}

@keyframes cursorBlink{
  0%, 49%{ opacity:1; }
  50%, 100%{ opacity:0; }
}

@keyframes roleGlow{
  0%, 100%{ text-shadow:none; }
  50%{ text-shadow:0 0 16px var(--accent-glow); }
}

@keyframes rotateBeam{
  from{ transform:translate(-50%, -50%) rotate(0deg); }
  to{ transform:translate(-50%, -50%) rotate(360deg); }
}

/* ---------- Theme Circular Reveal (View Transitions API) ---------- */
/*
 * How it works:
 * - ::view-transition-old(root) = screenshot of the OLD theme (stays visible)
 * - ::view-transition-new(root) = live render of the NEW theme (revealed by circle)
 * The old state sits underneath, fully visible, while the new state
 * expands through a clip-path circle from the toggle button. Nothing disappears.
 */
::view-transition-old(root){
  animation:none;
  z-index:1;
}
::view-transition-new(root){
  animation:theme-reveal .55s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  z-index:9999;
}

@keyframes theme-reveal{
  from{ clip-path:circle(0px at var(--reveal-x, 50%) var(--reveal-y, 50%)); }
  to{ clip-path:circle(var(--reveal-r, 100vmax) at var(--reveal-x, 50%) var(--reveal-y, 50%)); }
}

@media(prefers-reduced-motion: reduce){
  .marquee-track{ animation:none; }
  .marquee-row{ overflow-x:auto; }
  .hero-visual, .hero-role, #heroRole, .hero-desc{ transition:none; }
  .hero-status-ping::after, .cyber-cursor{ animation:none !important; }
  .about-card-frame::before, .about-card-glow{ animation:none !important; }
  #loader, .loader-inner{ transition:none !important; animation:none !important; }
  body.lock header.nav, body.lock .hero-visual, body.lock .hero-text-left, body.lock .hero-text-right, body.lock .hero-bottom-bar{
    transform:none !important; opacity:1 !important; filter:none !important;
  }
  ::view-transition-old(root),
  ::view-transition-new(root){
    animation:none !important;
  }
}