:root {
  color-scheme: light dark;
  --hal-bg: #f5f2e8;
  --hal-ring: #f7f1e4;
  --hal-ring-glow: rgba(0, 0, 0, 0.12);
  --hal-red: #e10018;
}

@media (prefers-color-scheme: dark) {
  :root {
    --hal-bg: #050505;
    --hal-ring: #090909;
    --hal-ring-glow: rgba(255, 255, 255, 0.22);
  }
}

body {
  background: var(--hal-bg);
  color: #f7f7f1;
}

.hal-page {
  min-height: 100svh;
  overflow: hidden;
}

.hal-stage {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 100svh;
  padding: clamp(22px, 4vw, 56px);
}

.hal-orb {
  align-items: center;
  display: grid;
  justify-items: center;
  min-height: min(82svh, 760px);
  width: 100%;
}

.hal-lens {
  align-items: center;
  aspect-ratio: 1;
  background:
    radial-gradient(circle at 50% 48%, #fff 0 2.5%, #ffb0a8 3.2%, transparent 7%),
    radial-gradient(circle at 50% 50%, #ff5d4f 0 8%, #e10018 16%, #7a0009 31%, #1a0003 56%, #030303 72%),
    radial-gradient(circle at 50% 50%, transparent 58%, rgba(255, 255, 255, 0.12) 59%, transparent 63%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 30% 70%, rgba(255, 255, 255, 0.1));
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  box-shadow:
    0 0 42px rgba(225, 0, 24, 0.55),
    0 0 140px rgba(225, 0, 24, 0.28),
    inset 0 0 28px rgba(255, 255, 255, 0.16),
    inset 0 0 80px rgba(0, 0, 0, 0.92);
  display: grid;
  justify-items: center;
  max-width: 520px;
  position: relative;
  width: min(62vw, 520px);
}

.hal-lens::before {
  background: radial-gradient(circle, var(--hal-ring-glow), transparent 62%);
  border: 20px solid var(--hal-ring);
  border-radius: inherit;
  content: "";
  inset: -38px;
  position: absolute;
  z-index: -1;
}

.hal-lens span {
  animation: hal-pulse 3.4s ease-in-out infinite;
  background: radial-gradient(circle, #fff 0 8%, #ffb9b2 10% 18%, var(--hal-red) 34%, transparent 68%);
  border-radius: 999px;
  filter: blur(0.3px);
  height: 24%;
  width: 24%;
}

@keyframes hal-pulse {
  0%, 100% { opacity: 0.82; transform: scale(0.96); }
  50% { opacity: 1; transform: scale(1.06); }
}

@media (max-width: 860px) {
  .hal-orb {
    min-height: min(74svh, 620px);
  }

  .hal-lens {
    width: min(72vw, 360px);
  }
}