:root {
  --bg-dark: #0b1120;
  --bg-horizon: #1e293b;

  --bg-panel: rgba(15, 23, 42, 0.8);
  --bg-panel-soft: rgba(15, 23, 42, 0.72);

  --accent: #4f8df5;
  --accent-soft: #7ac9ff;
  --us-color: #f5c04f;
  --other-color: #4f8df5;

  --text-main: #f9fafb;
  --text-muted: #9aa4c6;

  --border-subtle: rgba(148, 163, 255, 0.36);
  --radius-lg: 26px;
  --shadow-soft: 0 32px 80px rgba(15, 23, 42, 0.75);

  --font-main: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Roboto", "Segoe UI", sans-serif;
}

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

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  font-family: var(--font-main);
  background:
    radial-gradient(circle at 0% -10%, #1f2937 0, transparent 45%),
    radial-gradient(circle at 100% -5%, #111827 0, transparent 45%),
    linear-gradient(to bottom, var(--bg-dark), var(--bg-horizon) 65%);
  color: var(--text-main);
}
/* -------------------------------------------------------------------
   2. SLIDE SYSTEM
   ------------------------------------------------------------------- */

.slides {
  height: 100vh;
  width: 100vw;
  position: relative;
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s ease;
}

.slide.active {
  opacity: 1;
  pointer-events: auto;
}

/* Shared inner container for viz slides */
.slide-viz .slide-inner {
  width: min(1200px, 92vw);
  margin: 0 auto;
  padding: 32px 40px 28px;
  background: var(--bg-panel);
  border-radius: 24px;
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(226, 232, 240, 0.9);
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* Generic text slides: center column */
.slide-text .centered-text {
  width: min(780px, 85vw);
  margin: 0 auto;
  background: var(--bg-panel);
  border-radius: 24px;
  padding: 32px 40px;
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(226, 232, 240, 0.95);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* -------------------------------------------------------------------
   3. HERO / INTRO SLIDE
   ------------------------------------------------------------------- */

.slide-intro .intro-content {
  position: absolute;
  inset: 0;
  width: min(1150px, 92vw);
  margin: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.8fr);
  align-items: center;
  gap: 48px;
}

/* Hero title block */
.slide-intro h1 {
  margin: 0 0 12px;
  font-size: clamp(3.4rem, 7vw, 4.8rem);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 800;
  line-height: 0.95;
  color: #1f2937;
  position: relative;
}

/* “Architectural” letterfill: gradient clipped to text */
.slide-intro h1 span {
  display: inline-block;
  background-image:
    linear-gradient(120deg, #1d4ed8 0%, #0ea5e9 40%, #38bdf8 50%, #1f2937 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Subtitle next to the huge word */
.slide-intro h2 {
  margin: 10px 0 18px;
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--text-main);;
  max-width: 32rem;
}

/* Intro paragraph */
.slide-intro p {
  margin: 0 0 0.75rem;
  color: var(--text-main);;
}

/* Right column: slim vertical accent + hint */
.slide-intro .intro-content::before {
  content: "";
  position: absolute;
  right: 0;
  top: 8%;
  width: 2px;
  height: 90%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.545),
    rgba(148, 163, 184, 0.04)
  );
}

/* Keyboard hint */
.intro-hint {
  margin-top: 18px;
  font-size: 0.9rem;
  color: var(--text-soft);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.keycap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.9rem;
  padding: 3px 10px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #000000;
  box-shadow: 0 2px 0 #e5e7eb;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-main);
}

/* Primary CTA button used on text slides */
.primary-link-btn {
  display: inline-flex;
  align-items: center;
  margin-top: 1.6rem;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--accent-main);
  background: #ffffff;
  color: var(--accent-main);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: background 0.18s ease, transform 0.15s ease,
    box-shadow 0.18s ease, color 0.18s ease;
}

.primary-link-btn::after {
  content: "↗";
  margin-left: 6px;
  font-size: 0.85em;
}

.primary-link-btn:hover {
  background: var(--accent-main);
  color: #f9fafb;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.35);
}

/* -------------------------------------------------------------------
   4. TYPOGRAPHY BASICS
   ------------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--font-main);
  font-weight: 600;
  color: var(--text-main);
}

h2 {
  font-size: 1.85rem;
  margin: 0 0 6px;
}

h3 {
  font-size: 1.2rem;
  margin: 0 0 4px;
}

p {
  margin: 0 0 0.75rem;
  font-size: 0.98rem;
}

ul {
  margin: 0.6rem 0 0.6rem 1.25rem;
  padding: 0;
}

li {
  margin-bottom: 0.35rem;
}

/* Subtitle text used in many cards */
.subtitle {
  margin: 0 0 6px;
  font-size: 0.9rem;
  color: var(--text-main);;
}

/* Slide-specific title on final slide */
.slide-title {
  font-size: 2rem;
  margin-bottom: 1.25rem;
  text-align: left;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Callout text on final slide */
.callout-text {
  margin-top: 1.5rem;
  font-size: 1.05rem;
  font-weight: 500;
  color: white;
}

/* -------------------------------------------------------------------
   5. GLOBAL CONTROLS & BUTTONS
   ------------------------------------------------------------------- */

/* Write-up link in top right */
.top-right-container {
  position: fixed;
  top: 18px;
  right: 22px;
  z-index: 40;
}

.top-right-btn {
  border-radius: var(--radius-pill);
  background: #000000;
  border: 1px solid rgba(148, 163, 184, 0.8);
  padding: 7px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-main);
  text-decoration: none;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: var(--shadow-subtle);
  transition: background 0.16s ease, border-color 0.16s ease,
    box-shadow 0.18s ease, transform 0.1s ease;
}

.top-right-btn:hover {
  background: #111827;
  color: #f9fafb;
  border-color: var(--text-main);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.28);
}

/* Navigation arrows */
.nav-arrow {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(148, 163, 184, 0.8);
  background: rgba(255, 255, 255, 0.9);
  color: var(--text-main);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 30;
  font-size: 24px;
  box-shadow: var(--shadow-subtle);
  transition: background 0.15s ease, transform 0.1s ease,
    box-shadow 0.18s ease, border-color 0.15s ease;
}

.nav-arrow-left {
  left: 20px;
  background: #111827;
  color: #f9fafb;
  border-color: var(--text-main);
  transform: translateY(-50%) translateY(-1px);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.35);
}

.nav-arrow-right {
  right: 20px;
  background: #111827;
  color: #f9fafb;
  border-color: var(--text-main);
  transform: translateY(-50%) translateY(-1px);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.35);
}

.nav-arrow:hover {
  background: white;
  color: black;
  border-color: black;
  transform: translateY(-50%) translateY(-1px);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.35);
}

/* Pager dots at bottom center */
.pager {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 30;
}

.pager-dot {
  width: 9px;
  height: 9px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(148, 163, 184, 0.7);
  background: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.12s ease,
    border-color 0.15s ease;
}

.pager-dot.active {
  background: var(--accent-main);
  border-color: var(--accent-main);
  transform: scale(1.15);
}

/* -------------------------------------------------------------------
   6. FORM CONTROLS (DROPDOWNS, SLIDERS, ETC.)
   ------------------------------------------------------------------- */

.control-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px 26px;
  align-items: end;
}

.control {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.control label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-main);;
}

.control select,
.control input[type="range"] {
  font-size: 0.9rem;
}

/* Pill-style select */
.control select,
.yearly-controls-row select,
#projectionModelSelect,
#emitterYear {
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle);
  background: #ffffff;
  color: var(--text-main);
  padding: 7px 15px;
  font-size: 0.9rem;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #9ca3af 50%),
    linear-gradient(135deg, #9ca3af 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 14px) center,
    calc(100% - 9px) center,
    100% 0;
  background-size: 6px 6px, 6px 6px, 2.5em 100%;
  background-repeat: no-repeat;
  box-shadow: 0 2px 3px rgba(15, 23, 42, 0.03);
}

.control select:focus,
.yearly-controls-row select:focus,
#projectionModelSelect:focus,
#emitterYear:focus {
  outline: none;
  border-color: var(--accent-main);
  box-shadow:
    0 0 0 1px rgba(37, 99, 235, 0.45),
    0 8px 18px rgba(15, 23, 42, 0.12);
}

/* Range sliders */
.control input[type="range"],
#yearSlider,
#projectionYearSlider {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: var(--radius-pill);
  background: linear-gradient(
    90deg,
    rgb(0, 0, 0),
    rgb(0, 0, 0)
  );
  border: 1px solid rgba(148, 163, 184, 0.8);
  cursor: pointer;
}

.control input[type="range"]::-webkit-slider-thumb,
#yearSlider::-webkit-slider-thumb,
#projectionYearSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid var(--accent-main);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.45);
  margin-top: -7px;
}

.control input[type="range"]::-moz-range-thumb,
#yearSlider::-moz-range-thumb,
#projectionYearSlider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid var(--accent-main);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.45);
}

/* Specialized year slider layout (slide 3) */
.slider-with-play {
  display: flex;
  align-items: center;
  gap: 10px;
}

#yearSlider {
  flex: 1;
}

#yearLabel {
  font-weight: 600;
  font-size: 0.85rem;
  color: #1f2937;
}

/* Play button */
.play-btn {
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(148, 163, 184, 0.9);
  background: #ffffff;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-main);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 4px 9px rgba(15, 23, 42, 0.12);
  transition: background 0.15s ease, color 0.15s ease,
    box-shadow 0.18s ease, transform 0.1s ease, border-color 0.15s ease;
}

.play-btn:hover {
  background: #111827;
  color: #f9fafb;
  border-color: var(--text-main);
  transform: translateY(-1px);
}

.play-btn.playing {
  background: var(--accent-main);
  border-color: var(--accent-main);
  color: #f9fafb;
}

/* -------------------------------------------------------------------
   7. VIZ CARD & PANEL STRUCTURE
   ------------------------------------------------------------------- */

/* Many slides use a .viz-row wrapper */
.viz-row {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.05fr);
  gap: 20px;
}



/* Notes below charts */
.milestone-note,
.season-note,
.timeline-note,
.yearly-tip,
.slide-footnote,
.chart-hint {
  font-size: 0.78rem;
  color: var(--text-main);;
}

/* Footnote at bottom of slide 3 */
.slide-footnote {
  margin-top: 8px;
  text-align: right;
}


/* -------------------------------------------------------------------
   9. SEASON SNAPSHOT (SLIDE 3)
   ------------------------------------------------------------------- */

#seasonMapContainer {
  flex: 1;
  min-height: 280px;
  position: relative;
}

#seasonMapSvg {
  width: 100%;
  height: 100%;
}



/* Yearly seasonal chart */
#seasonBarContainer {
  flex: 1;
  min-height: 280px;
  position: relative;
}

#seasonBarSvg {
  width: 100%;
  height: 100%;
}

/* Glowing year tracker dot overlay */
.year-tracker {
  position: absolute;
  pointer-events: none;
  z-index: 10;
  display: none;
}

.year-tracker .tracker-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent-main);
  border: 2px solid #ffffff;
  box-shadow:
    0 0 0 4px rgba(37, 99, 235, 0.3),
    0 0 0 9px rgba(37, 99, 235, 0.12);
}

.year-tracker .tracker-label {
  margin-top: 3px;
  font-size: 0.75rem;
  color: var(--text-main);
}

/* Legend for U.S. + state lines */
.season-legend {
  display: flex;
  gap: 14px;
  margin-top: 8px;
  font-size: 0.82rem;
  align-items: center;
  flex-wrap: wrap;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.legend-color {
  width: 14px;
  height: 14px;
  border-radius: 4px;
}

.legend-color.us {
  background-color: #f97316;
}

.legend-color.state {
  background-color: #0ea5e9;
}

/* -------------------------------------------------------------------
   10. YEARLY TRENDS (SLIDE 4)
   ------------------------------------------------------------------- */

.yearly-stack {
  display: grid;
  grid-template-rows: minmax(280px, auto) minmax(170px, auto);
  gap: 16px;
}

.yearly-chart-card {
  position: relative;
  padding-top: 18px;
}

/* Thin color bar at top of chart card */
.yearly-chart-card::before {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: 0;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    #f97316 0%,
    #0ea5e9 40%,
    #22c55e 80%
  );
}

.yearly-controls-row {
  display: flex;
  justify-content: flex-start;
  gap: 24px;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.9);
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.yearly-controls-row .control-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.78rem;
  color: var(--text-main);;
}

.yearly-trend-container {
  width: 100%;
  height: 260px;
}

#yearlyTrendSvg {
  width: 100%;
  height: 100%;
}

/* Lines */
.yearly-line-us {
  fill: none;
  stroke: #f97316;
  stroke-width: 2.2;
}

.yearly-line-state {
  fill: none;
  stroke: #0ea5e9;
  stroke-width: 2.2;
}

.yearly-point-us {
  fill: #f97316;
}

.yearly-point-state {
  fill: #0ea5e9;
}

/* Milestone lines */
.yearly-milestone-line {
  stroke: #6b7280;
  stroke-dasharray: 4 4;
  opacity: 0.8;
}

.yearly-milestone-label {
  fill: #000000;
  font-size: 0.7rem;
  text-anchor: middle;
}

/* Legend */
#yearlyLegend {
  margin-top: 6px;
  font-size: 0.82rem;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

/* Explanation card */
.yearly-expl-card p {
  font-size: 0.94rem;
  color: #374151;
}



/* -------------------------------------------------------------------
   13. TEXT-ONLY SLIDES (BACKGROUND + FUTURE + TAKEAWAYS)
   ------------------------------------------------------------------- */

.typewriter {
  font-size: 1.02rem;
  line-height: 1.7;
}

/* Background bullet lists on slides 1 & 5: initially hidden for typing effect */
.background-bullets {
  margin-top: 0.8rem;
}

.background-bullets li {
  visibility: hidden;
}

/* Final key-takeaways slide */
.normal-bullets-wrapper {
  width: 100%;
  margin: 0.4rem 0 0;
}

.normal-bullets {
  list-style-position: inside;
}

.normal-bullets li {
  visibility: visible;
}

/* -------------------------------------------------------------------
   14. TOOLTIP & STATE HOVER STATS
   ------------------------------------------------------------------- */

.tooltip {
  position: fixed;
  pointer-events: none;
  background: #111827;
  color: #f9fafb;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.78rem;
  border: 1px solid #4b5563;
  z-index: 50;
}

/* State hover stats box for map */
.state-hover-stats {
  position: fixed;
  pointer-events: none;
  background: #111827;
  color: #f9fafb;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.9);
  font-size: 0.83rem;
  z-index: 60;
  max-width: 220px;
  opacity: 0;
  transition: opacity 0.18s ease;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.35);
}

.state-hover-stats.active {
  opacity: 1;
}

.state-hover-stats h4 {
  margin: 0 0 4px;
  font-size: 0.86rem;
  color: #e5e7eb;
}

.state-hover-stats p {
  margin: 1px 0;
  font-size: 0.78rem;
}

/* -------------------------------------------------------------------
   15. SVG TEXT & AXES (GENERAL)
   ------------------------------------------------------------------- */

svg text {
  fill: #111827;
  font-family: var(--font-main);
}

.axis-label {
  font-size: 11px;
  fill: #4b5563;
}

/* -------------------------------------------------------------------
   16. RESPONSIVE TWEAKS
   ------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .slide-intro .intro-content {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .slide-intro .intro-content::before {
    display: none;
  }

  .slide-intro h1 {
    font-size: clamp(2.8rem, 10vw, 3.6rem);
  }

  .slide-viz .slide-inner {
    padding: 26px 22px 24px;
  }

  .nav-arrow-left {
    left: 12px;
  }

  .nav-arrow-right {
    right: 12px;
  }
}

@media (max-width: 640px) {
  .slide-text .centered-text {
    width: 90vw;
    padding: 22px 20px;
  }

  .slide-viz .slide-inner {
    width: 94vw;
  }

  .top-right-btn {
    display: none; /* declutter on very small screens */
  }

  .control-row {
    grid-template-columns: 1fr;
  }

  .card-header-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  #sectorBreakdownChart {
    height: 340px !important;
  }
}

/* =========================================
   TITLE SLIDE – FULL-WIDTH HERO TITLE
   ========================================= */

/* Center the intro block and stack content vertically */
.slide-intro .intro-content {
  position: absolute;
  top: 46%;                     /* move everything slightly up */
  left: 50%;
  transform: translate(-50%, -46%);
  width: min(1200px, 100% - 120px);
  padding: 2.25rem 4vw;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;                 /* tighter gap between pieces */
}

/* BIG image-filled title text */
.slide-intro h1 {
  margin: 0;
  width: 100%;
  font-size: clamp(5.2rem, 12vw, 8rem);   /* huge title */
  line-height: 0.9;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  max-width: 18ch;
  word-break: normal;

  /* IMAGE INSIDE TEXT – only the hero image, no gradient */
  /* background-image: url("assets/paris-hero-text.jpg"); make sure name matches your file */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;

  /* remove the dark “fog” */
  text-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
}

/* Fallback if background-clip:text isn’t supported */
@supports not (-webkit-background-clip: text) {
  .slide-intro h1 {
    background-image: none;
    color: var(--text-main);
    -webkit-text-fill-color: var(--text-main);
    text-shadow: none;
  }
}

/* Subtitle + main question – BELOW the title */
.slide-intro h2 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;           /* make subtitle bold */
}

.slide-intro p:not(.intro-hint):not(.intro-continue) {
  margin: 0;
  max-width: 40rem;
}

/* “As satellites record …” blurb */
.slide-intro .intro-hint {
  margin-top: 1.75rem;
  max-width: 46rem;
}

/* “Press Enter or → to continue” */
.slide-intro .intro-continue {
  margin-top: 1rem;           /* closer to the blurb */
  font-size: 0.95rem;         /* a bit bigger */
  font-weight: 600;           /* bold */
}

.slide-intro .intro-continue .key {
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.9);
}

/* --------- Responsive tweaks --------- */
@media (max-width: 900px) {
  .slide-intro .intro-content {
    width: min(700px, 100% - 48px);
    padding: 2rem 1.75rem;
    gap: 1.1rem;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .slide-intro h1 {
    font-size: clamp(3.4rem, 11vw, 4.6rem);
    max-width: 100%;
  }

  .slide-intro .intro-hint {
    margin-top: 1.5rem;
  }
}

html,
body {
  height: 100%;
  overflow-y: hidden;   /* no vertical scroll */
}

#app {
  min-height: 100vh;
  overflow-y: hidden;   /* override the old auto scroll */
}

/* Override intro layout so it sits higher and fits without scroll */
.slide-intro .intro-content {
  top: 42%;                          /* was 46% */
  transform: translate(-50%, -42%);  /* match the new top */
  padding: 1.75rem 4vw;              /* a bit less padding top/bottom */
  gap: 1rem;                         /* slightly tighter vertical spacing */
}

/* Tighten the spacing under the title text */
.slide-intro .intro-hint {
  margin-top: 1.25rem;               /* was 1.75rem */
}

.slide-intro .intro-continue {
  margin-top: 0.6rem;                /* was 1rem */
}


/* BIG title text – solid black, chunky */
.slide-intro h1 {
  margin: 0;
  width: 100%;
  font-size: clamp(5.2rem, 12vw, 8rem);   /* huge title */
  line-height: 0.9;
  letter-spacing: 0.06em;                 /* closer together (was 0.14em) */
  text-transform: uppercase;
  max-width: 18ch;
  word-break: normal;

  /* no image inside text anymore */
  background-image: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* turn OFF clipping and transparency */
  -webkit-background-clip: initial;
  background-clip: initial;
  color: var(--text-main);                         /* solid dark text */
  -webkit-text-fill-color: #000000;

  font-weight: 800;                       /* chunkier look */
  text-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
}

/* BIG title text – chunky with image background */
.slide-intro h1 {
  margin: 0;
  width: 100%;
  font-size: clamp(5.2rem, 30vw, 8rem);   /* huge title */
  line-height: 0.9;
  letter-spacing: 0.06em;                 /* closer together */
  text-transform: uppercase;
  max-width: 18ch;
  word-break: normal;

  /* IMAGE INSIDE TEXT */
  background-image: url("assets/paris-hero-text.jpg"); /* make sure name matches */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;

  font-weight: 1000;                       /* chunkier look */
  text-shadow: none;
  filter: none;
  opacity: 1;
}
/* BIG title text – chunky with image background */
.slide-intro h1 {
  margin: 0;
  width: 100%;
  font-size: clamp(6rem, 14vw, 9rem);   /* ⬅︎ bigger: higher min & max */
  line-height: 0.9;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  max-width: 18ch;
  word-break: normal;

  /* IMAGE INSIDE TEXT */
  background-image: url("assets/paris-hero-text.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;

  font-weight: 1000;
  text-shadow: none;
  filter: none;
  opacity: 1;
}



/* =========================================
   SLIDE 1 – TEXT DIRECTLY ON BACKGROUND
   (no white container, sleek like title)
   ========================================= */

.slide[data-slide-index="1"] .centered-text {
  /* remove card look */
  background: none;
  border: none;
  box-shadow: none;

  /* slimmer layout similar to title column */
  width: min(780px, 100% - 120px);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  text-align: left;

  /* keep it visually centered on the slide */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* kill the top accent bar from earlier */
.slide[data-slide-index="1"] .centered-text::before {
  content: none;
}

/* main paragraph text */
.slide[data-slide-index="1"] .typewriter {
  margin-top: 0;
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--text-main);
}

/* bullets – simple, clean */
.slide[data-slide-index="1"] .background-bullets {
  margin-top: 0.4rem;
  padding-left: 1.1rem;  /* use normal bullet indent */
}

.slide[data-slide-index="1"] .background-bullets li {
  margin-bottom: 0.35rem;
  font-size: 0.96rem;
  color: #374151;
}

/* UN link button aligned with text */
.slide[data-slide-index="1"] .primary-link-btn {
  margin-top: 1.1rem;
  align-self: flex-start;
}



/* Typewriter intro line – subtle accent bar + fade-up */
.slide-text.type-slide[data-slide-index="1"] .typewriter {
  position: relative;
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.7;
  margin-bottom: 1.1rem;
  opacity: 0;
  transform: translateY(10px);
}

.slide-text.type-slide[data-slide-index="1"] .typewriter::before {
  content: "";
  position: absolute;
  left: -1.75rem;
  top: 0.45rem;
  width: 6px;
  height: 1.9rem;
  border-radius: 999px;
  /* neutral grey bar instead of blue/green */
  background: linear-gradient(180deg, #ffffff, #ffffff);
}

/* Bullets – clean, custom dots + staggered animation */
.slide-text.type-slide[data-slide-index="1"] .background-bullets {
  margin-top: 0.5rem;
  padding-left: 0;
  list-style: none;
}

.slide-text.type-slide[data-slide-index="1"] .background-bullets li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.4rem;
  opacity: 0;
  transform: translateY(6px);
}

.slide-text.type-slide[data-slide-index="1"] .background-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: #ffffff; /* grey dot */
  box-shadow: 0 0 0 6px rgba(15, 23, 42, 0.06); /* soft grey halo */
}

/* Button – slide in after bullets */
.slide-text.type-slide[data-slide-index="1"] .primary-link-btn {
  margin-top: 1.4rem;
  opacity: 0;
  transform: translateY(10px);
}

/* Trigger animations only when this slide is active */
.slide-text.type-slide[data-slide-index="1"].active .typewriter {
  animation: slide1-fade-up 0.55s ease-out forwards;
}

.slide-text.type-slide[data-slide-index="1"].active .background-bullets li {
  animation: slide1-bullet-in 0.45s ease-out forwards;
}

/* Stagger bullet timings */
.slide-text.type-slide[data-slide-index="1"].active .background-bullets li:nth-child(1) { animation-delay: 0.15s; }
.slide-text.type-slide[data-slide-index="1"].active .background-bullets li:nth-child(2) { animation-delay: 0.22s; }
.slide-text.type-slide[data-slide-index="1"].active .background-bullets li:nth-child(3) { animation-delay: 0.29s; }
.slide-text.type-slide[data-slide-index="1"].active .background-bullets li:nth-child(4) { animation-delay: 0.36s; }
.slide-text.type-slide[data-slide-index="1"].active .background-bullets li:nth-child(5) { animation-delay: 0.43s; }
.slide-text.type-slide[data-slide-index="1"].active .background-bullets li:nth-child(6) { animation-delay: 0.50s; }

/* Button comes in last */
.slide-text.type-slide[data-slide-index="1"].active .primary-link-btn {
  animation: slide1-fade-up 0.55s ease-out forwards;
  animation-delay: 0.65s;
}

/* Monochrome button styling just for this slide */
.slide-text.type-slide[data-slide-index="1"] .primary-link-btn {
  border-color: var(--text-main);
  color: var(--text-main);
  background: transparent;
}

.slide-text.type-slide[data-slide-index="1"] .primary-link-btn:hover {
  background: #111827;
  color: #f9fafb;
}

/* Keyframes (unchanged) */
@keyframes slide1-fade-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide1-bullet-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================
   SLIDE 1 – TYPOGRAPHY + SIZE TWEAKS
   ========================================= */

/* Make the whole text block feel more substantial */
.slide-text.type-slide[data-slide-index="1"] .centered-text {
  max-width: 54rem;          /* wider column */
  font-size: 1.05rem;        /* base size for bullets */
  line-height: 1.85;         /* more airy + readable */
}

/* Intro sentence: larger + slightly bolder */
.slide-text.type-slide[data-slide-index="1"] .typewriter {
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Bullets: a bit bigger + more spacing */
.slide-text.type-slide[data-slide-index="1"] .background-bullets li {
  font-size: 1.08rem;
  margin-bottom: 0.55rem;
}

/* Button: more presence, still monochrome + rounded */
.slide-text.type-slide[data-slide-index="1"] .primary-link-btn {
  padding: 0.7rem 1.8rem;
  font-size: 0.95rem;
  border-radius: 999px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-width: 1.5px;
}

/* Slightly darker accent bar to anchor the text */
.slide-text.type-slide[data-slide-index="1"] .typewriter::before {
  background: linear-gradient(180deg, #ffffff, #ffffff);
}

/* Bullet dots a little stronger so they read as a design element */
.slide-text.type-slide[data-slide-index="1"] .background-bullets li::before {
  background: #fafafa;
  box-shadow: 0 0 0 7px rgba(15, 23, 42, 0.07);
}

/* =========================================
   TITLE SLIDE – place "Press Enter..." on right
   ========================================= */

@media (min-width: 900px) {
  /* Turn the intro content into a grid */
  .slide-intro .intro-content {
    display: grid;
    grid-template-columns: minmax(0, 2.6fr) auto;  /* left text, right hint */
    grid-auto-rows: auto;
    column-gap: 3rem;
    row-gap: 0.9rem;
    align-items: flex-start;
  }

  /* Title still spans full width */
  .slide-intro h1 {
    grid-column: 1 / -1;
  }

  /* Subtitle on the left */
  .slide-intro h2 {
    grid-column: 1;
  }

  /* Main description paragraph on the left */
  .slide-intro .intro-content > p:not(.intro-hint) {
    grid-column: 1;
    max-width: 40rem;
  }

  /* "Press Enter or → to continue" on the right */
.slide-intro .intro-hint {
  grid-column: 2;
  grid-row: 2 / 4;           /* still beside h2 + paragraph */

  /* move it a bit lower */
  margin-top: 4rem;        /* was 0 */

  width: max-content;
  white-space: nowrap;       /* keep it in one compact line */

  /* make it larger + bolder */
  font-size: 1.2rem;        /* slightly bigger */
  font-weight: 500;          /* bold-ish */
  letter-spacing: 0.06em;    /* small tracking so it feels intentional */
  text-transform: uppercase; /* matches the rest of your UI */
}

/* ======================================================
   SLIDE 3 – HOW DO U.S. SEASONS LOOK FROM SPACE?
   Modern, techy styling + clean containers
   ====================================================== */

#seasonSlide {
  position: relative;
  color: var(--text-main);
  font-family: var(--font-main);
}



/* main content container for the slide */
#seasonSlide .slide-inner {
  position: relative;
  max-width: 1200px;
  width: 94vw;
  margin: 28px auto 24px;
  z-index: 1;               /* above the glow */
  background: transparent;
  box-shadow: none;
  border: none;
  border-radius: 0;
}

/* ------------------------------
   Title + subtitle
   ------------------------------ */

#seasonSlide .slide-header h2 {
  font-size: clamp(3rem, 4vw, 3.8rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 1.1;
  margin: 0 0 0.8rem;
  text-align: left;

  /* photo texture inside text */
  background-image: url("assets/paris-hero-text.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

#seasonSlide .slide-header p {
  font-size: 1.05rem;
  line-height: 1.9;
  color: var(--text-main);;
  text-align: left;
  margin: 0 0 1.2rem;
}

/* ------------------------------
   Controls row (variable / month / year)
   ------------------------------ */

#seasonSlide .control-row.season-controls {
  width: 100%;
  margin: 0 0 1.1rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

#seasonSlide .control label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-main);
  display: block;
  margin-bottom: 0.35rem;
}

#seasonSlide .control select {
  width: 100%;
  padding: 0.45rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 255, 0.35);
  background: rgba(15, 23, 42, 0.96);
  color: var(--text-main);
  font-size: 0.8rem;
  font-weight: 500;
}

/* year slider + play button container */
#seasonSlide .slider-with-play {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* "CHART YEAR: 2018" value */
#seasonSlide #yearLabel {
  font-weight: 800;
  color: var(--text-main);
  font-size: 0.85rem;
  min-width: 40px;
}

/* slider track + thumb */
#seasonSlide #yearSlider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: #cec7c7;
  border-radius: 999px;
  border: 1px solid #000000;
}

#seasonSlide #yearSlider::-webkit-slider-runnable-track {
  height: 6px;
  background: transparent;
}
#seasonSlide #yearSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #000;
  border: 2px solid #ffffff;
  margin-top: -7px;
}
#seasonSlide #yearSlider::-moz-range-track {
  height: 6px;
  background: transparent;
}
#seasonSlide #yearSlider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #000;
  border: 2px solid #ffffff;
}

/* play / pause pill */
#seasonSlide .play-btn {
  padding: 6px 16px;
  background: #ffffff;
  color: #111827;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.1s ease,
    box-shadow 0.15s ease;
}

#seasonSlide .play-btn:hover {
  background: #f9fafb;
  border-color: var(--text-main);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.25);
}

#seasonSlide .play-btn.playing {
  background: #111827;
  color: #f9fafb;
  border-color: var(--text-main);
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.3);
}

/* ------------------------------
   Map + line chart row
   ------------------------------ */

#seasonSlide .season-layout,
#seasonSlide .season-viz-row {           /* support either class name */
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
  column-gap: 2.25rem;
  align-items: flex-start;
  margin: 1.1rem 0 2.2rem;
}




/* map & chart titles + subtitles */
#seasonSlide .season-layout h3,
#seasonSlide .season-viz-row h3 {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-main);
  margin: 0 0 0.4rem;
}

#seasonSlide .season-layout p.subtitle,
#seasonSlide .season-viz-row p.subtitle {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--text-main);;   /* was black; use muted on dark card */
  margin: 0 0 0.9rem;
}

/* SVG containers */
#seasonMapContainer,
#seasonBarContainer {
  width: 100%;
  height: 320px;
  position: relative; /* for tracker overlay */
}

/* footnote at bottom */
#seasonSlide .season-footnote {
  max-width: 1200px;
  margin: 0 auto;
  font-size: 0.78rem;
  color: var(--text-main);;
  text-align: center;
}

/* ------------------------------
   Map legend pills
   ------------------------------ */

#seasonSlide #seasonMapLegend {
  margin-top: 0.75rem;
  font-size: 0.8rem;
  color: var(--text-main);
  width: fit-content;
}

#seasonSlide #seasonMapLegend .map-legend-title {
  font-weight: 500;
  margin-bottom: 0.25rem;
}

/* row of pills */
#seasonSlide #seasonMapLegend .map-legend-pills {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 1.25rem;
}

/* pill + label */
#seasonSlide #seasonMapLegend .map-legend-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
}

#seasonSlide #seasonMapLegend .map-legend-item span {
  color: var(--text-main);;
}

/* pills */
#seasonSlide #seasonMapLegend .map-pill {
  display: block;
  width: 34px;
  height: 10px;
  border-radius: 999px;
}

#seasonSlide #seasonMapLegend .map-pill-1 { background: #dff3d6; }
#seasonSlide #seasonMapLegend .map-pill-2 { background: #c6e9b9; }
#seasonSlide #seasonMapLegend .map-pill-3 { background: #9bd487; }
#seasonSlide #seasonMapLegend .map-pill-4 { background: #6bbf5b; }
#seasonSlide #seasonMapLegend .map-pill-5 { background: #429543; }
#seasonSlide #seasonMapLegend .map-pill-6 { background: #236333; }

/* ------------------------------
   Line chart tracker & milestones
   ------------------------------ */

#yearTracker {
  position: absolute;
  display: none;               /* JS shows it */
  align-items: center;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

#yearTracker .tracker-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #000;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.18);
}

#yearTracker .tracker-label {
  margin-left: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #020617;
  color: #f9fafb;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.6);
}

.yearly-milestone-line {
  stroke: #9ca3af;
  stroke-dasharray: 4 4;
  opacity: 0.9;
}

.yearly-milestone-label {
  fill: #f9fafb;           /* light on dark chart */
  font-size: 0.8rem;
  font-weight: 600;
  text-anchor: middle;
}

/* ------------------------------
   Responsive tweak
   ------------------------------ */

@media (max-width: 900px) {
  #seasonSlide .control-row.season-controls {
    grid-template-columns: 1fr;
  }

  #seasonSlide .season-layout,
  #seasonSlide .season-viz-row {
    grid-template-columns: 1fr;
    row-gap: 1.6rem;
  }
}

/* Use more width and height for this slide */
#seasonSlide .slide-inner {
  max-width: 1400px;      /* wider cards */
  width: 96vw;
  margin: 28px auto 32px;
}

/* Map + chart row now uses full width */
#seasonSlide .season-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.4fr); /* map ~43%, chart ~57% */
  column-gap: 2.5rem;
  align-items: stretch;
  margin: 1.2rem 0 2.4rem;
}

/* generic card shell (map + chart) */
#seasonSlide .season-card {
  border-radius: 20px;
  padding: 1.1rem 1.4rem 1.3rem;
  background:
    radial-gradient(circle at 0 0, rgba(148, 163, 255, 0.18), transparent 60%),
    rgba(15, 23, 42, 0.96);
  border: 1px solid rgba(148, 163, 255, 0.35);
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
}

/* controls row now lives inside the map card */
#seasonSlide .season-map-card .season-controls {
  width: 100%;
  margin: 0 0 0.9rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem 1.1rem;
}

#seasonSlide .season-map-card h3 {
  margin-top: 0.1rem;
}

/* chart header = title + (subtitle + slider) aligned in one row */
#seasonSlide .season-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.6rem;
  margin-bottom: 0.8rem;
}

/* keep chart text compact */
#seasonSlide .season-chart-header h3 {
  margin: 0 0 0.25rem;
}

#seasonSlide .season-chart-header .subtitle {
  margin: 0;
}

/* slider + play inside the chart card */
#seasonSlide .slider-with-play {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 0.25rem;
}

/* year label in the chart header */
#seasonSlide #yearLabel {
  font-weight: 700;
  color: var(--text-main);
  font-size: 0.85rem;
  min-width: 46px;
  text-align: right;
}


/* =========================================
   SLIDE 5 – REUSE SLIDE 1 LOOK
   ========================================= */

/* same centered layout + no card */
.slide[data-slide-index="5"] .centered-text {
  background: none;
  border: none;
  box-shadow: none;

  width: min(780px, 100% - 120px);
  max-width: 54rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  text-align: left;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.05rem;
  line-height: 1.85;
}



/* intro line + accent bar */
.slide-text.type-slide[data-slide-index="5"] .typewriter {
  position: relative;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.7;
  margin: 0 0 1.1rem 0;
  color: var(--text-main);

  opacity: 0;
  transform: translateY(10px);
}

.slide-text.type-slide[data-slide-index="5"] .typewriter::before {
  content: "";
  position: absolute;
  left: -1.75rem;
  top: 0.45rem;
  width: 6px;
  height: 1.9rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff, #ffffff);
}

/* bullets like slide 1 – custom dots, no default list-style */
.slide-text.type-slide[data-slide-index="5"] .background-bullets {
  margin-top: 0.5rem;
  padding-left: 0;
  list-style: none;
}

.slide-text.type-slide[data-slide-index="5"] .background-bullets li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.55rem;
  font-size: 1.08rem;
  color: #ffffff;

  opacity: 0;
  transform: translateY(6px);
}

.slide-text.type-slide[data-slide-index="5"] .background-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 0 0 7px rgba(15, 23, 42, 0.07);
}

/* button styling + animation */
.slide-text.type-slide[data-slide-index="5"] .primary-link-btn {
  margin-top: 1.4rem;
  padding: 0.7rem 1.8rem;
  font-size: 0.95rem;
  border-radius: 999px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-width: 1.5px;

  border-color: var(--text-main);
  color: var(--text-main);
  background: transparent;

  opacity: 0;
  transform: translateY(10px);
}

.slide-text.type-slide[data-slide-index="5"] .primary-link-btn:hover {
  background: #111827;
  color: #f9fafb;
}

/* use the same keyframe animations as slide 1 */
.slide-text.type-slide[data-slide-index="5"].active .typewriter {
  animation: slide1-fade-up 0.55s ease-out forwards;
}

.slide-text.type-slide[data-slide-index="5"].active .background-bullets li {
  animation: slide1-bullet-in 0.45s ease-out forwards;
}

/* staggered bullets */
.slide-text.type-slide[data-slide-index="5"].active .background-bullets li:nth-child(1) { animation-delay: 0.15s; }
.slide-text.type-slide[data-slide-index="5"].active .background-bullets li:nth-child(2) { animation-delay: 0.22s; }
.slide-text.type-slide[data-slide-index="5"].active .background-bullets li:nth-child(3) { animation-delay: 0.29s; }
.slide-text.type-slide[data-slide-index="5"].active .background-bullets li:nth-child(4) { animation-delay: 0.36s; }

/* button comes in last */
.slide-text.type-slide[data-slide-index="5"].active .primary-link-btn {
  animation: slide1-fade-up 0.55s ease-out forwards;
  animation-delay: 0.65s;
}


/* =========================================
   SLIDE 6 – PLAY AREA (EMISSIONS PROJECTION)
   ========================================= */

/* Remove the white rounded container just on this slide */
.slide-viz[data-slide-index="6"] .slide-inner {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;

  max-width: 1200px;
  width: 94vw;
  margin: 0 auto;
  padding: 3rem 0 2.5rem;

  display: flex;
  flex-direction: column;
  gap: 2.2rem;
}

/* Title: all caps with image-filled text, like other slides */
.slide-viz[data-slide-index="6"] .slide-header h2 {
  font-size: clamp(3rem, 4vw, 3.6rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 1.1;
  margin: 0 0 0.7rem;

  /* fallback solid color */
  color: var(--text-main);

  /* image in the font */
  background-image: url("assets/paris-hero-text.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Subtitle under the title */
.slide-viz[data-slide-index="6"] .slide-header .slide-subtitle {
  font-size: 1.02rem;
  line-height: 1.85;
  color: var(--text-main);;
  max-width: 100rem;
}

/* Remove card look from both left and right panels */
.slide-viz[data-slide-index="6"] .viz-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* Left card header spacing */
.slide-viz[data-slide-index="6"] .slide5-left-card .card-header-row {
  margin-bottom: 0.75rem;
}

/* Make the projection chart taller = longer y-axis */
.slide-viz[data-slide-index="6"] #projectionContainer {
  margin-top: 0.25rem;
  height: 420px;              /* taller than before */
}

.slide-viz[data-slide-index="6"] #projectionSvg {
  width: 100%;
  height: 100%;
}

/* Slightly smaller axis labels so “bins” feel finer */
.slide-viz[data-slide-index="6"] #projectionSvg .y-axis text,
.slide-viz[data-slide-index="6"] #projectionSvg .x-axis text {
  font-size: 0.8rem;
}

/* Thin, subtle grid/axis lines */
.slide-viz[data-slide-index="6"] #projectionSvg .y-axis path,
.slide-viz[data-slide-index="6"] #projectionSvg .y-axis line,
.slide-viz[data-slide-index="6"] #projectionSvg .x-axis path,
.slide-viz[data-slide-index="6"] #projectionSvg .x-axis line {
  stroke: #cbd5e1;
  stroke-width: 1;
}

/* SLIDE 6 – stack explanation text above chart + taller chart */

.slide-viz[data-slide-index="6"] .slide-grid-5 {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Put the right card (Are We On Track...) first */
.slide-viz[data-slide-index="6"] .slide5-right-card {
  order: 1;
  max-width: 2020px;
}

/* Chart card comes second and spans full width */
.slide-viz[data-slide-index="6"] .slide5-left-card {
  order: 2;
}

/* Make the projection chart taller so the y-axis is longer */
.slide-viz[data-slide-index="6"] #projectionContainer {
  margin-top: 0.4rem;
  height: 520px; 
}

.slide-viz[data-slide-index="6"] #projectionSvg {
  width: 100%;
  height: 100%;
}

/* Slightly smaller tick labels so extra ticks don’t look crowded */
.slide-viz[data-slide-index="6"] #projectionSvg .y-axis text,
.slide-viz[data-slide-index="6"] #projectionSvg .x-axis text {
  font-size: 0.8rem;
}

/* ---- Slide 6 spacing tweaks ---- */

/* Less space between the subtitle and "Are We On Track for 2030?" */
#slide5 .slide-header {
  margin-bottom: -40px;      /* was larger before */
}

/* Tighten vertical spacing inside the slide layout */
.slide-grid-5 {
  margin-top: 8px;          /* controls gap between subtitle and "Are We..." */
  row-gap: 12px;            /* controls gap between "Are We..." block & chart */
}

/* Remove default top margins on the heading + body */
#slide5 #projectionExplTitle {
  margin-top: 0;
  margin-bottom: 6px;
}

#slide5 #projectionExplBody {
  margin-top: 0;
  margin-bottom: 10px;
}

/* Make sure the chart card hugs the text above it */
#slide5 .slide5-left-card {
  margin-top: 0;
}

/* Reduce space above the chart’s own title line */
#slide5 .slide5-left-card .card-title {
  margin-top: -20px;
  margin-bottom: 5px;     /* adds space between Global greenhouse gas emissions and Model: (dropdown box)*/
}

/* --- Slide 6 legend on right side of chart --- */

/* Make the left card a positioning context */
.slide5-left-card {
  position: relative;
}

/* Legend box positioned to the right of the SVG */
.projection-legend {
  position: absolute;
  top: 110px;        /* tweak this number up/down to line up with the plot */
  right: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--text-main);
}

/* Each legend row */
.projection-legend .legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Pill swatches */
.projection-legend .legend-swatch {
  display: inline-block;
  width: 22px;
  height: 6px;
  border-radius: 999px;  /* pill shape */
}

/* Colors that match your lines */
.legend-swatch-actual { background: #f97316; }  /* orange */
.legend-swatch-model  { background: #ec4899; }  /* pink */
.legend-swatch-target { background: #22c55e; }  /* green */

/* Axis title overrides */
svg text.axis-label {
  font-size: 13px !important;
  font-weight: 600;
  fill: #ffffff;
}

.axis-label {
  font-size: 13px;
  font-weight: 600;
  fill: #ffffff;
}

/* Slide 6 – GHG year slider styling */
#slide5 #ghgSliderRow {
  margin-top: -35px;
  max-width: 1250px;      /* make the track nice and long */
  display: flex;
  align-items: center;
  gap: 14px;
}

#slide5 #projectionYearLabel {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
}

/* Base slider track */
#slide5 #projectionYearSlider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: #cec7c7;
  border-radius: 999px;
  border: 1px solid #000000;
}

/* WebKit (Chrome, Safari) */
#slide5 #projectionYearSlider::-webkit-slider-runnable-track {
  height: 6px;
  background: transparent;
}

#slide5 #projectionYearSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #000;          /* black circle */
  border: 2px solid #ffffff; /* white outline */
  margin-top: -7px;          /* center on 6px track */
}

/* Firefox */
#slide5 #projectionYearSlider::-moz-range-track {
  height: 6px;
  background: transparent;
}

#slide5 #projectionYearSlider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #000;
  border: 2px solid #ffffff;
}



/* Make sure all slide content sits above the gradient */
.slide[data-slide-index="6"] .slide-inner {
  position: relative;
  z-index: 1;
}

/* Make slide 6 content wider overall */
.slide[data-slide-index="6"] .slide-inner {
  max-width: 1500px !important;  /* override global max-width */
  margin: 0 auto;
}

/* Make the left viz card fill the width and align to the left */
.slide[data-slide-index="6"] .viz-card.slides-left-card {
  max-width: none !important;    /* remove 420px cap */
  width: 100% !important;
  margin-left: 0 !important;     /* flush with left margin of text */
  margin-right: 0 !important;
}

/* Ensure the chart container and SVG fill that card */
.slide[data-slide-index="6"] #projectionContainer,
.slide[data-slide-index="6"] #projectionSvg {
  width: 100% !important;
  display: block;
}

/* --- Slide 6: emissions play area (id="slide5") --- */

/* Bigger title above the chart */
#slide5 .card-title {
  font-size: 20px;      /* bump size */
  font-weight: 700;     /* bold */
  color: white;
}

/* Make the "Model:" label + dropdown text bold */
#slide5 .card-controls label {
  font-weight: 500;
  color: white;
}

#slide5 #projectionModelSelect {
  font-weight: 500;
  padding: 6px 14px;            /* keeps the pill look */
  border-radius: 999px;
  width: 250px;                 /* make dropbox pill longer in length */
  color: black;
}

/* Scroll instruction text under the legend */
#slide5 .projection-scroll-hint {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-main);;       /* muted gray */
}

/* Bigger mouse icon */
#slide5 .scroll-mouse {
  width: 26px;          /* was 18px */
  height: 40px;         /* was 28px */
  border-radius: 14px;  /* keep it rounded, but a bit larger */
  border: 3px solid #ffffff;  /* slightly thicker border */
  position: relative;
  box-sizing: border-box;
  transform: translateY(-16px);
}

/* Bigger scroll wheel */
#slide5 .scroll-wheel {
  width: 6px;           /* was 4px */
  height: 10px;         /* was 6px */
  border-radius: 999px;
  background: #9ca3af;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 9px;             /* nudged down to stay centered in taller mouse */
  animation: scroll-bounce 1.2s infinite ease-in-out;
}

@keyframes scroll-bounce {
  0%   { transform: translate(-50%, 0);   opacity: 0; }
  20%  { opacity: 1; }
  50%  { transform: translate(-50%, 8px); }
  80%  { opacity: 1; }
  100% { transform: translate(-50%, 0);   opacity: 0; }
}

/* Slight glow on hover over chart area */
#projectionContainer:hover .proj-line-actual,
#projectionContainer:hover .proj-line-model,
#projectionContainer:hover .proj-line-target {
  filter: drop-shadow(0 0 4px rgba(15, 23, 42, 0.15));
}

/* Points grow on hover over the chart */
#projectionContainer:hover .proj-points-actual circle,
#projectionContainer:hover .proj-points-model circle {
  transition: r 0.2s ease-out;
  r: 4px;
}

/* Legend layout */
#slide5 .projection-legend {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Each legend entry */
#slide5 .projection-legend .legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #ffffff;
  cursor: default;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

/* Hover animation */
#slide5 .projection-legend .legend-item:hover {
  transform: translateY(-1px);
  opacity: 0.9;
}


#slide5 .projection-scroll-hint {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  line-height: 1.4;
  color: #ffffff;
  font-weight: 500;
}

/* Slide 5 – make the bottom button only as wide as its text */
.slide[data-slide-index="5"] .primary-link-btn {
  width: auto !important;        /* no full-width pill */
  max-width: none !important;
  display: inline-flex;          /* hug the text + padding */
  align-self: flex-start;        /* align with left text column */
  justify-content: center;       /* center text inside the pill */
}

/* =========================================
   SLIDE 9 – REUSE SLIDE 1 LOOK
   ========================================= */

/* same centered layout + no card */
.slide[data-slide-index="9"] .centered-text {
  background: none;
  border: none;
  box-shadow: none;

  width: min(780px, 100% - 120px);
  max-width: 54rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  text-align: left;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.05rem;
  line-height: 1.85;
}



/* intro line + accent bar */
.slide-text.type-slide[data-slide-index="9"] .typewriter {
  position: relative;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.7;
  margin: 0 0 1.1rem 0;
  color: var(--text-main);

  opacity: 0;
  transform: translateY(10px);
}

.slide-text.type-slide[data-slide-index="9"] .typewriter::before {
  content: "";
  position: absolute;
  left: -1.75rem;
  top: 0.45rem;
  width: 6px;
  height: 1.9rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff, #ffffff);
}

/* bullets – exact same style as slide 1/5 */
.slide-text.type-slide[data-slide-index="9"] .background-bullets {
  margin-top: 0.5rem;
  padding-left: 0;
  list-style: none;
}

.slide-text.type-slide[data-slide-index="9"] .background-bullets li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.55rem;
  font-size: 1.08rem;
  color: #ffffff;

  opacity: 0;
  transform: translateY(6px);
}

.slide-text.type-slide[data-slide-index="9"] .background-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: #fdfeff;
  box-shadow: 0 0 0 7px rgba(15, 23, 42, 0.07);
}

/* callout line at the bottom */
.slide-text.type-slide[data-slide-index="9"] .callout-text {
  margin-top: 1.2rem;
  font-size: 0.98rem;
  color: #1d4ed8;        /* same blue feel as your link */
  font-weight: 600;
}

/* reuse the same animations as slide 1 */
.slide-text.type-slide[data-slide-index="9"].active .typewriter {
  animation: slide1-fade-up 0.55s ease-out forwards;
}

.slide-text.type-slide[data-slide-index="9"].active .background-bullets li {
  animation: slide1-bullet-in 0.45s ease-out forwards;
}

/* stagger bullets */
.slide-text.type-slide[data-slide-index="9"].active .background-bullets li:nth-child(1) { animation-delay: 0.15s; }
.slide-text.type-slide[data-slide-index="9"].active .background-bullets li:nth-child(2) { animation-delay: 0.22s; }
.slide-text.type-slide[data-slide-index="9"].active .background-bullets li:nth-child(3) { animation-delay: 0.29s; }
.slide-text.type-slide[data-slide-index="9"].active .background-bullets li:nth-child(4) { animation-delay: 0.36s; }

/* Re-enable timeline phases + color coding */
#timelineSvg rect.phase,
#timelineSvg path.phase {
  opacity: 1 !important;
}

/* Example color coding */
#timelineSvg rect.phase-joined,
#timelineSvg rect.phase-rejoined {
  fill: #16a34a !important;   /* green */
}

#timelineSvg rect.phase-withdraw {
  fill: #eab308 !important;   /* yellow */
}

#timelineSvg rect.phase-left {
  fill: #ef4444 !important;   /* red */
}



/* =======================
   Timeline color legend
   ======================= */

#timelineLegend.timeline-legend {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: var(--text-main);;
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  align-items: center;
}

#timelineLegend .legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

#timelineLegend .legend-pill {
  width: 32px;
  height: 6px;
  border-radius: 999px;
}

/* match the line colors you used for the phases */
#timelineLegend .legend-pill.joined,
#timelineLegend .legend-pill.rejoined {
  background: #22c55e;   /* green */
}

#timelineLegend .legend-pill.withdrawal-announced {
  background: #facc15;   /* yellow */
}

#timelineLegend .legend-pill.left {
  background: #ef4444;   /* red */
}
}

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


/* Layout for the 3D slide ONLY */
.viz-root {
  display: grid;
  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
  grid-template-rows: 100%;
  gap: 1.75rem;
  padding: 1.9rem 2.4rem;
  height: 100%;
}

@media (max-width: 900px) {
  .viz-root {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(320px, 1fr);
    padding: 1.1rem;
  }
}


@media (max-width: 900px) {
  body {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(320px, 1fr);
    padding: 1.1rem;
  }
}

/* Shared “glass” shell for all major cards */

.ui-panel,
#scene-container,
#sector-panel {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-soft);
  background:
    radial-gradient(circle at 0 0, rgba(148, 163, 255, 0.26), transparent 55%),
    radial-gradient(circle at 100% 0, rgba(56, 189, 248, 0.16), transparent 60%),
    linear-gradient(to bottom right, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.86));
  backdrop-filter: blur(22px);
}

/* Subtle inner highlight line */

.ui-panel::before,
#scene-container::before,
#sector-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.04);
  pointer-events: none;
}

/* Left panel */

/* Wrapper only – no big card */
.ui-panel {
  max-width: 1600px;
  margin: 1.5rem auto 0;  /* still centers the 3 blocks on the slide */
  padding: 0;             /* no padded “card” look */
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.ui-header h1 {
  font-size: 1.75rem;
  margin: 0 0 0.8rem 0;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff !important;
}

.ui-header p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-main);;
}

.controls {
  margin-top: 1.35rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(148, 163, 255, 0.24);
}

.controls label {
  font-size: 0.85rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text-main);;
  margin-bottom: 0.4rem;
}

/* Play + year */

.play-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 0.8rem;
}

.play-button {
  border: none;
  border-radius: 999px;
  padding: 0.5rem 1.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: radial-gradient(circle at 20% 0%, #f9fafb, #d1d5db);
  color: var(--text-main);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.5);
  cursor: pointer;
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    background 0.12s ease,
    color 0.12s ease;
}

.play-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.7);
}

.play-button.playing {
  background: linear-gradient(135deg, var(--accent), var(--accent-soft));
  color: #f9fafb;
}

.play-year {
  font-size: 0.95rem;
  color: var(--text-main);
}

.play-year-number {
  font-variant-numeric: tabular-nums;
}

#year-value {
  font-weight: 600;
  color: var(--accent-soft);
}

/* Slider */

#year-slider {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 999px;
  background: rgba(148, 163, 255, 0.25);
  outline: none;
  cursor: pointer;
}

#year-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 25% 0%, #ffffff, #93c5fd);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.26);
}

#year-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: radial-gradient(circle at 25% 0%, #ffffff, #93c5fd);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.26);
}

/* Legend + totals */

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.9rem;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  color: var(--text-main);;
}

.legend-swatch {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.7);
}

.legend-swatch--us {
  background: linear-gradient(135deg, var(--us-color), #f3b23a);
}

.legend-swatch--other {
  background: linear-gradient(135deg, #5a8df7, #67e3ff);
}

.global-total-row {
  margin-top: 0.75rem;
  margin-bottom: 0.25rem;
  padding: 0.6rem 0.8rem;
  border-radius: 999px;
  background:
    radial-gradient(circle at 0 0, rgba(248, 250, 252, 0.16), transparent 60%),
    rgba(15, 23, 42, 0.85);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.global-total-label {
  font-size: 0.8rem;
  color: var(--text-main);;
}

.global-total-value {
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--accent-soft);
  font-variant-numeric: tabular-nums;
}

.caption {
  margin-top: 1.1rem;
  font-size: 0.78rem;
  color: var(--text-main);;
  line-height: 1.6;
}

/* Right column: 3D + detail panel */

.viz-column {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
}

/* 3D container */

#scene-container {
  position: relative;
  width: 100%;
  height: 100%;
  flex: 2 1 60%;
  overflow: hidden;
  background: radial-gradient(circle at top, #111827 0, #020617 65%);
}

/* Tooltip */

.tooltip {
  position: fixed;
  pointer-events: none;
  min-width: 190px;
  max-width: 260px;
  background: rgba(8, 12, 26, 0.97);
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 255, 0.4);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.75);
  padding: 0.65rem 0.8rem;
  font-size: 0.78rem;
  z-index: 50;
}

.tooltip-title {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.tooltip-body {
  color: var(--text-main);;
  line-height: 1.4;
}

/* Sector detail panel */

#sector-panel {
  background:
    radial-gradient(circle at 0 0, rgba(148, 163, 255, 0.2), transparent 55%),
    linear-gradient(to bottom right, rgba(15, 23, 42, 0.94), rgba(15, 23, 42, 0.88));
  padding: 1rem 1.35rem 1.3rem;
  color: var(--text-main);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sector-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}

.sector-header h2 {
  font-size: 1rem;
  margin: 0;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.sector-subtitle {
  font-size: 0.78rem;
  color: var(--text-main);;
  margin-top: 0.2rem;
}

.sector-pill {
  font-size: 0.75rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 255, 0.4);
  background: rgba(15, 23, 42, 0.9);
  color: var(--accent-soft);
}

/* Radar chart container */

#sector-viz-container {
  width: 100%;
  height: 260px;
}

#sector-viz-container svg {
  width: 100%;
  height: 100%;
}

/* Radar chart styles */

.radar-grid-circle {
  fill: none;
  stroke: rgba(148, 163, 255, 0.25);
  stroke-dasharray: 3 4;
}

.radar-axis-line {
  stroke: rgba(148, 163, 255, 0.25);
  stroke-width: 0.7;
}

.radar-axis-label {
  fill: var(--text-muted);
  font-size: 0.68rem;
  text-anchor: middle;
}

.radar-polygon {
  fill: rgba(96, 165, 250, 0.32);
  stroke: #60a5fa;
  stroke-width: 1.6;
}

.radar-point {
  stroke: #020617;
  stroke-width: 1;
}

/* Legend under radar chart */

#sector-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.8rem;
  margin-top: 0.25rem;
}

.sector-legend-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  color: var(--text-main);;
}

.sector-legend-swatch {
  width: 8px;
  height: 8px;
  border-radius: 999px;
}

/* Labels above bars */

.bar-label {
  position: absolute;
  pointer-events: none;
  font-size: 0.65rem;
  color: rgba(241, 245, 249, 0.96);
  text-shadow: 0 1px 3px rgba(15, 23, 42, 0.9);
  white-space: nowrap;
  transform: translate(-50%, -100%);
}

/* Mouse hints */

.hint {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hint-icon {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  position: relative;
  flex-shrink: 0;
  background: radial-gradient(circle at 25% 15%, #ffffff33, #020617f0);
  border: 1px solid rgba(148, 163, 184, 0.6);
  box-shadow:
    0 6px 12px rgba(15, 23, 42, 0.6),
    0 0 0 1px rgba(15, 23, 42, 0.9);
  overflow: hidden;
}

/* Mouse body + wheel (shared) */
.hint-icon::before,
.hint-icon::after {
  content: "";
  position: absolute;
}

.hint-icon::before {
  width: 14px;
  height: 20px;
  border-radius: 10px;
  border: 2px solid #e5e7eb;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background:
    linear-gradient(
      to bottom,
      transparent 0,
      transparent 30%,
      #e5e7eb 30%,
      #e5e7eb 38%,
      transparent 38%,
      transparent 100%
    );
}

/* ROTATE */

.hint-icon--rotate::after {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 2px solid rgba(129, 140, 248, 0.95);
  border-bottom-color: transparent;
  border-left-color: transparent;
  top: 50%;
  left: 50%;
  transform-origin: center center;
  animation: mouse-rotate 1.9s linear infinite;
}

@keyframes mouse-rotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* PAN */

.hint-icon--pan::after {
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: rgba(96, 165, 250, 0.95);
  top: 50%;
  left: 50%;
  box-shadow:
    -8px 0 0 rgba(96, 165, 250, 0.35),
    8px 0 0 rgba(96, 165, 250, 0.35);
  transform-origin: center center;
  animation: mouse-pan 1.6s ease-in-out infinite;
}

@keyframes mouse-pan {
  0% {
    transform: translate(-60%, -50%);
  }
  50% {
    transform: translate(-40%, -50%);
  }
  100% {
    transform: translate(-60%, -50%);
  }
}

/* ZOOM */

.hint-icon--zoom::after {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 2px solid rgba(45, 212, 191, 0.95);
  top: 50%;
  left: 50%;
  transform-origin: center center;
  animation: mouse-zoom 1.8s ease-in-out infinite;
}

@keyframes mouse-zoom {
  0% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0.6;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.05);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0.6;
  }
}

/* Small screens tweak */

@media (max-width: 600px) {
  .ui-panel {
    padding: 1.3rem 1.4rem;
  }
  .ui-header h1 {
    font-size: 1.45rem;
  }
}

/* --- Techy container motion --- */

.ui-panel,
#scene-container,
#sector-panel {
  opacity: 0;
  transform: translateY(18px) scale(0.985);
  animation: shell-in 0.7s cubic-bezier(0.18, 0.95, 0.35, 1.02) forwards;
}

#scene-container {
  animation-delay: 0.08s;
}

#sector-panel {
  animation-delay: 0.16s;
}

@keyframes shell-in {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.97);
  }
  60% {
    opacity: 1;
    transform: translateY(-4px) scale(1.01);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* micro-hover lift / glow */

.ui-panel:hover,
#scene-container:hover,
#sector-panel:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.75);
  border-color: rgba(148, 163, 255, 0.6);
}

/* Layout: radar + metrics side by side */

.sector-main {
  display: flex;
  gap: 1.8rem;
  align-items: flex-start;
  margin-top: 0.5rem;
}

#sector-viz-container {
  flex: 0 0 55%;
  height: 280px;
}

.sector-metrics {
  flex: 1;
  padding: 0.75rem 0.4rem 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

/* Title */

.sector-metrics-title {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-main);;
  margin-bottom: 0.2rem;
}

/* Rows */

#sector-metrics-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.sector-metric-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.78rem;
  padding: 0.18rem 0.2rem;
  border-radius: 999px;
  background: radial-gradient(
      circle at 0 50%,
      rgba(148, 163, 255, 0.18),
      transparent 65%
    );
}

.sector-metric-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--text-main);;
}

.sector-metric-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.8);
}

.sector-metric-value {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--text-main);
}

/* Small screens: stack radar above metrics */

@media (max-width: 900px) {
  .sector-main {
    flex-direction: column;
  }

  #sector-viz-container {
    width: 100%;
    height: 260px;
  }
}

/* Caption tweaks under left panel */

.caption {
  margin-top: 1rem;
  font-size: 0.8rem;
  color: var(--text-main);;
  line-height: 1.6;
}

.caption p {
  margin: 0 0 0.85rem;
}

.caption-howto {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
  color: var(--text-main);;
}

.interaction-hints {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.hint-text {
  font-size: 0.78rem;
  line-height: 1.5;
}

.hint-label {
  font-weight: 600;
  margin-right: 0.3rem;
}

/* === DARK THEME TYPE HIERARCHY OVERRIDE === */

/* default: body copy is muted grey */
body {
  color: white;
}

/* "big important" text – bright white */
h1,
h2,
h3,
h4,
.slide-title,
.timeline-title,
.ui-header h1,
#timelineSlide .slide-header h2,
.sector-header h2,
.play-year,
.global-total-value {
  color: var(--text-main);
}

/* normal copy + helper text – muted grey */
p,
li,
.subtitle,
.caption,
.milestone-note,
.season-note,
.timeline-note,
.slide-footnote,
.chart-hint,
.tooltip-body {
  color: var(--text-main);;
}

/* === HERO TITLE: make it white + pop off the background === */

/* wrapper around the big CARBON IN AMERICA text */
.hero-title-wrap {
  position: relative;
}

/* the actual big text */
.hero-title {
  /* kill the image-mask / gradient and make it bright white */
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: #f9fafb !important;
  color: #f9fafb !important;

  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow:
    0 22px 55px rgba(0, 0, 0, 0.85),
    0 0 26px rgba(15, 23, 42, 0.9);
}

/* soft “spotlight” behind the title to separate it from the dark bg */
.hero-title-wrap::before {
  content: "";
  position: absolute;
  inset: -8vh -12vw;           /* how big the glow area is */
  background:
    radial-gradient(
      circle at 40% 30%,
      rgba(255, 255, 255, 0.26),
      transparent 65%
    ),
    radial-gradient(
      circle at 80% 90%,
      rgba(15, 23, 42, 0.8),
      rgba(15, 23, 42, 0.98)
    );
  pointer-events: none;
  z-index: -1;
}

/* === PRESS ENTER / → styling === */

.hero-cta {
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-main);;    /* grey text like the rest of the UI */
}

/* base key style (both ENTER and →) */
.hero-cta .key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 0.15rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.9);
  background: #020617;         /* dark blue keycap */
  color: #f9fafb;              /* white label */
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.7);
  font-weight: 600;
  font-size: 0.8rem;
}

/* slightly narrower for the arrow key if you have a separate class */
.hero-cta .key-arrow {
  padding-inline: 0.55rem;
}

/* === HERO TITLE: make it white + pop off the background === */

/* wrapper around the big CARBON IN AMERICA text */
.hero-title-wrap {
  position: relative;
}

/* the actual big text */
.hero-title {
  /* kill the image-mask / gradient and make it bright white */
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: #f9fafb !important;
  color: #f9fafb !important;

  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow:
    0 22px 55px rgba(0, 0, 0, 0.85),
    0 0 26px rgba(15, 23, 42, 0.9);
}

/* soft “spotlight” behind the title to separate it from the dark bg */
.hero-title-wrap::before {
  content: "";
  position: absolute;
  inset: -8vh -12vw;           /* how big the glow area is */
  background:
    radial-gradient(
      circle at 40% 30%,
      rgba(255, 255, 255, 0.26),
      transparent 65%
    ),
    radial-gradient(
      circle at 80% 90%,
      rgba(15, 23, 42, 0.8),
      rgba(15, 23, 42, 0.98)
    );
  pointer-events: none;
  z-index: -1;
}


.slide-intro .intro-content h1,
.slide-intro .intro-content h2,
.slide-intro .intro-content p {
  color: #ffffff !important;
}

/* === Slide 2: make bullets white === */
.slide-text .background-bullets,
.slide-text .background-bullets li {
  color: #ffffff !important;   /* text + bullet markers */
}

/* === Button: black bg, white border, no shadow === */
.slide-text button,
.slide-text .btn {
  background-color: #000000 !important;
  border: 1px solid #ffffff !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.primary-link-btn {
  background-color: #000000 !important;   /* black background */
  color: #ffffff !important;              /* white text */
  border: 1px solid #ffffff !important;   /* white border */
  box-shadow: none !important;            /* no shadow */
  text-decoration: none;                  /* remove underline */
}

/* =========================================
   TIMELINE SLIDE – CLEAN TECHY VERSION
   ========================================= */

/* Background only, now centers content vertically + horizontally */
#timelineSlide {
  
  color: var(--text-main);

  min-height: 100vh;
  padding: 2.6rem 6vw 3rem;
  box-sizing: border-box;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* Inner cluster – wider and centered */
#timelineSlide .slide-inner {
  max-width: 1800px;          /* wider than before */
  width: 100%;
  margin: 0 auto;
  padding: 0;

  border: none;
  box-shadow: none;
  background: transparent;
  backdrop-filter: none;

  display: flex;
  flex-direction: column;
  gap: 2.6rem;                /* a bit more breathing room */
}

#timelineSlide .slide-inner::before {
  content: none;
}

/* Header */

#timelineSlide .timeline-title {
  margin: 0 0 0.9rem 0;
  font-size: clamp(2.3rem, 3.4vw, 2.9rem);  /* slightly larger */
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.35;
}

#timelineSlide .slide-header p {
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.75;
  color: var(--text-main);;
}

/* ----- Timeline + skinny summary column layout ----- */

#timelineSlide .timeline-stack {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(260px, 0.95fr); /* wider left */
  gap: 2rem;
  align-items: stretch;
}

/* Shared glass card shell (timeline + summary) */
#timelineSlide .viz-card {
  position: relative;
  width: auto;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(148, 163, 255, 0.36);
  box-shadow: 0 32px 80px rgba(15, 23, 42, 0.9);
  background:
    radial-gradient(circle at 0 0, rgba(148, 163, 255, 0.18), transparent 60%),
    radial-gradient(circle at 100% 0, rgba(56, 189, 248, 0.18), transparent 65%),
    linear-gradient(to bottom right, rgba(15, 23, 42, 0.97), rgba(15, 23, 42, 0.9));
  padding: 1.9rem 2.2rem 2.1rem;     /* bigger panels */
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

#timelineSlide .viz-card:first-child {
  box-shadow: 0 34px 90px rgba(15, 23, 42, 0.95);  /* emphasize timeline card */
}

#timelineSlide .viz-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.03);
  pointer-events: none;
}

#timelineSlide .viz-card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 36px 96px rgba(0, 0, 0, 0.95);
}

/* Card headings + subtitles */
#timelineSlide .viz-card h3 {
  margin: 0;
  font-size: 0.98rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

#timelineSlide .viz-card .subtitle {
  margin: 0.25rem 0 0.6rem;
  font-size: 0.85rem;
  color: var(--text-main);;
}

/* ---------- TIMELINE CARD ---------- */

#timelineSlide #timelineContainer {
  margin-top: 0.6rem;
  padding: 1.2rem 1.5rem 1.2rem;
  border-radius: 24px;
  background:
    radial-gradient(circle at 0 100%, rgba(15, 23, 42, 0.9), transparent 70%),
    linear-gradient(to bottom right, #020617, #020617);
  border: 1px solid rgba(15, 23, 42, 0.9);
}

#timelineSlide #timelineSvg {
  width: 100%;
  height: 260px;              /* larger timeline area */
  display: block;
}

/* Base line + dots = sleek timeline */
#timelineSlide #timelineSvg .timeline-base {
  stroke: #94a3b8;
  stroke-width: 3;
  stroke-linecap: round;
}

#timelineSlide #timelineSvg .timeline-dot,
#timelineSlide #timelineSvg circle.milestone {
  fill: #f9fafb;
  stroke: #020617;
  stroke-width: 2;
  transition: stroke-width 0.12s ease, transform 0.12s ease;
}

#timelineSlide #timelineSvg .timeline-dot:hover,
#timelineSlide #timelineSvg circle.milestone:hover {
  stroke-width: 3;
}

/* Year labels */
#timelineSlide #timelineSvg text,
#timelineSlide #timelineSvg .milestone-label {
  fill: #e5e7eb !important;
  font-size: 0.82rem;
}

/* Note + legend */
#timelineSlide .timeline-note {
  margin-top: 0.8rem;
  font-size: 0.8rem;
  color: var(--text-main);;
}

#timelineSlide .timeline-legend {
  margin-top: 0.65rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.9rem;
  font-size: 0.78rem;
  color: var(--text-main);;
}

#timelineSlide .timeline-legend .legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

#timelineSlide .timeline-legend .legend-pill {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.9);
}

/* Status colors */
#timelineSlide .legend-pill.joined {
  background: linear-gradient(135deg, #22c55e, #4ade80);
}
#timelineSlide .legend-pill.withdrawal-announced {
  background: linear-gradient(135deg, #f97316, #fdba74);
}
#timelineSlide .legend-pill.left {
  background: linear-gradient(135deg, #ef4444, #fb7185);
}
#timelineSlide .legend-pill.rejoined {
  background: linear-gradient(135deg, #22c55e, #2dd4bf);
}

/* ---------- SUMMARY CARD ---------- */

#timelineSlide .timeline-summary-card {
  margin-top: 0.2rem;
}

#timelineSlide #timelineSummaryTitle {
  margin: 0 0 0.5rem;
  font-size: 0.96rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

#timelineSlide #timelineSummaryText {
  font-size: 0.87rem;
  line-height: 1.75;
  color: var(--text-main);;
}

/* Summary links – pill buttons */
#timelineSlide #timelineSummaryLinks {
  margin-top: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

#timelineSlide #timelineSummaryLinks a {
  font-size: 0.78rem;
  text-decoration: none;
  color: var(--accent-soft);
  padding: 0.42rem 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 255, 0.6);
  background: rgba(15, 23, 42, 0.95);
  transition:
    background 0.12s ease,
    color 0.12s ease,
    box-shadow 0.12s ease;
}

#timelineSlide #timelineSummaryLinks a:hover {
  background: linear-gradient(135deg, var(--accent), var(--accent-soft));
  color: #020617;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.9);
}

/* ---------- RESPONSIVE ---------- */

@media (max-width: 1100px) {
  #timelineSlide {
    padding: 2.3rem 1.8rem 2.8rem;
  }

  #timelineSlide .timeline-stack {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  #timelineSlide .slide-inner {
    gap: 1.9rem;
  }
  #timelineSlide .timeline-title {
    font-size: 1.8rem;
  }
}

#timelineSlide #timelineSummaryLinks a {
  font-size: 0.78rem;
  text-decoration: none;
  color: #ffffff;              /* white text */
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  border: 1px solid #ffffff;   /* white border */
  background: #020617;         /* nearly black background */
  box-shadow: none;            /* no shadow */
  transition:
    background 0.12s ease,
    color 0.12s ease,
    border-color 0.12s ease;
}

#timelineSlide #timelineSummaryLinks a:hover {
  background: #ffffff;         /* simple invert on hover (optional) */
  color: #020617;
  border-color: #ffffff;
  box-shadow: none;            /* keep no shadow on hover too */
}

/* ============================
   SLIDE 3 – Layout + cards
   ============================ */

/* Make this slide use almost the whole page width, like the 3D slide */
#seasonSlide .season-inner {
  max-width: 1800px;      /* a bit wider */
  width: 96vw;            /* almost full viewport */
  margin: 24px auto 48px; /* centered, closer to top */
}

/* --- HEADER CARD (make it line up with the cards) --- */

#seasonSlide .season-header {
  margin: 0 0 -50px;         /* no side centering */
  padding: 20px 26px 22px;
  border-radius: 26px;
  border: 1px solid rgba(148, 163, 255, 0.4);
  background:
    radial-gradient(circle at 0 0, rgba(148, 163, 255, 0.22), transparent 55%),
    radial-gradient(circle at 100% 0, rgba(56, 189, 248, 0.15), transparent 60%),
    linear-gradient(to bottom right, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.88));
  box-shadow: 0 28px 70px rgba(15, 23, 42, 0.75);
}

/* Title – match “3D GLOBAL EMISSIONS LANDSCAPE” look */
#seasonSlide .season-header h2 {
  margin: 0 0 0.75rem 0;
  font-size: 2.4rem;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 900;

  /* solid white, no image mask */
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #f9fafb !important;
  color: #f9fafb;
}

#seasonSlide .season-header p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--text-main);;
}

/* --- MAP + CHART LAYOUT --- */

/* Make the chart noticeably wider than the map */
#seasonSlide .season-viz-row {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.9fr); /* map : chart ratio */
  gap: 1rem;
  margin-top: 2.4rem;
}

/* Shared “card” look for map + chart */
#seasonSlide .viz-card {
  background:
    radial-gradient(circle at 0 0, rgba(148, 163, 255, 0.18), transparent 60%),
    rgba(15, 23, 42, 0.94);
  border-radius: 24px;
  padding: 1.5rem 1.8rem 1.6rem;
  border: 1px solid rgba(148, 163, 255, 0.4);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.75);
  color: var(--text-main);
  display: flex;
  flex-direction: column;
}

/* H3s inside cards */
#seasonSlide .viz-card h3 {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Subtitles under map / chart */
#seasonSlide .viz-card .subtitle {
  margin: 0 0 1.1rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: white;
}

/* Map container smaller */
#seasonSlide #seasonMapContainer {
  background: radial-gradient(circle at top, #020617, #020617 65%);
  border-radius: 18px;
  padding: 0.65rem;
  height: 240px;  /* a bit shorter */
}

/* Chart container bigger horizontally/vertically */
#seasonSlide #seasonBarContainer {
  background: radial-gradient(circle at top, #020617, #020617 65%);
  border-radius: 18px;
  padding: 0.65rem;
  height: 340px;
}

/* Let SVG fill each card’s inner container */
#seasonSlide #seasonMapSvg,
#seasonSlide #seasonBarSvg {
  width: 100%;
  height: 100%;
}

/* Keep legend + note tidy under the chart */
#seasonSlide .season-legend {
  display: flex;
  gap: 1.1rem;
  margin-top: 0.75rem;
  font-size: 0.8rem;
  color: var(--text-main);;
}

#seasonSlide .season-note {
  margin-top: 0.4rem;
  font-size: 0.78rem;
  color: var(--text-main);;
}

/* Footnote across bottom */
#seasonSlide .season-footnote {
  margin-top: 1.8rem;
  font-size: 0.78rem;
  color: var(--text-main);;
}

/* Stack cards on small screens */
@media (max-width: 900px) {
  #seasonSlide .season-viz-row {
    grid-template-columns: 1fr;
  }
}

/* ===== Slide 3 tidy-up overrides ===== */

/* Give the whole slide a clean frame like the 3D slide */
#seasonSlide .season-inner {
  max-width: 1700px;
  width: 96vw;
  padding: 0 24px 32px;      /* side padding + less bottom space */
  margin: 80px auto 24px;    /* less bottom margin */
}

/* Header card – no negative margin, just a small gap below */
#seasonSlide .season-header {
  width: 100%;
  margin: 0 0 -10px;          /* was margin: 0 0 -50px; */
}

/* Title stays the same, just for reference
#seasonSlide .season-header h2 { ... } */

/* Make the map + chart row sit closer to the header and line up neatly */
#seasonSlide .season-viz-row {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 2fr); /* map : chart ratio */
  gap: 1.6rem;                 /* slightly smaller gap */
  margin-top: 0;               /* remove extra space above cards */
  align-items: stretch;        /* both cards same height */
}

/* Map a bit shorter, chart not so huge */
#seasonSlide #seasonMapContainer {
  height: 220px;               /* smaller map height */
}

#seasonSlide #seasonBarContainer {
  height: 260px;               /* smaller chart height (was 340px) */
  padding: 0.8rem 0.8rem 1.4rem; /* extra bottom padding for axis labels */
}

/* Make axis text easier to read */
#seasonSlide #seasonBarSvg text {
  fill: #e5e7eb;               /* light grey / almost white */
  font-size: 11px;
}

/* Keep footnote tucked closer to cards */
#seasonSlide .season-footnote {
  margin-top: -2rem;
}






/* Layout */
section {
  font-family: "Inter", sans-serif;
  padding: 30px 50px;
  color: #222;
}

h2 {
  font-size: 1.9rem;
  font-weight: 700;
  margin-bottom: 20px;
}

/* Grid */
.policy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 22px;
  width: 80%;
  max-width: 900px;
  margin: 0 auto 35px;
}

/* Slider blocks */
.slider-block {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
}

.slider-block label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-weight: 600;
}

/* Sliders */
input[type="range"] {
  width: 100%;
  height: 6px;
  border-radius: 4px;
  background: #d1d5db;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  background: #3b82f6;
  border-radius: 50%;
}

/* Gauge */
 .gauge-container {
  position: relative;              /* anchor for absolute positioning */
  width: 260px;
  height: 260px;
  border-radius: 24px;
  background: linear-gradient(135deg, #1b2740, #0e1729);
  display: flex;
  justify-content: center;
  align-items: center;
}

#policyGauge {
  z-index: 1;
}

#percentDisplay {
  position: absolute;
  bottom: 24px;                    /* controls vertical placement */
  font-size: 1.5rem;
  font-weight: 600;
  color: #9fb3c8;
  z-index: 2;
}

.gauge-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center; /* centers text under canvas */
}

@media (max-width: 900px) {
  .policy-grid {
    grid-template-columns: 1fr;
    width: 100%;
  }
}



/* ========= Slide 7: Climate Policy Impact Simulator ========= */

/* Whole slide */
#slide-policy-sim {
  font-family: var(--font-main);
  color: var(--text-main);
  padding: 2rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

/* Title – match other tech headers */
#slide-policy-sim h2 {
  font-size: 1.75rem;
  margin: 0 0 0.9rem 0;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Sliders stacked on top, like a vertical control panel */
#slide-policy-sim .policy-grid {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-width: 420px;
}

/* Each slider "pill" */
#slide-policy-sim .slider-block {
  background:
    radial-gradient(circle at 0 0, rgba(248, 250, 252, 0.16), transparent 60%),
    rgba(15, 23, 42, 0.92);
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 255, 0.45);
  padding: 0.55rem 0.9rem 0.7rem;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.7);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* Label + % text in pill */
#slide-policy-sim .slider-block label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-main);
}

#slide-policy-sim .slider-block label span {
  font-weight: 600;
  color: var(--accent-soft);
  font-variant-numeric: tabular-nums;
}

/* Sliders – reuse the tech slider style */
#slide-policy-sim input[type="range"] {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 999px;
  background: rgba(148, 163, 255, 0.25);
  outline: none;
  cursor: pointer;
}

#slide-policy-sim input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 25% 0%, #ffffff, #93c5fd);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.26);
}

#slide-policy-sim input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: radial-gradient(circle at 25% 0%, #ffffff, #93c5fd);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.26);
}

/* Gauge panel – stacked under sliders, full glass card */
#slide-policy-sim .gauge-container {
  margin-top: 1rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-soft);
  background:
    radial-gradient(circle at 0 0, rgba(148, 163, 255, 0.26), transparent 55%),
    radial-gradient(circle at 100% 0, rgba(56, 189, 248, 0.16), transparent 60%),
    linear-gradient(to bottom right, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.9));
  backdrop-filter: blur(22px);

  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.6rem 1.2rem;
}

#slide-policy-sim .gauge-container canvas {
  max-width: 320px;
  max-height: 320px;
  width: 70%;
  height: auto;
}

/* Big % text under gauge */
#slide-policy-sim #percentDisplay {
  margin-top: 0.5rem;
  font-size: 2.1rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, var(--accent-soft), #ffffff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Hover glow on gauge card */
#slide-policy-sim .gauge-container:hover {
  transform: translateY(-2px) scale(1.005);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.75);
  border-color: rgba(148, 163, 255, 0.6);
}

/* Mobile: keep stacked, tighten padding */
@media (max-width: 900px) {
  #slide-policy-sim {
    padding: 1.4rem 1.6rem;
  }

  #slide-policy-sim .policy-grid {
    max-width: 100%;
  }
}

/* Sliders grid – 3 columns on wide screens */
#slide-policy-sim .policy-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr)); /* 3 columns */
  gap: 0.9rem 1.2rem;                                  /* row / column gap */
  max-width: 1100px;                                   /* keep it from going too wide */
  margin: 0 auto;                                      /* center the grid */
}

/* Each slider pill stays the same */
#slide-policy-sim .slider-block {
  background:
    radial-gradient(circle at 0 0, rgba(248, 250, 252, 0.16), transparent 60%),
    rgba(15, 23, 42, 0.92);
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 255, 0.45);
  padding: 0.55rem 0.9rem 0.7rem;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.7);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* Mobile / tablet: go back to stacked */
@media (max-width: 900px) {
  #slide-policy-sim {
    padding: 1.4rem 1.6rem;
  }

  #slide-policy-sim .policy-grid {
    grid-template-columns: 1fr;   /* single column */
    max-width: 100%;
  }
}

/* Full-bleed 3D slide wrapper */
.slide.slide-3d-emitters {
  background: #020617;        /* dark background so the 3D app blends in */
  padding: 0;
}

/* Make the inner wrapper fill the slide area */
.slide-3d-emitters .slide-inner-3d {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Let the 3D app take over the whole slide */
.slide-3d-emitters .slide-3d-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* --- Slide 7: Climate Policy Impact Simulator layout tweaks --- */

/* Center the whole slide content a bit and stack nicely */
#slide-policy-sim {
  max-width: 1180px;
  margin: 0 auto;
}

/* Make the title feel like it belongs to the gauge card */
#slide-policy-sim h2 {
  max-width: 760px;                 /* same width as gauge card */
  margin: 1.4rem auto 0.6rem;       /* center + sit right above card */
  font-size: 1.25rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Stack sliders above, keep them a bit narrower too */
#slide-policy-sim .policy-grid {
  max-width: 760px;
  margin: 0 auto 1.4rem;
}

/* Gauge “card” – narrower, centered, glassy panel */
#slide-policy-sim .gauge-container {
  max-width: 760px;                 /* << make gauge container less wide */
  width: 70%;
  margin: -0.4rem auto 0;           /* pulls card up under the title */
  padding: 2.6rem 2.2rem 2.0rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-soft);
  background:
    radial-gradient(circle at 0 0, rgba(148, 163, 255, 0.26), transparent 55%),
    radial-gradient(circle at 100% 0, rgba(56, 189, 248, 0.16), transparent 60%),
    linear-gradient(to bottom right, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.86));
  backdrop-filter: blur(22px);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Make sure the canvas is centered inside the card */
#slide-policy-sim .gauge-container canvas {
  display: block;
}

/* Percentage sits just under the card, centered */
#slide-policy-sim #percentDisplay {
  margin-top: 0.7rem;
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
}

/* ===== Slide 3D – container instead of full-bleed ===== */



/* 3D page just fills that card */
.slide-3d-emitters .slide-3d-iframe {

  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* --- Slide 7 layout polish: center + balance --- */

#slide-policy-sim {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 0 3.5rem;
}

/* Title: centered, not too far from content */
#slide-policy-sim h2 {
  margin: 0 0 1.8rem;
  font-size: 1.2rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Sliders: centered block, 3 columns on desktop */
#slide-policy-sim .policy-grid {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem 1.2rem;
}

/* Slider “pills” keep your existing look, just a bit tighter */
#slide-policy-sim .slider-block {
  border-radius: 999px;
  padding: 0.7rem 1.2rem;
}

/* Gauge card: centered, narrower, same glassy style as other panels */
#slide-policy-sim .gauge-container {
  width: 100%;
  max-width: 720px;              /* controls how wide the gauge card is */
  margin: 2.4rem auto 0;
  padding: 2.2rem 2.4rem 2rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-soft);
  background:
    radial-gradient(circle at 0 0, rgba(148, 163, 255, 0.26), transparent 55%),
    radial-gradient(circle at 100% 0, rgba(56, 189, 248, 0.16), transparent 60%),
    linear-gradient(to bottom right, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.86));
  backdrop-filter: blur(22px);
  display: flex;
  justify-content: center;
  align-items: center;
}

#slide-policy-sim .gauge-container canvas {
  display: block;
}

/* Percentage text just under the card */
#slide-policy-sim #percentDisplay {
  margin-top: 0.8rem;
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
}

/* Responsive: stack sliders and shrink card on smaller screens */
@media (max-width: 900px) {
  #slide-policy-sim {
    padding: 2rem 0 3rem;
  }

  #slide-policy-sim .policy-grid {
    max-width: 420px;
    grid-template-columns: 1fr;
  }

  #slide-policy-sim .gauge-container {
    max-width: 420px;
  }
}

/* Bigger title */
#slide-policy-sim h2 {
  margin: 0 0 1.8rem;
  font-size: 1.8rem;              /* was 1.2rem */
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
}

/* Percentage centered under the gauge */
#slide-policy-sim #percentDisplay {
  margin-top: 0.9rem;
  font-size: 2.1rem;
  font-weight: 700;
  text-align: center;             /* makes it centered under the canvas */
  width: 100%;                    /* span full width of slide */
}

/* Intro slide: full-bleed background image */
.slide-intro {
  background:
    linear-gradient(to right, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.05)),
    url("./assets/paris-hero-text.jpg") center center / cover no-repeat; /* <-- use your image path */
  color: #ffffff;
}

/* Center the intro block nicely */
.slide-intro .intro-content {
  max-width: 720px;
  padding: 4rem 5rem;
}

/* Title: force back to solid white text, remove text-mask */
.slide-intro .intro-content h1 {
  margin: 0 0 1.8rem;
  font-size: 4.2rem;
  line-height: 1.02;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff;

  /* undo any previous background-clip / transparent text */
  background: none !important;
  -webkit-background-clip: border-box !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Subtitle + body text */
.slide-intro .intro-content h2 {
  margin: 0 0 1rem;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #e5e7eb;
}

/* "Press Enter" hint */
.slide-intro .intro-hint {
  margin-top: 2.4rem;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #e5e7eb;
}


/* ===== Slide 6 (id="slide5") – title container + white text ===== */

#slide5 .slide-header {
  /* container card */
  margin: 1.5rem auto 1.2rem;      /* pull it down a bit, small gap below */
  padding: 1.25rem 1.8rem 1.4rem;
  border-radius: 24px;
  border: 1px solid rgba(148, 163, 255, 0.45);
  background:
    radial-gradient(circle at 0 0, rgba(148, 163, 255, 0.22), transparent 55%),
    radial-gradient(circle at 100% 0, rgba(56, 189, 248, 0.16), transparent 60%),
    linear-gradient(to bottom right, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.9));
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.75);
}

/* Modern / techy title */
#slide5 .slide-header h2 {
  margin: 0 0 0.5rem;
  font-size: 2.2rem;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 900;

  /* force solid white text, not image-masked */
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #f9fafb !important;
  color: #f9fafb;
}

/* Subtitle – softer white */
#slide5 .slide-header .slide-subtitle {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.7;
  color: rgba(241, 245, 249, 0.88);  /* soft white */
}


/* ===== Slide 6 (id="slide5") – spacing + text color only ===== */

/* Pull everything on this slide in a bit and center it */
#slide5 .slide-inner {
  max-width: 1400px;
  margin: 32px auto 40px;   /* top / sides / bottom */
}

/* Reduce the gap under the header card */
#slide5 .slide-header {
  margin-bottom: 12px !important;
}

/* Remove extra top gap before the chart/text area */
#slide5 .slide-grid-5 {
  margin-top: 0 !important;
}

/* Tighten spacing in the right-hand explanation block */
#slide5 #projectionExplTitle {
  margin-top: 0;
  margin-bottom: 0.4rem;
}

#slide5 #projectionExplBody {
  margin-top: 0;
  margin-bottom: 0.8rem;
}

/* Make all text on this slide white / soft white */
#slide5 h2,
#slide5 h3,
#slide5 .card-title,
#slide5 label,
#slide5 p {
  color: #f9fafb;
}

/* Slightly softer white for body / hint text so hierarchy looks nice */
#slide5 .slide-header p,
#slide5 #projectionExplBody,
#slide5 .projection-anno-text,
#slide5 .chart-hint {
  color: rgba(226, 232, 240, 0.9);
}

/* --- Glass panels: TIMELINE slide only --- */
#timelineSlide .viz-card {
  width: auto;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(148, 163, 255, 0.36);
  box-shadow: 0 32px 80px rgba(15, 23, 42, 0.9);
  background:
    radial-gradient(circle at 0 0, rgba(148, 163, 255, 0.18), transparent 60%),
    radial-gradient(circle at 100% 0, rgba(56, 189, 248, 0.18), transparent 65%),
    linear-gradient(to bottom right, rgba(15, 23, 42, 0.97), rgba(15, 23, 42, 0.9));
  padding: 1.9rem 2.2rem 2.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

/* --- Glass panels: 3D GLOBAL EMISSIONS slide only --- */
#slide-3d .ui-panel,
#slide-3d #sector-panel {
  border-radius: var(--radius-lg);
  border: 1px solid rgba(148, 163, 255, 0.36);
  box-shadow: 0 32px 80px rgba(15, 23, 42, 0.9);
  background:
    radial-gradient(circle at 0 0, rgba(148, 163, 255, 0.18), transparent 60%),
    radial-gradient(circle at 100% 0, rgba(56, 189, 248, 0.18), transparent 65%),
    linear-gradient(to bottom right, rgba(15, 23, 42, 0.97), rgba(15, 23, 42, 0.9));
}

/* ---- Slide 5 layout & spacing tweaks ---- */
#slide5 .slide-inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 40px 48px 48px;
}

/* Put the pill header and the content on the same left edge
   and tighten the gap below it */
#slide5 .slide-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* align with chart/text, not centered alone */
  margin: 0 0 16px;
}



/* Make sure the two cards don’t add extra top margin */
#slide5 .slide5-left-card,
#slide5 .slide5-right-card {
  margin-top: 0;
}

/* Emissions projection chart – make axes white */
.projection-x-axis path,
.projection-x-axis line,
.projection-y-axis path,
.projection-y-axis line {
  stroke: #e5e7eb;      /* light gray/white lines */
}

.projection-x-axis text,
.projection-y-axis text {
  fill: #e5e7eb;        /* light labels */
}

/* Overall padding so the slide isn't floating awkwardly */
#timelineSlide {
  padding-top: 72px;
  padding-bottom: 80px;
}

/* Shared width for header + cards */
.timeline-shell {
  max-width: 1180px;          /* tune if needed */
  margin: 0 auto;
}

/* Title + subtitle "card" that lines up with the two viz cards */
.timeline-header-card {
  background:
    radial-gradient(circle at 0 0, rgba(148, 163, 255, 0.26), transparent 55%),
    radial-gradient(circle at 100% 0, rgba(56, 189, 248, 0.16), transparent 60%),
    linear-gradient(to bottom right, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.86));
  border-radius: 28px;
  padding: 24px 40px 28px;
  margin-bottom: -30px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.85);
}

/* Tighten the header text a bit so it feels less “floaty” */
.timeline-header-card .slide-title {
  margin: 0 0 10px;
  font-size: 40px;
  letter-spacing: 0.13em;
  font-weight: 800;
}

.timeline-header-card .slide-subtitle {
  margin: 0;
  max-width: 52rem;
  font-size: 14px;
  line-height: 1.6;
  color: #ffffff;
}

/* Two-card layout under the header, aligned with it */
.timeline-row {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 28px;
}

/* Make both cards the same visual height & remove extra inner gaps */
.timeline-row .viz-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Optional: reduce extra space above the SVG inside the left card */
#timelineContainer {
  margin-top: 16px;
}

/* Optional: tighten the summary body so it reads like a column */
.timeline-summary-card #timelineSummaryText {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.7;
}

/* Responsive: stack the cards on narrow widths */
@media (max-width: 900px) {
  .timeline-row {
    grid-template-columns: 1fr;
  }

  .timeline-header-card {
    padding: 20px 24px;
  }
}

/* Projection slide – dashed milestone lines + labels */
.proj-policy-line {
  stroke: #e5e7eb;      /* light line */
}

.proj-policy-label {
  fill: #e5e7eb;        /* light text */
}

#timelineSlide {
  padding-top: 64px;
  padding-bottom: 80px;
  display: flex;
  justify-content: center;   /* center the inner shell */
}