:root {
  --abyss: #020617;
  --frost: #f8fafc;
  --ice: #38bdf8;
  --slate: #475569;
  --font-heading: "Cinzel", ui-serif, Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

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

html, body { width: 100%; height: 100%; overflow: hidden; }

body {
  background: var(--abyss);
  color: var(--frost);
  font-family: var(--font-mono);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

.select-none { user-select: none; }

/* --- Stage --- */
.stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: var(--abyss);
  color: var(--frost);
}

/* --- Mist layers --- */
.mist {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.mist-1, .mist-2, .mist-3 { position: absolute; inset: -20%; }
.mist-1 { opacity: .6; background: radial-gradient(ellipse at 30% 40%, rgba(56,189,248,.10), transparent 45%), radial-gradient(ellipse at 70% 60%, rgba(30,64,175,.12), transparent 50%); animation: mist-drift-1 40s ease-in-out infinite alternate; }
.mist-2 { opacity: .5; background: radial-gradient(ellipse at 60% 30%, rgba(56,189,248,.08), transparent 40%), radial-gradient(ellipse at 20% 80%, rgba(15,23,42,.6), transparent 55%); animation: mist-drift-2 55s ease-in-out infinite alternate; }
.mist-3 { opacity: .4; background: radial-gradient(circle at 50% 50%, rgba(2,6,23,0) 0%, rgba(2,6,23,.85) 100%); animation: mist-drift-3 70s ease-in-out infinite alternate; }

@keyframes mist-drift-1 { 0% { transform: translate(0,0); } to { transform: translate(-8%, 4%); } }
@keyframes mist-drift-2 { 0% { transform: translate(0,0); } to { transform: translate(6%, -3%); } }
@keyframes mist-drift-3 { 0% { transform: translate(0,0); } to { transform: translate(-4%, 2%); } }

/* --- Axis glow --- */
.axis-glow {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, transparent, rgba(56,189,248,.5) 20%, rgba(56,189,248,.5) 80%, transparent);
  animation: axis-glow 5s ease-in-out infinite;
}
@keyframes axis-glow { 0%, to { opacity: .15; } 50% { opacity: .5; } }

/* --- Scattered runes --- */
.rune-mark {
  position: absolute;
  font-family: var(--font-heading);
  color: var(--ice);
  user-select: none;
  pointer-events: none;
  text-shadow: 0 0 12px rgba(56,189,248,.4);
}

/* --- Rune pulse --- */
.rune {
  font-family: var(--font-heading);
  color: var(--ice);
  animation: rune-pulse 4s ease-in-out infinite;
}
@keyframes rune-pulse {
  0%, to { opacity: .2; text-shadow: 0 0 8px #38bdf84d; }
  50% { opacity: .85; text-shadow: 0 0 28px #38bdf8d9, 0 0 60px #38bdf866; }
}

/* --- Title --- */
.title {
  font-family: var(--font-heading);
  font-weight: 800;
  text-align: center;
  line-height: .85;
  font-size: clamp(3.5rem, 14vw, 16rem);
  letter-spacing: -.05em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(248,250,252,.85);
  background: linear-gradient(180deg, rgba(248,250,252,.95) 0%, rgba(56,189,248,.6) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  animation: title-fill 6s ease-in-out infinite;
}
@keyframes title-fill {
  0%, to { text-shadow: 0 0 20px #38bdf826, 0 0 40px #38bdf814; }
  50% { text-shadow: 0 0 40px #38bdf859, 0 0 80px #38bdf82e; }
}

/* --- HUD --- */
.hud {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1.5rem;
  font-size: .65rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--slate);
}
.hud-left { display: flex; align-items: center; gap: .5rem; }
.hud-right { text-align: right; }

.status-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ice);
  box-shadow: 0 0 8px #38bdf8;
  animation: blink 2.4s step-end infinite;
  flex-shrink: 0;
}
@keyframes blink { 0%, to { opacity: 1; } 50% { opacity: .2; } }

/* --- Center --- */
.center {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 1.5rem;
}
.rune-top { font-size: 2.25rem; margin-bottom: 1.5rem; }
.rune-bottom { font-size: 1.875rem; margin-top: 1.5rem; letter-spacing: .8em; }

.tagline {
  margin-top: 2rem;
  text-align: center;
  font-size: .7rem;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--slate);
  max-width: 28rem;
}
.sep { margin: 0 .75rem; color: var(--ice); }

/* --- Footer --- */
.footer { position: absolute; bottom: 0; left: 0; right: 0; z-index: 20; }
.footer-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10vw;
  padding: 1.25rem 1.5rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background-color: rgba(2,6,23,.45);
  border-top: 1px solid rgba(56,189,248,.15);
}
.footer-link {
  font-size: .65rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--slate);
  text-decoration: none;
}
.footer-link:hover { color: var(--ice); }
.footer-rune { color: var(--ice); opacity: .4; font-size: .75rem; }

/* --- Runic hover --- */
.runic-hover { transition: color .3s, text-shadow .3s; }
.runic-hover:hover { color: #38bdf8; text-shadow: 0 0 16px #38bdf8b3; }

/* --- Corners --- */
.corner { position: absolute; top: 0; left: 0; width: 6rem; height: 6rem; pointer-events: none; z-index: 10; box-shadow: inset 0 0 60px 10px rgba(56,189,248,.06); }
.corner-tr { left: auto; right: 0; }
.corner-bl { top: auto; bottom: 0; }
.corner-br { left: auto; right: 0; top: auto; bottom: 0; }

/* --- Frost cursor --- */
.frost-cursor {
  position: fixed;
  top: 0; left: 0;
  z-index: 9999;
  pointer-events: none;
  width: 28px; height: 28px;
  border: 1px solid #38bdf8e6;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 12px #38bdf880, inset 0 0 8px #38bdf840;
  transition: width .4s, height .4s, border-color .4s;
}
.frost-cursor.idle {
  border-color: #f8fafc66;
  width: 60px; height: 60px;
  box-shadow: 0 0 24px #38bdf84d, inset 0 0 16px #f8fafc26;
}
.frost-particle {
  position: fixed;
  z-index: 9998;
  pointer-events: none;
  width: 3px; height: 3px;
  background: #f8fafc;
  border-radius: 50%;
  box-shadow: 0 0 4px #38bdf8cc;
}

@media (min-width: 640px) {
  .hud { padding: 2.5rem; font-size: .7rem; }
  .tagline { margin-top: 3rem; font-size: .75rem; }
  .rune-top { font-size: 2.25rem; margin-bottom: 2.5rem; }
  .rune-bottom { font-size: 1.875rem; margin-top: 2.5rem; }
  .footer-link { font-size: .75rem; }
}

@media (hover: none) {
  .frost-cursor { display: none; }
  body { cursor: auto; }
}