@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap");

:root {
  color-scheme: dark;
  font-family: Inter, Arial, sans-serif;
  background: #080a0c;
  color: #f1f3f5;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body, #root { width: 100%; height: 100%; margin: 0; overflow: hidden; }
button, a { color: inherit; font: inherit; }

main {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 600px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(123,178,230,.15), transparent 22%),
    radial-gradient(circle at 15% 70%, rgba(105,139,173,.08), transparent 30%),
    linear-gradient(130deg, #080a0c 10%, #11161b 52%, #050607 100%);
}

.space-field { position: absolute; inset: 0; z-index: 4; cursor: crosshair; }

.noise {
  position: absolute; inset: 0; z-index: 20; pointer-events: none; opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

.aurora {
  position: absolute; width: 70vw; height: 70vw; left: calc(var(--mx) - 35vw); top: calc(var(--my) - 35vw);
  background: radial-gradient(circle, rgba(126,181,231,.19), rgba(151,173,193,.05) 24%, transparent 65%);
  mix-blend-mode: screen; filter: blur(22px); pointer-events: none; z-index: 2;
}

header {
  position: absolute; z-index: 30; left: 42px; right: 42px; top: 34px;
  display: flex; align-items: center; justify-content: space-between;
}
.division {
  position: absolute; left: 72px; display: flex; flex-direction: column; gap: 3px;
  transform: translate(var(--tx,0),var(--ty,0)); transition: transform .2s ease-out;
}
.division b { font: 9px Space Mono, monospace; letter-spacing: .3em; color: #eef1f4; }
.division span { font: 6px Space Mono, monospace; letter-spacing: .24em; color: rgba(174,196,218,.46); }
.mark { display: block; width: 34px; height: 34px; }
.mark svg { width: 100%; height: 100%; fill: none; stroke: #e0e5ea; stroke-width: 1.2; filter: drop-shadow(0 0 10px #8e9aa7); }
.status { font: 9px/1 Space Mono, monospace; letter-spacing: .16em; color: rgba(218,225,232,.55); }
.status span { display: inline-block; width: 5px; height: 5px; margin-right: 9px; border-radius: 50%; background: #c2ccd6; box-shadow: 0 0 9px #c2ccd6; animation: blink 2s infinite; }

.tile-stage {
  position: absolute; inset: -25% -10% -18%; perspective: 820px;
  transform: rotate(-6deg); z-index: 1;
}
.tile-plane {
  position: absolute; inset: 8% -4% -15%;
  display: grid; grid-template-columns: repeat(14, 1fr); grid-template-rows: repeat(11, 1fr);
  gap: 8px; transform-style: preserve-3d;
  transform: rotateX(57deg) rotateZ(var(--rz)) rotateY(var(--rx)) translate3d(0, 12%, -160px);
  transition: transform .08s linear;
}
.tile-plane i {
  display: block; position: relative; border: 1px solid rgba(180,194,208,.10);
  background: linear-gradient(135deg, rgba(18,22,27,.56), rgba(6,8,11,.82));
  box-shadow: inset 0 0 20px rgba(190,202,214,.018);
  transform: translateZ(var(--lift));
  transition: transform .14s ease-out, border-color .16s, background .16s, box-shadow .16s;
  animation: breathe 4.6s ease-in-out infinite alternate;
  animation-delay: var(--delay);
}
.tile-plane i::after {
  content: ""; position: absolute; inset: 10%; opacity: var(--energy);
  background: radial-gradient(circle at 50% 45%, #f4f7f9, #b7d3eb 18%, rgba(116,162,204,.16) 58%, transparent);
  box-shadow: 0 0 calc(45px * var(--energy)) rgba(143,197,244,.72);
}

.hero {
  position: absolute; z-index: 12; width: 100%; top: 46%; transform: translateY(-50%);
  text-align: center; pointer-events: none;
}
.eyebrow { margin: 0 0 22px; font: 9px/1 Space Mono, monospace; letter-spacing: .33em; color: rgba(216,224,232,.54); }
.eyebrow span { color: #c6d0da; margin-right: 16px; }
.title-wrap { position: relative; display: inline-block; }
h1 {
  position: relative; margin: 0; font-size: clamp(76px, 15.5vw, 250px); line-height: .76; letter-spacing: -.085em;
  font-weight: 600; color: #eef1f4;
  text-shadow: 0 0 5px rgba(219,226,233,.38), 0 0 45px rgba(164,181,198,.13);
  transform: translateX(-.035em);
  background: linear-gradient(105deg, #ffffff 10%, #8996a3 36%, #f7f9fb 49%, #738191 62%, #eef1f4 90%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: metalFlow 8s ease-in-out infinite;
}
h1::before, h1::after { content: attr(data-text); position: absolute; inset: 0; opacity: 0; overflow: hidden; }
h1::before { color: #d0d7df; transform: translate(3px,-1px); }
h1::after { color: #dce8f2; transform: translate(-3px,1px); }
.title-wrap:hover h1::before { opacity: .62; clip-path: inset(12% 0 66% 0); animation: glitch .42s steps(2) infinite; }
.title-wrap:hover h1::after { opacity: .5; clip-path: inset(68% 0 9% 0); animation: glitch .32s steps(2) infinite reverse; }
.scanline { position: absolute; left: 0; right: 0; height: 1px; top: 0; background: #d5dce3; box-shadow: 0 0 18px #a8b3bf; opacity: .35; animation: scan 4.2s ease-in-out infinite; }
.coordinates { margin: 24px 0 0; font: 8px/1 Space Mono, monospace; letter-spacing: .25em; color: rgba(205,215,224,.35); }
.coordinates span { padding: 0 14px; color: #b7c1cb; }
.hero-rule { margin: 26px auto 0; display: flex; width: min(520px,70vw); align-items: center; gap: 16px; }
.hero-rule i { height: 1px; flex: 1; background: linear-gradient(90deg, transparent, rgba(183,209,232,.35)); }
.hero-rule i:last-child { transform: scaleX(-1); }
.hero-rule span { font: 7px Space Mono, monospace; letter-spacing: .2em; color: rgba(210,222,233,.4); }

.telemetry {
  position: absolute; z-index: 25; left: 42px; bottom: 93px; display: flex; gap: 34px;
}
.telemetry div { display: flex; flex-direction: column; gap: 7px; }
.telemetry small { font: 7px Space Mono, monospace; letter-spacing: .22em; color: rgba(207,216,225,.30); }
.telemetry strong { font: 9px Space Mono, monospace; letter-spacing: .12em; font-weight: 400; color: #c7d0d8; }
.glass-panel {
  padding: 13px 15px; border: 1px solid rgba(188,207,224,.1);
  background: linear-gradient(135deg, rgba(20,25,31,.56), rgba(4,7,10,.28));
  backdrop-filter: blur(12px); box-shadow: inset 0 1px rgba(255,255,255,.035);
  transform: translate(var(--tx,0),var(--ty,0)) perspective(600px) rotateX(var(--tilt-x,0)) rotateY(var(--tilt-y,0));
  transition: transform .18s ease-out, border-color .3s, background .3s;
}
.glass-panel:hover { border-color: rgba(166,208,245,.28); background: linear-gradient(135deg, rgba(32,42,52,.66), rgba(8,12,17,.4)); }

.mission {
  position: absolute; z-index: 25; right: 42px; top: 98px; width: 210px;
}
.mission p { display: flex; justify-content: space-between; align-items: center; margin: 0 0 10px; }
.mission p span, .mission small { font: 6px Space Mono, monospace; letter-spacing: .18em; color: rgba(211,222,232,.36); }
.mission p b { font: 9px Space Mono, monospace; letter-spacing: .1em; font-weight: 400; color: #dce8f2; }
.signal-bars { display: flex; align-items: end; height: 24px; gap: 3px; margin-bottom: 8px; }
.signal-bars i { flex: 1; background: linear-gradient(#dbe8f4, #6598c6); box-shadow: 0 0 6px rgba(103,170,230,.35); animation: bars 1.8s ease-in-out infinite alternate; transform-origin: bottom; }
.signal-bars i:nth-child(3n) { animation-delay: -.7s; }
.signal-bars i:nth-child(4n) { animation-delay: -1.2s; }

.enter {
  position: absolute; z-index: 30; right: 42px; bottom: 84px; width: 218px; height: 48px;
  border: 1px solid rgba(189,201,213,.24); background: rgba(12,16,21,.58); backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: space-between; padding: 0 6px 0 19px;
  cursor: pointer; overflow: hidden; transition: border .3s, transform .3s;
}
.enter::before { content: ""; position: absolute; inset: 0; background: #c9d2dc; transform: translateX(-102%); transition: transform .35s cubic-bezier(.7,0,.2,1); }
.enter span { position: relative; font: 8px Space Mono, monospace; letter-spacing: .18em; transition: color .3s; }
.enter i { position: relative; display: grid; place-items: center; width: 36px; height: 36px; background: rgba(188,200,212,.12); color: #d7dee5; font-style: normal; }
.enter:hover { border-color: #c9d2dc; transform: translateY(-3px); }
.enter:hover::before { transform: translateX(0); }
.enter:hover span, .enter:hover i { color: #11161b; }

footer {
  position: absolute; z-index: 30; left: 42px; right: 42px; bottom: 28px; padding-top: 14px;
  border-top: 1px solid rgba(211,220,229,.10); display: flex; justify-content: space-between;
  font: 7px Space Mono, monospace; letter-spacing: .18em; color: rgba(210,218,226,.28);
}
.drag i { display: inline-block; width: 14px; height: 1px; margin: 0 9px 2px 0; background: #c3ccd5; box-shadow: 0 0 5px #c3ccd5; }

.cursor-orb {
  position: absolute; z-index: 10; left: var(--mx); top: var(--my); width: 8px; height: 8px; margin: -4px;
  border-radius: 50%; background: #f7f9fb; box-shadow: 0 0 16px 4px #9fcaf0, 0 0 90px 25px rgba(99,163,220,.2);
  pointer-events: none;
}
.cursor-ring {
  position: absolute; z-index: 31; pointer-events: none; left: var(--px); top: var(--py);
  width: 36px; height: 36px; margin: -18px; border: 1px solid rgba(197,219,239,.35); border-radius: 50%;
  transition: width .18s, height .18s, margin .18s; animation: reticleSpin 8s linear infinite;
}
.cursor-ring::before,.cursor-ring::after { content:""; position:absolute; background:#c8deef; opacity:.6; }
.cursor-ring::before { width:8px; height:1px; left:-5px; top:17px; box-shadow:38px 0 #c8deef; }
.cursor-ring::after { width:1px; height:8px; left:17px; top:-5px; box-shadow:0 38px #c8deef; }
.cursor-ring i { position:absolute; inset:7px; border:1px dashed rgba(146,191,229,.28); border-radius:50%; }

.target-reticle {
  position:absolute; z-index:8; left:var(--px); top:var(--py); width:132px; height:132px; margin:-66px;
  pointer-events:none; border-radius:50%; border:1px solid rgba(144,186,221,.09);
  transform:rotate(calc((var(--mx) - 50%) * .05)); transition: width .2s;
}
.target-reticle i { position:absolute; width:18px; height:18px; border-color:rgba(164,202,234,.28); border-style:solid; }
.target-reticle i:nth-child(1){left:0;top:0;border-width:1px 0 0 1px}
.target-reticle i:nth-child(2){right:0;top:0;border-width:1px 1px 0 0}
.target-reticle i:nth-child(3){right:0;bottom:0;border-width:0 1px 1px 0}
.target-reticle i:nth-child(4){left:0;bottom:0;border-width:0 0 1px 1px}
.target-reticle b { position:absolute; right:-2px; top:50%; font:6px Space Mono,monospace; letter-spacing:.12em; color:rgba(176,207,233,.42); transform:translate(100%,-50%); }

.axis { position:absolute; z-index:7; pointer-events:none; opacity:.13; }
.axis-x { left:0;right:0;top:var(--py);height:1px;background:linear-gradient(90deg,transparent 0 12%,#8eb7d9 50%,transparent 88%); }
.axis-y { top:0;bottom:0;left:var(--px);width:1px;background:linear-gradient(transparent 0 12%,#8eb7d9 50%,transparent 88%); }
.magnetic { transform: translate(var(--tx,0),var(--ty,0)) perspective(600px) rotateX(var(--tilt-x,0)) rotateY(var(--tilt-y,0)); transition: transform .18s ease-out, color .25s; }
.eyebrow.magnetic:hover,.hero-rule span:hover,footer .magnetic:hover { color:#dce8f2; text-shadow:0 0 12px rgba(115,184,240,.65); }
.impact .hero { animation: impactShake .32s ease-out; }
.vignette { position: absolute; inset: 0; z-index: 18; pointer-events: none; box-shadow: inset 0 0 150px 35px #000; }

.modal {
  position: absolute; z-index: 50; inset: 0; display: grid; place-content: center; text-align: center;
  background: rgba(5,7,9,.89); backdrop-filter: blur(26px); opacity: 0; pointer-events: none;
  transform: scale(1.04); transition: .7s cubic-bezier(.2,.8,.2,1);
}
.is-entered .modal { opacity: 1; pointer-events: auto; transform: scale(1); }
.modal-grid { position: absolute; inset: 0; opacity: .12; background-image: linear-gradient(rgba(175,189,202,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(175,189,202,.18) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(circle, #000, transparent 68%); }
.modal button { position: absolute; right: 42px; top: 32px; background: none; border: 0; font-size: 32px; font-weight: 200; cursor: pointer; color: #d0d8e0; }
.modal p, .modal span { font: 8px Space Mono, monospace; letter-spacing: .28em; color: #c3ccd5; }
.modal h2 { margin: 30px 0; font-size: clamp(46px, 7vw, 110px); line-height: .88; letter-spacing: -.06em; }
.modal h2 em { font-style: normal; color: transparent; -webkit-text-stroke: 1px #c3ccd5; }

@keyframes blink { 50% { opacity: .25; } }
@keyframes scan { 0%,100% { top: 8%; opacity: 0; } 30% { opacity: .5; } 70% { opacity: .18; } 50% { top: 91%; } }
@keyframes glitch { 50% { transform: translate(-6px, 1px); } }
@keyframes breathe { to { border-color: rgba(183,196,209,.17); } }
@keyframes metalFlow { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
@keyframes bars { from{transform:scaleY(.15);opacity:.3} to{transform:scaleY(1);opacity:1} }
@keyframes reticleSpin { to{transform:rotate(360deg)} }
@keyframes impactShake { 0%,100%{transform:translateY(-50%)} 25%{transform:translate(-3px,calc(-50% + 2px))} 60%{transform:translate(2px,calc(-50% - 1px))} }

@media (max-width: 700px) {
  main { min-height: 520px; }
  header { left: 22px; right: 22px; top: 24px; }
  .tile-stage { inset: -5% -75% -25%; transform: rotate(-7deg); }
  .tile-plane { gap: 5px; }
  .eyebrow { margin-bottom: 18px; font-size: 7px; letter-spacing: .2em; }
  h1 { font-size: 21vw; }
  .coordinates { font-size: 6px; letter-spacing: .12em; }
  .telemetry { left: 22px; bottom: 102px; }
  .telemetry div:nth-child(2),.telemetry div:nth-child(3) { display: none; }
  .division { left:58px; }
  .mission { display:none; }
  .enter { right: 22px; bottom: 92px; width: 176px; }
  footer { left: 22px; right: 22px; bottom: 24px; }
  .drag { display: none; }
  .modal h2 { font-size: 13vw; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}