/* ═══════════════════════════════════════════════
   animations.css — Keyframes, transitions, scroll
   ═══════════════════════════════════════════════ */

/* ── Blinking cursor ──────────────────────────── */

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

.cursor {
  display: inline-block;
  width: 0.6em;
  height: 1.15em;
  background: var(--cr-red);
  vertical-align: text-bottom;
  animation: blink 1s step-end infinite;
}

.cursor--line {
  width: 2px;
}

/* ── Green pulse (status dots) ────────────────── */

@keyframes pulse-green {
  0%, 100% { box-shadow: 0 0 6px rgba(74, 222, 128, 0.5); }
  50%      { box-shadow: 0 0 12px rgba(74, 222, 128, 0.8); }
}

@keyframes pulse-cyan {
  0%, 100% { box-shadow: 0 0 6px rgba(86, 200, 216, 0.5); }
  50%      { box-shadow: 0 0 12px rgba(86, 200, 216, 0.8); }
}

/* ── Scroll reveal ────────────────────────────── */

/* Only hide elements when JS is active (html.js class added by script) */
html.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}

html.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children */
html.js .reveal-stagger > .reveal {
  transition-delay: calc(var(--i, 0) * 80ms);
}

/* ── Hero typing ──────────────────────────────── */

.hero-line {
  overflow: hidden;
  white-space: pre-wrap;
  font-family: var(--font-mono);
  line-height: 1.6;
}

.hero-line--cmd {
  color: var(--cr-text-dim);
}

.hero-line--output {
  color: var(--cr-text-primary);
}

.hero-line--highlight {
  color: var(--cr-red);
  font-weight: 700;
  font-size: var(--text-2xl);
}

.hero-line--cyan {
  color: var(--cr-cyan);
}

.hero-line--stat-label {
  color: var(--cr-text-dim);
}

.hero-line--stat-value {
  color: var(--cr-amber);
  font-weight: 700;
}

.hero-line .text-amber { color: var(--cr-amber); font-weight: 700; }
.hero-line .text-cyan  { color: var(--cr-cyan); }
.hero-line .text-dim   { color: var(--cr-text-dim); }
.hero-line .text-red   { color: var(--cr-red); font-weight: 700; }

.hero-line__hint {
  color: var(--cr-text-dim);
  opacity: 0.5;
  font-size: var(--text-xs);
  margin-left: var(--space-lg);
}

/* Hidden lines during typing */
.hero-line[aria-hidden="true"] {
  display: none;
}

/* ── Counter animation ────────────────────────── */

.counter[data-animated="false"] {
  opacity: 0.5;
}

/* ── Hover glow ───────────────────────────────── */

.glow-hover {
  transition: box-shadow var(--duration-normal) var(--ease-out);
}

.glow-hover:hover {
  box-shadow: 0 0 30px var(--cr-red-glow);
}


/* ── Mobile menu links entrance ───────────────── */

.mobile-menu.is-open .mobile-menu__link {
  animation: menu-slide-in var(--duration-slow) var(--ease-out) both;
}

.mobile-menu.is-open .mobile-menu__link:nth-child(1) { animation-delay: 50ms; }
.mobile-menu.is-open .mobile-menu__link:nth-child(2) { animation-delay: 100ms; }
.mobile-menu.is-open .mobile-menu__link:nth-child(3) { animation-delay: 150ms; }
.mobile-menu.is-open .mobile-menu__link:nth-child(4) { animation-delay: 200ms; }
.mobile-menu.is-open .mobile-menu__link:nth-child(5) { animation-delay: 250ms; }
.mobile-menu.is-open .mobile-menu__link:nth-child(6) { animation-delay: 300ms; }
.mobile-menu.is-open .mobile-menu__link:nth-child(7) { animation-delay: 350ms; }

@keyframes menu-slide-in {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ── Floating brackets (hero background) ──────── */

@keyframes float-drift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25%      { transform: translate(10px, -15px) rotate(2deg); }
  50%      { transform: translate(-5px, -25px) rotate(-1deg); }
  75%      { transform: translate(-15px, -10px) rotate(1deg); }
}

.floating-bracket {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 6rem;
  color: var(--cr-text-dim);
  opacity: 0.04;
  pointer-events: none;
  user-select: none;
  animation: float-drift 20s ease-in-out infinite;
}

.floating-bracket:nth-child(2) {
  animation-delay: -7s;
  animation-duration: 25s;
}

.floating-bracket:nth-child(3) {
  animation-delay: -14s;
  animation-duration: 18s;
}