/* Google Font (modern/technical) */
@import url("https://fonts.googleapis.com/css2?family=Oxanium:wght@400;700;800&display=swap");

/* ===== Reset / Base ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  overflow: hidden; /* no scrollbars for this design */
  background: #0a0a0a;
  color: #d0d0d0;
  font-family: "Oxanium", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
}

/* Subtle depth: imperceptible gradient + ultra-faint grid pattern */
body {
  /* base depth */
  background-image:
    radial-gradient(1100px 700px at 70% 20%, rgba(255,0,0,0.05), transparent 60%),
    radial-gradient(900px 600px at 30% 80%, rgba(255,255,255,0.025), transparent 65%),
    /* faint grid */
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,0.025) 0,
      rgba(255,255,255,0.025) 1px,
      transparent 1px,
      transparent 24px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.02) 0,
      rgba(255,255,255,0.02) 1px,
      transparent 1px,
      transparent 24px
    );
  background-blend-mode: overlay, normal, overlay, overlay;
}

/* ===== Layout ===== */
.viewport {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 4vmin;
}

/* Glassmorphism content block with tiny tilt for depth */
.panel {
  width: min(92vw, 1000px);
  display: grid;
  justify-items: center;
  gap: 3vmin;
  padding: clamp(20px, 5vmin, 48px);
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow:
    0 12px 40px rgba(0,0,0,0.55),
    0 0 1px rgba(255,255,255,0.2) inset;
  transform: perspective(1200px) rotateX(0.4deg) rotateY(-0.4deg);
}

/* ===== Text ===== */
.headline {
  text-align: center;
  color: #e60012; /* ominous red */
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 0.95;
  font-size: clamp(36px, 10vw, 112px);
  text-shadow:
    0 0 6px rgba(255, 0, 0, 0.65),
    0 0 18px rgba(255, 0, 0, 0.35),
    0 0 42px rgba(255, 0, 0, 0.22);
  text-transform: uppercase;
}

.sub {
  text-align: center;
  max-width: 70ch;
  font-size: clamp(14px, 2.2vmin, 20px);
  line-height: 1.55;
  color: #b0b0b0; /* desaturated grey to keep hierarchy */
  letter-spacing: 0.03em;
}

/* ===== Warning Beacon ===== */
.beacon {
  width: min(18vmin, 140px);
  height: min(18vmin, 140px);
  border-radius: 50%;
  background: radial-gradient(45% 45% at 50% 35%, #6b0b12 0%, #3a070b 60%, #220408 100%);
  box-shadow:
    inset 0 0 12px rgba(255, 50, 50, 0.25),
    0 0 0 1px rgba(255,255,255,0.06);
  animation: pulseWarningLight 2.6s ease-in-out infinite;
}

/* Pulsing / glow animation with subtle scale */
@keyframes pulseWarningLight {
  0% {
    transform: scale(0.98);
    background: radial-gradient(40% 40% at 50% 38%, #6b0b12 0%, #3a070b 62%, #220408 100%);
    box-shadow:
      inset 0 0 14px rgba(255, 60, 60, 0.18),
      0 0 30px 0 rgba(255, 0, 0, 0.05),
      0 0 0 1px rgba(255,255,255,0.06);
  }
  50% {
    transform: scale(1.03);
    background: radial-gradient(42% 42% at 50% 36%, #ff3333 0%, #c01111 55%, #4a070d 100%);
    box-shadow:
      inset 0 0 22px rgba(255, 80, 80, 0.55),
      0 0 28px 6px rgba(255, 0, 0, 0.20),
      0 0 90px 18px rgba(255, 0, 0, 0.12);
  }
  100% {
    transform: scale(0.99);
    background: radial-gradient(40% 40% at 50% 38%, #7a0f16 0%, #3f070c 62%, #220408 100%);
    box-shadow:
      inset 0 0 14px rgba(255, 60, 60, 0.18),
      0 0 34px 0 rgba(255, 0, 0, 0.07),
      0 0 0 1px rgba(255,255,255,0.06);
  }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .beacon { animation: none; }
  .panel { transform: none; }
}



.hidden-easter-egg {
  display: none;
}