@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700&family=Inter:wght@300;400;600;800&display=swap');

:root {
  --bg: #050607;
  --panel: rgba(17, 20, 22, .72);
  --gold: #d7a629;
  --gold-soft: rgba(215, 166, 41, .32);
  --gold-faint: rgba(215, 166, 41, .12);
  --text: #f4efe3;
  --muted: #a9a59d;
  --cyan: #74f4ff;
  --cyan-soft: rgba(116, 244, 255, .24);
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
}

body {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.gateway {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 45%, rgba(215, 166, 41, .18), transparent 28%),
    radial-gradient(circle at 50% 52%, rgba(116, 244, 255, .08), transparent 36%),
    linear-gradient(145deg, #020304 0%, #0d0f10 48%, #020304 100%);
}

.noise,
.scanlines,
.energy-grid {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.noise {
  opacity: .08;
  background-image:
    radial-gradient(circle at 20% 30%, #fff 0 1px, transparent 1px),
    radial-gradient(circle at 60% 70%, #fff 0 1px, transparent 1px),
    radial-gradient(circle at 80% 20%, #fff 0 1px, transparent 1px);
  background-size: 70px 70px, 93px 93px, 121px 121px;
  animation: noiseShift .75s steps(2) infinite;
}

.scanlines {
  opacity: .18;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.08) 0,
    rgba(255,255,255,.08) 1px,
    transparent 1px,
    transparent 5px
  );
  mix-blend-mode: overlay;
}

.energy-grid {
  opacity: .18;
  background-image:
    linear-gradient(rgba(215, 166, 41, .13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(215, 166, 41, .13) 1px, transparent 1px);
  background-size: 70px 70px;
  transform: perspective(650px) rotateX(62deg) translateY(20%);
  transform-origin: bottom;
  animation: gridMove 3s linear forwards;
}

.hud {
  position: relative;
  width: min(720px, 92vw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  filter: drop-shadow(0 0 28px var(--gold-soft));
  animation: hudExit 3s cubic-bezier(.2,.7,.2,1) forwards;
}

.hud::before,
.hud::after {
  content: "";
  position: absolute;
  inset: 7%;
  border-radius: 50%;
  border: 1px solid var(--gold-faint);
  box-shadow:
    0 0 30px rgba(215, 166, 41, .2),
    inset 0 0 34px rgba(215, 166, 41, .1);
}

.hud::after {
  inset: 23%;
  border-style: dashed;
  border-color: rgba(116, 244, 255, .22);
  animation: rotateReverse 7s linear infinite;
}

.hud-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(215, 166, 41, .48);
}

.ring-a {
  inset: 0;
  border-top-color: transparent;
  border-bottom-color: transparent;
  animation: rotate 5s linear infinite;
}

.ring-b {
  inset: 12%;
  border-left-color: transparent;
  border-right-color: transparent;
  animation: rotateReverse 4s linear infinite;
}

.ring-c {
  inset: 32%;
  border-color: var(--cyan-soft);
  box-shadow: 0 0 25px rgba(116, 244, 255, .14);
  animation: pulseRing 1.6s ease-in-out infinite;
}

.logo-panel {
  position: relative;
  z-index: 4;
  width: min(370px, 68vw);
  padding: 34px 28px;
  text-align: center;
  background: linear-gradient(180deg, rgba(20,22,24,.85), rgba(5,6,7,.58));
  border: 1px solid rgba(215, 166, 41, .28);
  clip-path: polygon(10% 0, 90% 0, 100% 18%, 100% 82%, 90% 100%, 10% 100%, 0 82%, 0 18%);
  box-shadow:
    0 0 32px rgba(215, 166, 41, .13),
    inset 0 0 24px rgba(215, 166, 41, .08);
}

.brand-logo {
  width: min(250px, 56vw);
  height: auto;
  max-height: 120px;
  object-fit: contain;
  animation: logoGlow 1.8s ease-in-out infinite alternate;
}

.system-label {
  margin: 18px 0 0;
  font-size: .72rem;
  letter-spacing: .32em;
  color: var(--gold);
  text-transform: uppercase;
}

.telemetry {
  position: absolute;
  z-index: 3;
  display: grid;
  gap: 10px;
  min-width: 175px;
  font-size: .62rem;
  letter-spacing: .18em;
  color: rgba(244, 239, 227, .72);
  text-transform: uppercase;
}

.telemetry span {
  padding: 8px 10px;
  border: 1px solid rgba(215, 166, 41, .19);
  background: rgba(5, 6, 7, .46);
}

.telemetry-left { left: -34px; top: 38%; text-align: left; }
.telemetry-right { right: -34px; top: 38%; text-align: right; }

.progress-wrap {
  position: absolute;
  z-index: 5;
  bottom: 17%;
  width: min(390px, 68vw);
  height: 4px;
  background: rgba(255,255,255,.1);
  overflow: hidden;
  border-radius: 999px;
}

.progress-bar {
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--cyan), var(--gold));
  box-shadow: 0 0 18px var(--gold);
  animation: progress 2.65s cubic-bezier(.2,.65,.2,1) forwards;
}

.loading-text {
  position: absolute;
  z-index: 5;
  bottom: 8%;
  margin: 0;
  text-align: center;
  color: var(--muted);
}

.loading-text span,
.loading-text strong {
  display: block;
}

.loading-text strong {
  margin-top: 7px;
  color: var(--text);
  font-family: Cinzel, serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: .82rem;
}

.portal {
  position: fixed;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  opacity: 0;
  display: grid;
  place-items: center;
  animation: portalReveal 3s ease-in forwards;
}

.portal-line {
  position: absolute;
  width: 2px;
  height: 0;
  background: linear-gradient(180deg, transparent, var(--cyan), var(--gold), transparent);
  box-shadow: 0 0 40px var(--cyan), 0 0 70px var(--gold);
  animation: portalLine 3s cubic-bezier(.16,.84,.2,1) forwards;
}

.portal-core {
  width: 0;
  height: 120vh;
  background:
    radial-gradient(circle, rgba(255,255,255,.95), rgba(116,244,255,.55) 22%, rgba(215,166,41,.22) 48%, transparent 68%);
  transform: skewX(-10deg);
  filter: blur(1px);
  animation: portalCore 3s cubic-bezier(.16,.84,.2,1) forwards;
}

.noscript-box {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 30;
  padding: 14px 18px;
  background: #111;
  border: 1px solid var(--gold);
  color: var(--text);
}

.noscript-box a { color: var(--gold); }

@keyframes progress {
  0% { width: 0; }
  65% { width: 72%; }
  100% { width: 100%; }
}

@keyframes portalReveal {
  0%, 62% { opacity: 0; }
  68% { opacity: .55; }
  100% { opacity: 1; }
}

@keyframes portalLine {
  0%, 62% { height: 0; transform: scaleX(1); }
  74% { height: 100vh; transform: scaleX(1); }
  100% { height: 120vh; transform: scaleX(520); }
}

@keyframes portalCore {
  0%, 68% { width: 0; opacity: 0; }
  82% { width: 16vw; opacity: .8; }
  100% { width: 125vw; opacity: 1; }
}

@keyframes hudExit {
  0%, 66% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.16); opacity: .05; }
}

@keyframes rotate { to { transform: rotate(360deg); } }
@keyframes rotateReverse { to { transform: rotate(-360deg); } }

@keyframes pulseRing {
  0%, 100% { transform: scale(.98); opacity: .42; }
  50% { transform: scale(1.04); opacity: .92; }
}

@keyframes logoGlow {
  from { filter: drop-shadow(0 0 8px rgba(215,166,41,.28)); }
  to { filter: drop-shadow(0 0 24px rgba(215,166,41,.58)); }
}

@keyframes gridMove {
  from { background-position: 0 0; }
  to { background-position: 0 210px; }
}

@keyframes noiseShift {
  0% { transform: translate(0,0); }
  100% { transform: translate(-2%,1%); }
}

@media (max-width: 760px) {
  .hud { width: 108vw; }
  .telemetry { display: none; }
  .logo-panel { padding: 28px 20px; }
  .system-label { font-size: .58rem; letter-spacing: .22em; }
  .loading-text strong { font-size: .68rem; }
}

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