:root {
  color-scheme: dark;
  --bg-top: #02050d;
  --bg-bottom: #050211;
  --text: rgba(232, 243, 255, 0.96);
  --earth-opacity: 0;
  --earth-scale: 0.9;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  overflow: hidden;
  background:
    radial-gradient(circle at 16% 18%, rgba(62, 45, 150, 0.2), transparent 34%),
    radial-gradient(circle at 78% 10%, rgba(31, 111, 212, 0.18), transparent 30%),
    linear-gradient(180deg, var(--bg-top), var(--bg-bottom));
  color: var(--text);
  font-family: "Rajdhani", sans-serif;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

body::before {
  background:
    radial-gradient(circle at center, transparent 42%, rgba(0, 0, 0, 0.42) 100%),
    linear-gradient(120deg, rgba(255, 255, 255, 0.035), transparent 30%, transparent 72%, rgba(255, 255, 255, 0.02));
  mix-blend-mode: screen;
}

body::after {
  opacity: 0.12;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 120px 120px;
  mask-image: radial-gradient(circle at center, black 28%, transparent 86%);
}

.app-shell {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
}

#energy-canvas,
#energy-canvas-front {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

#energy-canvas {
  z-index: 0;
}

.brand-wash {
  position: fixed;
  inset: 0;
  background: #ffffff;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

#energy-canvas-front {
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: brightness(1.28) saturate(1.12);
}

.earth-stage {
  position: fixed;
  left: 50%;
  top: 50%;
  width: min(68vmin, 44rem);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
}

.earth-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  opacity: var(--earth-opacity);
  transform: scale(var(--earth-scale));
  filter:
    drop-shadow(0 0 2rem rgba(53, 98, 255, 0.16))
    drop-shadow(0 0 4rem rgba(16, 72, 255, 0.1));
  transition:
    opacity 220ms linear,
    transform 220ms ease-out;
}

.brand-stage {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}

.brand-logo {
  position: fixed;
  left: 50%;
  top: 50%;
  width: min(42vmin, 22rem);
  max-width: calc(100vw - 3rem);
  display: block;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.82);
  transform-origin: center;
  filter: drop-shadow(0 1rem 1.5rem rgba(0, 0, 0, 0.08));
}

.brand-wordmark {
  position: fixed;
  left: 50%;
  top: 50%;
  width: min(700px, calc(100vw - 2.5rem));
  opacity: 0;
  transform: translate(-50%, 0) scale(0.2);
  transform-origin: center top;
  color: #12042e;
  text-align: center;
}

.brand-line {
  width: 100%;
  font-family: "Montserrat", "Arial Black", Arial, sans-serif;
  font-weight: 900;
  line-height: 0.9;
  white-space: nowrap;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.brand-line--top {
  margin-bottom: 0.08em;
}

.brand-line--bottom {
  font-weight: 800;
  letter-spacing: 0.1em;
  transform: scaleX(0.985);
  transform-origin: center top;
}

.fallback-message,
noscript {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 999px;
  background: rgba(21, 13, 40, 0.92);
  color: var(--text);
  font-size: 0.95rem;
  z-index: 5;
}

@media (max-width: 720px) {
  .earth-stage {
    width: min(82vmin, 28rem);
  }

  .brand-logo {
    width: min(56vmin, 16rem);
  }
}