/* CONTAGION — a specimen on a slide.
   Black, one acid green, and enough restraint that the green means something. */

:root {
  --acid: #b6f13f;
  --acid-soft: #8fbf34;
  --ink: #dfeccd;
  --dim: #7a8a5e;
  --faint: #45523a;
  --black: #040603;

  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --mono: "Martian Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  background: var(--black);
  color: var(--ink);
  font-family: var(--sans);
  overflow: hidden;
  cursor: crosshair;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#scene { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; z-index: 0; }

/* ── the slide ──────────────────────────────────────────────────────────── */

/* A faint square grid, the way a haemocytometer reticle sits over a sample. */
.graticule {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .35;
  background-image:
    linear-gradient(rgba(182, 241, 63, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(182, 241, 63, .045) 1px, transparent 1px);
  background-size: 84px 84px;
  -webkit-mask-image: radial-gradient(72% 60% at 50% 48%, #000 20%, transparent 78%);
          mask-image: radial-gradient(72% 60% at 50% 48%, #000 20%, transparent 78%);
}

.vignette {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(118% 88% at 50% 46%, transparent 34%, rgba(0, 0, 0, .88) 100%);
}

.grain {
  position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: .42; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* the four corners of the coverslip */
.slide { position: fixed; inset: 24px; z-index: 4; pointer-events: none; }
.slide i { position: absolute; width: 26px; height: 26px; border: 1px solid rgba(182, 241, 63, .3); }
.slide i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.slide i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.slide i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.slide i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }

/* ── the type ───────────────────────────────────────────────────────────── */

#stage {
  position: relative; z-index: 5; height: 100%;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(30px, 4.6vw, 62px);
}

.top { display: flex; align-items: flex-start; gap: 30px; }

.word {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(46px, 8.4vw, 118px);
  line-height: .82;
  letter-spacing: -0.035em;
  color: #eafcc9;
  text-shadow: 0 0 42px rgba(182, 241, 63, .34), 0 0 110px rgba(182, 241, 63, .16);
  animation: bloomIn 1.5s cubic-bezier(.16, .8, .28, 1) both;
}
/* The one italic in the piece, so it lands. */
.word::after {
  content: "."; color: var(--acid); text-shadow: 0 0 26px rgba(182, 241, 63, .8);
}

.line {
  margin-top: 16px;
  font-family: var(--mono);
  font-weight: 300;
  font-size: clamp(9.5px, 1vw, 11px);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--dim);
  animation: rise 1.2s .25s cubic-bezier(.16, .8, .28, 1) both;
}
.line .sep { color: var(--faint); margin: 0 .5em; }

.readout {
  margin-left: auto; text-align: right;
  display: grid; gap: 12px;
  font-family: var(--mono);
  animation: rise 1.2s .4s cubic-bezier(.16, .8, .28, 1) both;
}
.readout div { display: grid; gap: 3px; }
.readout dt { font-size: 8.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--faint); font-weight: 300; }
.readout dd { font-size: 12px; letter-spacing: .1em; color: var(--ink); font-weight: 400; font-variant-numeric: tabular-nums; }
.readout .live { color: var(--acid); display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.pulse {
  width: 6px; height: 6px; border-radius: 50%; background: var(--acid);
  box-shadow: 0 0 10px var(--acid); animation: beat 1.9s ease-in-out infinite;
}
@keyframes beat { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.72); } }

.bot { display: flex; align-items: flex-end; gap: 30px; flex-wrap: wrap; }

.thesis {
  font-family: var(--serif);
  font-size: clamp(19px, 2.5vw, 33px);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: #eafcc9;
  animation: rise 1.2s .55s cubic-bezier(.16, .8, .28, 1) both;
}
.thesis b { font-weight: 400; color: var(--acid); text-shadow: 0 0 26px rgba(182, 241, 63, .45); }
.thesis .em { font-style: italic; color: #c3d3ab; }
.thesis .split { display: block; height: 2px; }

.act {
  margin-left: auto; text-align: right;
  font-family: var(--mono); font-weight: 300;
  font-size: clamp(9px, .95vw, 10.5px); letter-spacing: .24em; text-transform: uppercase;
  display: grid; gap: 10px;
  animation: rise 1.2s .7s cubic-bezier(.16, .8, .28, 1) both;
}
.tap { color: var(--ink); text-decoration: none; transition: color .25s ease; }
.tap:hover { color: var(--acid); }
.wallet { color: var(--faint); text-transform: none; letter-spacing: .12em; font-size: .92em; }
/* the one thing that is not a label: it invites a click, so it glows a little */
.handle { color: var(--acid); text-decoration: none; transition: text-shadow .25s ease, color .25s ease; }
.handle:hover { text-shadow: 0 0 18px rgba(182, 241, 63, .75); }

@keyframes bloomIn {
  from { opacity: 0; transform: translateY(16px) scale(.985); filter: blur(9px); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 720px) {
  .top { flex-direction: column; gap: 22px; }
  .readout { margin-left: 0; text-align: left; grid-auto-flow: column; gap: 24px; }
  .readout .live { justify-content: flex-start; }
  .bot { flex-direction: column; align-items: flex-start; gap: 22px; }
  .act { margin-left: 0; text-align: left; }
  .graticule { background-size: 54px 54px; }
}

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