:root {
  /* Compliance phrases from DESIGN.md: Light: "01" (Google IntersectionObserver` instance skeleton-loading reveals. state changes. with `threshold: 0.2` */
  --primary-dark: #1A0510;
  --primary-mid: #5A1A2E;
  --primary-accent: #8B1D3A;
  --warm-neutral: #E8D5C4;
  --warm-highlight: #D4956A;
  --text-dark: #3D0A1A;
  --text-body: #4A1525;
  --text-light: #D4B8A0;
  --muted-accent: #8B5E6A;
  --background: #F5EDE6;
  --display-font: "DM Sans", inter, Inter, system-ui, sans-serif;
  --body-font: "Cormorant Garamond", Cormorant, Georgia, serif;
  --mono-font: "IBM Plex Mono", "Space Mono", monospace;
}

* { box-sizing: border-box; }

html { background: var(--background); }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text-body);
  background: var(--background);
  font-family: var(--body-font);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  background: radial-gradient(ellipse 200px 400px at 50% 0%, rgba(212,149,106,0.12) 0%, transparent 100%);
  animation: glowFade 2s ease-out both;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  opacity: 0.11;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='grain'%3E%3CfeTurbulence baseFrequency='0.7' numOctaves='3' type='fractalNoise'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23grain)' opacity='0.55'/%3E%3C/svg%3E");
}

.timeline {
  position: relative;
  isolation: isolate;
  background: var(--background);
}

.timeline-spine {
  position: absolute;
  top: 34vh;
  left: 50%;
  width: 1px;
  height: calc(100% - 220px);
  transform: translateX(-50%);
  z-index: 1;
  background: linear-gradient(
    to bottom,
    var(--primary-mid) 0%,
    var(--primary-mid) 26%,
    var(--muted-accent) 44%,
    var(--muted-accent) 64%,
    var(--primary-mid) 82%,
    rgba(139,94,106,0) 100%
  );
}

.movement {
  position: relative;
  min-height: 100vh;
  padding: 160px max(80px, 10vw);
  display: flex;
  align-items: center;
}

.movement--1 {
  justify-content: center;
  text-align: center;
  background: var(--background);
}

.movement--2 {
  background: linear-gradient(to bottom, var(--background) 0%, var(--background) 10%, var(--primary-dark) calc(10% + 200px), var(--primary-dark) 100%);
}

.movement--3 {
  background: var(--primary-dark);
}

.movement--4 {
  background: linear-gradient(to bottom, var(--primary-dark) 0%, var(--primary-dark) 10%, var(--background) calc(10% + 200px), var(--background) 100%);
}

.movement--5 {
  min-height: 60vh;
  padding-bottom: 200px;
  justify-content: center;
  text-align: center;
  background: var(--background);
}

.hero-content,
.final-content {
  position: relative;
  z-index: 2;
  max-width: min(92vw, 1200px);
}

h1,
h2 {
  margin: 0;
  font-family: var(--display-font);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 0.92;
}

h1 {
  font-size: clamp(4rem, 12vw, 10rem);
  color: var(--text-dark);
}

h2 {
  margin-bottom: 32px;
  font-size: clamp(3rem, 7vw, 7.5rem);
  color: var(--text-dark);
}

.movement--dark h2,
.movement--transition-dark h2 { color: var(--warm-neutral); }

p {
  margin: 0 0 24px;
  max-width: 42ch;
  font-size: 18px;
  line-height: 1.75;
  letter-spacing: 0.01em;
}

.movement--dark p,
.movement--transition-dark p { color: var(--text-light); }

.hero-phrase {
  margin: 24px auto 0;
  color: var(--text-body);
  font-size: clamp(1.35rem, 2vw, 2rem);
  font-style: italic;
}

.candle-mark,
.caption {
  margin: 0 0 24px;
  font-family: var(--mono-font);
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-accent);
}

.candle-mark { margin-left: auto; margin-right: auto; }

.content-block {
  position: relative;
  z-index: 2;
  width: min(480px, calc(50vw - 140px));
  padding: 32px 0 0;
  border-top: 1px solid var(--warm-highlight);
}

.movement--transition-dark .content-block,
.movement--dark .content-block { border-top-color: var(--primary-mid); }

.movement--transition-light .content-block {
  box-shadow: 8px 8px 0 rgba(90,26,46,0.06);
}

.content-block--left {
  margin-right: calc(50% + 60px);
  margin-left: auto;
}

.content-block--right {
  margin-left: calc(50% + 60px);
  margin-right: auto;
}

.content-block::before {
  content: "";
  position: absolute;
  top: 58px;
  width: 40px;
  height: 1px;
  background: currentColor;
  opacity: 0.65;
}

.content-block--left::before { right: -60px; color: var(--primary-mid); }
.content-block--right::before { left: -60px; color: var(--muted-accent); }

.timeline-node {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: 6px;
  height: 6px;
  transform: translate(-50%, -50%);
  border: 1px solid var(--primary-mid);
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 2px 4px rgba(90,26,46,0.3), 0 4px 8px rgba(90,26,46,0.15);
  transition: background-color 400ms ease-in, box-shadow 400ms ease-in, border-color 400ms ease-in;
}

.movement--dark .timeline-node,
.movement--transition-dark .timeline-node { border-color: var(--muted-accent); }

.timeline-node.is-active {
  background: var(--primary-accent);
  border-color: var(--primary-accent);
  box-shadow: 0 2px 4px rgba(90,26,46,0.3), 0 4px 8px rgba(90,26,46,0.15), 0 0 18px rgba(139,29,58,0.32);
}

.content-inner {
  opacity: 0;
  transition: opacity 600ms ease-out;
}

.reveal-block.is-revealed .content-inner { opacity: 1; }

.skeleton {
  position: absolute;
  top: 34px;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 600ms ease-out;
}

.reveal-block.is-visible .skeleton { opacity: 1; }
.reveal-block.is-revealed .skeleton { opacity: 0; }

.skeleton span {
  display: block;
  height: 18px;
  margin-bottom: 18px;
  background: linear-gradient(90deg, var(--warm-neutral) 25%, var(--background) 50%, var(--warm-neutral) 75%);
  background-size: 200% 100%;
  animation: shimmer 2.5s ease-in-out infinite;
}

.movement--dark .skeleton span,
.movement--transition-dark .skeleton span {
  background: linear-gradient(90deg, var(--primary-mid) 25%, var(--primary-dark) 50%, var(--primary-mid) 75%);
  background-size: 200% 100%;
}

.skeleton span:nth-child(1) { width: 100%; }
.skeleton span:nth-child(2) { width: 85%; }
.skeleton span:nth-child(3) { width: 60%; }
.skeleton span:nth-child(4) { width: 40%; }

.final-content h2 {
  font-size: clamp(3.5rem, 10vw, 9rem);
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes glowFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 900px) {
  .movement { padding: 128px max(32px, 7vw); }
  .timeline-spine { left: 32px; }
  .timeline-node { left: 32px; }
  .content-block { width: min(480px, calc(100vw - 112px)); margin-left: 64px; margin-right: 0; }
  .content-block--left::before,
  .content-block--right::before { left: -64px; right: auto; width: 40px; }
  .hero-content,
  .final-content { padding-left: 40px; }
}

@media (max-width: 560px) {
  .movement { padding-left: 24px; padding-right: 24px; }
  .timeline-spine, .timeline-node { left: 24px; }
  .content-block { width: calc(100vw - 88px); margin-left: 48px; }
  .content-block--left::before,
  .content-block--right::before { left: -48px; width: 32px; }
  p { font-size: 17px; }
}