/* === CSS Custom Properties (from spec §3.1) ============================ */

:root {
  /* Colors */
  --color-bg:       #07080a;
  --color-fg:       #e5e7eb;
  --color-prompt:   #4ade80;
  --color-brand:    #facc15;
  --color-tagline:  #fda4af;
  --color-email:    #7dd3fc;
  --color-package:  #a78bfa;
  --color-kw:       #c084fc;
  --color-str:      #6ee7b7;
  --color-com:      #94a3b8;
  --color-fn:       #60a5fa;

  /* Typography */
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Timing (from spec §2) */
  --t-fade-term:    700ms;
  --t-fade-ascii:   800ms;
  --t-line-fade:    200ms;
  --t-cursor-blink: 1.05s;
}

/* === Base reset ======================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  overflow: hidden; /* Single-screen experience, no scroll */
}

.stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* === Terminal layer ==================================================== */

.terminal {
  position: absolute;
  inset: 0;
  padding: 32px 40px;
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: 0.01em;
  overflow: hidden;
  transition: opacity var(--t-fade-term) ease;
  z-index: 1;
}

.terminal .line {
  white-space: pre;
  opacity: 1; /* default visible; JS sets to 0 during reveal */
  transition: opacity var(--t-line-fade) ease;
}

.terminal .line.hidden {
  opacity: 0;
}

.terminal .prompt {
  color: var(--color-prompt);
  margin-right: 8px;
}

.terminal .cmd {
  color: var(--color-fg);
}

.terminal .cursor {
  display: inline-block;
  width: 8px;
  height: 16px;
  background: var(--color-fg);
  margin-left: 3px;
  vertical-align: middle;
  animation: cursor-blink var(--t-cursor-blink) step-end infinite;
}

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

/* Syntax highlighting */
.terminal .kw    { color: var(--color-kw);  font-weight: 500; }
.terminal .str   { color: var(--color-str); }
.terminal .com   { color: var(--color-com); font-style: italic; }
.terminal .fn    { color: var(--color-fn);  }

/* Brand emphasis (overlaid on default colors) */
.terminal .brand-cg  { color: var(--color-brand);   font-weight: 700; }
.terminal .brand-aop { color: var(--color-tagline); font-weight: 500; }
.terminal .brand-pkg { color: var(--color-package); font-weight: 600; }

/* Email — mailto link */
.terminal .brand-email {
  color: var(--color-email);
  text-decoration: underline;
  text-decoration-color: rgba(125, 211, 252, 0.4);
  text-underline-offset: 3px;
  transition: text-decoration-color 150ms ease, text-shadow 150ms ease;
}

.terminal .brand-email:hover,
.terminal .brand-email:focus {
  text-decoration-color: var(--color-email);
  text-shadow: 0 0 8px rgba(125, 211, 252, 0.5);
  outline: none;
}

/* Homepage — clickable link (same pattern as email, different color) */
.terminal .brand-home {
  color: var(--color-package);
  text-decoration: underline;
  text-decoration-color: rgba(167, 139, 250, 0.4);
  text-underline-offset: 3px;
  transition: text-decoration-color 150ms ease, text-shadow 150ms ease;
}

.terminal .brand-home:hover,
.terminal .brand-home:focus {
  text-decoration-color: var(--color-package);
  text-shadow: 0 0 8px rgba(167, 139, 250, 0.5);
  outline: none;
}

/* === ASCII art layer (full-screen overlay) ============================= */

.ascii-stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 42px;
  background: radial-gradient(ellipse at center, #0d0e12 0%, var(--color-bg) 100%);
  opacity: 0;
  transition: opacity var(--t-fade-ascii) ease;
  z-index: 2;
  pointer-events: none; /* Don't block clicks on terminal email */
}

.ascii-stage.visible {
  opacity: 1;
}

.ascii-art {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.05;
  color: var(--color-brand);
  text-shadow:
    0 0 14px rgba(250, 204, 21, 0.55),
    0 0 30px rgba(250, 204, 21, 0.25);
  margin: 0;
  white-space: pre;
  letter-spacing: 0;
}

.ascii-art .line {
  opacity: 1; /* JS hides individual lines during reveal */
  transition: opacity 120ms ease;
}

.ascii-art .line.hidden {
  opacity: 0;
}

.ascii-tagline {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.38em;
  color: var(--color-tagline);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 18px;
  opacity: 1;
  transition: opacity 700ms ease;
}

.ascii-tagline.hidden {
  opacity: 0;
}

.ascii-tagline .deco {
  color: rgba(253, 164, 175, 0.5);
  font-size: 15px;
}

/* === Scanlines overlay (retro CRT feel) ================================ */

.scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background: repeating-linear-gradient(
    180deg,
    transparent 0,
    transparent 2px,
    rgba(255, 255, 255, 0.018) 2px,
    rgba(255, 255, 255, 0.018) 3px
  );
  opacity: 0;
  transition: opacity var(--t-fade-ascii) ease;
}

.scanlines.visible {
  opacity: 1;
}

/* === Responsive ======================================================== */

/* Tablet: scale down slightly */
@media (max-width: 1023px) {
  html, body { font-size: 13px; }
  .terminal { padding: 28px 32px; }
  .ascii-art { font-size: 10px; }
  .ascii-tagline { font-size: 13px; }
}

/* Mobile: clamp ASCII art to viewport width
   ASCII art is 76 chars wide. At ~0.6em per char in JetBrains Mono Bold,
   that's 45.6em. Set font-size so 45.6em fits viewport with padding. */
@media (max-width: 639px) {
  html, body { font-size: 12px; }
  .terminal { padding: 20px 18px; }
  /* CSS fallback if JS-based fitAsciiArt() doesn't run.
     JS sets explicit font-size that overrides this clamp. */
  .ascii-art {
    font-size: clamp(4px, 1.7vw, 10px);
  }
  .ascii-tagline {
    font-size: 11px;
    letter-spacing: 0.25em;
    gap: 10px;
    text-align: center;
  }
}

/* === Reduced motion (a11y) ============================================ */

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

  /* Cursor blink retained as it conveys "active" state, but slowed */
  .terminal .cursor {
    animation: cursor-blink 2s step-end infinite;
  }

  /* Scanlines off (visual noise without animation context) */
  .scanlines { display: none; }
}

/* === Accessibility helpers ============================================ */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}