:root {
  --bg: #010201;
  --ink: #f2f4ea;
  --dim: #697269;
  --green: #8dffae;
  --line: rgba(141, 255, 174, .20);
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 31% 43%, rgba(141, 255, 174, .12), transparent 23rem),
    radial-gradient(circle at 76% 26%, rgba(255, 255, 255, .035), transparent 18rem),
    #010201;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  overflow: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .075;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(141, 255, 174, .22) 4px);
  mix-blend-mode: screen;
  z-index: 5;
}

.stage {
  position: relative;
  min-height: 100vh;
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: clamp(22px, 5vw, 64px) 0;
  display: grid;
  align-content: center;
}

.signal {
  position: absolute;
  left: clamp(12px, 5vw, 80px);
  top: 50%;
  width: clamp(150px, 24vw, 310px);
  aspect-ratio: 1;
  transform: translateY(-50%);
  overflow: hidden;
  opacity: .78;
  mix-blend-mode: screen;
  filter: saturate(.86) contrast(1.08);
  -webkit-mask-image: radial-gradient(circle, #000 0 42%, rgba(0, 0, 0, .82) 62%, transparent 86%);
  mask-image: radial-gradient(circle, #000 0 42%, rgba(0, 0, 0, .82) 62%, transparent 86%);
}

.signal img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform-origin: 50% 50%;
  animation: quiet-zoom 28s linear infinite;
}

.signal img:nth-child(1) { animation-delay: 0s; }
.signal img:nth-child(2) { animation-delay: 7s; }
.signal img:nth-child(3) { animation-delay: 14s; }
.signal img:nth-child(4) { animation-delay: 21s; }

@keyframes quiet-zoom {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  4% { opacity: .86; }
  20% { opacity: .86; }
  28% {
    opacity: 0;
    transform: scale(5.4);
  }
  100% {
    opacity: 0;
    transform: scale(5.4);
  }
}

.mark {
  position: relative;
  z-index: 2;
  margin-left: clamp(0px, 30vw, 360px);
}

.kicker {
  margin: 0 0 1rem;
  color: var(--green);
  font-size: .72rem;
  letter-spacing: .16em;
  line-height: 1.6;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(2.2rem, 6.4vw, 5.6rem);
  line-height: .9;
  letter-spacing: -.06em;
  text-transform: lowercase;
  overflow-wrap: anywhere;
}

.quote {
  position: absolute;
  left: clamp(0px, 30vw, 360px);
  bottom: clamp(78px, 12vh, 132px);
  z-index: 2;
  margin: 0;
  max-width: 46ch;
  color: var(--dim);
}

blockquote {
  margin: 0;
  font-size: clamp(.82rem, 1.2vw, .98rem);
  line-height: 1.75;
}

.qr {
  display: block;
  position: absolute;
  right: 0;
  bottom: clamp(24px, 5vw, 58px);
  z-index: 20;
  width: clamp(78px, 10vw, 122px);
  aspect-ratio: 1;
  opacity: .82;
}

.qr:hover { opacity: 1; }
.qr img {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 18px rgba(141, 255, 174, .16));
}

@media (max-width: 760px) {
  body {
    overflow-y: auto;
    overflow-x: hidden;
  }
  .stage {
    min-height: 100svh;
    align-content: start;
    padding-top: 68px;
  }
  .signal {
    left: 50%;
    top: 34%;
    width: min(68vw, 260px);
    transform: translate(-50%, -50%);
    opacity: .54;
  }
  .mark {
    margin: 0;
    padding-top: min(42vh, 330px);
  }
  .kicker {
    max-width: 34ch;
    font-size: .64rem;
    overflow-wrap: anywhere;
  }
  h1 {
    font-size: clamp(1.7rem, 8.8vw, 2.45rem);
    letter-spacing: -.045em;
  }
  .quote {
    position: relative;
    left: auto;
    bottom: auto;
    margin-top: 42px;
    padding-bottom: 0;
    max-width: 35ch;
  }
  .qr {
    position: relative;
    right: auto;
    bottom: auto;
    margin-top: 28px;
    width: 88px;
    height: 88px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .signal img {
    animation: none;
  }
  .signal img:first-child {
    opacity: .76;
    transform: scale(1.08);
  }
}