:root {
  color-scheme: dark;
  font-family: Arial, Helvetica, sans-serif;
  background: #010203;
}

* { box-sizing: border-box; }

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

body { overflow: hidden; background: #010203; }

.scene {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(ellipse 30% 75% at 50% 47%, rgba(6, 43, 55, .42), transparent 72%),
    radial-gradient(circle at 50% 100%, #071013 0, #010304 38%, #000 72%);
}

.scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  background: radial-gradient(circle at center, transparent 20%, rgba(0,0,0,.2) 55%, rgba(0,0,0,.84) 100%);
}

.lamp { position: absolute; z-index: 6; top: 0; left: 50%; width: 46px; height: 86px; transform: translateX(-50%); }
.wire { position: absolute; top: 0; left: 22px; width: 3px; height: 38px; background: linear-gradient(90deg,#050505,#292929,#050505); }
.socket { position: absolute; top: 30px; left: 14px; width: 19px; height: 23px; border-radius: 3px 3px 6px 6px; background: linear-gradient(90deg,#030303,#252525 47%,#050505); }
.bulb { position: absolute; top: 47px; left: 13px; width: 21px; height: 19px; border-radius: 45% 45% 60% 60%; background: #f7ffff; box-shadow: 0 0 8px #fff, 0 0 18px #bff4ff, 0 0 46px #6ddff6; }

.light-beam {
  position: absolute;
  z-index: 1;
  top: 58px;
  left: 50%;
  width: min(62vw, 580px);
  height: 84vh;
  transform: translateX(-50%);
  clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, rgba(181,243,255,.3), rgba(31,130,158,.15) 38%, rgba(2,24,31,.02) 93%);
  filter: blur(16px);
  opacity: .8;
}

.haze { position: absolute; z-index: 2; top: 12%; left: 50%; width: min(62vw,620px); height: 60%; transform: translateX(-50%); background: radial-gradient(ellipse,rgba(125,213,235,.16),transparent 67%); filter: blur(32px); }

.content { position: relative; z-index: 5; margin-top: -3vh; text-align: center; text-transform: uppercase; }

h1 { margin: 0; color: #f5f8f9; font-size: clamp(3.4rem, 9.5vw, 7.8rem); font-weight: 300; line-height: .78; letter-spacing: -.055em; text-shadow: 0 0 20px rgba(172,229,240,.1); }
h1 span { display: block; }

.brand { margin: clamp(3rem, 8vh, 6.3rem) 0 0; color: #edc99f; font-size: clamp(.95rem, 2vw, 1.45rem); font-weight: 600; letter-spacing: .55em; text-indent: .55em; text-shadow: 0 0 17px rgba(230,181,126,.28); }

.stage { position: absolute; z-index: 4; bottom: 5vh; left: 50%; width: min(48vw, 390px); height: 84px; transform: translateX(-50%); filter: drop-shadow(0 24px 21px rgba(0,0,0,.9)); }
.stage-top { position: absolute; inset: 0 0 auto; height: 42px; border-radius: 50%; background: radial-gradient(ellipse at 50% 25%,#14272c,#071013 64%,#020405 100%); box-shadow: inset 0 2px 14px rgba(106,196,215,.08); }
.stage-front { position: absolute; top: 20px; left: 0; width: 100%; height: 50px; border-radius: 0 0 50% 50% / 0 0 40% 40%; background: linear-gradient(90deg,#010202,#071012 48%,#010202); }

@media (max-width: 600px) {
  .light-beam { width: 105vw; }
  .haze { width: 100vw; }
  .brand { letter-spacing: .4em; text-indent: .4em; }
  .stage { width: 68vw; bottom: 7vh; }
}

@media (prefers-reduced-motion: no-preference) {
  .bulb { animation: glow 5s ease-in-out infinite; }
  .haze { animation: breathe 8s ease-in-out infinite; }
}

@keyframes glow { 0%,100% { opacity: .93; } 50% { opacity: 1; box-shadow: 0 0 10px #fff,0 0 22px #bff4ff,0 0 58px #6ddff6; } }
@keyframes breathe { 0%,100% { opacity: .72; } 50% { opacity: 1; } }