/* ================================================================
   kalyani-map.css
   All styles for the Kalyani Himachal connectivity section.
   connectivity.js builds the SVG + cards dynamically using these
   class names. This file is ONLY loaded on kalyani-himachal.html.
   ================================================================ */

/* ── Section shell ────────────────────────────────────────────── */
.connectivity {
  position: relative;
  padding: 96px 0 112px;
  background: linear-gradient(180deg, #f7f4ec 0%, #ede9de 100%);
  overflow: hidden;
}

/* Atmospheric background orbs */
.connectivity__atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.connectivity__atm-circle {
  position: absolute;
  width:  var(--w, 400px);
  height: var(--h, 400px);
  top:    var(--t, auto);
  bottom: var(--b, auto);
  left:   var(--l, auto);
  right:  var(--r, auto);
  background: radial-gradient(circle, var(--c, rgba(200,169,110,.06)), transparent 70%);
  border-radius: 50%;
  animation: atmFloat var(--dur, 20s) ease-in-out infinite alternate;
}
@keyframes atmFloat {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(12px, -18px) scale(1.06); }
}

/* ── Intro block ──────────────────────────────────────────────── */
.connectivity__intro {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 56px;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}
.connectivity__intro.is-revealed {
  opacity: 1;
  transform: none;
}

/* Decorative rule */
.connectivity__rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 18px;
}
.connectivity__rule-line {
  display: block;
  width: 56px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(184,150,91,.55));
}
.connectivity__rule-line:last-child {
  background: linear-gradient(90deg, rgba(184,150,91,.55), transparent);
}
.connectivity__rule-diamond {
  display: block;
  width: 6px;
  height: 6px;
  background: #b8965b;
  transform: rotate(45deg);
}

.connectivity__eyebrow {
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #b8965b;
  margin: 0 0 8px;
}
.connectivity__title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 600;
  color: #0e1a2b;
  margin: 0 0 6px;
  line-height: 1.1;
}
.connectivity__subtitle {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(39,50,69,.4);
  margin: 0 0 16px;
}
.connectivity__lead {
  font-size: .92rem;
  color: rgba(39,50,69,.65);
  line-height: 1.75;
  margin: 0;
}

/* ── Body: map + info panel ───────────────────────────────────── */
.connectivity__body {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 24px;
  align-items: start;
  margin-bottom: 56px;
}

/* ── Map panel ────────────────────────────────────────────────── */
.map-panel {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s ease .1s, transform .8s ease .1s;
}
.map-panel.is-revealed {
  opacity: 1;
  transform: none;
}

.map-panel__frame {
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(39,50,69,.09);
  border-radius: 20px;
  box-shadow: 0 16px 48px rgba(9,19,34,.08);
  overflow: hidden;
  backdrop-filter: blur(10px);
}

.map-panel__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 20px 10px;
  border-bottom: 1px solid rgba(39,50,69,.07);
  flex-wrap: wrap;
  gap: 6px;
}
.map-panel__header-title {
  font-family: "Manrope", sans-serif;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #b8965b;
}
.map-panel__scale {
  font-size: .66rem;
  color: rgba(39,50,69,.4);
  font-style: italic;
}

/* SVG fills entire panel width */
#map-svg-container { display: block; }
#map-svg-canvas {
  width: 100%;
  height: auto;
  display: block;
}

/* ── Map elements ─────────────────────────────────────────────── */

/* Topographic lines */
.map-topo {
  fill: none;
  stroke: rgba(39,50,69,.055);
  stroke-width: 1.2;
}

/* Region fills */
.map-region-hills {
  fill: rgba(140,200,140,.12);
  stroke: rgba(100,160,100,.2);
  stroke-width: 1;
  opacity: 0;
  transition: opacity .8s ease .3s;
}
.map-region-hills.is-on { opacity: 1; }

.map-region-city {
  fill: rgba(126,184,212,.1);
  stroke: rgba(100,160,200,.18);
  stroke-width: 1;
  opacity: 0;
  transition: opacity .8s ease .3s;
}
.map-region-city.is-on { opacity: 1; }

/* Project glow */
.map-project-glow {
  fill: url(#projectGradient);
  opacity: 0;
  transition: opacity 1s ease .5s;
}
.map-project-glow.is-on { opacity: 1; }

/* ── Routes ───────────────────────────────────────────────────── */
.map-route {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition:
    opacity .3s ease,
    stroke .3s ease,
    stroke-width .3s ease;
}

/* Primary */
.map-route--primary {
  stroke: #4a7c9a;
  stroke-width: 4;
  stroke-dasharray: var(--len, 1200);
  stroke-dashoffset: var(--len, 1200);
}
.map-route--primary.is-drawing {
  animation: drawRoute var(--dur, 1.5s) cubic-bezier(.4,0,.2,1) var(--delay, 0s) forwards;
}

/* Alt */
.map-route--alt {
  stroke: #c8a96e;
  stroke-width: 2.5;
  stroke-dasharray: 5 4;
  stroke-dashoffset: var(--len, 800);
}
.map-route--alt.is-drawing {
  animation: drawRoute var(--dur, 1.5s) cubic-bezier(.4,0,.2,1) var(--delay, 0s) forwards;
}

/* Scenic */
.map-route--scenic {
  stroke: #8cc88c;
  stroke-width: 2;
  stroke-dasharray: 4 5;
  stroke-dashoffset: var(--len, 600);
}
.map-route--scenic.is-drawing {
  animation: drawRoute var(--dur, 1s) cubic-bezier(.4,0,.2,1) var(--delay, 0s) forwards;
}

/* Nearby */
.map-route--nearby {
  stroke: rgba(39,50,69,.22);
  stroke-width: 1.5;
  stroke-dasharray: 3 6;
  stroke-dashoffset: var(--len, 400);
}
.map-route--nearby.is-drawing {
  animation: drawRoute var(--dur, 0.8s) cubic-bezier(.4,0,.2,1) var(--delay, 0s) forwards;
}

@keyframes drawRoute {
  to { stroke-dashoffset: 0; }
}

/* Highlight / dim states */
.map-route.is-highlighted {
  stroke-width: 6;
  opacity: 1;
  filter: drop-shadow(0 0 4px currentColor);
}
.map-route.is-dimmed { opacity: .15; }

/* ── Nodes ────────────────────────────────────────────────────── */
.map-node {
  opacity: 0;
  transition: opacity .4s ease;
  cursor: pointer;
}
.map-node.is-on { opacity: 1; }
.map-node.is-dimmed { opacity: .2; }
.map-node.is-highlighted { opacity: 1; }

/* Pulse rings */
.map-node__pulse {
  fill: none;
  stroke-width: 1.5;
  opacity: 0;
  transition: opacity .3s ease;
}
.map-node.is-on .map-node__pulse { opacity: 1; }

.pulse-project {
  stroke: #b8965b;
  animation: pulsePing 2.4s ease-out infinite;
}
.pulse-city    { stroke: #4a7c9a; animation: pulsePing 3s ease-out infinite .4s; }
.pulse-nature  { stroke: #8cc88c; animation: pulsePing 3.5s ease-out infinite .8s; }
.pulse-resort  { stroke: #b8cfea; animation: pulsePing 4s ease-out infinite 1s; }
.pulse-place   { stroke: #c8a96e; animation: pulsePing 3.2s ease-out infinite .2s; }
.pulse-dev     { stroke: #d4a8d4; animation: pulsePing 2.8s ease-out infinite .6s; }
.pulse-temple  { stroke: #e8b89a; animation: pulsePing 3.8s ease-out infinite 1.2s; }

@keyframes pulsePing {
  0%   { r: 8;  opacity: .8; }
  100% { r: 20; opacity: 0;  }
}

/* Node dots */
.map-node__dot {
  transition: r .25s ease;
}
.node-project { fill: #b8965b; r: 8; filter: drop-shadow(0 0 6px rgba(184,150,91,.7)); }
.node-city    { fill: #4a7c9a; r: 6; }
.node-nature  { fill: #8cc88c; r: 5; }
.node-resort  { fill: #7eb8d4; r: 5; }
.node-place   { fill: #c8a96e; r: 5; }
.node-dev     { fill: #d4a8d4; r: 5; }
.node-temple  { fill: #e8b89a; r: 5; }

.map-node:hover .map-node__dot { r: 10; }
.map-node.is-highlighted .map-node__dot { r: 9; }

/* ── Labels ───────────────────────────────────────────────────── */
.map-label {
  font-family: "Manrope", sans-serif;
  opacity: 0;
  transition: opacity .4s ease, fill .3s ease;
  pointer-events: none;
  dominant-baseline: middle;
}
.map-label.is-on { opacity: 1; }
.map-label.is-dimmed { opacity: .15; }
.map-label.is-highlighted { opacity: 1; font-weight: 800; }

.map-label--project { fill: #6b4d1e; font-weight: 800; }
.map-label--city    { fill: #1a3a52; font-weight: 700; }
.map-label--nature  { fill: #2a5a2a; font-weight: 600; }
.map-label--resort  { fill: #2a4a6a; font-weight: 600; }
.map-label--place   { fill: #4a3820; font-weight: 600; }
.map-label--dev     { fill: #4a2a6a; font-weight: 600; }
.map-label--temple  { fill: #5a3020; font-weight: 600; }
.map-label--sub     { fill: rgba(39,50,69,.45); font-size: 7.5px !important; font-weight: 400; }

/* ── Distance / time chips ────────────────────────────────────── */
.map-chip-bg {
  fill: rgba(255,255,255,.9);
  rx: 4; ry: 4;
  filter: drop-shadow(0 1px 4px rgba(14,26,43,.12));
  opacity: 0;
  transition: opacity .4s ease;
}
.map-chip-bg.is-on { opacity: 1; }

.map-chip-text {
  font-family: "Manrope", sans-serif;
  font-size: 8px;
  font-weight: 700;
  fill: #273245;
  opacity: 0;
  transition: opacity .4s ease;
  dominant-baseline: middle;
}
.map-chip-text.is-on { opacity: 1; }

/* ── Corridor label ───────────────────────────────────────────── */
.map-corridor-label {
  font-family: "Manrope", sans-serif;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .2em;
  fill: rgba(100,160,100,.45);
  text-transform: uppercase;
  opacity: 0;
  transition: opacity .6s ease;
}
.map-corridor-label.is-on { opacity: 1; }

/* ── Legend ───────────────────────────────────────────────────── */
.map-panel__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  padding: 12px 20px;
  border-top: 1px solid rgba(39,50,69,.07);
  background: rgba(248,245,238,.6);
}
.map-legend-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: "Manrope", sans-serif;
  font-size: .66rem;
  font-weight: 600;
  color: rgba(39,50,69,.6);
}
.legend-line {
  display: inline-block;
  width: 22px;
  height: 3px;
  border-radius: 2px;
}
.legend-line--primary { background: #4a7c9a; }
.legend-line--alt     { background: #c8a96e; }
.legend-line--scenic  { background: #8cc88c; }

.legend-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.legend-dot--project { background: #b8965b; box-shadow: 0 0 5px rgba(184,150,91,.6); }
.legend-dot--city    { background: #4a7c9a; }
.legend-dot--nature  { background: #8cc88c; }

/* ── Info panel (route tabs + cards) ─────────────────────────── */
.conn-info-panel {
  opacity: 0;
  transform: translateX(16px);
  transition: opacity .8s ease .2s, transform .8s ease .2s;
}
.conn-info-panel.is-revealed {
  opacity: 1;
  transform: none;
}

/* Tab bar */
.conn-route-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.conn-tab {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1.5px solid rgba(39,50,69,.12);
  background: rgba(255,255,255,.7);
  font-family: "Manrope", sans-serif;
  font-size: .72rem;
  font-weight: 700;
  color: rgba(39,50,69,.6);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.conn-tab:hover {
  border-color: rgba(184,150,91,.4);
  color: #273245;
}
.conn-tab.is-active {
  background: rgba(184,150,91,.12);
  border-color: #b8965b;
  color: #7a5522;
}

/* Route cards */
#conn-route-cards { position: relative; }

.conn-route-card {
  display: none;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(39,50,69,.09);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 10px 32px rgba(9,19,34,.07);
  backdrop-filter: blur(8px);
}
.conn-route-card.is-active { display: block; }

/* Badges */
.conn-route-card__badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-family: "Manrope", sans-serif;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .12em;
  margin-bottom: 12px;
}
.badge--primary { background: rgba(74,124,154,.12); color: #2a5a7a; }
.badge--alt     { background: rgba(200,169,110,.12); color: #7a5522; }
.badge--scenic  { background: rgba(140,200,140,.12); color: #2a6a2a; }
.badge--dev     { background: rgba(212,168,212,.14); color: #5a2a7a; }

.conn-route-card__title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.4rem;
  font-weight: 600;
  color: #0e1a2b;
  margin: 0 0 2px;
  line-height: 1.15;
}
.conn-route-card__en {
  font-size: .74rem;
  font-weight: 600;
  color: rgba(39,50,69,.45);
  margin: 0 0 12px;
  line-height: 1.4;
}
.conn-route-card__desc {
  font-size: .82rem;
  color: rgba(39,50,69,.68);
  line-height: 1.7;
  margin: 0 0 16px;
}

/* Route point list */
.conn-route-points {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.conn-route-point {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Manrope", sans-serif;
  font-size: .78rem;
  font-weight: 600;
  color: #273245;
}
.conn-route-point__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(39,50,69,.25);
  flex-shrink: 0;
}
.conn-route-point__dot--blue   { background: #4a7c9a; }
.conn-route-point__dot--green  { background: #8cc88c; }
.conn-route-point__dot--purple { background: #d4a8d4; }
.conn-route-point__time {
  margin-left: auto;
  font-size: .7rem;
  font-weight: 700;
  color: #b8965b;
  white-space: nowrap;
}

/* Stats bar */
.conn-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  border-top: 1px solid rgba(39,50,69,.07);
  padding-top: 14px;
}
.conn-stat { text-align: center; }
.conn-stat__value {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: #0e1a2b;
  line-height: 1;
}
.conn-stat__label {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(39,50,69,.45);
  margin-top: 3px;
}

/* ── Landmark cards ───────────────────────────────────────────── */
.connectivity__landmarks { margin-bottom: 48px; }

.landmarks-heading {
  text-align: center;
  margin-bottom: 28px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
}
.landmarks-heading.is-revealed { opacity: 1; transform: none; }

.landmarks-heading__title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: #0e1a2b;
  margin: 0 0 6px;
}
.landmarks-heading__sub {
  font-size: .78rem;
  color: rgba(39,50,69,.5);
  margin: 0;
}

.landmarks-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.landmark-card {
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(39,50,69,.08);
  border-top: 3px solid var(--bar-color, #b8965b);
  border-radius: 14px;
  padding: 16px 14px;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, opacity .5s ease;
  opacity: 0;
  transform: translateY(16px);
  box-shadow: 0 4px 16px rgba(9,19,34,.05);
}
.landmark-card.is-revealed { opacity: 1; transform: none; }
.landmark-card:hover,
.landmark-card.is-active {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(9,19,34,.1);
}

.landmark-card__type {
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--type-color, #b8965b);
  margin: 0 0 5px;
}
.landmark-card__name {
  font-family: "Manrope", sans-serif;
  font-size: .8rem;
  font-weight: 700;
  color: #0e1a2b;
  margin: 0 0 3px;
  line-height: 1.3;
}
.landmark-card__hindi {
  font-size: .68rem;
  color: rgba(39,50,69,.5);
  margin: 0 0 10px;
  font-style: italic;
}
.landmark-card__info {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .68rem;
  font-weight: 700;
  color: rgba(39,50,69,.55);
  border-top: 1px solid rgba(39,50,69,.07);
  padding-top: 8px;
}
.landmark-card__info-icon { font-size: .75rem; }
.landmark-card__dist {
  margin-left: auto;
  font-size: .66rem;
  color: #b8965b;
  font-weight: 800;
}

/* ── Advantage strip ──────────────────────────────────────────── */
.connectivity__advantage { margin-bottom: 52px; }

.advantage__label {
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(39,50,69,.4);
  margin: 0 0 14px;
  text-align: center;
}

.advantage-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.adv-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(39,50,69,.09);
  font-family: "Manrope", sans-serif;
  font-size: .72rem;
  font-weight: 700;
  color: #273245;
  box-shadow: 0 3px 10px rgba(9,19,34,.05);
  opacity: 0;
  transform: translateY(10px) scale(.96);
  transition: opacity .4s ease, transform .4s ease, background .2s ease;
}
.adv-chip.is-revealed { opacity: 1; transform: none; }
.adv-chip:hover {
  background: rgba(184,150,91,.1);
  border-color: rgba(184,150,91,.3);
}
.adv-chip__icon { font-size: 1rem; }

/* ── Value stats bar ──────────────────────────────────────────── */
.connectivity__value {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 28px 32px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(184,150,91,.16);
  border-radius: 18px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s ease, transform .7s ease;
}
.connectivity__value.is-revealed { opacity: 1; transform: none; }

.value-stat { text-align: center; }
.value-stat__number {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 2.8rem;
  font-weight: 700;
  color: #0e1a2b;
  line-height: 1;
  margin-bottom: 4px;
}
.value-stat__label {
  font-size: .78rem;
  font-weight: 700;
  color: #273245;
  margin-bottom: 3px;
}
.value-stat__sub {
  font-size: .68rem;
  color: rgba(39,50,69,.45);
  font-style: italic;
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 1060px) {
  .landmarks-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 880px) {
  .connectivity__body {
    grid-template-columns: 1fr;
  }
  .conn-info-panel {
    transform: none;
  }
  .landmarks-grid { grid-template-columns: repeat(2, 1fr); }
  .connectivity__value { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 580px) {
  .connectivity { padding: 60px 0 72px; }
  .connectivity__intro { margin-bottom: 36px; }
  .landmarks-grid { grid-template-columns: 1fr 1fr; }
  .connectivity__value {
    grid-template-columns: 1fr;
    padding: 20px 16px;
    gap: 14px;
  }
  .conn-stats { grid-template-columns: repeat(2, 1fr); }
  .advantage-strip { gap: 8px; }
}