/* MACHINA — instrument-grade HUD over a hand-written Mandelbrot renderer */

:root {
  --void: #05060A;
  --void-2: #0A0C14;
  --cyan: #59F2E8;
  --cyan-dim: rgba(89, 242, 232, .38);
  --magma-1: #1B0F2E;
  --magma-2: #7A2E8F;
  --magma-3: #F2A03D;
  --magma-4: #F7E8C8;
  --hud: #9FB3A8;
  --hud-dim: rgba(159, 179, 168, .55);
  --hud-faint: rgba(159, 179, 168, .28);
  --ease-out: cubic-bezier(.16, .84, .32, 1);
  --ease-in-out: cubic-bezier(.65, 0, .18, 1);
  --ease-soft: cubic-bezier(.33, 1, .68, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  overscroll-behavior: none;
}

body {
  background: var(--void);
  color: var(--hud);
  font-family: "Share Tech Mono", ui-monospace, monospace;
  overflow: hidden;
  height: 100svh;
  height: 100dvh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  cursor: default;
}

::selection { background: rgba(89, 242, 232, .3); color: #fff; }

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

.skip-link {
  position: absolute; top: -60px; left: 12px; z-index: 300;
  background: var(--cyan); color: var(--void); padding: 10px 16px;
  font-family: "Share Tech Mono", monospace; font-size: 13px; letter-spacing: .05em;
  border-radius: 3px; transition: top .25s var(--ease-out);
}
.skip-link:focus { top: 12px; }

/* ---------- canvas + atmosphere ---------- */

#field {
  position: fixed; inset: 0; width: 100%; height: 100%;
  display: block; z-index: 0;
  background: var(--void);
  cursor: none;
}

.grain {
  position: fixed; inset: -20%; z-index: 2; pointer-events: none;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

.vignette {
  position: fixed; inset: 0; z-index: 3; pointer-events: none;
  background:
    radial-gradient(140% 110% at 50% 50%, transparent 42%, rgba(5,6,10,.55) 100%),
    linear-gradient(180deg, rgba(5,6,10,.55) 0%, transparent 14%, transparent 82%, rgba(5,6,10,.6) 100%);
}

main { position: relative; z-index: 10; height: 100%; }

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

.hud-top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px;
  padding: clamp(18px, 3vw, 32px) clamp(20px, 4vw, 46px) 0;
  pointer-events: none;
}

.brand { display: flex; flex-direction: column; gap: 4px; animation: rise .9s var(--ease-out) both; animation-delay: .1s; }
.brand-mark {
  font-family: "Share Tech Mono", monospace;
  font-size: clamp(18px, 2.4vw, 24px);
  letter-spacing: .38em;
  color: var(--cyan);
  text-shadow: 0 0 18px rgba(89,242,232,.35);
}
.brand-sub {
  font-family: "Exo 2", sans-serif;
  font-style: italic; font-weight: 300;
  font-size: clamp(11px, 1.1vw, 13px);
  color: var(--hud-dim);
  letter-spacing: .01em;
}

.readouts { display: flex; gap: clamp(10px, 1.6vw, 22px); flex-wrap: wrap; justify-content: flex-end; animation: rise .9s var(--ease-out) both; animation-delay: .22s; }
.ro { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 74px; }
.ro dt { font-size: 9.5px; letter-spacing: .22em; color: var(--hud-faint); }
.ro dd {
  font-size: clamp(11.5px, 1.15vw, 13.5px);
  color: var(--hud);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ro-status dd { color: var(--magma-3); }

/* ---------- corner brackets ---------- */

.bracket {
  position: fixed; z-index: 15; width: clamp(30px, 4vw, 46px); height: clamp(30px, 4vw, 46px);
  pointer-events: none; opacity: 0;
  animation: bracket-in 1.1s var(--ease-out) both, bracket-breathe 5s ease-in-out infinite;
  animation-delay: .05s, 1.2s;
}
.bracket-tl { top: clamp(14px, 2.4vw, 26px); left: clamp(14px, 2.4vw, 26px); border-top: 1.5px solid var(--cyan-dim); border-left: 1.5px solid var(--cyan-dim); }
.bracket-tr { top: clamp(14px, 2.4vw, 26px); right: clamp(14px, 2.4vw, 26px); border-top: 1.5px solid var(--cyan-dim); border-right: 1.5px solid var(--cyan-dim); }
.bracket-bl { bottom: clamp(14px, 2.4vw, 26px); left: clamp(14px, 2.4vw, 26px); border-bottom: 1.5px solid var(--cyan-dim); border-left: 1.5px solid var(--cyan-dim); }
.bracket-br { bottom: clamp(14px, 2.4vw, 26px); right: clamp(14px, 2.4vw, 26px); border-bottom: 1.5px solid var(--cyan-dim); border-right: 1.5px solid var(--cyan-dim); }

@keyframes bracket-in { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: scale(1); } }
@keyframes bracket-breathe { 0%, 100% { border-color: var(--cyan-dim); } 50% { border-color: rgba(89,242,232,.75); } }

/* ---------- depth rail ---------- */

.depth-rail {
  position: fixed; left: clamp(20px, 3.4vw, 40px); top: 50%; transform: translateY(-50%);
  z-index: 18; display: flex; align-items: center; gap: 12px;
  height: min(58vh, 480px);
  animation: rise .9s var(--ease-out) both; animation-delay: .34s;
}
.rail-caption {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 9.5px; letter-spacing: .3em; color: var(--hud-faint);
}
.rail-track { position: relative; width: 2px; height: 100%; background: var(--hud-faint); border-radius: 2px; }
.rail-indicator {
  position: absolute; left: 50%; top: 0%; width: 9px; height: 9px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 10px 2px rgba(89,242,232,.7);
  transform: translate(-50%, -50%);
  transition: top .12s linear;
}
.rail-tick, .rail-cap {
  position: absolute; top: var(--p); left: 0; transform: translateY(-50%);
  display: flex; align-items: center; gap: 8px;
}
.rail-tick i, .rail-cap i {
  width: 8px; height: 1.5px; background: var(--hud-faint); display: block;
  transition: background .4s var(--ease-out), box-shadow .4s var(--ease-out), width .4s var(--ease-out);
}
.rail-tick em, .rail-cap em {
  font-size: 9.5px; letter-spacing: .08em; color: var(--hud-faint);
  transition: color .4s var(--ease-out);
  font-variant-numeric: tabular-nums;
}
.rail-tick.active i { background: var(--magma-3); width: 14px; box-shadow: 0 0 8px rgba(242,160,61,.7); }
.rail-tick.active em { color: var(--magma-3); }
.rail-cap i { background: rgba(232,90,90,.5); }
.rail-cap em { color: rgba(232,90,90,.65); }

/* ---------- narrative cards ---------- */

.narrative {
  position: fixed; left: 0; right: 0; bottom: clamp(88px, 12vh, 118px); z-index: 22;
  display: flex; justify-content: center; padding: 0 20px; pointer-events: none;
}
.narrative-card {
  max-width: 460px; width: 100%;
  background: linear-gradient(155deg, rgba(10,9,20,.82), rgba(6,5,12,.78));
  border: 1px solid rgba(89,242,232,.16);
  border-left: 2.5px solid var(--magma-3);
  border-radius: 4px;
  padding: 18px 22px 20px;
  backdrop-filter: blur(10px) saturate(1.15);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  opacity: 0; transform: translateY(16px) scale(.985);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.narrative-card.visible { opacity: 1; transform: translateY(0) scale(1); }

.nc-exp {
  display: inline-block; font-family: "Share Tech Mono", monospace; font-size: 13px;
  color: var(--cyan); letter-spacing: .12em; margin-bottom: 6px;
}
.nc-title {
  font-family: "Exo 2", sans-serif; font-weight: 700; font-size: clamp(16px, 2.1vw, 19px);
  letter-spacing: .06em; color: var(--magma-4); margin-bottom: 8px; text-transform: uppercase;
}
.nc-coords {
  font-family: "Share Tech Mono", monospace; font-size: 11px; color: var(--hud-dim);
  letter-spacing: .02em; margin-bottom: 10px; font-variant-numeric: tabular-nums;
}
.nc-copy {
  font-family: "Exo 2", sans-serif; font-weight: 400; font-size: 14.5px; line-height: 1.55;
  color: rgba(237, 240, 235, .88);
}

/* ---------- pull-back flag ---------- */

.pullback-flag {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 25; text-align: center; pointer-events: none;
  opacity: 0; transition: opacity .8s var(--ease-out);
}
.pullback-flag.visible { opacity: 1; }
.pullback-flag span {
  display: block; font-family: "Share Tech Mono", monospace; font-size: clamp(20px, 3vw, 30px);
  letter-spacing: .3em; color: rgba(232,110,90,.92); text-shadow: 0 0 26px rgba(232,90,90,.5);
}
.pullback-flag em {
  display: block; margin-top: 8px; font-family: "Exo 2", sans-serif; font-style: italic;
  font-size: 12.5px; color: var(--hud-dim); letter-spacing: .02em;
}

/* ---------- cursor reticle ---------- */

.cursor-reticle {
  position: fixed; top: 0; left: 0; width: 34px; height: 34px; z-index: 50;
  pointer-events: none; opacity: 0; transition: opacity .25s var(--ease-out);
  transform: translate(-1000px, -1000px);
}
.cursor-reticle.visible { opacity: 1; }
.cursor-reticle::before, .cursor-reticle::after {
  content: ""; position: absolute; background: var(--cyan);
}
.cursor-reticle::before { top: 50%; left: 3px; right: 3px; height: 1px; transform: translateY(-50%); }
.cursor-reticle::after { left: 50%; top: 3px; bottom: 3px; width: 1px; transform: translateX(-50%); }
.cursor-reticle .ring {
  position: absolute; inset: 0; border: 1px solid var(--cyan-dim); border-radius: 50%;
}
.cursor-reticle .pulse {
  position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--cyan);
  opacity: 0; transform: scale(1);
}
.cursor-reticle.pulsing .pulse { animation: reticle-pulse .6s var(--ease-out); }
@keyframes reticle-pulse {
  from { opacity: .9; transform: scale(.6); }
  to { opacity: 0; transform: scale(2.4); }
}

/* ---------- bottom HUD / controls / footer ---------- */

.hud-bottom {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 24;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 10px 22px;
  padding: 12px clamp(18px, 3.4vw, 40px) calc(12px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(0deg, rgba(5,6,10,.86) 0%, rgba(5,6,10,.4) 80%, transparent 100%);
  animation: rise .9s var(--ease-out) both; animation-delay: .42s;
}

.foot-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.ctrl-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: "Share Tech Mono", monospace; font-size: 11.5px; letter-spacing: .14em;
  color: var(--hud); background: rgba(159,179,168,.06);
  border: 1px solid var(--hud-faint); border-radius: 3px;
  padding: 8px 13px; cursor: pointer;
  transition: border-color .25s var(--ease-out), color .25s var(--ease-out), background .25s var(--ease-out), transform .2s var(--ease-out);
}
.ctrl-btn:hover { border-color: var(--cyan-dim); color: var(--cyan); background: rgba(89,242,232,.07); }
.ctrl-btn:active { transform: scale(.96); }
.ctrl-btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.ctrl-icon { font-size: 10px; }

.ctrl-hint { font-family: "Exo 2", sans-serif; font-style: italic; font-size: 11.5px; color: var(--hud-faint); }

.foot-id-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.foot-id { font-family: "Share Tech Mono", monospace; font-size: 10.5px; letter-spacing: .04em; color: var(--hud-faint); }
.foot-links { display: flex; gap: 12px; }
.foot-links a {
  font-family: "Share Tech Mono", monospace; font-size: 10.5px; letter-spacing: .06em;
  color: var(--hud-dim); text-decoration: none; border-bottom: 1px solid transparent;
  transition: color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.foot-links a:hover, .foot-links a:focus-visible { color: var(--cyan); border-color: var(--cyan-dim); }
.foot-links a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* ---------- entrance ---------- */

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .bracket { animation: bracket-in .01s linear both; }
  .brand, .readouts, .depth-rail, .hud-bottom { animation: none; opacity: 1; }
  .rail-indicator { transition: none; }
  .narrative-card { transition: opacity .4s linear; }
  .grain { opacity: .03; }
}

/* ---------- mobile ---------- */

@media (max-width: 720px) {
  .hud-top { flex-direction: column; gap: 10px; padding-top: 16px; }
  .readouts { justify-content: flex-start; gap: 6px 20px; }
  .ro { min-width: 0; align-items: flex-start; }
  .ro dd { font-size: 12px; }
  .ro-status { order: -1; }
  .ro-iter, .ro-ms { display: none; }
  .brand-sub { display: none; }
  .depth-rail { left: 8px; height: 48vh; gap: 6px; }
  .rail-caption { display: none; }
  .rail-tick em, .rail-cap em { display: none; }
  .narrative { bottom: 128px; padding: 0 14px; }
  .narrative-card { padding: 14px 16px 16px; }
  .nc-copy { font-size: 13.5px; }
  .hud-bottom { flex-direction: column; align-items: stretch; gap: 10px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .ctrl-hint { display: none; }
  .foot-id-wrap { justify-content: space-between; }
  .cursor-reticle { display: none; }
  .bracket { width: 22px; height: 22px; }
}

@media (max-width: 420px) {
  .readouts { display: flex; flex-wrap: wrap; row-gap: 4px; }
}