/* Interactive anime.js story layer for pdviz2 test build. Keeps existing data/chart code intact. */
:root {
  --story-glass: rgba(6, 21, 33, .68);
  --story-border: rgba(255,255,255,.16);
  --story-hot: #5de3ff;
  --story-warm: #ffb547;
  --story-deep: #061521;
}

body {
  background:
    radial-gradient(circle at 14% 8%, rgba(93, 227, 255, .18), transparent 24rem),
    radial-gradient(circle at 86% 18%, rgba(255, 181, 71, .12), transparent 22rem),
    linear-gradient(180deg, #061521 0%, #071827 45%, #031018 100%);
}

.topbar.site-nav {
  position: sticky;
  top: 0;
  z-index: 80;
  background: rgba(3, 12, 19, .72);
  border-bottom: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.story-progress {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  z-index: 130;
  background: rgba(255,255,255,.06);
}

.story-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--story-hot), var(--story-warm));
  box-shadow: 0 0 20px rgba(93,227,255,.75);
}

.ambient-orbs {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.orb {
  position: absolute;
  display: block;
  width: 16rem;
  height: 16rem;
  border-radius: 999px;
  filter: blur(38px);
  opacity: .28;
  transform: translate3d(0,0,0);
}

.orb-one { left: 8%; top: 18%; background: rgba(93,227,255,.48); }
.orb-two { right: 8%; top: 36%; background: rgba(55,201,139,.34); }
.orb-three { left: 38%; bottom: 4%; background: rgba(255,181,71,.28); }

.story-dock {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 70;
  display: grid;
  gap: 8px;
  width: 158px;
}

.story-dock a {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 7px 10px;
  border-radius: 999px;
  color: rgba(238,248,255,.72);
  text-decoration: none;
  background: rgba(6, 21, 33, .46);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 12px 32px rgba(0,0,0,.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: 12px;
  font-weight: 800;
  transition: transform .22s ease, border-color .22s ease, color .22s ease, background .22s ease;
}

.story-dock a span {
  display: grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  border-radius: 50%;
  color: #052132;
  background: rgba(93,227,255,.78);
  font-size: 10px;
}

.story-dock a:hover,
.story-dock a.is-active {
  transform: translateX(-6px);
  color: #fff;
  border-color: rgba(93,227,255,.58);
  background: rgba(12, 45, 67, .82);
}

.hero.interactive-scene {
  min-height: calc(100vh - 78px);
  isolation: isolate;
}

.hero-grid,
.section,
.footer {
  position: relative;
  z-index: 2;
}

.hero-grid {
  min-height: calc(100vh - 120px);
}

.hero-copy h1 {
  text-wrap: balance;
  filter: drop-shadow(0 18px 48px rgba(0,0,0,.25));
}

.hero-actions {
  margin-top: 28px;
}

.story-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 900;
  letter-spacing: -.01em;
  border: 1px solid rgba(255,255,255,.18);
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}

.story-button.primary {
  background: linear-gradient(135deg, var(--story-hot), #80f2ff);
  color: #052132;
  box-shadow: 0 18px 42px rgba(93,227,255,.22);
}

.story-button.ghost {
  background: rgba(255,255,255,.08);
  color: #eef8ff;
}

.story-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 48px rgba(0,0,0,.22);
}

.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  color: rgba(238,248,255,.72);
  font-weight: 800;
  font-size: 13px;
}

.scroll-cue span {
  width: 22px;
  height: 34px;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 999px;
  position: relative;
}

.scroll-cue span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 7px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--story-hot);
  animation: scrollDot 1.7s ease-in-out infinite;
}

@keyframes scrollDot {
  0% { transform: translateY(0); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateY(14px); opacity: 0; }
}

.interactive-scene {
  overflow: clip;
}

.interactive-scene::before {
  content: "";
  position: absolute;
  inset: 10px clamp(8px, 2vw, 28px);
  border-radius: clamp(24px, 4vw, 46px);
  border: 1px solid rgba(255,255,255,.05);
  pointer-events: none;
  opacity: .65;
}

.section.interactive-scene {
  padding-top: clamp(76px, 9vw, 128px);
  padding-bottom: clamp(76px, 9vw, 128px);
}

.dashboard-section.interactive-scene::before,
.household-budget-section.interactive-scene::before {
  border-color: rgba(20,48,66,.08);
}

.kpi-card,
.chart-card,
.lens-card,
.real-life-card,
.household-cost-card,
.pressure-card,
.scenario-card,
.opening-story-card,
.insight-card,
.final-takeaway-card,
.ocean-card,
.map-card,
.country-lens-profile-card,
.country-chain-card,
.budget-pathway-card,
.budget-family-card,
.budget-action-card {
  will-change: transform, opacity;
}

.kpi-card,
.lens-card,
.real-life-card,
.household-cost-card,
.chart-card {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, filter .22s ease;
}

.kpi-card:hover,
.lens-card:hover,
.real-life-card:hover,
.household-cost-card:hover,
.chart-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 62px rgba(12,45,67,.20);
}

.chain-flow {
  perspective: 900px;
}

.chain-step {
  transform-style: preserve-3d;
}

.chain-step.is-current {
  outline: 2px solid rgba(93,227,255,.7);
  box-shadow: 0 0 0 8px rgba(93,227,255,.09), 0 16px 36px rgba(0,0,0,.2);
}

.chain-arrow.is-current {
  color: var(--story-hot);
  text-shadow: 0 0 18px rgba(93,227,255,.85);
}

.map-card,
.ocean-card,
.opening-story-card,
.scenario-card,
.household-budget-card,
.country-lens-profile-card,
.country-chain-card,
.final-takeaway-card {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.chart-focus-rail {
  position: sticky;
  top: 92px;
  z-index: 20;
  background: rgba(243,248,251,.82);
  border: 1px solid rgba(20,48,66,.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.interactive-hint {
  display: inline-flex;
  margin: 8px 0 0;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(57,189,248,.12);
  color: #28647e !important;
  font-weight: 900;
  font-size: 13px;
}

body.chart-focus-open {
  overflow: hidden;
}

.chart-card.is-expanded {
  position: fixed;
  z-index: 160;
  inset: 72px clamp(14px, 5vw, 70px) 28px;
  min-height: auto;
  overflow: auto;
  border-color: rgba(93,227,255,.62);
  box-shadow: 0 36px 110px rgba(0,0,0,.44);
  transform: none !important;
}

.chart-card.is-expanded canvas {
  max-height: min(58vh, 560px);
}

.chart-focus-backdrop {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(1, 9, 14, .72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.chart-card::after {
  content: "Click to focus";
  position: absolute;
  right: 18px;
  bottom: 14px;
  color: rgba(40,100,126,.62);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}

.chart-card {
  position: relative;
  cursor: zoom-in;
}

.chart-card:hover::after {
  opacity: 1;
}

.chart-card.is-expanded {
  cursor: zoom-out;
}

.chart-card.is-expanded::after {
  content: "Press Esc or click outside to close";
  opacity: 1;
}

.country-lens-pill,
.country-menu-option,
.focus-step {
  transition: transform .18s ease, box-shadow .18s ease;
}

.country-lens-pill:hover,
.country-menu-option:hover,
.focus-step:hover {
  transform: translateY(-2px);
}

.real-life-grid,
.country-evidence-grid,
.chart-grid,
.kpi-grid,
.household-cost-grid {
  perspective: 1200px;
}

.final-takeaway-section {
  min-height: 90vh;
  display: grid;
  align-items: center;
}

@media (max-width: 1180px) {
  .story-dock { display: none; }
}

@media (max-width: 760px) {
  .story-progress { height: 3px; }
  .ambient-orbs { display: none; }
  .hero.interactive-scene { min-height: auto; }
  .hero-grid { min-height: auto; }
  .section.interactive-scene { padding-top: 64px; padding-bottom: 64px; }
  .chart-focus-rail { position: relative; top: auto; }
  .chart-card.is-expanded { inset: 64px 10px 14px; }
  .interactive-hint { border-radius: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
  .ambient-orbs { display: none; }
}

/* pdviz2 refinement v2: keep the cool layer, but remove layout obstruction. */
:root {
  --story-topbar-height: 72px;
}

html {
  scroll-padding-top: calc(var(--story-topbar-height) + 18px);
}

/* The floating rail was covering chart and country-lens content. Keep it as compact step dots only. */
.story-dock {
  right: 10px;
  width: 46px;
  gap: 7px;
  pointer-events: none;
}

.story-dock a {
  width: 42px;
  min-height: 42px;
  padding: 0;
  justify-content: center;
  overflow: hidden;
  color: transparent;
  font-size: 0;
  pointer-events: auto;
  background: rgba(6, 21, 33, .34);
}

.story-dock a span {
  min-width: 28px;
  height: 28px;
  font-size: 10px;
}

.story-dock a:hover,
.story-dock a.is-active {
  transform: translateX(-3px);
}

.story-dock a::after {
  content: attr(aria-label);
}

@media (max-width: 1500px) {
  .story-dock { display: none; }
}

/* Reduce the oversized scrollytelling gaps seen between sections. */
.section.interactive-scene {
  padding-top: clamp(58px, 6vw, 92px);
  padding-bottom: clamp(58px, 6vw, 92px);
}

.map-lens-transition.section.interactive-scene {
  padding-top: clamp(42px, 4vw, 68px);
  padding-bottom: clamp(42px, 4vw, 68px);
}

.map-section.section.interactive-scene {
  padding-bottom: clamp(48px, 5vw, 76px);
}

/* Do not clip fixed overlays or animated content. This fixes the graph focus issue. */
.interactive-scene {
  overflow: visible;
}

/* Hero chain: show all five steps clearly in one readable pathway on desktop. */
@media (min-width: 1181px) {
  body .hero .hero-panel .ocean-card.chain-card,
  body .hero .hero-panel .chain-card,
  body .hero .hero-grid .ocean-card.chain-card {
    width: min(100%, 980px) !important;
    max-width: 100% !important;
    min-width: 720px !important;
    min-height: 460px !important;
  }

  body .hero .hero-panel .ocean-card.chain-card .chain-card-title,
  body .hero .hero-panel .chain-card .chain-card-title {
    width: min(76%, 720px) !important;
    max-width: 76% !important;
    margin: clamp(30px, 3vw, 46px) 0 clamp(22px, 2.2vw, 34px) !important;
  }

  body .hero .hero-panel .chain-flow,
  .hero .chain-flow {
    display: grid !important;
    grid-template-columns: minmax(92px, 1fr) 22px minmax(92px, 1fr) 22px minmax(92px, 1fr) 22px minmax(92px, 1fr) 22px minmax(110px, 1.1fr) !important;
    gap: 8px !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  body .hero .hero-panel .chain-step,
  body .hero .hero-panel .chain-step.cost,
  .hero .chain-flow .chain-step.cost {
    grid-column: auto !important;
    min-height: 74px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  body .hero .hero-panel .chain-arrow,
  .hero .chain-arrow {
    display: grid !important;
    place-items: center !important;
    min-height: 74px !important;
  }
}

/* Chart focus overlay. The active card is moved to body by JS, so it is never trapped under the backdrop. */
body.chart-focus-open {
  overflow: hidden;
}

.chart-focus-placeholder {
  min-height: 430px;
  border-radius: 24px;
  border: 2px dashed rgba(40,100,126,.22);
  background: rgba(255,255,255,.38);
}

body > .chart-card.is-expanded {
  position: fixed !important;
  z-index: 240 !important;
  inset: 86px clamp(18px, 5vw, 86px) 30px !important;
  width: auto !important;
  max-width: none !important;
  min-height: 0 !important;
  max-height: calc(100vh - 116px) !important;
  overflow: auto !important;
  cursor: zoom-out;
  border-color: rgba(93,227,255,.72) !important;
  box-shadow: 0 36px 110px rgba(0,0,0,.48) !important;
  transform: none !important;
}

body > .chart-card.is-expanded canvas {
  height: min(58vh, 560px) !important;
  max-height: min(58vh, 560px) !important;
}

.chart-focus-backdrop {
  z-index: 220;
  background: rgba(1, 9, 14, .62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

body.chart-focus-open .topbar.site-nav {
  z-index: 260;
}

@media (max-width: 760px) {
  .section.interactive-scene { padding-top: 54px; padding-bottom: 54px; }
  body > .chart-card.is-expanded {
    inset: 72px 10px 14px !important;
    max-height: calc(100vh - 86px) !important;
  }
  body > .chart-card.is-expanded canvas {
    height: 50vh !important;
    max-height: 50vh !important;
  }
}


/* pdviz2 refinement v3: remove the floating chapter dots. They looked good in isolation,
   but in the full page they repeated beside every section and distracted from the evidence. */
.story-dock { display: none !important; }

.top-nav a.is-active,
.top-nav a:hover {
  border-color: rgba(93,227,255,.58);
  background: rgba(12,45,67,.84);
  color: #fff;
}

/* Keep full-page screenshots and long scroll reading cleaner. */
.section.interactive-scene + .section.interactive-scene {
  border-top: 1px solid rgba(255,255,255,.04);
}

/* Focused charts should sit clearly above the page without feeling like a broken blur state. */
.chart-focus-backdrop {
  background: rgba(1, 9, 14, .56) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

.chart-card.is-expanded {
  background: #fff !important;
  z-index: 220 !important;
}

.chart-focus-backdrop {
  z-index: 210 !important;
}

@media (min-width: 1181px) {
  .top-nav a {
    white-space: nowrap;
  }
}


/* pdviz2 refinement v4: restore right-side story rail as compact dots that expand only on hover/focus. */
.story-dock {
  position: fixed !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 95 !important;
  display: grid !important;
  gap: 8px !important;
  width: 46px !important;
  pointer-events: none !important;
}

.story-dock a {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 9px !important;
  width: 42px !important;
  min-height: 42px !important;
  max-width: 42px !important;
  padding: 6px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  color: rgba(238,248,255,.92) !important;
  text-decoration: none !important;
  background: rgba(6, 21, 33, .58) !important;
  border: 1px solid rgba(93,227,255,.38) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.18) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  pointer-events: auto !important;
  transition: width .24s ease, max-width .24s ease, transform .24s ease, background .24s ease, border-color .24s ease, box-shadow .24s ease !important;
}

.story-dock a span {
  flex: 0 0 28px !important;
  display: grid !important;
  place-items: center !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border-radius: 50% !important;
  color: #052132 !important;
  background: rgba(93,227,255,.86) !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  letter-spacing: .02em !important;
}

.story-dock a strong {
  display: inline-block !important;
  opacity: 0 !important;
  transform: translateX(-8px) !important;
  transition: opacity .18s ease .06s, transform .18s ease .06s !important;
}

.story-dock a::after { content: none !important; }

.story-dock a:hover,
.story-dock a:focus-visible,
.story-dock a.is-active {
  width: 148px !important;
  max-width: 148px !important;
  transform: translateX(-102px) !important;
  color: #fff !important;
  border-color: rgba(93,227,255,.75) !important;
  background: rgba(12,45,67,.88) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.28), 0 0 22px rgba(93,227,255,.18) !important;
}

.story-dock a:hover strong,
.story-dock a:focus-visible strong,
.story-dock a.is-active strong {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

/* Keep the rail useful but out of the way on smaller screens. */
@media (max-width: 1180px) {
  .story-dock { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .story-dock a,
  .story-dock a strong { transition: none !important; }
}

/* pdviz2 refinement v5: active rail item should highlight but collapse unless hovered/focused. */
.story-dock a.is-active:not(:hover):not(:focus-visible) {
  width: 42px !important;
  max-width: 42px !important;
  transform: translateX(0) !important;
  background: rgba(6, 21, 33, .66) !important;
  border-color: rgba(93,227,255,.78) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.18), 0 0 0 3px rgba(93,227,255,.08) !important;
}

.story-dock a.is-active:not(:hover):not(:focus-visible) strong {
  opacity: 0 !important;
  transform: translateX(-8px) !important;
}

.story-dock a.is-active:not(:hover):not(:focus-visible) span {
  background: rgba(93,227,255,.96) !important;
}

.story-dock a:hover,
.story-dock a:focus-visible {
  width: 148px !important;
  max-width: 148px !important;
  transform: translateX(-102px) !important;
}

.story-dock a:hover strong,
.story-dock a:focus-visible strong {
  opacity: 1 !important;
  transform: translateX(0) !important;
}