/* === Animations & Keyframes === */

/* ── Cursor Blink ── */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* ── Fade + Slide Up (Scroll Reveal) ── */
@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Glitch Flicker ── */
@keyframes glitch-flicker {
  0%   { opacity: 1; transform: translate(0); }
  25%  { opacity: 0.8; transform: translate(-2px, 1px); }
  50%  { opacity: 1; transform: translate(1px, -1px); }
  75%  { opacity: 0.9; transform: translate(-1px, 0); }
  100% { opacity: 1; transform: translate(0); }
}

/* ── Scanline Sweep ── */
@keyframes scanline-sweep {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}

/* ── Boot text fade in ── */
@keyframes boot-line-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Scroll Reveal Classes ── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children */
.reveal-stagger > .reveal:nth-child(1)  { transition-delay: 0ms; }
.reveal-stagger > .reveal:nth-child(2)  { transition-delay: 80ms; }
.reveal-stagger > .reveal:nth-child(3)  { transition-delay: 160ms; }
.reveal-stagger > .reveal:nth-child(4)  { transition-delay: 240ms; }
.reveal-stagger > .reveal:nth-child(5)  { transition-delay: 320ms; }
.reveal-stagger > .reveal:nth-child(6)  { transition-delay: 400ms; }
.reveal-stagger > .reveal:nth-child(7)  { transition-delay: 480ms; }
.reveal-stagger > .reveal:nth-child(8)  { transition-delay: 560ms; }
.reveal-stagger > .reveal:nth-child(9)  { transition-delay: 640ms; }
.reveal-stagger > .reveal:nth-child(10) { transition-delay: 720ms; }
.reveal-stagger > .reveal:nth-child(11) { transition-delay: 800ms; }
.reveal-stagger > .reveal:nth-child(12) { transition-delay: 880ms; }

/* ── Nav Link Active Transition ── */
.nav-link {
  position: relative;
  transition: color var(--ease-default);
}

.nav-link::before,
.nav-link::after {
  transition: opacity var(--ease-default), color var(--ease-default);
  opacity: 0.4;
}

.nav-link.active {
  color: var(--accent-green);
}

.nav-link.active::before,
.nav-link.active::after {
  opacity: 1;
  color: var(--accent-green);
}

/* ── Boot Overlay ── */
.boot-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--bg-primary);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-2xl);
  cursor: pointer;
  transition: opacity 0.4s ease;
}

.boot-overlay.fade-out {
  opacity: 0;
  pointer-events: none;
}

.boot-overlay .boot-line {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--accent-green);
  margin-bottom: var(--space-xs);
  opacity: 0;
  animation: boot-line-in 0.1s forwards;
}

.boot-overlay .boot-line .ok {
  color: var(--accent-yellow);
}

.boot-overlay .boot-skip {
  position: absolute;
  bottom: var(--space-xl);
  right: var(--space-xl);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  animation: blink 1.5s steps(1) infinite;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}