:root {
  --god-soft-ivory: #F2EFE6;
  --god-amber-gold: #FFC06A;
  --god-cyan: #29D3E6;
  --god-deep-charcoal: #0B0B0D;
  --god-raised-charcoal: #15161A;
  --god-structure-gray: #34363C;
  --god-warning-red: #F0524F;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
html { background: var(--god-deep-charcoal); }
body {
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--god-deep-charcoal);
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
}

#experience {
  position: fixed;
  inset: 0;
  min-height: 100svh;
  width: 100%;
  overflow: hidden;
  touch-action: none;
  background:
    radial-gradient(circle at 50% 50%, rgba(21,22,26,0.95) 0%, rgba(11,11,13,1) 56%),
    radial-gradient(circle at 50% 50%, rgba(41,211,230,0.020), transparent 28%),
    var(--god-deep-charcoal);
}

#experience::before,
#experience::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#experience::before {
  background:
    linear-gradient(rgba(52,54,60,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(52,54,60,0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 0.28;
  mix-blend-mode: screen;
}

#experience::after {
  background:
    radial-gradient(circle at 50% 50%, rgba(242,239,230,0.018), transparent 18%),
    radial-gradient(circle at 50% 50%, rgba(255,192,106,0.016), transparent 30%),
    radial-gradient(circle at 50% 50%, rgba(41,211,230,0.014), transparent 42%);
}

#field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

#logoAnchor {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(160px, 30vw, 280px);
  aspect-ratio: 480 / 540;
  transform: translate(-50%, -50%);
  transform-origin: center;
  will-change: transform, filter;
  pointer-events: none;
  filter:
    drop-shadow(0 0 8px rgba(242,239,230,0.08))
    drop-shadow(0 0 12px rgba(41,211,230,0.06))
    drop-shadow(0 0 20px rgba(255,192,106,0.04));
}

#godHelmet {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

@media (max-width: 480px) {
  #logoAnchor { width: clamp(140px, 44vw, 220px); }
  #experience::before { background-size: 36px 36px; }
}

@media (prefers-reduced-motion: reduce) {
  #field { display: none; }
  #experience::before,
  #experience::after { opacity: 0.5; }
  #logoAnchor { transform: translate(-50%, -50%) !important; filter: none !important; }
}