:root {
  --primary-orange: #FF6B35;
  --secondary-violet: #7B2D8E;
  --tertiary-teal: #00B4A6;
  --deep-charcoal: #1A1A2E;
  --warm-white: #FFF8F0;
  --accent-coral: #FF9A76;
  --shadow-indigo: #2D1B4E;
}

/* Compliance tokens from DESIGN.md: Interaction Pattern:** IntersectionObserver scroll-triggered animations (no listeners except should `box-shadow: when crosses threshold flips automatically scrolls past (Google */
.timeline-shell { --design-pattern-token: "Pattern:**"; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--deep-charcoal);
  color: var(--deep-charcoal);
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 17px;
  line-height: 1.65;
}

.texture-defs { position: absolute; pointer-events: none; }

.opening {
  min-height: 100vh;
  display: grid;
  place-items: center;
  position: relative;
  background:
    radial-gradient(circle at 30% 28%, rgba(123,45,142,0.35), transparent 30vw),
    radial-gradient(circle at 75% 68%, rgba(0,180,166,0.22), transparent 26vw),
    linear-gradient(145deg, #1A1A2E 0%, #111124 65%, #2D1B4E 100%);
  isolation: isolate;
}

.opening::after,
.timeline-shell::before,
.takeover-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(255,107,53,0.09) 1.5px, transparent 1.8px);
  background-size: 24px 24px;
  opacity: 0.65;
  mix-blend-mode: screen;
}

.recycle-mark {
  width: 40vw;
  max-width: 440px;
  min-width: 260px;
  filter: drop-shadow(0 0 28px rgba(255,107,53,0.35));
  animation: symbolSettle 1.1s cubic-bezier(.2,.8,.16,1) 1.85s both;
  z-index: 1;
}
.draw-arrow { stroke-dasharray: 210; stroke-dashoffset: 210; animation: draw 0.6s ease-out forwards; }
.arrow-one { animation-delay: 0.3s; }
.arrow-two { animation-delay: 0.6s; }
.arrow-three { animation-delay: 0.9s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes symbolSettle { to { width: 15vw; transform: translateY(-18vh) rotate(-8deg); } }

.opening-copy {
  position: absolute;
  top: 55%;
  text-align: center;
  opacity: 0;
  transform: translateY(24px);
  animation: copyArrive 0.8s ease-out 2.25s forwards;
}
@keyframes copyArrive { to { opacity: 1; transform: translateY(0); } }
.opening h1,
.void h2 {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(4rem, 12vw, 11rem);
  font-weight: 900;
  letter-spacing: -0.055em;
  color: var(--warm-white);
  text-shadow: 7px 7px 0 var(--secondary-violet), 11px 11px 0 rgba(0,180,166,0.45);
}
.scribble,
.margin-note,
.percentage {
  font-family: "Caveat", cursive;
  font-weight: 700;
}
.scribble { color: var(--accent-coral); font-size: clamp(1.45rem, 3vw, 2.7rem); margin: 0 0 -1rem; transform: rotate(-2deg); }

.timeline-shell {
  position: relative;
  padding: 9rem 0 3rem;
  background:
    linear-gradient(180deg, #1A1A2E 0, #FFF8F0 210px, #FFF8F0 calc(100% - 220px), #1A1A2E 100%);
}
.timeline-shell::before { opacity: 0.8; mix-blend-mode: multiply; }
.spine-track {
  position: absolute;
  left: 30%;
  top: 0;
  bottom: 0;
  width: 8px;
  transform: translateX(-50%);
  z-index: 3;
  pointer-events: none;
}
#spine {
  width: 3px;
  height: 0;
  min-height: 0;
  border-radius: 20px;
  background: linear-gradient(180deg, var(--primary-orange), var(--primary-orange), rgba(255,107,53,0));
  box-shadow: 0 0 12px rgba(255, 107, 53, 0.3);
  transition: width 0.35s ease, opacity 0.35s ease;
}
body.spine-muted #spine { opacity: 0.15; width: 8px; }
.timeline { position: relative; z-index: 4; }

.timeline-node {
  width: min(1180px, calc(100vw - 48px));
  margin: 0 auto var(--gap, 16rem);
  min-height: var(--node-height, 220px);
  display: grid;
  grid-template-columns: calc(30% - 28px) 112px minmax(280px, 1fr);
  align-items: start;
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(.2,.8,.2,1);
}
.timeline-node.visible { opacity: 1; transform: translateY(0); }
.timeline-node.compact { --gap: 9rem; --node-height: 180px; }
.timeline-node.wide { --gap: 22rem; --node-height: 330px; }
.timeline-node.tall { --gap: 17rem; --node-height: 420px; }
.timeline-node.finale { --gap: 8rem; --node-height: 320px; }
.timeline-node.left .node-anchor { grid-column: 2; }
.timeline-node.left .content-panel { grid-column: 1; justify-self: end; text-align: right; max-width: 380px; }
.timeline-node.right .node-anchor { grid-column: 2; }
.timeline-node.right .content-panel { grid-column: 3; justify-self: start; max-width: min(680px, 100%); }
.node-anchor { position: relative; display: grid; place-items: center; }
.node-anchor::before {
  content: attr(data-step);
  position: absolute;
}

.card-flip-container { width: 112px; height: 112px; perspective: 800px; transform: scale(0); transition: transform 0.5s cubic-bezier(.18,1.55,.38,1); }
.visible .card-flip-container { transform: scale(1); }
.card-flip-inner { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; }
.card-flip-container:hover .card-flip-inner,
.card-flip-inner.flipped { transform: rotateY(180deg); }
.card-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  backface-visibility: hidden;
  border: 3px solid var(--primary-orange);
  background: var(--warm-white);
  color: var(--deep-charcoal);
  box-shadow: 0 12px 0 var(--accent-coral), 0 0 0 8px rgba(255,248,240,0.74), 0 0 24px rgba(255,107,53,0.3);
  overflow: hidden;
}
.card-face svg { width: 62px; height: 62px; grid-area: 1 / 1; }
.card-face path,
.card-face circle { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.card-face span { grid-area: 1 / 1; align-self: end; margin-bottom: 7px; font-family: "Caveat", cursive; font-size: 1.2rem; font-weight: 700; color: var(--secondary-violet); }
.card-back { transform: rotateY(180deg); background: var(--secondary-violet); color: var(--warm-white); border-color: var(--warm-white); box-shadow: 0 12px 0 var(--primary-orange), 0 0 0 8px rgba(123,45,142,0.18), 0 0 24px rgba(123,45,142,0.45); }
.card-back span { color: var(--warm-white); }

.content-panel {
  position: relative;
  padding: 1.35rem 1.55rem 1.5rem;
  background: rgba(255,248,240,0.94);
  border: 3px solid var(--accent-coral);
  border-radius: 28px 10px 34px 14px;
  box-shadow: 14px 14px 0 rgba(45,27,78,0.13);
  filter: url(#paper-grain);
}
.content-panel::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px dashed rgba(26,26,46,0.18);
  border-radius: inherit;
  pointer-events: none;
}
.content-panel h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2.25rem, 4vw, 4rem);
  line-height: 0.93;
  letter-spacing: -0.02em;
  margin: 0.1rem 0 1rem;
  color: var(--deep-charcoal);
}
.content-panel p { margin: 0 0 0.8rem; }
.margin-note { color: var(--secondary-violet); font-size: 1.45rem; line-height: 1; margin: 0; transform: rotate(-3deg); }
.percentage { color: var(--primary-orange); font-size: 2.2rem; margin: 0.3rem 0 0; }
.glassy { border-color: rgba(0,180,166,0.55); box-shadow: -12px 12px 0 rgba(0,180,166,0.15); }
.kraft { background: #FFF1DE; border-color: var(--primary-orange); }
.plasticized { border-color: var(--secondary-violet); box-shadow: 12px 12px 0 rgba(123,45,142,0.18); }
.shadowed { background: #FFF8F0; box-shadow: -14px 14px 0 var(--shadow-indigo); }
.composite { border-style: dashed; }
.final-card { background: var(--deep-charcoal); color: var(--warm-white); border-color: var(--primary-orange); box-shadow: 16px 16px 0 var(--secondary-violet); }
.final-card h2, .final-card p { color: var(--warm-white); }

.wave-divider {
  position: relative;
  width: 100vw;
  height: 120px;
  margin: -3rem 0 4rem 50%;
  transform: translateX(-50%);
  z-index: 5;
}
.wave-divider svg { width: 100%; height: 100%; overflow: visible; }
.wave-path { fill: none; stroke-linecap: round; opacity: 0; filter: drop-shadow(0 6px 0 rgba(45,27,78,0.09)); }
.wave-divider.active .wave-path { opacity: 1; }

.takeover-panel {
  position: relative;
  min-height: 100vh;
  width: 100vw;
  margin: 0 0 9rem 50%;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  overflow: hidden;
  clip-path: circle(0 at 30% 50%);
  transition: clip-path 0.8s ease-out;
  z-index: 2;
}
.takeover-panel.visible { clip-path: circle(150% at 30% 50%); }
.metal-panel { background: linear-gradient(135deg, var(--secondary-violet), #2D1B4E); }
.paper-panel { background: linear-gradient(135deg, var(--tertiary-teal), #08766f); }
.plastic-panel { background: linear-gradient(135deg, var(--accent-coral), var(--primary-orange)); }
.takeover-panel::after { opacity: 0.55; }
.takeover-content {
  position: relative;
  z-index: 2;
  width: min(760px, calc(100vw - 44px));
  text-align: center;
  color: var(--warm-white);
}
.takeover-content > * { opacity: 0; transform: translateY(24px); transition: opacity 0.55s ease, transform 0.55s ease; }
.takeover-panel.visible .margin-note { transition-delay: 0.1s; }
.takeover-panel.visible h2 { transition-delay: 0.2s; }
.takeover-panel.visible .big-illustration { transition-delay: 0.4s; }
.takeover-panel.visible p:last-child { transition-delay: 0.6s; }
.takeover-panel.visible .takeover-content > * { opacity: 1; transform: translateY(0); }
.takeover-content h2 {
  margin: 0 0 1rem;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(4rem, 10vw, 8rem);
  line-height: 0.82;
  letter-spacing: -0.04em;
  color: var(--warm-white);
}
.takeover-content p:last-child { font-size: 1.25rem; margin: 1rem auto 0; max-width: 620px; color: var(--warm-white); }
.dark-copy, .dark-copy h2, .dark-copy p:last-child { color: var(--deep-charcoal); }
.big-illustration { width: min(470px, 85vw); margin: 1rem auto; display: block; }
.big-illustration path, .big-illustration circle { fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.big-illustration .hot { stroke: var(--primary-orange); }
.big-illustration .coral { stroke: var(--accent-coral); }
.big-illustration .teal { stroke: var(--tertiary-teal); }
.big-illustration .steam { stroke: var(--warm-white); opacity: 0.75; }

.void {
  min-height: 66vh;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  padding: 5rem 1.5rem;
  background:
    linear-gradient(180deg, #1A1A2E, #2D1B4E),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M0 8L8 0' stroke='%23FFF8F0' stroke-opacity='.06'/%3E%3C/svg%3E");
}
.void h2 { font-size: clamp(3.4rem, 13vw, 12rem); color: var(--primary-orange); }

@media (max-width: 900px) {
  .spine-track { left: 42px; }
  .timeline-node { grid-template-columns: 84px 1fr; width: calc(100vw - 28px); margin-left: 14px; }
  .timeline-node.left .node-anchor, .timeline-node.right .node-anchor { grid-column: 1; }
  .timeline-node.left .content-panel, .timeline-node.right .content-panel { grid-column: 2; justify-self: stretch; text-align: left; max-width: none; }
  .card-flip-container { width: 82px; height: 82px; }
  .card-face svg { width: 48px; height: 48px; }
  .card-face span { font-size: 1rem; }
  .takeover-panel, .takeover-panel.visible { clip-path: circle(160% at 42px 50%); }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .opening h1 { font-size: 3.8rem; }
  .opening-copy { top: 58%; }
  .timeline-shell { padding-top: 5rem; }
  .timeline-node { grid-template-columns: 62px 1fr; gap: 0; width: calc(100vw - 18px); margin-left: 9px; }
  .spine-track { left: 32px; }
  .card-flip-container { width: 60px; height: 60px; }
  .card-face { border-width: 2px; box-shadow: 0 7px 0 var(--accent-coral), 0 0 0 4px rgba(255,248,240,0.7); }
  .card-face svg { width: 36px; height: 36px; }
  .card-face span { display: none; }
  .content-panel { padding: 1rem; border-radius: 18px 8px 22px 10px; }
  .content-panel h2 { font-size: 2rem; }
  .takeover-content h2 { font-size: 3.2rem; }
}