/* ============================================================
   LET'S THINK — style.css
   Calm, philosophical, deeply Indian.
   ============================================================ */

@font-face {
  font-family: 'Nomad Kalari';
  src: url('nomadkalari-regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* --- Variables -------------------------------------------- */
:root {
  --bg-deep:            #3d0f1a;   /* initial: vine red / deep burgundy */
  --bg-light:           #f5f1e8;   /* final: warm parchment      */
  --text-dark:          #1a1a1a;
  --text-light:         #f2ece0;
  --accent:             #7d2027;
  --glass-border:       rgba(255, 255, 255, 0.2);
  /* Deep ink-indigo — pairs with the temple maroon as a classic
     miniature-painting combo.  Stays constant regardless of scroll. */
  --navbar-scrolled-bg: rgba(28, 24, 46, 0.88);
}

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

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg-deep);   /* JS lerps this toward --bg-light on scroll */
  color: var(--text-dark);
  font-family: 'DM Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ============================================================
   NAVBAR  —  Soft "island" pill
   Floating cream-glass capsule with a whisper-quiet tribal DNA:
   Warli sun mark · Ajrakh diamond separators · Pithora 3-dot menu.
   ============================================================ */
#navbar {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  transition: top 0.35s ease;
}

#navbar.scrolled { top: 14px; }

.nav-island {
  display: flex;
  align-items: center;
  gap: 34px;
  height: 68px;
  padding: 0 32px;
  border-radius: 999px;

  background: rgba(232, 215, 185, 0.90);        /* warm beige / aged parchment */
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid rgba(92, 26, 23, 0.14);    /* faint maroon rim */

  box-shadow:
    0 1px 0 rgba(255, 248, 230, 0.70) inset,
    0 10px 32px rgba(61, 15, 26, 0.28),
    0 2px 8px  rgba(61, 15, 26, 0.16);

  transition: background 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

#navbar.scrolled .nav-island {
  background: rgba(228, 208, 175, 0.96);
  border-color: rgba(92, 26, 23, 0.20);
  box-shadow:
    0 1px 0 rgba(255, 248, 230, 0.80) inset,
    0 14px 40px rgba(61, 15, 26, 0.36),
    0 2px 10px  rgba(61, 15, 26, 0.20);
}

/* ── Left — Warli sun + wordmark ─────────────────────── */
.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #3d1020;                            /* deep vine maroon */
  transition: opacity 0.25s ease;
}
.nav-brand:hover { opacity: 0.9; }

.nav-logo {
  width: 26px;
  height: 26px;
  color: #7d2027;
  opacity: 0.95;
  transition: transform 18s linear, opacity 0.25s ease;
  flex-shrink: 0;
}
.nav-brand:hover .nav-logo {
  transform: rotate(360deg);
  opacity: 1;
}

/* logo.png in navbar — tiny icon, like a normal website favicon */
.nav-logo-img {
  height: 45px;
  width: 45px;
  display: block;
  object-fit: contain;
  flex-shrink: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.nav-brand:hover .nav-logo-img {
  opacity: 0.85;
  transform: scale(1.08);
}

.nav-wordmark {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 23px;
  font-weight: 600;
  font-style: italic;
  font-variant: small-caps;
  letter-spacing: 0.015em;
  color: #3d1020;
  line-height: 1;
  white-space: nowrap;
}

/* ── Center — nav links with Ajrakh diamond separators ─ */
.nav-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 2px;
}

.nav-links .nav-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(61, 16, 32, 0.72);             /* muted deep maroon */
  text-decoration: none;
  padding: 9px 14px;
  border-radius: 999px;
  transition: color 0.25s ease, background 0.25s ease;
}

.nav-links .nav-title:hover {
  color: #7d2027;                            /* temple red on hover */
  background: rgba(125, 32, 39, 0.08);       /* faint maroon wash */
}

.nav-sep {
  font-size: 7px;
  color: #7d2027;                            /* temple red diamonds */
  opacity: 0.65;
  user-select: none;
  line-height: 1;
  transform: translateY(-0.5px);
}

/* ── Right — 3-dot Pithora menu ──────────────────────── */
.hamburger {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3.5px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  background: transparent;
  border: 1px solid rgba(92, 26, 23, 0.22);  /* faint maroon rim */
  border-radius: 999px;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.3s ease;
}
.hamburger:hover {
  background: rgba(125, 32, 39, 0.09);
  border-color: rgba(92, 26, 23, 0.50);
}

.hamburger span {
  display: block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #7d2027;                       /* temple red dots */
  opacity: 0.95;
  transition: transform 0.3s ease;
}
.hamburger:hover span:nth-child(1) { transform: translateY(-0.5px); }
.hamburger:hover span:nth-child(3) { transform: translateY(0.5px);  }

/* ── Mobile ───────────────────────────────────────────── */
@media (max-width: 720px) {
  .nav-links { display: none; }
  .nav-island { gap: 16px; padding: 0 18px; height: 52px; }
  .nav-wordmark { font-size: 17px; }
  .nav-logo-img { height: 16px; width: 16px; }
}

/* --- Hero -------------------------------------------------- */
/*
  The hero-track is 300vh. The hero-stage sticks inside it.
  This gives the scroll space needed for the map reveal.
*/
.hero-track {
  height: 300vh;
  position: relative;
}

.hero-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  /* GPU layer — scale + opacity transforms stay smooth */
  will-change: transform, opacity;
  transform-origin: center center;
}

/* Warm atmospheric glow — more visible on the dark initial state */
.hero-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(200, 80, 55, 0.07) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* --- Particle canvas -------------------------------------- */
#particle-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
}

/* --- Centered intro wordmark ------------------------------ */
/*  "Let's Think" sits in the middle of the hero on page load,
    then fades out as the user scrolls into phase 1.           */
.hero-wordmark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  pointer-events: none;
  user-select: none;
  opacity: 1;                       /* JS drives this on scroll */
  transition: opacity 0.25s ease-out;
  will-change: opacity, transform;
}

.hero-wordmark-text {
  font-family: 'Nomad Kalari', Georgia, serif;
  font-style: normal;
  font-weight: normal;
  font-size: clamp(56px, 11vw, 140px);
  letter-spacing: 0.02em;
  line-height: 1;
  color: #f5ebd8;
  text-shadow: 0 2px 24px rgba(20, 10, 6, 0.35);
}

.hero-wordmark-sub {
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  font-size: clamp(10px, 1.1vw, 13px);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(245, 235, 216, 0.55);
  padding-top: 6px;
  border-top: 1px solid rgba(245, 235, 216, 0.25);
  min-width: 200px;
}

/* --- Scroll cue ------------------------------------------- */
.scroll-cue {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0.3;
  pointer-events: none;
  animation: cue-pulse 2.4s ease-in-out infinite;
}

.scroll-cue-line {
  width: 1px;
  height: 36px;
  background: linear-gradient(to bottom, var(--text-light), transparent);
}

.scroll-cue-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-light);
}

@keyframes cue-pulse {
  0%, 100% { opacity: 0.2; transform: translateX(-50%) translateY(0); }
  50%       { opacity: 0.45; transform: translateX(-50%) translateY(6px); }
}

/* ============================================================
   MAP SECTION — Interactive India / Gujarat
   ============================================================ */

.map-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: #fef4ec;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 24px;
}

/* Constrained square-ish container — overflow clips the zoom */
.map-wrapper {
  width: min(100vmin, 920px);
  aspect-ratio: 800 / 900;
  position: relative;
  overflow: hidden;
}

/* SVG element — zooms in via JS-applied CSS transform */
#india-map {
  width: 100%;
  height: 100%;
  display: block;
  transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center center;
  will-change: transform;
}

/* ── Hover-to-name label — pinned to the map's top-right ──── */
.map-state-label {
  position: absolute;
  top: clamp(8px, 3.5%, 30px);
  right: clamp(8px, 3.5%, 34px);
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  pointer-events: none;          /* never steals hover from the dots */
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.map-state-label.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.msl-eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(125, 32, 39, 0.55);
  margin-bottom: 5px;
}
.msl-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: clamp(22px, 4.2vw, 44px);
  line-height: 1.02;
  letter-spacing: 0.01em;
  color: #7d2027;
  max-width: min(62vw, 360px);
  /* cream halo keeps the name legible over any dots behind it */
  text-shadow: 0 0 14px #fef4ec, 0 1px 0 #fef4ec, 0 0 6px #fef4ec;
}

/* ── Layer 1: India silhouette (hidden) ──────────────────── */
#india-base { display: none; }
#india-base path {
  fill:   rgba(125, 32, 39, 0.04);
  stroke: rgba(125, 32, 39, 0.08);
  stroke-width: 2;
  stroke-linejoin: round;
  transition: opacity 0.6s ease;
}

/* ── Layer 2: all-India dots ─────────────────────────────── */
.india-dot {
  fill: rgba(125, 32, 39, 0.30);
  cursor: default;
  transition: transform 0.2s ease, opacity 0.6s ease;
  transform-box: fill-box;
  transform-origin: center;
}

.india-dot:hover { transform: scale(1.2); }

/* ── Layer 3: Gujarat dots ───────────────────────────────── */
.gj-dot {
  fill: rgba(125, 32, 39, 0.30);
  cursor: pointer;
  transition: transform 0.2s ease, fill 0.35s ease, filter 0.35s ease;
  transform-box: fill-box;
  transform-origin: center;
}

.gj-dot.st-active {
  fill:   rgba(220, 110, 20, 0.88);
  animation: gj-pulse 2.8s ease-in-out infinite;
}

.gj-dot.st-active:hover {
  fill: rgba(245, 130, 30, 1.0);
}

@keyframes gj-pulse {
  0%, 100% { opacity: 0.80; }
  50%       { opacity: 1.00; }
}

/* ── Zoomed state ────────────────────────────────────────── */
#india-map.zoomed #india-base path { opacity: 0.45; }

#india-map.zoomed .india-dot { opacity: 0.28; }

#india-map.zoomed .gj-dot {
  animation: none;
  opacity: 1;
  fill: rgba(220, 110, 20, 0.95);
}

/* ── Ripple on click ─────────────────────────────────────── */
.dot-ripple {
  fill: none;
  stroke: rgba(125, 32, 39, 0.55);
  stroke-width: 2;
  pointer-events: none;
  animation: dot-ripple-out 0.48s ease-out forwards;
}

@keyframes dot-ripple-out {
  from { r: 5;  opacity: 0.75; }
  to   { r: 24; opacity: 0;    }
}

/* ── Dot expand on click ─────────────────────────────────── */
.gj-dot.clicking {
  animation: dot-expand 0.42s ease-out forwards !important;
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes dot-expand {
  from { transform: scale(1);   opacity: 1; }
  to   { transform: scale(2.8); opacity: 0; }
}

/* ── Layer 4: Gujarat detail dots ────────────────────────── */
/*   Shown after the user clicks Gujarat twice.              */

/* Quiet background dots that draw the Gujarat silhouette */
.gujarat-detail-dot {
  fill: rgba(125, 32, 39, 0.45);
  cursor: default;
  transition: transform 0.25s ease, fill 0.25s ease;
  transform-box: fill-box;
  transform-origin: center;
}

/* The 8 interactive dots — pulse softly, pointer cursor, glow */
.gj-clickable {
  fill: rgba(125, 32, 39, 0.95);
  cursor: pointer;
  filter: url(#gj-glow);
  animation: gj-pulse 2.4s ease-in-out infinite;
}

.gj-clickable:hover {
  transform: scale(1.5);
  fill: rgba(175, 52, 59, 1);
  filter: url(#gj-glow-strong);
}

.gj-clickable.clicking {
  animation: dot-expand 0.42s ease-out forwards !important;
  transform-box: fill-box;
  transform-origin: center;
}

/* ── City labels on the Gujarat detail map ───────────────── */
.gj-labels { pointer-events: none; }

/* Small Ajrakh diamond glyph between dot and name */
.gj-label-dmd {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 14px;
  fill: rgba(232, 163, 74, 1);   /* marigold */
  opacity: 0;
  animation: gj-label-in 1.2s ease forwards;
}

/* City name — italic, elegant, with a warm parchment halo */
.gj-label-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 20px;
  font-weight: 700;
  fill: rgba(20, 20, 20, 0.97);
  letter-spacing: 0.05em;
  opacity: 0;
  animation: gj-label-in 1.2s ease forwards;
  paint-order: stroke;
  stroke: rgba(245, 241, 232, 1);
  stroke-width: 5;
  stroke-linejoin: round;
}

/* soft hover: diamond warms, name darkens (on the clickable dot group) */
.gj-clickable:hover ~ .gj-labels .gj-label-dmd,
.gj-labels:hover .gj-label-dmd { fill: #7d2027; }

@keyframes gj-label-in {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════════════════
   JAMMU & KASHMIR — interactive dots (blue theme)
   ══════════════════════════════════════════════════════════ */
.jk-dot {
  fill: rgba(125, 32, 39, 0.30);
  cursor: pointer;
  transition: transform 0.2s ease, fill 0.35s ease, filter 0.35s ease;
  transform-box: fill-box;
  transform-origin: center;
}

.jk-dot.st-active {
  fill: rgba(37, 99, 164, 0.85);
  animation: jk-pulse 2.8s ease-in-out infinite;
}

.jk-dot.st-active:hover {
  fill: rgba(96, 165, 250, 1.0);
}

@keyframes jk-pulse {
  0%, 100% { opacity: 0.78; }
  50%       { opacity: 1.00; }
}

.jk-dot.clicking {
  animation: dot-expand 0.42s ease-out forwards !important;
  transform-box: fill-box;
  transform-origin: center;
}

/* ── JK detail dots (mirrors Gujarat pattern, blue theme) ── */
.jk-detail-dot {
  fill: rgba(37, 99, 164, 0.42);
  cursor: default;
  transition: transform 0.25s ease, fill 0.25s ease;
  transform-box: fill-box;
  transform-origin: center;
}

.jk-clickable {
  fill: rgba(37, 99, 164, 0.95);
  cursor: pointer;
  filter: url(#jk-glow);
  animation: jk-pulse 2.4s ease-in-out infinite;
}

.jk-clickable:hover {
  transform: scale(1.5);
  fill: rgba(96, 165, 250, 1);
  filter: url(#jk-glow-strong);
}

.jk-clickable.clicking {
  animation: dot-expand 0.42s ease-out forwards !important;
  transform-box: fill-box;
  transform-origin: center;
}

.jk-labels { pointer-events: none; }

.jk-label-dmd {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 14px;
  fill: rgba(96, 165, 250, 1);
  opacity: 0;
  animation: gj-label-in 1.2s ease forwards;
}

.jk-label-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 20px;
  font-weight: 700;
  fill: rgba(20, 20, 20, 0.97);
  letter-spacing: 0.05em;
  opacity: 0;
  animation: gj-label-in 1.2s ease forwards;
  paint-order: stroke;
  stroke: rgba(245, 241, 232, 1);
  stroke-width: 5;
  stroke-linejoin: round;
}

/* ══════════════════════════════════════════════════════════
   MAHARASHTRA — detail map dot styles (Deccan earth palette)
   ══════════════════════════════════════════════════════════ */
.mh-detail-dot {
  fill: rgba(154, 88, 51, 0.45);
  cursor: default;
  transition: transform 0.25s ease, fill 0.25s ease;
  transform-box: fill-box;
  transform-origin: center;
}
.mh-clickable {
  fill: rgba(154, 88, 51, 0.95);
  cursor: pointer;
  filter: url(#mh-glow);
  animation: mh-pulse 2.4s ease-in-out infinite;
}
.mh-clickable:hover {
  transform: scale(1.5);
  fill: rgba(200, 120, 70, 1);
  filter: url(#mh-glow-strong);
}
.mh-clickable.clicking {
  animation: dot-expand 0.42s ease-out forwards !important;
  transform-box: fill-box;
  transform-origin: center;
}
.mh-labels { pointer-events: none; }
.mh-label-dmd {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 14px;
  fill: rgba(199, 154, 58, 1);
  opacity: 0;
  animation: gj-label-in 1.2s ease forwards;
}
.mh-label-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 20px;
  font-weight: 700;
  fill: rgba(20, 20, 20, 0.97);
  letter-spacing: 0.05em;
  opacity: 0;
  animation: gj-label-in 1.2s ease forwards;
  paint-order: stroke;
  stroke: rgba(245, 241, 232, 1);
  stroke-width: 5;
  stroke-linejoin: round;
}
@keyframes mh-pulse {
  0%, 100% { opacity: 0.78; }
  50%       { opacity: 1.00; }
}

/* ══════════════════════════════════════════════════════════
   MADHYA PRADESH — detail map dot styles (forest green palette)
   ══════════════════════════════════════════════════════════ */
.mp-detail-dot {
  fill: rgba(47, 74, 53, 0.45);
  cursor: default;
  transition: transform 0.25s ease, fill 0.25s ease;
  transform-box: fill-box;
  transform-origin: center;
}
.mp-clickable {
  fill: rgba(47, 74, 53, 0.95);
  cursor: pointer;
  filter: url(#mp-glow);
  animation: mp-pulse 2.4s ease-in-out infinite;
}
.mp-clickable:hover {
  transform: scale(1.5);
  fill: rgba(72, 110, 80, 1);
  filter: url(#mp-glow-strong);
}
.mp-clickable.clicking {
  animation: dot-expand 0.42s ease-out forwards !important;
  transform-box: fill-box;
  transform-origin: center;
}
.mp-labels { pointer-events: none; }
.mp-label-dmd {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 14px;
  fill: rgba(200, 162, 74, 1);
  opacity: 0;
  animation: gj-label-in 1.2s ease forwards;
}
.mp-label-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 20px;
  font-weight: 700;
  fill: rgba(20, 20, 20, 0.97);
  letter-spacing: 0.05em;
  opacity: 0;
  animation: gj-label-in 1.2s ease forwards;
  paint-order: stroke;
  stroke: rgba(245, 241, 232, 1);
  stroke-width: 5;
  stroke-linejoin: round;
}
@keyframes mp-pulse {
  0%, 100% { opacity: 0.78; }
  50%       { opacity: 1.00; }
}


/* ══════════════════════════════════════════════════════════
   NEW STATES — detail map dot styles (unique palette each)
   Punjab · Haryana · Rajasthan · West Bengal · Goa ·
   Andhra Pradesh · Kerala · Tamil Nadu
   ══════════════════════════════════════════════════════════ */
/* ── Punjab detail dots ── */
.pb-detail-dot { fill: rgba(168,50,45,0.45); cursor: default; transition: transform 0.25s ease, fill 0.25s ease; transform-box: fill-box; transform-origin: center; }
.pb-clickable { fill: rgba(168,50,45,0.95); cursor: pointer; filter: url(#pb-glow); animation: pb-pulse 2.4s ease-in-out infinite; }
.pb-clickable:hover { transform: scale(1.5); fill: rgba(196,78,60,1); filter: url(#pb-glow-strong); }
.pb-clickable.clicking { animation: dot-expand 0.42s ease-out forwards !important; transform-box: fill-box; transform-origin: center; }
.pb-labels { pointer-events: none; }
.pb-label-dmd { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 14px; fill: rgba(214,169,71,1); opacity: 0; animation: gj-label-in 1.2s ease forwards; }
.pb-label-text { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 20px; font-weight: 700; fill: rgba(20,20,20,0.97); letter-spacing: 0.05em; opacity: 0; animation: gj-label-in 1.2s ease forwards; paint-order: stroke; stroke: rgba(245,241,232,1); stroke-width: 5; stroke-linejoin: round; }
@keyframes pb-pulse { 0%,100% { opacity: 0.78; } 50% { opacity: 1.00; } }
/* ── Haryana detail dots ── */
.hr-detail-dot { fill: rgba(139,87,56,0.45); cursor: default; transition: transform 0.25s ease, fill 0.25s ease; transform-box: fill-box; transform-origin: center; }
.hr-clickable { fill: rgba(139,87,56,0.95); cursor: pointer; filter: url(#hr-glow); animation: hr-pulse 2.4s ease-in-out infinite; }
.hr-clickable:hover { transform: scale(1.5); fill: rgba(166,110,72,1); filter: url(#hr-glow-strong); }
.hr-clickable.clicking { animation: dot-expand 0.42s ease-out forwards !important; transform-box: fill-box; transform-origin: center; }
.hr-labels { pointer-events: none; }
.hr-label-dmd { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 14px; fill: rgba(201,163,57,1); opacity: 0; animation: gj-label-in 1.2s ease forwards; }
.hr-label-text { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 20px; font-weight: 700; fill: rgba(20,20,20,0.97); letter-spacing: 0.05em; opacity: 0; animation: gj-label-in 1.2s ease forwards; paint-order: stroke; stroke: rgba(245,241,232,1); stroke-width: 5; stroke-linejoin: round; }
@keyframes hr-pulse { 0%,100% { opacity: 0.78; } 50% { opacity: 1.00; } }
/* ── Rajasthan detail dots ── */
.rj-detail-dot { fill: rgba(163,69,45,0.45); cursor: default; transition: transform 0.25s ease, fill 0.25s ease; transform-box: fill-box; transform-origin: center; }
.rj-clickable { fill: rgba(163,69,45,0.95); cursor: pointer; filter: url(#rj-glow); animation: rj-pulse 2.4s ease-in-out infinite; }
.rj-clickable:hover { transform: scale(1.5); fill: rgba(190,96,64,1); filter: url(#rj-glow-strong); }
.rj-clickable.clicking { animation: dot-expand 0.42s ease-out forwards !important; transform-box: fill-box; transform-origin: center; }
.rj-labels { pointer-events: none; }
.rj-label-dmd { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 14px; fill: rgba(213,155,45,1); opacity: 0; animation: gj-label-in 1.2s ease forwards; }
.rj-label-text { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 20px; font-weight: 700; fill: rgba(20,20,20,0.97); letter-spacing: 0.05em; opacity: 0; animation: gj-label-in 1.2s ease forwards; paint-order: stroke; stroke: rgba(245,241,232,1); stroke-width: 5; stroke-linejoin: round; }
@keyframes rj-pulse { 0%,100% { opacity: 0.78; } 50% { opacity: 1.00; } }
/* ── West Bengal detail dots ── */
.wb-detail-dot { fill: rgba(164,71,45,0.45); cursor: default; transition: transform 0.25s ease, fill 0.25s ease; transform-box: fill-box; transform-origin: center; }
.wb-clickable { fill: rgba(164,71,45,0.95); cursor: pointer; filter: url(#wb-glow); animation: wb-pulse 2.4s ease-in-out infinite; }
.wb-clickable:hover { transform: scale(1.5); fill: rgba(190,96,62,1); filter: url(#wb-glow-strong); }
.wb-clickable.clicking { animation: dot-expand 0.42s ease-out forwards !important; transform-box: fill-box; transform-origin: center; }
.wb-labels { pointer-events: none; }
.wb-label-dmd { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 14px; fill: rgba(166,106,47,1); opacity: 0; animation: gj-label-in 1.2s ease forwards; }
.wb-label-text { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 20px; font-weight: 700; fill: rgba(20,20,20,0.97); letter-spacing: 0.05em; opacity: 0; animation: gj-label-in 1.2s ease forwards; paint-order: stroke; stroke: rgba(245,241,232,1); stroke-width: 5; stroke-linejoin: round; }
@keyframes wb-pulse { 0%,100% { opacity: 0.78; } 50% { opacity: 1.00; } }
/* ── Goa detail dots ── */
.go-detail-dot { fill: rgba(166,83,56,0.45); cursor: default; transition: transform 0.25s ease, fill 0.25s ease; transform-box: fill-box; transform-origin: center; }
.go-clickable { fill: rgba(166,83,56,0.95); cursor: pointer; filter: url(#go-glow); animation: go-pulse 2.4s ease-in-out infinite; }
.go-clickable:hover { transform: scale(1.5); fill: rgba(190,108,78,1); filter: url(#go-glow-strong); }
.go-clickable.clicking { animation: dot-expand 0.42s ease-out forwards !important; transform-box: fill-box; transform-origin: center; }
.go-labels { pointer-events: none; }
.go-label-dmd { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 14px; fill: rgba(46,111,149,1); opacity: 0; animation: gj-label-in 1.2s ease forwards; }
.go-label-text { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 20px; font-weight: 700; fill: rgba(20,20,20,0.97); letter-spacing: 0.05em; opacity: 0; animation: gj-label-in 1.2s ease forwards; paint-order: stroke; stroke: rgba(245,241,232,1); stroke-width: 5; stroke-linejoin: round; }
@keyframes go-pulse { 0%,100% { opacity: 0.78; } 50% { opacity: 1.00; } }
/* ── Andhra Pradesh detail dots ── */
.ap-detail-dot { fill: rgba(180,58,46,0.45); cursor: default; transition: transform 0.25s ease, fill 0.25s ease; transform-box: fill-box; transform-origin: center; }
.ap-clickable { fill: rgba(180,58,46,0.95); cursor: pointer; filter: url(#ap-glow); animation: ap-pulse 2.4s ease-in-out infinite; }
.ap-clickable:hover { transform: scale(1.5); fill: rgba(200,84,68,1); filter: url(#ap-glow-strong); }
.ap-clickable.clicking { animation: dot-expand 0.42s ease-out forwards !important; transform-box: fill-box; transform-origin: center; }
.ap-labels { pointer-events: none; }
.ap-label-dmd { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 14px; fill: rgba(215,154,50,1); opacity: 0; animation: gj-label-in 1.2s ease forwards; }
.ap-label-text { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 20px; font-weight: 700; fill: rgba(20,20,20,0.97); letter-spacing: 0.05em; opacity: 0; animation: gj-label-in 1.2s ease forwards; paint-order: stroke; stroke: rgba(245,241,232,1); stroke-width: 5; stroke-linejoin: round; }
@keyframes ap-pulse { 0%,100% { opacity: 0.78; } 50% { opacity: 1.00; } }
/* ── Kerala detail dots ── */
.kl-detail-dot { fill: rgba(47,91,60,0.45); cursor: default; transition: transform 0.25s ease, fill 0.25s ease; transform-box: fill-box; transform-origin: center; }
.kl-clickable { fill: rgba(47,91,60,0.95); cursor: pointer; filter: url(#kl-glow); animation: kl-pulse 2.4s ease-in-out infinite; }
.kl-clickable:hover { transform: scale(1.5); fill: rgba(66,118,82,1); filter: url(#kl-glow-strong); }
.kl-clickable.clicking { animation: dot-expand 0.42s ease-out forwards !important; transform-box: fill-box; transform-origin: center; }
.kl-labels { pointer-events: none; }
.kl-label-dmd { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 14px; fill: rgba(201,162,63,1); opacity: 0; animation: gj-label-in 1.2s ease forwards; }
.kl-label-text { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 20px; font-weight: 700; fill: rgba(20,20,20,0.97); letter-spacing: 0.05em; opacity: 0; animation: gj-label-in 1.2s ease forwards; paint-order: stroke; stroke: rgba(245,241,232,1); stroke-width: 5; stroke-linejoin: round; }
@keyframes kl-pulse { 0%,100% { opacity: 0.78; } 50% { opacity: 1.00; } }
/* ── Tamil Nadu detail dots ── */
.tn-detail-dot { fill: rgba(126,45,47,0.45); cursor: default; transition: transform 0.25s ease, fill 0.25s ease; transform-box: fill-box; transform-origin: center; }
.tn-clickable { fill: rgba(126,45,47,0.95); cursor: pointer; filter: url(#tn-glow); animation: tn-pulse 2.4s ease-in-out infinite; }
.tn-clickable:hover { transform: scale(1.5); fill: rgba(156,66,68,1); filter: url(#tn-glow-strong); }
.tn-clickable.clicking { animation: dot-expand 0.42s ease-out forwards !important; transform-box: fill-box; transform-origin: center; }
.tn-labels { pointer-events: none; }
.tn-label-dmd { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 14px; fill: rgba(201,162,63,1); opacity: 0; animation: gj-label-in 1.2s ease forwards; }
.tn-label-text { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 20px; font-weight: 700; fill: rgba(20,20,20,0.97); letter-spacing: 0.05em; opacity: 0; animation: gj-label-in 1.2s ease forwards; paint-order: stroke; stroke: rgba(245,241,232,1); stroke-width: 5; stroke-linejoin: round; }
@keyframes tn-pulse { 0%,100% { opacity: 0.78; } 50% { opacity: 1.00; } }


/* ══════════════════════════════════════════════════════════
   NEW STATES BATCH 2 — detail map dot styles (unique palette each)
   Uttar Pradesh · Bihar · Chhattisgarh · Odisha · Sikkim* ·
   Karnataka · Northeast India · Himachal Pradesh
   (*Sikkim uses a placeholder dotted map — see script.js TODO)
   ══════════════════════════════════════════════════════════ */
.up-detail-dot { fill: rgba(138,90,45,0.45); cursor: default; transition: transform 0.25s ease, fill 0.25s ease; transform-box: fill-box; transform-origin: center; }
.up-clickable { fill: rgba(138,90,45,0.95); cursor: pointer; filter: url(#up-glow); animation: up-pulse 2.4s ease-in-out infinite; }
.up-clickable:hover { transform: scale(1.5); fill: rgba(165,112,60,1); filter: url(#up-glow-strong); }
.up-clickable.clicking { animation: dot-expand 0.42s ease-out forwards !important; transform-box: fill-box; transform-origin: center; }
.up-labels { pointer-events: none; }
.up-label-dmd { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 14px; fill: rgba(200,154,58,1); opacity: 0; animation: gj-label-in 1.2s ease forwards; }
.up-label-text { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 20px; font-weight: 700; fill: rgba(20,20,20,0.97); letter-spacing: 0.05em; opacity: 0; animation: gj-label-in 1.2s ease forwards; paint-order: stroke; stroke: rgba(245,241,232,1); stroke-width: 5; stroke-linejoin: round; }
@keyframes up-pulse { 0%,100% { opacity: 0.78; } 50% { opacity: 1.00; } }
.br-detail-dot { fill: rgba(164,60,47,0.45); cursor: default; transition: transform 0.25s ease, fill 0.25s ease; transform-box: fill-box; transform-origin: center; }
.br-clickable { fill: rgba(164,60,47,0.95); cursor: pointer; filter: url(#br-glow); animation: br-pulse 2.4s ease-in-out infinite; }
.br-clickable:hover { transform: scale(1.5); fill: rgba(190,82,64,1); filter: url(#br-glow-strong); }
.br-clickable.clicking { animation: dot-expand 0.42s ease-out forwards !important; transform-box: fill-box; transform-origin: center; }
.br-labels { pointer-events: none; }
.br-label-dmd { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 14px; fill: rgba(201,177,95,1); opacity: 0; animation: gj-label-in 1.2s ease forwards; }
.br-label-text { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 20px; font-weight: 700; fill: rgba(20,20,20,0.97); letter-spacing: 0.05em; opacity: 0; animation: gj-label-in 1.2s ease forwards; paint-order: stroke; stroke: rgba(245,241,232,1); stroke-width: 5; stroke-linejoin: round; }
@keyframes br-pulse { 0%,100% { opacity: 0.78; } 50% { opacity: 1.00; } }
.cg-detail-dot { fill: rgba(47,77,55,0.45); cursor: default; transition: transform 0.25s ease, fill 0.25s ease; transform-box: fill-box; transform-origin: center; }
.cg-clickable { fill: rgba(47,77,55,0.95); cursor: pointer; filter: url(#cg-glow); animation: cg-pulse 2.4s ease-in-out infinite; }
.cg-clickable:hover { transform: scale(1.5); fill: rgba(66,104,78,1); filter: url(#cg-glow-strong); }
.cg-clickable.clicking { animation: dot-expand 0.42s ease-out forwards !important; transform-box: fill-box; transform-origin: center; }
.cg-labels { pointer-events: none; }
.cg-label-dmd { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 14px; fill: rgba(160,106,53,1); opacity: 0; animation: gj-label-in 1.2s ease forwards; }
.cg-label-text { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 20px; font-weight: 700; fill: rgba(20,20,20,0.97); letter-spacing: 0.05em; opacity: 0; animation: gj-label-in 1.2s ease forwards; paint-order: stroke; stroke: rgba(245,241,232,1); stroke-width: 5; stroke-linejoin: round; }
@keyframes cg-pulse { 0%,100% { opacity: 0.78; } 50% { opacity: 1.00; } }
.od-detail-dot { fill: rgba(167,56,45,0.45); cursor: default; transition: transform 0.25s ease, fill 0.25s ease; transform-box: fill-box; transform-origin: center; }
.od-clickable { fill: rgba(167,56,45,0.95); cursor: pointer; filter: url(#od-glow); animation: od-pulse 2.4s ease-in-out infinite; }
.od-clickable:hover { transform: scale(1.5); fill: rgba(192,80,66,1); filter: url(#od-glow-strong); }
.od-clickable.clicking { animation: dot-expand 0.42s ease-out forwards !important; transform-box: fill-box; transform-origin: center; }
.od-labels { pointer-events: none; }
.od-label-dmd { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 14px; fill: rgba(213,162,58,1); opacity: 0; animation: gj-label-in 1.2s ease forwards; }
.od-label-text { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 20px; font-weight: 700; fill: rgba(20,20,20,0.97); letter-spacing: 0.05em; opacity: 0; animation: gj-label-in 1.2s ease forwards; paint-order: stroke; stroke: rgba(245,241,232,1); stroke-width: 5; stroke-linejoin: round; }
@keyframes od-pulse { 0%,100% { opacity: 0.78; } 50% { opacity: 1.00; } }
.sk-detail-dot { fill: rgba(123,46,46,0.45); cursor: default; transition: transform 0.25s ease, fill 0.25s ease; transform-box: fill-box; transform-origin: center; }
.sk-clickable { fill: rgba(123,46,46,0.95); cursor: pointer; filter: url(#sk-glow); animation: sk-pulse 2.4s ease-in-out infinite; }
.sk-clickable:hover { transform: scale(1.5); fill: rgba(150,68,68,1); filter: url(#sk-glow-strong); }
.sk-clickable.clicking { animation: dot-expand 0.42s ease-out forwards !important; transform-box: fill-box; transform-origin: center; }
.sk-labels { pointer-events: none; }
.sk-label-dmd { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 14px; fill: rgba(198,154,60,1); opacity: 0; animation: gj-label-in 1.2s ease forwards; }
.sk-label-text { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 20px; font-weight: 700; fill: rgba(20,20,20,0.97); letter-spacing: 0.05em; opacity: 0; animation: gj-label-in 1.2s ease forwards; paint-order: stroke; stroke: rgba(245,241,232,1); stroke-width: 5; stroke-linejoin: round; }
@keyframes sk-pulse { 0%,100% { opacity: 0.78; } 50% { opacity: 1.00; } }
.ka-detail-dot { fill: rgba(169,59,45,0.45); cursor: default; transition: transform 0.25s ease, fill 0.25s ease; transform-box: fill-box; transform-origin: center; }
.ka-clickable { fill: rgba(169,59,45,0.95); cursor: pointer; filter: url(#ka-glow); animation: ka-pulse 2.4s ease-in-out infinite; }
.ka-clickable:hover { transform: scale(1.5); fill: rgba(190,82,66,1); filter: url(#ka-glow-strong); }
.ka-clickable.clicking { animation: dot-expand 0.42s ease-out forwards !important; transform-box: fill-box; transform-origin: center; }
.ka-labels { pointer-events: none; }
.ka-label-dmd { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 14px; fill: rgba(201,154,58,1); opacity: 0; animation: gj-label-in 1.2s ease forwards; }
.ka-label-text { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 20px; font-weight: 700; fill: rgba(20,20,20,0.97); letter-spacing: 0.05em; opacity: 0; animation: gj-label-in 1.2s ease forwards; paint-order: stroke; stroke: rgba(245,241,232,1); stroke-width: 5; stroke-linejoin: round; }
@keyframes ka-pulse { 0%,100% { opacity: 0.78; } 50% { opacity: 1.00; } }
.ne-detail-dot { fill: rgba(70,102,58,0.45); cursor: default; transition: transform 0.25s ease, fill 0.25s ease; transform-box: fill-box; transform-origin: center; }
.ne-clickable { fill: rgba(70,102,58,0.95); cursor: pointer; filter: url(#ne-glow); animation: ne-pulse 2.4s ease-in-out infinite; }
.ne-clickable:hover { transform: scale(1.5); fill: rgba(96,128,82,1); filter: url(#ne-glow-strong); }
.ne-clickable.clicking { animation: dot-expand 0.42s ease-out forwards !important; transform-box: fill-box; transform-origin: center; }
.ne-labels { pointer-events: none; }
.ne-label-dmd { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 14px; fill: rgba(184,138,60,1); opacity: 0; animation: gj-label-in 1.2s ease forwards; }
.ne-label-text { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 20px; font-weight: 700; fill: rgba(20,20,20,0.97); letter-spacing: 0.05em; opacity: 0; animation: gj-label-in 1.2s ease forwards; paint-order: stroke; stroke: rgba(245,241,232,1); stroke-width: 5; stroke-linejoin: round; }
@keyframes ne-pulse { 0%,100% { opacity: 0.78; } 50% { opacity: 1.00; } }
.hp-detail-dot { fill: rgba(163,59,49,0.45); cursor: default; transition: transform 0.25s ease, fill 0.25s ease; transform-box: fill-box; transform-origin: center; }
.hp-clickable { fill: rgba(163,59,49,0.95); cursor: pointer; filter: url(#hp-glow); animation: hp-pulse 2.4s ease-in-out infinite; }
.hp-clickable:hover { transform: scale(1.5); fill: rgba(188,82,70,1); filter: url(#hp-glow-strong); }
.hp-clickable.clicking { animation: dot-expand 0.42s ease-out forwards !important; transform-box: fill-box; transform-origin: center; }
.hp-labels { pointer-events: none; }
.hp-label-dmd { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 14px; fill: rgba(192,146,47,1); opacity: 0; animation: gj-label-in 1.2s ease forwards; }
.hp-label-text { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 20px; font-weight: 700; fill: rgba(20,20,20,0.97); letter-spacing: 0.05em; opacity: 0; animation: gj-label-in 1.2s ease forwards; paint-order: stroke; stroke: rgba(245,241,232,1); stroke-width: 5; stroke-linejoin: round; }
@keyframes hp-pulse { 0%,100% { opacity: 0.78; } 50% { opacity: 1.00; } }

/* ══════════════════════════════════════════════════════════
   ALL OTHER STATES — coloured, clickable dot regions
   Each state has a unique fill (matching alldotted.png) and
   a darker / brighter hover.  The shared .state-dot rule
   handles cursor, glow, pulse, hover transform.
   ══════════════════════════════════════════════════════════ */
.state-dot {
  fill: rgba(125, 32, 39, 0.30);
  cursor: pointer;
  transition: transform 0.2s ease, fill 0.35s ease, filter 0.35s ease;
  transform-box: fill-box;
  transform-origin: center;
}

.state-dot.st-active {
  animation: state-pulse 2.8s ease-in-out infinite;
}

/* No scale/blur on hover — the per-state .st-xx.st-active:hover rule brightens
   the fill. Avoids the per-dot scale flicker and the heavy multi-dot filter. */
.state-dot.st-active:hover {
  fill: rgba(120, 40, 48, 1);
}

@keyframes state-pulse {
  0%, 100% { opacity: 0.78; }
  50%       { opacity: 1.00; }
}

.state-dot.clicking {
  animation: dot-expand 0.42s ease-out forwards !important;
  transform-box: fill-box;
  transform-origin: center;
}

#india-map.zoomed .state-dot {
  filter: url(#state-glow-strong);
}

/* ── Per-state colour palette ─────────────────────────────
   Fills only appear when the state is hovered (.st-active).
   Without .st-active every dot stays the neutral maroon.  */
.st-pb.st-active { fill: rgba(192, 100, 130, 0.90); }   /* Punjab        — pomegranate rose  */
.st-pb.st-active:hover { fill: rgba(208, 122, 150, 1); }

.st-hp.st-active { fill: rgba(205, 105,  60, 0.90); }   /* Himachal      — terracotta orange */
.st-hp.st-active:hover { fill: rgba(220, 130,  85, 1); }

.st-uk.st-active { fill: rgba(110, 158, 148, 0.90); }   /* Uttarakhand   — verdigris teal    */
.st-uk.st-active:hover { fill: rgba(132, 180, 168, 1); }

.st-hr.st-active { fill: rgba(188,  92, 120, 0.90); }   /* Haryana       — madder rose       */
.st-hr.st-active:hover { fill: rgba(204, 116, 142, 1); }

.st-rj.st-active { fill: rgba(178,  78,  68, 0.90); }   /* Rajasthan     — madder red        */
.st-rj.st-active:hover { fill: rgba(196, 102,  92, 1); }

.st-up.st-active { fill: rgba( 82, 118, 168, 0.90); }   /* UP            — lapis indigo      */
.st-up.st-active:hover { fill: rgba(108, 142, 188, 1); }

.st-br.st-active { fill: rgba(175,  90, 130, 0.90); }   /* Bihar         — berry             */
.st-br.st-active:hover { fill: rgba(196, 114, 152, 1); }

.st-jh.st-active { fill: rgba(130,  78, 138, 0.90); }   /* Jharkhand     — aubergine         */
.st-jh.st-active:hover { fill: rgba(154, 102, 162, 1); }

.st-sk.st-active { fill: rgba(200, 102,  58, 0.90); }   /* Sikkim        — rust orange       */
.st-sk.st-active:hover { fill: rgba(218, 124,  82, 1); }

.st-wb.st-active { fill: rgba(212, 168,  62, 0.92); }   /* West Bengal   — turmeric yellow   */
.st-wb.st-active:hover { fill: rgba(228, 188,  88, 1); }

.st-ne.st-active { fill: rgba(108, 145,  95, 0.90); }   /* Northeast     — moss green        */
.st-ne.st-active:hover { fill: rgba(132, 168, 118, 1); }

.st-mp.st-active { fill: rgba(188,  85, 100, 0.90); }   /* Madhya Pradesh— deep madder       */
.st-mp.st-active:hover { fill: rgba(206, 110, 124, 1); }

.st-cg.st-active { fill: rgba(150,  88, 138, 0.90); }   /* Chhattisgarh  — plum              */
.st-cg.st-active:hover { fill: rgba(174, 112, 162, 1); }

.st-mh.st-active { fill: rgba( 92, 130, 175, 0.90); }   /* Maharashtra   — lapis blue        */
.st-mh.st-active:hover { fill: rgba(118, 156, 196, 1); }

.st-od.st-active { fill: rgba(204, 152,  65, 0.92); }   /* Odisha        — ochre             */
.st-od.st-active:hover { fill: rgba(222, 174,  92, 1); }

.st-tg.st-active { fill: rgba( 92, 148, 162, 0.90); }   /* Telangana     — peacock teal      */
.st-tg.st-active:hover { fill: rgba(118, 172, 184, 1); }

.st-ap.st-active { fill: rgba( 82, 102, 152, 0.90); }   /* Andhra Pradesh— deep indigo       */
.st-ap.st-active:hover { fill: rgba(108, 128, 174, 1); }

.st-go.st-active { fill: rgba(160, 122, 180, 0.92); }   /* Goa           — heather lavender  */
.st-go.st-active:hover { fill: rgba(184, 148, 200, 1); }

.st-ka.st-active { fill: rgba(190,  95, 105, 0.90); }   /* Karnataka     — madder pink       */
.st-ka.st-active:hover { fill: rgba(208, 120, 130, 1); }

.st-kl.st-active { fill: rgba(198, 100, 122, 0.90); }   /* Kerala        — pomegranate       */
.st-kl.st-active:hover { fill: rgba(216, 124, 144, 1); }

.st-tn.st-active { fill: rgba(218, 145,  65, 0.92); }   /* Tamil Nadu    — marigold          */
.st-tn.st-active:hover { fill: rgba(234, 168,  92, 1); }

/* --- Responsive ------------------------------------------- */
@media (max-width: 600px) {
  #navbar {
    padding: 0 20px;
  }

  .nav-title {
    font-size: 11px;
    letter-spacing: 0.18em;
  }

  .nav-logo {
    font-size: 18px;
  }

  /* canvas fills the stage — no extra sizing needed */
}

/* ============================================================
   FOOTER — quiet closing band
   Parchment coda with Ajrakh diamond dividers, a Warli sun
   mark, and a Sanskrit whisper.  Sits below the map section.
   ============================================================ */

.site-foot {
  position: relative;
  background: #f5d9b8;
  color: var(--text-dark);
  padding: 70px 40px 28px;
  font-family: 'DM Sans', system-ui, sans-serif;
  overflow: hidden;
}

/* soft top hairline — like the edge of parchment */
.site-foot::before {
  content: "";
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(125, 32, 39, 0.18) 50%,
    transparent 100%);
}

/* ── Diamond divider row (Ajrakh rhythm) ─────────────────── */
.foot-divider {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-bottom: 56px;
  color: rgba(125, 32, 39, 0.38);
  font-size: 10px;
  letter-spacing: 0.1em;
}
.foot-divider span:nth-child(odd)  { opacity: 0.55; }
.foot-divider span:nth-child(even) { opacity: 0.85; font-size: 8px; }

/* ── 4-column grid ───────────────────────────────────────── */
.foot-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 48px;
  align-items: flex-start;
}

.foot-col {
  min-width: 0;
}

/* Brand column */
.foot-brand .foot-mark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  margin-bottom: 14px;
}
.foot-logo {
  width: 26px;
  height: 26px;
  color: var(--accent);
  opacity: 0.85;
  flex-shrink: 0;
}
.foot-wordmark {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: 22px;
  letter-spacing: 0.12em;
  color: var(--text-dark);
}
.foot-tag {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(26, 26, 26, 0.68);
  margin: 0;
  max-width: 340px;
}
.foot-tag em {
  font-style: italic;
  color: var(--accent);
  opacity: 0.85;
}

/* Link columns */
.foot-title {
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(26, 26, 26, 0.55);
  margin: 4px 0 22px;
}
.foot-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.foot-list a {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: 17px;
  letter-spacing: 0.04em;
  color: rgba(26, 26, 26, 0.82);
  text-decoration: none;
  position: relative;
  transition: color 0.25s ease, padding-left 0.3s ease;
}
.foot-list a::before {
  content: "◇";
  position: absolute;
  left: -16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent);
  font-size: 8px;
  opacity: 0;
  transition: opacity 0.3s ease, left 0.3s ease;
}
.foot-list a:hover {
  color: var(--accent);
  padding-left: 14px;
}
.foot-list a:hover::before {
  opacity: 0.9;
  left: 0;
}

/* ── Sanskrit whisper ────────────────────────────────────── */
.foot-whisper {
  margin: 64px auto 26px;
  text-align: center;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 18px;
  letter-spacing: 0.06em;
  color: rgba(26, 26, 26, 0.55);
  max-width: 720px;
}
.foot-whisper em {
  font-style: italic;
  opacity: 0.78;
  margin-left: 4px;
}

/* ── Bottom line ─────────────────────────────────────────── */
.foot-bottom {
  max-width: 1180px;
  margin: 0 auto;
  padding-top: 20px;
  border-top: 1px solid rgba(125, 32, 39, 0.10);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(26, 26, 26, 0.42);
}
.foot-bullet {
  color: var(--accent);
  opacity: 0.55;
  font-size: 8px;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 960px) {
  .foot-inner {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
  .foot-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  .site-foot { padding: 56px 22px 24px; }
  .foot-divider { margin-bottom: 40px; gap: 10px; }
  .foot-inner { grid-template-columns: 1fr; gap: 36px; }
  .foot-brand { grid-column: auto; }
  .foot-tag { max-width: none; }
  .foot-whisper { font-size: 16px; margin: 48px auto 22px; }
  .foot-bottom {
    flex-direction: column;
    gap: 8px;
    letter-spacing: 0.18em;
  }
  .foot-bottom .foot-bullet { display: none; }
}

/* ═══════════════════════════════════════════════════════
   HAMBURGER MENU — floating parchment popover
   A compact card that drops down from under the ☰ button.
   ═══════════════════════════════════════════════════════ */

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
}
.menu-overlay.open { pointer-events: auto; }

/* soft click-catcher behind the popover */
.menu-scrim {
  position: absolute;
  inset: 0;
  background: rgba(10, 6, 2, 0);
  transition: background 0.5s ease;
}
.menu-overlay.open .menu-scrim { background: rgba(10, 6, 2, 0.18); }

/* the popover itself */
.menu-pop {
  position: absolute;
  top: 92px;
  right: 28px;
  width: min(360px, calc(100vw - 32px));
  padding: 20px 20px 14px;
  background: rgba(245, 241, 232, 0.92);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 22px;
  box-shadow:
    0 30px 70px rgba(40, 20, 8, 0.28),
    0 6px 18px rgba(40, 20, 8, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transform-origin: top right;
  transform: scale(0.82) translateY(-12px);
  opacity: 0;
  visibility: hidden;
  transition:
    transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1),
    opacity 0.42s ease,
    visibility 0s linear 0.55s;
}
.menu-overlay.open .menu-pop {
  transform: scale(1) translateY(0);
  opacity: 1;
  visibility: visible;
  transition:
    transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1),
    opacity 0.42s ease;
}

/* tiny diamond tail pointing up to the hamburger */
.pop-tail {
  position: absolute;
  top: -7px;
  right: 30px;
  width: 14px;
  height: 14px;
  background: rgba(245, 241, 232, 0.92);
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  transform: rotate(45deg);
  border-radius: 2px;
}

/* ── Head ── */
.pop-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px 4px 10px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.5s 0.25s ease, transform 0.5s 0.25s ease;
}
.menu-overlay.open .pop-head { opacity: 1; transform: translateY(0); }

.pop-eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: rgba(26, 26, 26, 0.55);
}
.pop-sep { color: #e8a34a; font-size: 9px; }
.pop-sans {
  font-family: 'Tiro Devanagari Sanskrit', serif;
  font-size: 13px;
  color: #7d2027;
  margin-left: auto;
}

/* ── Drawing rule ── */
.pop-rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(125, 32, 39, 0.4), transparent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.7s 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
  margin-bottom: 6px;
}
.menu-overlay.open .pop-rule { transform: scaleX(1); }

/* ── List ── */
.pop-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 0;
}

.pop-item {
  display: grid;
  grid-template-columns: 26px 1fr auto 18px;
  align-items: center;
  gap: 14px;
  padding: 12px 12px;
  border-radius: 12px;
  text-decoration: none;
  color: #1a1a1a;
  position: relative;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) calc(0.38s + var(--i, 0) * 0.08s),
    transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) calc(0.38s + var(--i, 0) * 0.08s),
    background 0.35s ease;
}
.menu-overlay.open .pop-item { opacity: 1; transform: translateY(0); }

.pop-item:hover {
  background: rgba(232, 163, 74, 0.15);
}

/* thin vertical marigold accent on hover */
.pop-item::before {
  content: "";
  position: absolute;
  left: 4px; top: 14px; bottom: 14px;
  width: 2px;
  background: #e8a34a;
  border-radius: 2px;
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.pop-item:hover::before { transform: scaleY(1); }

.pi-num {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 17px;
  color: #7d2027;
  opacity: 0.5;
  text-align: center;
  line-height: 1;
  transition: color 0.35s ease, opacity 0.35s ease, transform 0.4s ease;
}
.pop-item:hover .pi-num {
  color: #e8a34a;
  opacity: 1;
  transform: translateY(-1px);
}

.pi-word {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 28px;
  line-height: 1;
  color: #1a1a1a;
  letter-spacing: -0.005em;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), color 0.35s ease;
}
.pop-item:hover .pi-word {
  color: #7d2027;
  transform: translateX(5px);
}

.pi-sans {
  font-family: 'Tiro Devanagari Sanskrit', serif;
  font-size: 13px;
  color: rgba(26, 26, 26, 0.38);
  transition: color 0.35s ease;
}
.pop-item:hover .pi-sans { color: #7d2027; }

.pi-arrow {
  font-size: 13px;
  color: rgba(125, 32, 39, 0.5);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), color 0.35s ease;
  text-align: right;
  line-height: 1;
}
.pop-item:hover .pi-arrow {
  opacity: 1;
  transform: translateX(0);
  color: #e8a34a;
}

/* ── Foot ── */
.pop-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 6px 2px;
  margin-top: 6px;
  border-top: 1px solid rgba(26, 26, 26, 0.08);
  opacity: 0;
  transition: opacity 0.55s 0.75s ease;
}
.menu-overlay.open .pop-foot { opacity: 1; }

.pf-diamonds {
  color: #7d2027;
  opacity: 0.45;
  font-size: 10px;
  letter-spacing: 0.35em;
}
.pf-whisper {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 11px;
  color: rgba(26, 26, 26, 0.5);
  letter-spacing: 0.04em;
}

/* ── Hamburger state when popover is open ── */
.hamburger.is-open {
  background: rgba(125, 32, 39, 0.15);
  border-color: rgba(125, 32, 39, 0.35);
}
.hamburger.is-open span { background: #7d2027; }
.hamburger.is-open span:nth-child(1) { transform: translateY(7px)  scale(1.6); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-7px) scale(1.6); }

/* ── Responsive ── */
@media (max-width: 720px) {
  .menu-pop {
    top: 78px;
    right: 16px;
    width: calc(100vw - 32px);
    padding: 16px 16px 12px;
  }
  .pop-tail { right: 22px; }
  .pi-word { font-size: 24px; }
  .pi-sans { display: none; }
  .pop-item { grid-template-columns: 24px 1fr 18px; }
}



/* ── Version tag ──────────────────────────────────────── */
.version-tag {
  position: fixed;
  bottom: 16px;
  left: 20px;
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: rgba(245, 241, 232, 0.22);
  z-index: 10;
  pointer-events: none;
  user-select: none;
}

/* ══════════════════════════════════════════════════════════
   CITY IMAGE PLATES — reference photos inside city chapters
   (sits in the prose column; archival framed look)
   ══════════════════════════════════════════════════════════ */
.city-plate {
  grid-column: 2;
  margin: 38px 0 6px;
  max-width: 680px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 1s 0.25s ease, transform 1s 0.25s ease;
}
.chapter.revealed .city-plate { opacity: 1; transform: translateY(0); }
.city-plate img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
  border: 1px solid rgba(28,24,16,0.16);
  box-shadow: 0 14px 34px rgba(28,20,8,0.16);
  background: rgba(255,255,255,0.4);
}
.city-plate figcaption {
  margin-top: 10px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  color: var(--ink-soft, rgba(28,24,16,0.72));
  letter-spacing: 0.02em;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.city-plate figcaption .cap-src {
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-whisper, rgba(28,24,16,0.40));
  margin-left: auto;
}
@media (max-width: 720px) {
  .city-plate { grid-column: 1; max-width: 100%; margin: 28px 0 4px; }
}