/* Cyber Bureau — landing page styles.
   The wordmark itself is drawn by WebGL (assets/js/field.js); everything here is
   the DOM layer around it and the no-WebGL / no-JS fallback. */

@font-face {
  font-family: "Unbounded";
  src: url("../fonts/unbounded-latin-800-normal.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: "Unbounded";
  src: url("../fonts/unbounded-latin-300-normal.woff2") format("woff2");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

:root {
  --void: #03070d;
  --ice: #bfeaff;
  --cyan: #38b8ff;
  --amber: #ffa443;
  --dim: rgba(191, 234, 255, 0.55);
  --faint: rgba(191, 234, 255, 0.32);
  --gutter: clamp(16px, 3vw, 32px);
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --display: "Unbounded", "Arial Black", system-ui, sans-serif;
}

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

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--void);
  color: var(--ice);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

body {
  background:
    radial-gradient(ellipse 70% 55% at 50% 48%, #071526 0%, transparent 70%),
    var(--void);
  font-family: var(--mono);
}

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

#field {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.gl #field { opacity: 1; }

/* ---------- Stage: wordmark + tagline ---------- */

.stage {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 3.5vh, 36px);
  padding: 0 var(--gutter);
  pointer-events: none;
  text-align: center;
}

/* Fallback wordmark: shown only when WebGL never takes over. It waits a beat so
   a capable browser never flashes it before the canvas is ready. */
.wordmark {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(34px, 8.4vw, 132px);
  line-height: 1.02;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #e8f8ff 0%, #8fdcff 45%, #2f8fe0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 22px rgba(56, 184, 255, 0.35));
  opacity: 0;
  animation: reveal 1s ease 0.9s forwards;
}
.wordmark span { white-space: nowrap; }
@media (max-aspect-ratio: 23/20) {
  .wordmark span { display: block; }
}

.gl .wordmark {
  /* WebGL renders the visible wordmark; keep the heading for assistive tech. */
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  animation: none;
}

.tagline {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 1.1em;
  font-family: var(--mono);
  font-size: clamp(10px, 1.05vw, 14px);
  font-weight: 400;
  letter-spacing: 0.48em;
  text-transform: uppercase;
  color: var(--dim);
  white-space: nowrap;
  opacity: 0;
  animation: reveal 1s ease 1.4s forwards;
}
/* Hairlines that flank the tagline, each ending in an amber point. */
.tagline::before, .tagline::after {
  content: "";
  height: 1px;
  width: clamp(24px, 8vw, 120px);
  background: linear-gradient(90deg, transparent, rgba(56, 184, 255, 0.55));
  transform-origin: right center;
}
.tagline::after {
  background: linear-gradient(270deg, transparent, rgba(56, 184, 255, 0.55));
  transform-origin: left center;
}
.tagline-text {
  position: relative;
  padding-left: 0.48em; /* balance the trailing letter-spacing */
}
@media (max-width: 520px) {
  .tagline { letter-spacing: 0.34em; gap: 0.8em; }
  .tagline::before, .tagline::after { width: 18px; }
  .tagline-text { padding-left: 0.34em; }
}

.gl .tagline {
  position: absolute;
  left: 50%;
  top: var(--mark-bottom, 62%);
  transform: translate(-50%, 0);
  animation: none;
  transition: opacity 0.9s ease;
}
.gl .tagline::before, .gl .tagline::after {
  transform: scaleX(0);
  transition: transform 1.4s cubic-bezier(0.2, 0.7, 0.1, 1) 0.15s;
}
.gl.locked .tagline { opacity: 1; }
.gl.locked .tagline::before, .gl.locked .tagline::after { transform: scaleX(1); }
.gl.dissolved .tagline { opacity: 0.25; }

/* ---------- Boot sequence ---------- */

.boot {
  position: fixed;
  top: calc(var(--gutter) + env(safe-area-inset-top, 0px));
  left: calc(var(--gutter) + env(safe-area-inset-left, 0px));
  font-size: 11px;
  line-height: 1.75;
  letter-spacing: 0.08em;
  color: var(--faint);
  white-space: pre;
  pointer-events: none;
  transition: opacity 1.4s ease;
}
.boot b { color: var(--cyan); font-weight: 600; }
.boot em { color: var(--amber); font-style: normal; }
.boot.done { opacity: 0; }

/* ---------- HUD ---------- */

.hud {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--gutter);
  padding-bottom: calc(var(--gutter) + env(safe-area-inset-bottom, 0px));
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--faint);
  opacity: 0;
  animation: reveal 1.2s ease 1.6s forwards;
}
.gl .hud { animation: none; transition: opacity 1.6s ease 0.6s; }
.gl.revealed .hud { opacity: 1; }

.sound {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  margin: -8px -12px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  border-radius: 2px;
  transition: color 0.3s ease;
}
.sound[hidden] { display: none; }
.sound:hover, .sound[aria-pressed="true"] { color: var(--ice); }
.sound:focus-visible { outline: 1px solid var(--cyan); outline-offset: 2px; }

.sound-eq {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 10px;
}
.sound-eq i {
  width: 2px;
  height: 2px;
  background: currentColor;
  transition: height 0.3s ease;
}
.sound[aria-pressed="true"] .sound-eq i {
  background: var(--cyan);
  animation: eq 1.1s ease-in-out infinite alternate;
}
.sound[aria-pressed="true"] .sound-eq i:nth-child(2) { animation-delay: -0.4s; animation-duration: 0.8s; }
.sound[aria-pressed="true"] .sound-eq i:nth-child(3) { animation-delay: -0.7s; animation-duration: 1.3s; }
.sound[aria-pressed="true"] .sound-eq i:nth-child(4) { animation-delay: -0.2s; animation-duration: 0.95s; }

@keyframes eq {
  from { height: 2px; }
  to { height: 10px; }
}
@keyframes reveal {
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .wordmark, .tagline, .hud { animation-delay: 0s; animation-duration: 0.01s; }
  .sound[aria-pressed="true"] .sound-eq i { animation: none; height: 6px; }
}