:root {
  --bg: #080808;
  --fg: #f4f2ed;
  --red: #ff2a2a;
  --red-dark: #b40000;
  --muted: #b9b5ae;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 42, 42, .08), transparent 32%),
    var(--bg);
  color: var(--fg);
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", system-ui, sans-serif;
}

button { font: inherit; }

.stage {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  place-items: center;
  padding: clamp(18px, 3vw, 42px);
  text-align: center;
}

.eyebrow {
  justify-self: start;
  font: 700 clamp(.72rem, 1.2vw, .95rem)/1 system-ui, sans-serif;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #999;
}

.hero {
  display: grid;
  place-items: center;
  gap: clamp(10px, 2vh, 22px);
  width: min(1200px, 100%);
}

.preline,
.subline,
.status {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.preline {
  color: var(--muted);
  font-size: clamp(.9rem, 2vw, 1.35rem);
}

.headline {
  margin: 0;
  max-width: 100%;
  color: var(--red);
  font-size: clamp(5.5rem, 22vw, 19rem);
  line-height: .95;
  overflow-wrap: anywhere;
  letter-spacing: -.035em;
  text-transform: uppercase;
  text-wrap: balance;
  -webkit-text-stroke: clamp(1px, .25vw, 4px) #ff6a6a;
  filter: drop-shadow(0 0 12px rgba(255, 42, 42, .4)) drop-shadow(0 0 45px rgba(255, 0, 0, .22));
  transform-origin: center;
  animation: heartbeat 1.05s infinite cubic-bezier(.17,.67,.32,1.18);
  user-select: none;
}

.subline {
  color: #e0ddd6;
  font-size: clamp(1rem, 2.6vw, 1.8rem);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-bottom: 24px;
}

.actions button {
  border: 0;
  border-radius: 999px;
  padding: 14px 22px;
  cursor: pointer;
  transition: transform .16s ease, filter .16s ease, opacity .16s ease;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.actions button:hover { transform: translateY(-2px) scale(1.02); }
.actions button:active { transform: translateY(0) scale(.98); }

.leave {
  background: var(--red);
  color: #090909;
  box-shadow: 0 0 32px rgba(255, 42, 42, .25);
}

.stay {
  background: #191919;
  color: #9b9891;
  border: 1px solid #333 !important;
  font-family: system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: .82rem;
}

.status {
  color: #a09b94;
  font-size: clamp(.72rem, 1.6vw, .95rem);
}

.noise {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

.vignette {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  box-shadow: inset 0 0 20vw 8vw #000;
}

.flash {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background: var(--red);
  opacity: 0;
}

.flash.on { animation: flash .18s ease-out; }

body.annoyed .headline {
  animation-duration: .72s;
  filter: drop-shadow(0 0 16px rgba(255, 42, 42, .6)) drop-shadow(0 0 75px rgba(255, 0, 0, .36));
}

body.very-annoyed .headline {
  animation-duration: .54s;
}

body.rage .stage {
  animation: shake .13s infinite linear;
}

body.rage .headline {
  animation-duration: .42s;
}

body.gone {
  background: #000;
}

body.gone .noise,
body.gone .vignette,
body.gone .actions,
body.gone .status,
body.gone .eyebrow,
body.gone .preline,
body.gone .subline {
  display: none;
}

body.gone .headline {
  color: #7dff75;
  -webkit-text-stroke: 0;
  font-size: clamp(4rem, 14vw, 12rem);
  filter: none;
  animation: none;
  line-height: .9;
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  10% { transform: scale(1.065); }
  18% { transform: scale(1); }
  30% { transform: scale(1.11); }
  43% { transform: scale(.99); }
  68% { transform: scale(1); }
}

@keyframes flash {
  0% { opacity: 0; }
  35% { opacity: .26; }
  100% { opacity: 0; }
}

@keyframes shake {
  0%,100% { transform: translate(0,0) rotate(0); }
  25% { transform: translate(-2px,1px) rotate(-.15deg); }
  50% { transform: translate(2px,-1px) rotate(.15deg); }
  75% { transform: translate(-1px,-2px) rotate(0); }
}

@media (max-width: 680px) {
  .stage { grid-template-rows: auto 1fr auto auto; }
  .headline { font-size: clamp(5rem, 28vw, 10rem); }
  .actions { flex-direction: column; width: min(100%, 420px); }
  .actions button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .headline,
  body.rage .stage,
  .flash.on { animation: none !important; }
  * { scroll-behavior: auto !important; }
}

[hidden] { display: none !important; }
.hero { min-width: 0; padding-block: 2rem; }
.headline { width: 100%; }
.actions button { min-height: 48px; }
button:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
body.gone .stage { display: grid; place-content: center; }
@media (max-width: 680px) {
  .headline { font-size: clamp(2rem, 12vw, 5rem); }
}