/* Word-mask font pool — self-hosted so rotation works offline too.
   net.js cycles through these faces (with synthesized width/weight
   variants) so the same face never reappears for hours. */
@font-face { font-family: 'Share Tech Mono'; src: url('fonts/share-tech-mono.ttf') format('truetype'); font-display: block; }
@font-face { font-family: 'VT323';          src: url('fonts/vt323.ttf') format('truetype'); font-display: block; }
@font-face { font-family: 'Space Mono';    src: url('fonts/space-mono.ttf') format('truetype'); font-display: block; }
@font-face { font-family: 'Orbitron';      src: url('fonts/orbitron.ttf') format('truetype'); font-display: block; }
@font-face { font-family: 'Rajdhani';      src: url('fonts/rajdhani.ttf') format('truetype'); font-display: block; }
@font-face { font-family: 'Michroma';      src: url('fonts/michroma.ttf') format('truetype'); font-display: block; }
@font-face { font-family: 'Oxanium';       src: url('fonts/oxanium.ttf') format('truetype'); font-display: block; }
@font-face { font-family: 'Jura';          src: url('fonts/jura.ttf') format('truetype'); font-display: block; }
@font-face { font-family: 'Russo One';     src: url('fonts/russo-one.ttf') format('truetype'); font-display: block; }
@font-face { font-family: 'Syncopate';     src: url('fonts/syncopate.ttf') format('truetype'); font-display: block; }
@font-face { font-family: 'Major Mono Display'; src: url('fonts/major-mono-display.ttf') format('truetype'); font-display: block; }
@font-face { font-family: 'Press Start 2P'; src: url('fonts/press-start-2p.ttf') format('truetype'); font-display: block; }
@font-face { font-family: 'Silkscreen';    src: url('fonts/silkscreen.ttf') format('truetype'); font-display: block; }
@font-face { font-family: 'Nova Mono';     src: url('fonts/nova-mono.ttf') format('truetype'); font-display: block; }
@font-face { font-family: 'Pixelify Sans'; src: url('fonts/pixelify-sans.ttf') format('truetype'); font-display: block; }
@font-face { font-family: 'Monoton';       src: url('fonts/monoton.ttf') format('truetype'); font-display: block; }
@font-face { font-family: 'Chakra Petch';  src: url('fonts/chakra-petch.ttf') format('truetype'); font-display: block; }

html, body { height: 100%; }

body {
  margin: 0;
  background: #0b120e;
  color: #9da9a1;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.stage {
  width: min(1160px, calc(100% - 48px));
  margin: auto;
  padding: 5vh 0 4vh;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

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

.footlines {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
}

.footlines .brandline,
.footlines .tag {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #6f7c74;
}

.footlines .brandline {
  color: #a9b5ad;
  font-weight: 700;
  letter-spacing: .22em;
}

/* each language group (brand + tagline) is one fade unit, stacked in
   the same grid cell — the footer always shows exactly one version */
.tagswap { display: grid; }

.footlines .tag {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0;
  transition: opacity .65s ease;
}

.footlines .tag.on { opacity: 1; }

/* static contact line — unaffected by the language rotation, so the
   email keeps its natural lowercase spelling and stays clickable */
.footlines .mailline {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: none;
  color: #7fb2e5; /* blue */
  text-decoration: none;
}

.footlines .mailline:hover,
.footlines .mailline:focus { color: #a9d0f5; }

.visual {
  position: relative;
  overflow: hidden;
  background: #101713;
  min-height: 480px;
  height: 72vh;
  border-radius: 30px;
}

.neural-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.neural-caption {
  position: absolute;
  bottom: 25px;
  left: 28px;
  right: 28px;
  display: flex;
  justify-content: space-between;
  color: #9da9a1;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.neural-caption span { transition: opacity .65s ease; }

@media (max-width: 800px) {
  .stage { width: calc(100% - 32px); padding: 3vh 0 3vh; }
  .visual { border-radius: 20px; height: 65vh; }
  .neural-caption { left: 16px; right: 16px; font-size: 8px; }
}