*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: #1a0a2e;
  --surface: #2d1b4e;
  --fg: #faf5ef;
  --muted: #c4a8d4;
  --accent: #e83e8c;
  --coral: #ff6b47;
  --d: #6b8cff;
  --border: #3d2a5e;
}

html {
  height: 100%;
  overflow: hidden;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: 'Barlow', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  margin: 0;
  overflow: hidden;
  height: 100%;
}

/* ── Scroll snap wrapper ── */
.snap-container {
  height: 100vh;
  height: 100dvh; /* dvh last = preferred value in supporting browsers */
  overflow-y: scroll;
  scroll-snap-type: y mandatory; /* mandatory required for reliable Safari snap */
  -webkit-overflow-scrolling: touch; /* iOS momentum scroll + snap support */
}

/* ── Colors ── */
.accent-color { color: var(--accent); }
.coral-color { color: var(--coral); }
.coral-color-dim { color: var(--coral); opacity: .6; }
.d-color { color: var(--d); }
.d-color-dim { color: var(--d); opacity: .6; }
.accent-bg { background: var(--accent); }
.coral-bg { background: var(--coral); }
.d-bg { background: var(--d); }

/* ── Reveal — children fade in, not sections ── */
.reveal-child {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal-child.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Screens ── */
.screen {
  height: 100vh;
  height: 100dvh; /* dvh last = preferred value; 100vh fallback for older Safari */
  /* NOT min-height — Safari needs exact height to calculate snap point positions.
     min-height lets sections grow taller than the viewport, which breaks snap. */
  scroll-snap-align: start;
  scroll-snap-stop: always; /* prevents fast swipes from skipping sections */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 3rem 2rem;
  text-align: center;
  overflow: hidden; /* content that doesn't fit stays clipped, not expanding the section */
}
.screen-content {
  max-width: 48rem;
  width: 100%;
  text-align: center;
  overflow-y: auto; /* allows internal scroll on screens with lots of content */
  max-height: 100%; /* constrains to the section height */
  -webkit-overflow-scrolling: touch;
}
.screen-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(1.6rem, 4vw, 2.5rem);
  color: var(--fg);
  margin-bottom: .5rem;
  line-height: 1.1;
}
.screen-subtitle {
  font-family: 'Barlow', sans-serif;
  font-size: clamp(.9rem, 2vw, 1.1rem);
  color: var(--muted);
  margin-bottom: 2.5rem;
}

/* ── Donate pin ── */
.donate-pin {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 100;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .5rem 1rem;
  border-radius: 4px;
  background: var(--accent);
  color: var(--fg);
  transition: background .2s, transform .2s;
}
.donate-pin:hover { background: #d4357d; transform: scale(1.05); }

/* ── Hook ── */
.hook-text {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(1.8rem, 6vw, 5.5rem);
  line-height: 1.05;
  color: var(--fg);
  white-space: nowrap;
}
.gradient-text {
  background: linear-gradient(90deg, var(--accent), var(--coral));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hook-explainer {
  font-family: 'Barlow', sans-serif;
  font-size: clamp(1rem, 2.5vw, 1.3rem);
  font-weight: 400;
  color: var(--fg);
  margin-top: 2rem;
  max-width: 32rem;
  line-height: 1.5;
  text-align: center;
}
.hook-spoiler {
  font-family: 'Barlow', sans-serif;
  font-size: clamp(.8rem, 1.8vw, .95rem);
  font-style: italic;
  color: var(--muted);
  margin-top: .5rem;
}
.scroll-hint {
  font-size: 1.5rem;
  color: var(--muted);
  margin-top: 3rem;
  opacity: .4;
  animation: bob 2s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

/* ── Graveyard (single screen with scrolling wall) ── */
.graveyard-inner {
  max-width: 52rem;
  width: 100%;
  margin: 0 auto;
  overflow-y: auto;
  max-height: 100%;
  -webkit-overflow-scrolling: touch;
}
.graveyard-subtitle {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(.9rem, 2vw, 1.1rem);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: 2rem;
}

/* Animated scrolling wall */
.memorial-viewport {
  position: relative;
  height: 40vh;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
}
.memorial-wall {
  display: flex;
  flex-direction: column;
  text-align: justify;
  font-size: 1.1rem;
  line-height: 1.6;
  animation: wall-scroll 60s linear infinite;
}
.memorial-wall:hover {
  animation-play-state: paused;
}
/* We duplicate the content in JS for seamless loop */
.memorial-half {
  padding-bottom: 2rem;
}

@keyframes wall-scroll {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

.memorial-wall a {
  text-decoration: none;
  transition: opacity .2s;
}
.memorial-wall a:hover { opacity: 1 !important; text-decoration: underline; }
.memorial-wall .dot {
  color: var(--muted);
  opacity: .2;
  margin: 0 .15rem;
  user-select: none;
}
.tier-1 { font-size: 1.4rem; font-weight: 700; opacity: 1; color: var(--fg); }
.tier-2 { font-size: 1.15rem; font-weight: 600; opacity: .75; color: var(--fg); }
.tier-3 { font-size: .95rem; font-weight: 400; opacity: .55; color: var(--fg); }
.tier-4 { font-size: .82rem; font-weight: 300; opacity: .35; color: var(--fg); }

/* ── Scoreboard ── */
.scoreboard-inner {
  max-width: 48rem;
  width: 100%;
  margin: 0 auto 2rem;
  text-align: left;
}
.bar-group {
  margin-bottom: 2rem;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s ease, transform .5s ease;
}
.bar-group.visible { opacity: 1; transform: translateY(0); }
.bar-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: .6rem;
}
.bar-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.bar-rate {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.25rem;
}
.rate-suffix {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .7rem;
  color: var(--muted);
}
.bar-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .35rem;
}
.bar-row-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  width: 5.5rem;
  flex-shrink: 0;
  text-align: right;
}
.bar-track {
  flex: 1;
  height: 2rem;
  background: var(--surface);
  border-radius: 4px;
  overflow: visible;
  position: relative;
}
.bar-fill {
  height: 100%;
  width: 0;
  border-radius: 4px;
  opacity: .7;
  transition: width 1s cubic-bezier(.22, 1, .36, 1);
  position: absolute;
  top: 0;
  left: 0;
}
.bar-value {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .8rem;
  font-weight: 700;
  color: var(--fg);
  white-space: nowrap;
  opacity: 0;
  transition: opacity .4s ease .8s;
  z-index: 1;
  /* Default: right-aligned within the filled area (set by JS via --bar-w) */
  right: calc(100% - var(--bar-w, 80%) + .5rem);
}
.bar-value.outside {
  right: auto;
  left: calc(var(--bar-w, 2%) + .5rem);
}
.bar-group.visible .bar-value { opacity: 1; }

/* ── Big numbers ── */
.big-number, .mega-number {
  font-family: 'Bebas Neue', sans-serif;
  line-height: 1;
}
.big-number {
  font-size: clamp(4rem, 15vw, 8rem);
  color: var(--coral);
}
.mega-number {
  font-size: clamp(3.5rem, 12vw, 6rem);
}
.mega-sub {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(1.2rem, 3vw, 1.8rem);
}

/* ── Text patterns ── */
.stat-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-top: .25rem;
}
.section-line {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(1.3rem, 3.5vw, 2rem);
  color: var(--fg);
  margin-top: 2rem;
  line-height: 1.2;
}
.small-text {
  font-family: 'Barlow', sans-serif;
  font-size: .82rem;
  color: var(--muted);
  margin-top: .5rem;
  max-width: 36rem;
  line-height: 1.5;
}
.small-text.centered { margin-left: auto; margin-right: auto; text-align: center; }
.small-text.muted { opacity: .6; font-size: .75rem; margin-top: 1rem; }
.col-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  margin-bottom: .5rem;
}
.col-caption {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .78rem;
  color: var(--muted);
  margin-top: .25rem;
}
.stat-arrow {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  color: var(--fg);
  margin-top: .25rem;
}

/* ── Layouts ── */
.two-col, .stat-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  text-align: center;
  max-width: 36rem;
  width: 100%;
  margin: 0 auto;
}

/* ── Defectors ── */
.defector-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  text-align: center;
  max-width: 40rem;
  width: 100%;
  margin: 0 auto 1.5rem;
}
.defector-number {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(3rem, 10vw, 5rem);
  line-height: 1;
}
.defector-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: .9rem;
  margin-top: .5rem;
}
.defector-detail {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .72rem;
  color: var(--muted);
}
.defector-punchline {
  font-family: 'Barlow', sans-serif;
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  color: var(--fg);
  max-width: 36rem;
  margin: 0 auto .75rem;
  line-height: 1.5;
  text-align: center;
}

/* ── Funnel ── */
.funnel {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 36rem;
  width: 100%;
  margin: 0 auto;
}
.funnel-step {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(.85rem, 2vw, 1rem);
  font-weight: 500;
  color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .85rem 1.5rem;
  text-align: center;
  min-width: 14rem;
}
.funnel-final {
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 700;
}
.funnel-maps {
  background: var(--surface);
  border-color: var(--accent);
  font-weight: 600;
}
.funnel-repeat {
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--muted);
}
.funnel-arrow {
  color: var(--muted);
  font-size: 1.25rem;
  opacity: .4;
  padding: .25rem 0;
}

/* ── Cycle diagram ── */
.cycle-container {
  position: relative;
  width: min(80vw, 22rem);
  height: min(80vw, 22rem);
  margin: 0 auto 1rem;
}
.cycle-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.cycle-ring {
  stroke-dasharray: 1005;
  stroke-dashoffset: 1005;
  transition: stroke-dashoffset 2s ease-out;
}
.cycle-container.visible .cycle-ring {
  stroke-dashoffset: 0;
}
.cycle-arrow {
  opacity: 0;
  transition: opacity .4s ease 1.8s;
}
.cycle-container.visible .cycle-arrow {
  opacity: 1;
}
.cycle-node {
  position: absolute;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(.72rem, 2vw, .85rem);
  font-weight: 600;
  text-align: center;
  color: var(--fg);
  background: var(--bg);
  padding: .35rem .6rem;
  line-height: 1.3;
  opacity: 0;
  transition: opacity .4s ease;
}
.cycle-container.visible .cycle-node { opacity: 1; }
.cycle-top { top: -0.5rem; left: 50%; transform: translateX(-50%); transition-delay: .3s; }
.cycle-right { right: -1rem; top: 50%; transform: translateY(-50%); transition-delay: .7s; }
.cycle-bottom { bottom: -0.5rem; left: 50%; transform: translateX(-50%); transition-delay: 1.1s; }
.cycle-left { left: -1rem; top: 50%; transform: translateY(-50%); transition-delay: 1.5s; }
.cycle-node-accent { color: var(--accent); font-weight: 700; }

/* ── CTA ── */
.cta-headline {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.5rem, 10vw, 5.5rem);
  line-height: .95;
  margin-bottom: 2rem;
}
.share-row {
  display: flex;
  gap: .75rem;
  justify-content: center;
  margin-bottom: 2rem;
}
.share-btn {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: .6rem 1.5rem;
  cursor: pointer;
  transition: background .2s;
}
.share-btn:hover { background: var(--border); }
.cta-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 3rem;
}
.btn-donate {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .85rem 2rem;
  border-radius: 4px;
  background: var(--accent);
  color: var(--fg);
  transition: background .2s, transform .2s;
}
.btn-donate:hover { background: #d4357d; transform: scale(1.03); }
.btn-site {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .85rem 2rem;
  border-radius: 4px;
  border: 1px solid var(--border);
  color: var(--fg);
  transition: background .2s;
}
.btn-site:hover { background: var(--surface); }

/* ── Footer (inside CTA section) ── */
.site-footer {
  padding: 2rem 0 0;
  max-width: 42rem;
  margin: 0 auto;
  border-top: 1px solid var(--border);
  font-size: .75rem;
  color: var(--muted);
  line-height: 1.7;
  text-align: center;
}
.site-footer a { color: var(--d); text-decoration: underline; }
.site-footer p { margin-bottom: .5rem; }
.paid-for { margin-top: .75rem; opacity: .7; }

/* ── Footnotes ── */
.fn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .6rem;
  font-weight: 600;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 1px solid var(--muted);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  vertical-align: super;
  margin-left: .15rem;
  transition: background .2s;
  line-height: 1;
}
.fn-btn:hover { background: var(--surface); }
.fn-tooltip {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  max-width: 36rem;
  width: calc(100% - 2rem);
  padding: 1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: .78rem;
  color: var(--fg);
  line-height: 1.6;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.fn-tooltip.active { opacity: 1; pointer-events: auto; }
.fn-tooltip a { color: var(--d); }

/* ── Scrollbar ── */
.snap-container::-webkit-scrollbar { width: 6px; }
.snap-container::-webkit-scrollbar-track { background: var(--bg); }
.snap-container::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ── Mobile ── */
@media (max-width: 640px) {
  .two-col, .stat-pair { grid-template-columns: 1fr; gap: 2.5rem; }
  .defector-grid { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
  .defector-number { font-size: clamp(2.5rem, 12vw, 4rem); }
  .bar-row-label { width: 4rem; font-size: .65rem; }
  .funnel-step { min-width: 0; }
  .memorial-wall { font-size: .95rem; }
  .memorial-viewport { height: 35vh; }
}