:root {
  --black: #000;
  --white: #e7e0d5;
  --dim: #948a7f;
  --red: #9d1119;
  --red-glow: rgba(157,17,25,.48);
}

* { box-sizing: border-box; }

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

body {
  overflow: hidden;
  background: #000;
  color: var(--white);
  font-family: "IBM Plex Mono", "Consolas", "Courier New", monospace;
}

.signal-site {
  width: 100vw;
  height: 100vh;
  min-height: 720px;
  background: #000;
}

.stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 48%, rgba(157,17,25,.12), transparent 30%),
    linear-gradient(180deg, #030303 0%, #000 72%);
}

.stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 42%, rgba(0,0,0,.68) 100%);
  pointer-events: none;
  z-index: 10;
}

.grain {
  position: fixed;
  inset: -30%;
  z-index: 2;
  opacity: .07;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 10% 10%, white 0 1px, transparent 1px),
    radial-gradient(circle at 40% 30%, white 0 1px, transparent 1px),
    radial-gradient(circle at 70% 80%, white 0 1px, transparent 1px),
    radial-gradient(circle at 90% 20%, white 0 1px, transparent 1px);
  background-size: 120px 120px, 180px 180px, 150px 150px, 210px 210px;
  animation: grain-drift 12s linear infinite;
}

.scanlines {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: .42;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.038) 0,
    rgba(255,255,255,.038) 1px,
    transparent 1px,
    transparent 8px
  );
}

.signal-start {
  position: absolute;
  top: 42px;
  left: 0;
  width: 100%;
  margin: 0;
  z-index: 12;
  color: var(--red);
  text-align: center;
  text-transform: lowercase;
  letter-spacing: .24em;
  font-size: clamp(.72rem, 1.35vw, 1rem);
  opacity: 0;
  animation: signal-start 20s forwards;
}

.flicker-field span {
  position: absolute;
  z-index: 8;
  left: var(--x);
  top: var(--y);
  color: rgba(231,224,213,.62);
  text-transform: lowercase;
  letter-spacing: .16em;
  font-size: clamp(.72rem, 1.45vw, 1.05rem);
  opacity: 0;
  animation: word-sequence 16s forwards;
  animation-delay: var(--d);
}

.resolved {
  position: absolute;
  inset: 0;
  z-index: 14;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 2rem;
  opacity: 0;
  animation: resolved-in 4s ease forwards;
  animation-delay: 15.7s;
}

h1 {
  position: relative;
  margin: 0 0 2rem;
  color: var(--white);
  font-weight: 400;
  text-transform: lowercase;
  letter-spacing: .012em;
  line-height: .86;
  font-size: clamp(3rem, 9vw, 8.6rem);
  text-shadow: 0 0 18px rgba(255,255,255,.12), 0 0 42px var(--red-glow);
  animation: title-pulse 24s infinite;
  animation-delay: 20s;
}

h1::before,
h1::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

h1::before {
  color: rgba(157,17,25,.72);
  transform: translateX(-2px);
  animation: ghost-left 21s infinite;
  animation-delay: 22s;
}

h1::after {
  color: rgba(231,224,213,.45);
  transform: translateX(2px);
  animation: ghost-right 19s infinite;
  animation-delay: 25s;
}

.resolved p {
  margin: .23rem 0;
  color: var(--dim);
  text-transform: lowercase;
  letter-spacing: .16em;
  font-size: clamp(.8rem, 1.5vw, 1.08rem);
}

.resolved .film {
  margin-top: 1.05rem;
  color: var(--white);
}

.qr-panel {
  position: absolute;
  left: 50%;
  bottom: 92px;
  transform: translateX(-50%);
  z-index: 15;
  display: flex;
  gap: clamp(2rem, 6vw, 6rem);
  opacity: 0;
  animation: qr-in 2.8s ease forwards;
  animation-delay: 20.5s;
}

.qr-card { text-align: center; }

.qr-placeholder {
  width: clamp(106px, 12vw, 150px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(231,224,213,.56);
  color: rgba(231,224,213,.38);
  background:
    linear-gradient(45deg, rgba(255,255,255,.08) 25%, transparent 25% 50%, rgba(255,255,255,.08) 50% 75%, transparent 75%),
    #060606;
  background-size: 14px 14px;
  letter-spacing: .28em;
  font-size: .95rem;
}

.qr-image {
  width: clamp(106px, 12vw, 150px);
  aspect-ratio: 1;
  object-fit: contain;
  background: white;
  padding: 6px;
}

.qr-card p {
  margin: .75rem 0 0;
  color: var(--dim);
  font-size: clamp(.62rem, .9vw, .76rem);
  text-transform: lowercase;
  letter-spacing: .14em;
}

footer {
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 24px;
  z-index: 15;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  opacity: 0;
  animation: footer-in 2.5s ease forwards;
  animation-delay: 21.2s;
  color: var(--red);
  text-transform: lowercase;
  letter-spacing: .12em;
  font-size: clamp(.68rem, 1.15vw, .92rem);
}

footer a {
  color: var(--red);
  text-decoration: none;
}

footer a:hover { color: var(--white); }

@keyframes signal-start {
  0%, 10% { opacity: 0; }
  11%, 70% { opacity: 1; }
  72%, 78% { opacity: .18; }
  80%, 100% { opacity: 0; }
}

@keyframes word-sequence {
  0%, 8%, 14%, 24%, 100% { opacity: 0; }
  9%, 13% { opacity: .95; }
  25%, 27% { opacity: .55; }
}

@keyframes resolved-in {
  0% { opacity: 0; filter: blur(8px); transform: scale(.985); }
  40% { opacity: .95; filter: blur(.8px); }
  100% { opacity: 1; filter: none; transform: scale(1); }
}

@keyframes qr-in {
  from { opacity: 0; transform: translateX(-50%) translateY(16px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes footer-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes title-pulse {
  0%, 4%, 4.4%, 5%, 55%, 55.5%, 56%, 100% { opacity: 1; filter: none; transform: none; }
  4.2%, 55.7% { opacity: .68; filter: blur(.5px); transform: skewX(-.7deg); }
}

@keyframes ghost-left {
  0%, 5%, 5.9%, 48%, 49%, 100% { opacity: 0; }
  5.2%, 5.7%, 48.2%, 48.8% { opacity: .58; }
}

@keyframes ghost-right {
  0%, 12%, 12.8%, 70%, 71%, 100% { opacity: 0; }
  12.2%, 12.6%, 70.2%, 70.7% { opacity: .34; }
}

@keyframes grain-drift {
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(8%,5%,0); }
}

@media (max-width: 720px) {
  body { overflow: auto; }
  .signal-site { min-height: 930px; height: 100svh; }
  .qr-panel { bottom: 112px; gap: 1.3rem; }
  footer {
    flex-direction: column;
    text-align: center;
    left: 1rem;
    right: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
  }

  .signal-start,
  .resolved,
  .qr-panel,
  footer {
    opacity: 1;
  }

  .flicker-field span {
    opacity: .18;
  }
}