/* ÆŠA · The Faithful — page styles for the Living Census
   (loads after css/styles.css; uses its custom properties) */

/* ───────────────────────── layout ───────────────────────── */

.map-grid{
  display:grid;
  grid-template-columns:minmax(0,2.1fr) minmax(280px,1fr);
  gap:1.6rem;
  align-items:start;
  margin-top:2.2rem;
}

.map-stage{
  position:relative;
  border-radius:4px;
  border:1px solid rgba(216,175,90,0.4);
  box-shadow:0 30px 80px -40px rgba(0,0,0,0.9), inset 0 0 0 1px rgba(216,175,90,0.1);
  background:#080604;
}

.map-svg{
  display:block;
  width:100%;
  height:auto;
  border-radius:4px;
}

/* ─────────────────── chart furniture ─────────────────── */

.graticule line{
  stroke:rgba(216,175,90,0.09);
  stroke-width:0.8;
  animation:censusGratShimmer 11s ease-in-out infinite;
}
.graticule line:nth-child(odd){ animation-delay:-5.5s; }
.graticule line:nth-child(3n){ animation-delay:-3.7s; }
@keyframes censusGratShimmer{
  0%,100%{ opacity:0.45; }
  50%    { opacity:1; }
}

/* antique flourishes in the empty seas */
.sea-deco{ pointer-events:none; opacity:0.25; }
.sea-deco path{
  fill:none;
  stroke:var(--ember,#d8af5a);
  stroke-width:1.1;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.sea-deco .deco-eye{ fill:var(--ember,#d8af5a); }
.sea-deco text{
  font-family:var(--serif,'Cormorant Garamond',serif);
  font-style:italic;
  font-size:10px;
  letter-spacing:2px;
  fill:var(--ash,#b9a98a);
}

/* anchor cities — tiny context dots */
.anchor-city circle{
  fill:rgba(216,175,90,0.55);
  stroke:rgba(8,6,4,0.8);
  stroke-width:0.5;
}
.anchor-city text{
  font-family:var(--serif,'Cormorant Garamond',serif);
  font-style:italic;
  font-size:8.5px;
  letter-spacing:0.4px;
  fill:rgba(185,169,138,0.8);
  paint-order:stroke;
  stroke:rgba(8,6,4,0.85);
  stroke-width:2.4;
  stroke-linejoin:round;
}

/* ─────────────── the Scattering: migration arcs ─────────────── */

.mig-arc{
  fill:none;
  stroke:var(--ember,#d8af5a);
  stroke-width:1;
  stroke-linecap:round;
  stroke-dasharray:3 5;
  opacity:0.42;
  animation:censusArcFlow 30s linear infinite;
  transition:opacity 0.3s ease, stroke 0.3s ease;
}
.mig-arc.mig-major{
  stroke-width:1.5;
  stroke-dasharray:5 3;
  opacity:0.6;
  animation-duration:24s;
}
@keyframes censusArcFlow{ to{ stroke-dashoffset:-160; } }
.mig-arc.arc-hot,
.mig-arc.arc-sel{
  opacity:0.95;
  stroke:var(--ember-hi,#f3d489);
  filter:drop-shadow(0 0 3px rgba(243,212,137,0.8));
}
.arc-spark{
  fill:var(--ember-hi,#f3d489);
  opacity:0.8;
  filter:drop-shadow(0 0 3px rgba(243,212,137,0.95));
  pointer-events:none;
}
.arc-spark.arc-hot,
.arc-spark.arc-sel{ opacity:1; }
.arc-label{
  font-family:var(--serif,'Cormorant Garamond',serif);
  font-style:italic;
  font-size:5.2px;
  letter-spacing:0.7px;
  fill:rgba(232,220,192,0.85);
  paint-order:stroke;
  stroke:rgba(8,6,4,0.9);
  stroke-width:1.7;
  stroke-linejoin:round;
  pointer-events:none;
  transition:fill 0.3s ease;
}
.arc-label.arc-hot,
.arc-label.arc-sel{ fill:var(--ember-hi,#f3d489); }

/* the real Earth — NASA Blue Marble, toned down into the site's dark-gold mood */
.earth{
  filter:brightness(0.62) saturate(0.55) sepia(0.25) contrast(1.05);
}
.earth-vignette{ pointer-events:none; }

.frame-outer{
  fill:none;
  stroke:var(--ember-lo,#9c7325);
  stroke-width:2;
}
.frame-inner{
  fill:none;
  stroke:rgba(216,175,90,0.5);
  stroke-width:0.8;
}

.cartouche rect{
  fill:rgba(10,8,6,0.82);
  stroke:rgba(216,175,90,0.55);
  stroke-width:1;
}
.cartouche text{
  font-family:var(--display,'Cinzel',serif);
  font-size:14px;
  letter-spacing:4px;
  fill:var(--ember,#d8af5a);
}

.compass circle{
  fill:none;
  stroke:rgba(216,175,90,0.4);
  stroke-width:0.8;
}
.compass path{ fill:rgba(216,175,90,0.55); }
.compass text{
  font-family:var(--display,'Cinzel',serif);
  font-size:11px;
  fill:rgba(216,175,90,0.7);
}

.map-credit{
  font-family:var(--serif,'Cormorant Garamond',serif);
  font-style:italic;
  font-size:11px;
  fill:rgba(185,169,138,0.65);
  paint-order:stroke;
  stroke:rgba(8,6,4,0.85);
  stroke-width:3;
  stroke-linejoin:round;
}

/* ─────────────── layer crossfade (world ⇄ iran) ─────────────── */

#layer-world{
  opacity:1;
  transition:opacity 0.9s ease;
}
#layer-iran{
  opacity:0;
  pointer-events:none;
  transition:opacity 0.9s ease;
}
.map-svg.in-iran #layer-world{
  opacity:0;
  pointer-events:none;
}
.map-svg.vb-instant #layer-world,
.map-svg.vb-instant #layer-iran{
  transition:none;
}
.map-svg.in-iran #layer-iran{
  opacity:1;
  pointer-events:auto;
}

/* ─────────────────────── iran layer ─────────────────────── */

#iran-outline{
  fill:rgba(36,26,12,0.92);
  stroke:var(--ember,#d8af5a);
  stroke-width:1.6;
  vector-effect:non-scaling-stroke;
  stroke-linejoin:round;
  filter:drop-shadow(0 0 6px rgba(216,175,90,0.25));
}

.iran-title{
  font-family:var(--display,'Cinzel',serif);
  font-size:4.4px;
  letter-spacing:1.4px;
  fill:rgba(216,175,90,0.65);
}

/* faint silhouette of Yazd province */
.province-hint path{
  fill:rgba(216,175,90,0.03);
  stroke:rgba(216,175,90,0.26);
  stroke-width:0.25;
  stroke-dasharray:1.1 1.3;
  stroke-linejoin:round;
}

/* radiating fire-waves of the Yazd Ātash Bahrām (since 470 CE) */
.fire-wave{
  fill:none;
  stroke:rgba(212,118,42,0.55);
  stroke-width:0.3;
  transform-box:fill-box;
  transform-origin:center;
  opacity:0;
  animation:censusFireWave 7s linear infinite;
}
.fire-wave.fw2{ animation-delay:2.33s; }
.fire-wave.fw3{ animation-delay:4.66s; }
@keyframes censusFireWave{
  0%  { transform:scale(0.34); opacity:0.75; }
  80% { opacity:0.12; }
  100%{ transform:scale(1); opacity:0; }
}

/* the pilgrim road between the desert shrines */
.pilgrim-route{
  fill:none;
  stroke:var(--ember,#d8af5a);
  stroke-width:0.3;
  stroke-linecap:round;
  stroke-dasharray:0.9 1.1;
  opacity:0.55;
  animation:censusPilgrimFlow 46s linear infinite;
}
@keyframes censusPilgrimFlow{ to{ stroke-dashoffset:-40; } }
.pilgrim-label{
  font-family:var(--serif,'Cormorant Garamond',serif);
  font-style:italic;
  font-size:2.4px;
  letter-spacing:0.35px;
  fill:rgba(216,175,90,0.75);
  paint-order:stroke;
  stroke:rgba(8,6,4,0.8);
  stroke-width:0.7;
  stroke-linejoin:round;
}
.pilgrim-spark{
  fill:var(--ember-hi,#f3d489);
  opacity:0.95;
  filter:drop-shadow(0 0 1.4px rgba(243,212,137,0.9));
  pointer-events:none;
}

/* ─────────────────────── markers ─────────────────────── */

.marker{ cursor:pointer; outline:none; }

.marker .m-core{
  stroke:rgba(243,212,137,0.9);
  stroke-width:0.6;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 4px rgba(216,175,90,0.65));
  transition:filter 0.25s ease;
}
.marker .m-halo{
  fill:rgba(216,175,90,0.18);
  transition:fill 0.25s ease;
}
.marker .m-hit{ fill:transparent; stroke:none; }

.marker .m-pulse{
  fill:none;
  stroke:rgba(216,175,90,0.55);
  stroke-width:1;
  vector-effect:non-scaling-stroke;
  transform-box:fill-box;
  transform-origin:center;
  animation:censusPulse 3.4s ease-out infinite;
}

@keyframes censusPulse{
  0%   { transform:scale(0.7); opacity:0.9; }
  70%  { transform:scale(1.9); opacity:0;   }
  100% { transform:scale(1.9); opacity:0;   }
}

.marker:hover .m-core,
.marker:focus-visible .m-core{
  filter:drop-shadow(0 0 9px rgba(243,212,137,0.95)) brightness(1.25);
}
.marker:hover .m-halo,
.marker:focus-visible .m-halo{
  fill:rgba(243,212,137,0.32);
}
.marker:focus-visible .m-core{
  stroke:var(--ember-hi,#f3d489);
  stroke-width:1.4;
}

.marker text{
  font-family:var(--display,'Cinzel',serif);
  fill:var(--ember-hi,#f3d489);
  paint-order:stroke;
  stroke:rgba(8,6,4,0.85);
  stroke-width:3;
  stroke-linejoin:round;
  pointer-events:none;
}
.marker-world .m-name{ font-size:13.5px; letter-spacing:1.2px; }
.marker-world .m-count{
  font-size:11px;
  fill:var(--ash,#b9a98a);
  font-family:var(--serif,'Cormorant Garamond',serif);
  font-style:italic;
}

/* the special Iran entry marker */
.marker-iran-entry .m-ring,
.marker-iran-entry .m-ring2{
  fill:none;
  stroke:var(--flame,#d4762a);
  stroke-width:1;
  vector-effect:non-scaling-stroke;
}
.marker-iran-entry .m-ring2{
  stroke:rgba(212,118,42,0.4);
  stroke-dasharray:3 4;
  transform-box:fill-box;
  transform-origin:center;
  animation:censusSpin 26s linear infinite;
}
@keyframes censusSpin{ to{ transform:rotate(360deg); } }

.marker-iran-entry .m-hint{
  font-size:10px;
  letter-spacing:1.5px;
  fill:var(--flame-hi,#ffb347);
  text-transform:uppercase;
  animation:censusHint 2.6s ease-in-out infinite;
}
@keyframes censusHint{
  0%,100%{ opacity:0.55; }
  50%    { opacity:1; }
}

/* iran-layer markers (tiny coordinates; strokes non-scaling) */
.marker-iranmap .m-core{
  filter:drop-shadow(0 0 1.2px rgba(216,175,90,0.7));
}
.marker-iranmap:hover .m-core,
.marker-iranmap:focus-visible .m-core{
  filter:drop-shadow(0 0 2px rgba(243,212,137,0.95)) brightness(1.25);
}
.marker-iranmap .m-pulse{ stroke-width:0.6; }
.marker-iranmap .m-name{ font-size:3px; letter-spacing:0.3px; stroke-width:0.8; }
.marker-iranmap .m-count{
  font-size:2.4px;
  fill:var(--ash,#b9a98a);
  font-family:var(--serif,'Cormorant Garamond',serif);
  font-style:italic;
  stroke-width:0.6;
}
.marker-iranmap .m-hit{ r:4; }

.marker-shrine .m-flamemark{
  fill:var(--flame,#d4762a);
  stroke:var(--flame-hi,#ffb347);
  stroke-width:0.5;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 2px rgba(255,179,71,0.8));
  transform-box:fill-box;
  transform-origin:center;
  animation:censusFlicker 2.8s ease-in-out infinite;
}
@keyframes censusFlicker{
  0%,100%{ transform:scale(1); }
  38%    { transform:scale(1.16) ; }
  62%    { transform:scale(0.94); }
}
.marker-shrine:hover .m-flamemark,
.marker-shrine:focus-visible .m-flamemark{
  filter:drop-shadow(0 0 5px rgba(255,179,71,1)) brightness(1.3);
}

/* village markers — small, dim, patient */
.marker-village .m-vcore{
  fill:rgba(216,175,90,0.5);
  stroke:rgba(243,212,137,0.45);
  stroke-width:0.15;
  transition:fill 0.25s ease, filter 0.25s ease;
}
.marker-village:hover .m-vcore,
.marker-village:focus-visible .m-vcore{
  fill:var(--ember,#d8af5a);
  filter:drop-shadow(0 0 2px rgba(243,212,137,0.9));
}
.marker-village .m-name{
  font-size:2.5px;
  fill:rgba(216,175,90,0.7);
}

/* m-leader — quiet thread from ember to its floating label */
.m-leader{
  stroke:rgba(216,175,90,0.4);
  stroke-width:0.7;
  stroke-dasharray:0.6 2.4;
  stroke-linecap:round;
}

/* ─────────────────── return button ─────────────────── */

.map-return{
  position:absolute;
  top:14px; left:14px;
  z-index:5;
  font-family:var(--display,'Cinzel',serif);
  font-size:0.72rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--ember,#d8af5a);
  background:rgba(10,8,6,0.85);
  border:1px solid rgba(216,175,90,0.55);
  border-radius:2px;
  padding:0.55rem 0.9rem;
  cursor:pointer;
  opacity:0;
  animation:censusBtnIn 0.7s ease 0.45s forwards;
  transition:background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.map-return:hover,
.map-return:focus-visible{
  background:rgba(216,175,90,0.16);
  color:var(--ember-hi,#f3d489);
  box-shadow:var(--glow,0 0 18px rgba(216,175,90,0.35));
  outline:none;
}
@keyframes censusBtnIn{ to{ opacity:1; } }

/* ─────────────────── info panel ─────────────────── */

.map-panel{
  border:1px solid rgba(216,175,90,0.4);
  border-radius:4px;
  background:linear-gradient(160deg, rgba(27,19,12,0.85), rgba(10,8,6,0.95));
  box-shadow:inset 0 0 40px rgba(0,0,0,0.5), 0 24px 60px -36px rgba(212,118,42,0.35);
  padding:1.5rem 1.5rem 1.2rem;
  min-height:320px;
  position:relative;
}
.map-panel::before{
  content:"";
  position:absolute;
  inset:6px;
  border:1px solid rgba(216,175,90,0.16);
  border-radius:2px;
  pointer-events:none;
}

.panel-body{ position:relative; }
.panel-body.panel-live{ animation:censusPanelIn 0.45s ease both; }
@keyframes censusPanelIn{
  from{ opacity:0; transform:translateY(10px); }
  to  { opacity:1; transform:none; }
}

.panel-kicker{
  font-family:var(--display,'Cinzel',serif);
  font-size:0.66rem;
  letter-spacing:0.4em;
  text-transform:uppercase;
  color:var(--flame,#d4762a);
  margin-bottom:0.5rem;
}
.map-panel h3{
  margin:0 0 0.4rem;
  font-size:1.25rem;
  color:var(--ember,#d8af5a);
}
.panel-count{
  margin:0 0 0.8rem;
  font-size:1.05rem;
}
.panel-count b{
  font-family:var(--display,'Cinzel',serif);
  color:var(--ember-hi,#f3d489);
  font-size:1.3rem;
  letter-spacing:0.04em;
}
.panel-count span{
  color:var(--smoke,#6f6253);
  font-style:italic;
  font-size:0.95rem;
}
.panel-hearths{
  list-style:none;
  margin:0 0 0.9rem;
  padding:0;
}
.panel-hearths li{
  position:relative;
  padding:0.32rem 0 0.32rem 1.3rem;
  border-bottom:1px solid rgba(216,175,90,0.1);
  font-size:1rem;
  line-height:1.45;
  color:var(--parch,#e8dcc0);
}
.panel-hearths li:last-child{ border-bottom:none; }
.panel-hearths li::before{
  content:"🜂";
  position:absolute;
  left:0; top:0.32rem;
  color:var(--flame,#d4762a);
  font-size:0.85em;
}
.panel-note{
  font-size:0.95rem;
  font-style:italic;
  margin:0;
}

/* framed relic plates inside the panel */
.panel-plate{ margin:0 0 1rem; }
.panel-plate .pp-frame{
  display:block;
  padding:3px;
  border:1px solid rgba(216,175,90,0.55);
  outline:1px solid rgba(216,175,90,0.22);
  outline-offset:3px;
  background:rgba(8,6,4,0.6);
  overflow:hidden;
}
.panel-plate img{
  display:block;
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  filter:sepia(0.32) contrast(1.05) brightness(0.88) saturate(0.85);
  transition:filter 0.6s ease, transform 0.6s ease;
}
.panel-plate:hover img{
  filter:none;
  transform:scale(1.045);
}
.panel-plate figcaption{
  font-family:var(--serif,'Cormorant Garamond',serif);
  font-style:italic;
  font-size:0.82rem;
  line-height:1.35;
  color:var(--ash,#b9a98a);
  margin-top:0.45rem;
}

/* ─────────────────── floating tooltip ─────────────────── */

.map-tooltip{
  position:absolute;
  z-index:6;
  top:0; left:0;
  pointer-events:none;
  white-space:nowrap;
  background:rgba(10,8,6,0.92);
  border:1px solid rgba(216,175,90,0.6);
  border-radius:2px;
  padding:0.35rem 0.65rem;
  font-family:var(--display,'Cinzel',serif);
  font-size:0.68rem;
  letter-spacing:0.08em;
  color:var(--ember-hi,#f3d489);
  box-shadow:0 6px 18px rgba(0,0,0,0.55), 0 0 12px rgba(216,175,90,0.12);
}
.map-tooltip span{
  display:block;
  font-family:var(--serif,'Cormorant Garamond',serif);
  font-style:italic;
  font-size:0.74rem;
  letter-spacing:0.02em;
  color:var(--ash,#b9a98a);
}
.map-tooltip[hidden]{ display:none; }
@media (hover:none){
  .map-tooltip{ display:none !important; }
}

/* ─────────────────── ranked bars ─────────────────── */

.bar-list{
  list-style:none;
  margin:2.4rem auto 0;
  padding:0;
  max-width:860px;
}
.bar-row{
  display:grid;
  grid-template-columns:170px 1fr 84px;
  align-items:center;
  gap:1rem;
  padding:0.45rem 0;
  border-bottom:1px solid rgba(216,175,90,0.08);
}
.bar-name{
  font-family:var(--display,'Cinzel',serif);
  font-size:0.78rem;
  letter-spacing:0.12em;
  color:var(--ember,#d8af5a);
  text-align:right;
}
.bar-track{
  display:block;
  height:12px;
  background:rgba(216,175,90,0.07);
  border:1px solid rgba(216,175,90,0.14);
  border-radius:2px;
  overflow:hidden;
}
.bar-fill{
  display:block;
  height:100%;
  width:0;
  background:linear-gradient(90deg, var(--ember-lo,#9c7325), var(--ember,#d8af5a) 55%, var(--ember-hi,#f3d489));
  box-shadow:0 0 10px rgba(216,175,90,0.45);
  transition:width 1.3s cubic-bezier(0.33,1,0.4,1);
}
.bar-list.grown .bar-fill{ width:var(--bw,2%); }
.bar-count{
  font-family:var(--serif,'Cormorant Garamond',serif);
  font-style:italic;
  color:var(--ash,#b9a98a);
  text-align:right;
  font-size:1.02rem;
}

/* stagger the growth a little */
.bar-row:nth-child(1) .bar-fill{ transition-delay:0.05s; }
.bar-row:nth-child(2) .bar-fill{ transition-delay:0.15s; }
.bar-row:nth-child(3) .bar-fill{ transition-delay:0.25s; }
.bar-row:nth-child(4) .bar-fill{ transition-delay:0.35s; }
.bar-row:nth-child(5) .bar-fill{ transition-delay:0.45s; }
.bar-row:nth-child(6) .bar-fill{ transition-delay:0.55s; }
.bar-row:nth-child(7) .bar-fill{ transition-delay:0.65s; }
.bar-row:nth-child(8) .bar-fill{ transition-delay:0.75s; }
.bar-row:nth-child(9) .bar-fill{ transition-delay:0.85s; }
.bar-row:nth-child(10) .bar-fill{ transition-delay:0.95s; }

/* ─────────────────── nine fires grid ─────────────────── */

.fires-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:1.4rem;
  margin-top:2.2rem;
}
.fire-card{ position:relative; padding-top:2.4rem; }
.fire-card .fire-meta{
  font-family:var(--display,'Cinzel',serif);
  font-size:0.72rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--flame,#d4762a);
  margin:-0.4rem 0 0.6rem;
}
.flame-dot{
  position:absolute;
  top:1.1rem; left:1.4rem;
  width:11px; height:11px;
  border-radius:50% 50% 50% 50% / 62% 62% 38% 38%;
  background:radial-gradient(circle at 50% 65%, #ffb347 0%, #d4762a 55%, #5b0f0f 100%);
  box-shadow:0 0 9px rgba(255,179,71,0.8), 0 0 22px rgba(212,118,42,0.4);
  animation:censusDotFlame 2.4s ease-in-out infinite;
}
@keyframes censusDotFlame{
  0%,100%{ transform:scaleY(1); opacity:1; }
  35%    { transform:scaleY(1.22) scaleX(0.92); opacity:0.92; }
  65%    { transform:scaleY(0.9) scaleX(1.06); opacity:1; }
}

/* ─────────────────── responsive ─────────────────── */

@media (max-width:900px){
  .map-grid{ grid-template-columns:1fr; }
  .map-panel{ min-height:0; }
  .bar-row{ grid-template-columns:110px 1fr 70px; gap:0.6rem; }
  .bar-name{ font-size:0.66rem; letter-spacing:0.08em; }
}

@media (max-width:740px){
  /* declutter the chart when it shrinks */
  .anchor-city text{ display:none; }
  .sea-deco text{ display:none; }
}

@media (max-width:560px){
  .bar-row{ grid-template-columns:92px 1fr 62px; }
  .bar-count{ font-size:0.9rem; }
  .map-return{ font-size:0.62rem; padding:0.45rem 0.7rem; }
}

/* ─────────────────── reduced motion ─────────────────── */

@media (prefers-reduced-motion: reduce){
  .marker .m-pulse,
  .marker-iran-entry .m-ring2,
  .marker-iran-entry .m-hint,
  .marker-shrine .m-flamemark,
  .flame-dot,
  .panel-body.panel-live,
  .graticule line,
  .mig-arc,
  .pilgrim-route,
  .map-return{
    animation:none !important;
  }
  .map-return{ opacity:1; }
  #layer-world, #layer-iran{ transition:none; }
  .bar-fill{ transition:none; width:var(--bw,2%); }
  .fire-wave{ animation:none !important; opacity:0.25; transform:scale(0.6); }
  .panel-plate img{ transition:none; }
  .panel-plate:hover img{ transform:none; }
}