/* 1711/WWW/DOWN design tokens + effects */
@font-face { font-family: 'Unbounded'; src: url('/fonts/unbounded-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Unbounded'; src: url('/fonts/unbounded-800.woff2') format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Unbounded'; src: url('/fonts/unbounded-900.woff2') format('woff2'); font-weight: 900; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/fonts/jbmono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/fonts/jbmono-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/fonts/jbmono-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/fonts/jbmono-800.woff2') format('woff2'); font-weight: 800; font-display: swap; }

:root {
  --bg: #070707;
  --panel: #0B0B0B;
  --term: #050505;
  --text: #E8E6E1;
  --text-2: #C9C6C0;
  --muted: #9A9893;
  --faint: #6F6D69;
  --line: rgba(232, 230, 225, .12);
  --a: #FF3B2F;
  --warn: #FFB000;
  --ghost: #7CF7FF;
  --ok: #C6FF3D;

  --display: 'Unbounded', 'Arial Black', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --max: 1280px;
  --pad: clamp(16px, 4vw, 48px);
  --sec: clamp(72px, 9vw, 128px);

  /* effect timings (final minute shortens them) */
  --g1: 2.7s;
  --g2: 3.3s;
  --pulse: 2.4s;
  --scan: .035;

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); overflow-x: clip; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text-2);
  font: 400 15px/1.6 var(--mono);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--text); text-decoration-color: var(--a); text-underline-offset: 3px; }
a:hover { color: var(--a); }
button, input { font: inherit; color: inherit; }
::selection { background: var(--a); color: var(--bg); }
:focus-visible { outline: 2px solid var(--a); outline-offset: 2px; }
.num, .tnum, time { font-variant-numeric: tabular-nums; }

[hidden] { display: none !important; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip { position: absolute; left: 8px; top: -40px; background: var(--a); color: var(--bg); padding: 6px 10px; z-index: 100; }
.skip:focus { top: 8px; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.label {
  font-size: 12px; text-transform: uppercase; letter-spacing: .2em; color: var(--muted); font-weight: 500;
}
.acc { color: var(--a); }
.src { font-size: 11px; color: var(--faint); letter-spacing: .12em; text-transform: uppercase; }

/* ---------- glitch ---------- */
.glitch { position: relative; display: inline-block; }
.glitch::before, .glitch::after {
  content: attr(data-text);
  position: absolute; inset: 0;
  pointer-events: none; opacity: 0;
  white-space: inherit;
}
.glitch::before { color: var(--a); animation: glitch-a var(--g1) steps(1) infinite; }
.glitch::after { color: var(--ghost); animation: glitch-b var(--g2) steps(1) infinite; }
@keyframes glitch-a {
  0%, 89.9% { opacity: 0; transform: none; clip-path: inset(0 0 100% 0); }
  90% { opacity: .85; transform: translate(-3px, 0); clip-path: inset(12% 0 62% 0); }
  92.5% { opacity: .85; transform: translate(4px, 0); clip-path: inset(58% 0 18% 0); }
  95% { opacity: .85; transform: translate(-2px, 0); clip-path: inset(34% 0 44% 0); }
  97.5%, 100% { opacity: 0; }
}
@keyframes glitch-b {
  0%, 89.9% { opacity: 0; transform: none; clip-path: inset(0 0 100% 0); }
  90% { opacity: .75; transform: translate(3px, 0); clip-path: inset(66% 0 8% 0); }
  93% { opacity: .75; transform: translate(-4px, 0); clip-path: inset(20% 0 56% 0); }
  96% { opacity: .75; transform: translate(2px, 0); clip-path: inset(44% 0 30% 0); }
  98%, 100% { opacity: 0; }
}

/* ---------- scanlines ---------- */
.scanlines {
  position: fixed; inset: 0; pointer-events: none; z-index: 60;
  background: repeating-linear-gradient(to bottom, rgba(232, 230, 225, var(--scan)) 0 1px, transparent 1px 3px);
  animation: flicker 7s steps(1) infinite;
}
@keyframes flicker { 0%, 96% { opacity: 1; } 97% { opacity: .35; } 98%, 100% { opacity: 1; } }

/* ---------- blink ---------- */
.blink { animation: blink 1s steps(1) infinite; }
@keyframes blink { 0%, 49.9% { opacity: 1; } 50%, 100% { opacity: .12; } }

/* ---------- log rise ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- stamp breathe ---------- */
@keyframes breathe { 0%, 100% { transform: rotate(-7deg) scale(1); opacity: .92; } 50% { transform: rotate(-7deg) scale(1.025); opacity: 1; } }

/* ---------- red pulse ---------- */
@keyframes pulse { 0%, 100% { opacity: .45; } 50% { opacity: .9; } }

/* ---------- final minute ---------- */
html.final { --g1: .9s; --g2: .9s; --pulse: .8s; --scan: .07; }

/* ---------- effects off / reduced motion ---------- */
html.fx-off *, html.fx-off *::before, html.fx-off *::after {
  animation: none !important;
  transition: none !important;
}
html.fx-off .glitch::before, html.fx-off .glitch::after { display: none; }
html.fx-off .scanlines { display: none; }
@media (prefers-reduced-motion: reduce) {
  html:not(.fx-on) *, html:not(.fx-on) *::before, html:not(.fx-on) *::after { animation: none !important; transition: none !important; }
  html:not(.fx-on) .glitch::before, html:not(.fx-on) .glitch::after, html:not(.fx-on) .scanlines { display: none; }
}

/* ---------- 1711 easter egg ---------- */
.egg-flash { position: fixed; inset: 0; z-index: 90; pointer-events: none; background: rgba(255, 59, 47, .12); mix-blend-mode: screen; }
.egg-flash::before {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(to bottom, rgba(124, 247, 255, .18) 0 2px, transparent 2px 7px);
  animation: eggshift .12s steps(2) infinite;
}
@keyframes eggshift { 0% { transform: translate(0, 0); } 50% { transform: translate(-6px, 3px); } 100% { transform: translate(5px, -2px); } }
html.egg body { animation: shake .15s steps(2) infinite; }
@keyframes shake { 0% { transform: translate(0, 0); } 25% { transform: translate(-4px, 2px); } 50% { transform: translate(3px, -3px); } 75% { transform: translate(-2px, -1px); } 100% { transform: translate(2px, 3px); } }