/* ------------------------------------------------------------------
   ANIMATIONS — ambient cinematic layer + keyframes.
   Keep NEW animations in animations.custom.css so this file stays stable.
------------------------------------------------------------------- */

/* ---- ambient fixed field ---- */
.atmosphere { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
#matrix-rain { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.22; }
#particle-field { position: absolute; inset: 0; width: 100%; height: 100%; }

.blob { position: absolute; border-radius: 99999px; filter: blur(90px); opacity: 0.35;
  animation: float-slow 26s ease-in-out infinite; will-change: transform; }
.blob-a { width: 56vw; height: 56vw; left: -14vw; top: -12vw;
  background: radial-gradient(circle, var(--alert), transparent 65%); }
.blob-b { width: 48vw; height: 48vw; right: -12vw; top: 18vh; opacity: 0.1;
  background: radial-gradient(circle, var(--violet), transparent 65%); animation-delay: -9s; }
.blob-c { width: 44vw; height: 44vw; left: 22vw; bottom: -18vw; opacity: 0.18;
  background: radial-gradient(circle, var(--cyan), transparent 68%); animation-delay: -17s; }

.grain { position: absolute; inset: 0; opacity: 0.06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); }

.scanlines { position: absolute; inset: 0; opacity: 0.6; pointer-events: none;
  background-image: repeating-linear-gradient(to bottom,
    transparent 0px, transparent 2px,
    color-mix(in oklab, var(--alert) 6%, transparent) 2px,
    color-mix(in oklab, var(--alert) 6%, transparent) 3px); }

.crt-vignette { position: absolute; inset: 0;
  background: radial-gradient(ellipse 100% 80% at 50% 50%, transparent 45%, color-mix(in oklab, black 78%, transparent) 100%); }

.crt-flicker { position: absolute; inset: 0; background: var(--alert);
  opacity: 0.012; animation: crt-flicker 4.5s steps(1) infinite; }

.scanbeam { position: absolute; inset-inline: 0; height: 160px; animation: scan 7s linear infinite;
  background: linear-gradient(180deg, transparent, color-mix(in oklab, var(--alert) 10%, transparent), transparent); }

.cursor-glow { position: absolute; width: 520px; height: 520px; border-radius: 99999px;
  transform: translate(-50%, -50%); opacity: 0; transition: opacity .5s ease;
  background: radial-gradient(circle, color-mix(in oklab, var(--alert) 11%, transparent), transparent 62%); }

.cyber-grid { position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px),
                    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, black 20%, transparent 100%);
  mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, black 20%, transparent 100%); }

/* scroll progress rail */
.progress-rail { position: fixed; inset-inline: 0; top: 0; z-index: 50; height: 2px; pointer-events: none; }
#progress-bar { height: 100%; width: 0;
  background: linear-gradient(90deg, var(--success), var(--alert), var(--cyan), var(--success));
  box-shadow: 0 0 14px color-mix(in oklab, var(--alert) 80%, transparent); transition: width .15s ease-out; }

/* ---- text effects ---- */
.holo {
  background-image: linear-gradient(100deg, var(--alert) 0%, var(--violet) 25%, var(--cyan) 50%, var(--success) 70%, var(--alert) 100%);
  background-size: 300% 100%; -webkit-background-clip: text; background-clip: text;
  color: transparent; animation: holo-shift 9s linear infinite;
}
.outline { color: transparent; -webkit-text-stroke: 1px color-mix(in oklab, var(--foreground) 35%, transparent); }
.glitch { color: var(--foreground); animation: glitch-x 7s steps(1) infinite, rgb-split 7s steps(1) infinite; }
.caret { display: inline-block; animation: blink 1s steps(1) infinite; color: var(--alert); }

/* marquee bands */
.marquee-band { position: absolute; inset-inline: 0; bottom: 0; z-index: 10; overflow: hidden;
  border-block: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
  background: color-mix(in oklab, var(--background) 40%, transparent); backdrop-filter: blur(8px); padding: 0.75rem 0; }
.marquee { display: flex; width: max-content; gap: 2rem; white-space: nowrap;
  animation: marquee 40s linear infinite; font-size: 0.72rem; letter-spacing: 0.35em; color: var(--muted-foreground); }
.stack-band { overflow: hidden; padding: 1.25rem 0; }
.stack-band .marquee { gap: 1rem; letter-spacing: normal; animation-duration: 34s; }

/* scroll reveal (driven by js/reveal.js) */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.reveal.in { opacity: 1; transform: none; }

/* ---- keyframes ---- */
@keyframes holo-shift { to { background-position: 300% 0; } }
@keyframes blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
@keyframes pulse-dot {
  0%,100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--alert) 70%, transparent); }
  50% { box-shadow: 0 0 0 8px transparent; }
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes scan { 0% { transform: translateY(-10%); } 100% { transform: translateY(110vh); } }
@keyframes float-slow {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  33% { transform: translate3d(6%, -8%, 0) scale(1.12); }
  66% { transform: translate3d(-7%, 5%, 0) scale(0.94); }
}
@keyframes glitch-x {
  0%,92%,100% { transform: translateX(0); }
  93% { transform: translateX(-3px); } 95% { transform: translateX(3px); } 97% { transform: translateX(-1px); }
}
@keyframes rgb-split {
  0%,90%,100% { text-shadow: 0 0 8px color-mix(in oklab, var(--alert) 70%, transparent), 0 0 28px color-mix(in oklab, var(--alert) 40%, transparent); }
  92% { text-shadow: -3px 0 var(--cyan), 3px 0 var(--violet), 0 0 24px color-mix(in oklab, var(--alert) 60%, transparent); }
  95% { text-shadow: 3px 0 var(--cyan), -3px 0 var(--alert), 0 0 24px color-mix(in oklab, var(--success) 60%, transparent); }
}
@keyframes crt-flicker {
  0%,100% { opacity: .010; } 12% { opacity: .030; } 24% { opacity: .006; }
  38% { opacity: .026; } 55% { opacity: .008; } 73% { opacity: .034; } 88% { opacity: .012; }
}

@media (prefers-reduced-motion: reduce) {
  .marquee, .blob, .scanbeam, .crt-flicker, .holo, .glitch, .caret { animation: none !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}