:root{
  --bg1:#0a0b10;
  --bg2:#141728;
  --fg:#f2f4f8;
  --accent:#ffb703;
}

*{ box-sizing:border-box }
html,body{ height:100%; margin:0; }
body{
  background: radial-gradient(1200px 800px at 70% -10%, var(--bg2), var(--bg1));
  color:var(--fg);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  overflow:hidden;
}

.stage{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  height:100%; width:100%;
  padding:0;
  text-align:center;
  z-index:5;
}

h1{
  font-family:'Orbitron', system-ui, sans-serif;
  font-weight:900;
  line-height:1;
  letter-spacing:0.04em;
  margin:0;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:10vw; /* scale with viewport width */
  text-shadow: 0 6px 18px rgba(0,0,0,.45);
  user-select:none;
  position:relative;
  z-index:5;
}

.wiggle-e{ display:inline-block; transform-origin: 50% 90%; animation: tilt 1.8s ease-in-out infinite alternate; }
@keyframes tilt{ from{ transform:rotate(-30deg) } to{ transform:rotate(-75deg) } }

.emoji-field{
  position:fixed; inset:0; pointer-events:none; overflow:hidden;
  z-index:4;
}
.emoji{
  position:absolute;
  will-change: transform;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.35));
  animation: drift var(--dur, 10s) linear forwards;
  animation-play-state: running;
}
@keyframes drift{
  0%   { transform: translate(0, 0); opacity:0; }
  5%   { opacity:1; }
  100% { transform: translate(-220vw, 220vh); opacity:0.9; }
}

/* Pause all animations when body has .paused */
.paused .emoji, .paused .wiggle-e { animation-play-state: paused !important; }

.corner-glow{
  position:fixed; right:-15vmax; top:-15vmax; width:50vmax; height:50vmax; border-radius:50%;
  background: radial-gradient(closest-side, rgba(255,183,3,.15), transparent 70%);
  pointer-events:none;
  filter: blur(10px);
  z-index:1;
}

@media (prefers-reduced-motion: reduce){
  .wiggle-e, .emoji{ animation: none !important; }
}
