/* =====================================================================
   MUGGER CITY — Evolution Gallery (Gallery 02)
   A calm, museum-grade interactive timeline. Reuses the palette and
   type defined in styles.css :root.
   ===================================================================== */

.gallery {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 5vw, 4.5rem)
           clamp(2rem, 4vw, 3.25rem);
  overflow: hidden;
  isolation: isolate;

  /* default tone (overridden per stage) */
  --tone: #e7ddc8;
  --accent: var(--gold);
}

/* ---- atmosphere: subtle per-stage environment ----------------------- */
.gallery-atmos {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 32%,
      rgba(255, 253, 247, 0.55) 0%, transparent 55%),
    var(--tone);
  transition: background-color 0.9s var(--ease);
}
.gallery-atmos::before {
  /* paper grain, matched to the landing page */
  content: "";
  position: absolute;
  inset: -50%;
  opacity: 0.5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

.atmos-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--river);
}
.atmos-contours { opacity: 0.06; transition: opacity 0.9s var(--ease); }
.atmos-river    { opacity: 0;    transition: opacity 0.9s var(--ease); }

/* faint gallery numeral, like a room number on a wall */
.atmos-numeral {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -54%);
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: 38vh;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--forest);
  opacity: 0.035;
  user-select: none;
}

/* faint survey coordinate — a quiet Baroda anchor */
.atmos-coord {
  position: absolute;
  right: clamp(1.5rem, 5vw, 4.5rem);
  bottom: clamp(7rem, 14vh, 9rem);
  font-size: 0.6rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--river-soft);
  opacity: 0.6;
}

/* ---- layout shell --------------------------------------------------- */
.gallery-inner {
  position: relative;
  flex: 1;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

/* ---- heading (gallery label, deliberately modest) ------------------- */
.gallery-head { text-align: center; }

.gallery-eyebrow {
  margin: 0;
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--accent);
  transition: color 0.9s var(--ease);
}

.gallery-title {
  margin: 0.7rem 0 0;
  font-family: "Cormorant Garamond", serif;
  font-weight: 300;
  font-size: clamp(1.9rem, 4.4vw, 3.1rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--forest);
  line-height: 1;
}

.gallery-sub {
  margin: 0.85rem 0 0;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: clamp(1rem, 1.7vw, 1.25rem);
  color: var(--river);
}

/* ---- stage: museum label + specimen --------------------------------- */
.gallery-stage {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(250px, 320px) 1fr;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding: clamp(1.5rem, 3vw, 2.5rem) 0;
}

/* the specimen display zone */
.specimen-zone {
  position: relative;
  grid-column: 2;
  height: clamp(240px, 40vh, 420px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* faint concentric guide, echoing the landing page */
.specimen-zone::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(560px, 80%);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid var(--river);
  opacity: 0.07;
  box-shadow: 0 0 0 38px transparent, inset 0 0 0 1px transparent;
}

.specimen-stack {
  position: relative;
  width: 100%;
  height: 100%;
}

.spec-img {
  position: absolute;
  left: 50%;
  bottom: 6%;
  max-width: min(100%, 940px);
  max-height: 94%;
  width: auto;
  opacity: 0;
  transform: translateX(-50%) translateY(10px);
  transition: opacity 0.75s var(--ease), transform 0.85s var(--ease);
  filter: drop-shadow(0 22px 22px rgba(40, 51, 31, 0.14));
  will-change: opacity, transform;
}
.spec-img.is-active {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* aged-to-living gradient: ancient stages read like faded plates,
   the modern mugger returns to full colour */
.spec-img[data-i="0"] { filter: drop-shadow(0 22px 22px rgba(40,51,31,.12)) saturate(.55) sepia(.30); }
.spec-img[data-i="1"] { filter: drop-shadow(0 22px 22px rgba(40,51,31,.12)) saturate(.60) sepia(.27); }
.spec-img[data-i="2"] { filter: drop-shadow(0 22px 22px rgba(40,51,31,.12)) saturate(.66) sepia(.24); }
.spec-img[data-i="3"] { filter: drop-shadow(0 22px 22px rgba(40,51,31,.13)) saturate(.70) sepia(.20); }
.spec-img[data-i="4"] { filter: drop-shadow(0 22px 22px rgba(40,51,31,.13)) saturate(.76) sepia(.16); }
.spec-img[data-i="5"] { filter: drop-shadow(0 22px 22px rgba(40,51,31,.13)) saturate(.80) sepia(.13); }
.spec-img[data-i="6"] { filter: drop-shadow(0 22px 22px rgba(40,51,31,.13)) saturate(.85) sepia(.10); }
.spec-img[data-i="7"] { filter: drop-shadow(0 22px 22px rgba(40,51,31,.14)) saturate(.90) sepia(.07); }
.spec-img[data-i="8"] { filter: drop-shadow(0 22px 22px rgba(40,51,31,.14)) saturate(.95) sepia(.04); }
.spec-img[data-i="9"] { filter: drop-shadow(0 24px 24px rgba(40,51,31,.15)) saturate(1)   sepia(0);   }

/* the implied platform: a thin horizon + a soft contact shadow */
.specimen-ground {
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: min(86%, 900px);
  transform: translateX(-50%);
  pointer-events: none;
}
.specimen-ground::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 72%;
  height: 26px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center,
    rgba(40, 51, 31, 0.22) 0%, rgba(40, 51, 31, 0.08) 46%, transparent 72%);
  filter: blur(6px);
}
.specimen-ground::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(to right,
    transparent, var(--hairline) 14%, var(--hairline) 86%, transparent);
}
/* tiny measurement ticks on the horizon */
.ground-ticks {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1px;
  height: 6px;
  display: flex;
  justify-content: space-between;
  opacity: 0.5;
}
.ground-ticks span { width: 1px; height: 5px; background: var(--river-soft); }

/* specimen tag, lower-left of the zone */
.specimen-tag {
  position: absolute;
  left: 0;
  bottom: -1.6rem;
  margin: 0;
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: opacity 0.4s var(--ease);
}

/* ---- the museum label ---------------------------------------------- */
.label {
  grid-column: 1;
  align-self: center;
  max-width: 340px;
  padding: clamp(1.4rem, 2vw, 1.9rem) clamp(1.4rem, 2vw, 1.85rem);
  background: rgba(248, 245, 238, 0.72);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset;
}

.label-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1.15rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--hairline);
}

.label-index {
  margin: 0;
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  transition: color 0.9s var(--ease);
}

/* tiny museum classification label — the geological period, updates per stage */
.label-period {
  margin: 0;
  font-size: 0.58rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.label-body { display: block; }

.label-name {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: clamp(1.7rem, 2.6vw, 2.15rem);
  line-height: 1.08;
  letter-spacing: 0.01em;
  color: var(--forest);
}

.label-sci {
  margin: 0.35rem 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.label-sci em {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  text-transform: none;
  font-size: 1.02rem;
  letter-spacing: 0.02em;
  color: var(--river);
}

.label-meta {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin: 1.1rem 0 0;
  padding: 0.85rem 0 0;
  border-top: 1px solid var(--hairline);
}
.label-time {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--forest);
}
.label-era {
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.label-desc {
  margin: 1.05rem 0 0;
  font-size: 0.86rem;
  line-height: 1.72;
  font-weight: 300;
  color: var(--ink-soft);
}

.label-trait {
  margin: 1.15rem 0 0;
  padding: 0.9rem 0 0;
  border-top: 1px solid var(--hairline);
}
.trait-k {
  display: block;
  font-size: 0.58rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.4rem;
  transition: color 0.9s var(--ease);
}
.trait-v {
  display: block;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--forest);
}

/* gentle content swap */
.label-body, .spec-img, .specimen-tag { /* base */ }
.label.swap .label-body { animation: labelSwap 0.7s var(--ease); }
@keyframes labelSwap {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ---- timeline control ---------------------------------------------- */
.timeline-control {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding-top: clamp(0.5rem, 2vh, 1.5rem);
}
.tl-caption {
  margin: 0 0 1.6rem;
  text-align: center;
  font-size: 0.58rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--river-soft);
}

.tl-scale {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
}
.tl-track {
  position: relative;
  height: 46px;
  cursor: pointer;
  touch-action: pan-y;
}
.tl-rail, .tl-fill {
  position: absolute;
  top: 7px;
  height: 1px;
}
.tl-rail {
  left: 0; right: 0;
  background: linear-gradient(to right,
    transparent, var(--hairline) 4%, var(--hairline) 96%, transparent);
}
.tl-fill {
  left: 0;
  width: 0;
  background: var(--accent);
  opacity: 0.7;
  transition: width 0.7s var(--ease), background-color 0.9s var(--ease);
}
.tl-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 15px;
  background: var(--accent);
  transform: translateX(-50%);
  transition: left 0.7s var(--ease), background-color 0.9s var(--ease);
}
.tl-thumb::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -4px;
  width: 7px;
  height: 7px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--accent);
  transition: background-color 0.9s var(--ease);
}

.tl-stops {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
}
.tl-stop {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  font: inherit;
  color: var(--ink-soft);
}
.tl-stop:first-child { align-items: flex-start; }
.tl-stop:last-child { align-items: flex-end; }

.tl-stop .stop-tick {
  width: 1px;
  height: 9px;
  background: var(--river-soft);
  transition: height 0.4s var(--ease), background-color 0.4s var(--ease);
}
.tl-stop .stop-year {
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: color 0.4s var(--ease);
  white-space: nowrap;
}
.tl-stop:hover .stop-tick { background: var(--accent); }
.tl-stop:hover .stop-year { color: var(--forest); }
.tl-stop[aria-pressed="true"] .stop-tick { height: 14px; background: var(--accent); }
.tl-stop[aria-pressed="true"] .stop-year { color: var(--forest); }

.tl-stop:focus-visible {
  outline: none;
}
.tl-stop:focus-visible .stop-tick {
  height: 16px;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(167, 131, 70, 0.18);
}

/* ---- per-stage atmosphere ------------------------------------------- */
/* tone + accent shift gently from warm Triassic stone to modern river green */
.gallery[data-stage="0"] { --tone: #e7ddc8; --accent: #a78346; }
.gallery[data-stage="1"] { --tone: #e8ddc6; --accent: #a78346; }
.gallery[data-stage="2"] { --tone: #e9e0cb; --accent: #a07b3f; }
.gallery[data-stage="3"] { --tone: #e9e1cd; --accent: #9c7e3f; }
.gallery[data-stage="4"] { --tone: #e7e0c7; --accent: #94804a; }
.gallery[data-stage="5"] { --tone: #e9ddc2; --accent: #8a834b; }
.gallery[data-stage="6"] { --tone: #e6dfc6; --accent: #7e8a55; }
.gallery[data-stage="7"] { --tone: #e2e2cd; --accent: #6f8654; }
.gallery[data-stage="8"] { --tone: #dfe3d2; --accent: #5f7551; }
.gallery[data-stage="9"] { --tone: #dde4d6; --accent: #536b4f; }

/* terrain contours fade as the river presence grows toward the present */
.gallery[data-stage="3"] .atmos-contours,
.gallery[data-stage="4"] .atmos-contours { opacity: 0.05; }
.gallery[data-stage="5"] .atmos-contours,
.gallery[data-stage="6"] .atmos-contours { opacity: 0.04; }
.gallery[data-stage="7"] .atmos-contours,
.gallery[data-stage="8"] .atmos-contours,
.gallery[data-stage="9"] .atmos-contours { opacity: 0.03; }
.gallery[data-stage="5"] .atmos-river { opacity: 0.04; }
.gallery[data-stage="6"] .atmos-river { opacity: 0.06; }
.gallery[data-stage="7"] .atmos-river { opacity: 0.07; }
.gallery[data-stage="8"] .atmos-river { opacity: 0.085; }
.gallery[data-stage="9"] .atmos-river { opacity: 0.1; }

/* ---- entrance ------------------------------------------------------- */
.reveal-g { opacity: 0; transform: translateY(16px); }
.gallery.in-view .reveal-g {
  animation: rise 1.2s var(--ease) forwards;
}
.gallery.in-view .gallery-stage    { animation-delay: 0.18s; }
.gallery.in-view .timeline-control { animation-delay: 0.34s; }

/* ===================================================================== */
/*  Responsive                                                           */
/* ===================================================================== */
@media (max-width: 900px) {
  .gallery-stage {
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 4vw, 2.5rem);
    padding-top: clamp(1.5rem, 3vw, 2rem);
  }
  .specimen-zone {
    grid-column: 1;
    grid-row: 1;
    height: clamp(220px, 34vh, 340px);
  }
  .label {
    grid-column: 1;
    grid-row: 2;
    max-width: 540px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
  }
  .label-meta, .label-trait { align-items: center; justify-content: center; }
  .label-meta { flex-direction: row; justify-content: center; }
  .specimen-tag { left: 50%; transform: translateX(-50%); text-align: center; }
  .atmos-numeral { font-size: 30vh; opacity: 0.03; }
  .atmos-coord { bottom: auto; top: clamp(1.5rem, 4vw, 2.5rem); right: clamp(1.5rem, 5vw, 2.5rem); }
}

@media (max-width: 560px) {
  .gallery { padding-left: 1.25rem; padding-right: 1.25rem; }
  .tl-scale { overflow: visible; }
  /* ten stages: keep every tick, but anchor only the end year labels so the
     scale never crowds — the active year is always shown in the panel */
  .tl-stop .stop-year { display: none; }
  .tl-stop:first-child .stop-year,
  .tl-stop:last-child .stop-year {
    display: block;
    font-size: 0.56rem;
    letter-spacing: 0.1em;
  }
  .tl-stop { gap: 0.9rem; }
  .label { padding: 1.3rem 1.25rem; }
  .label-desc { font-size: 0.84rem; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-g { opacity: 1; transform: none; }
  .gallery.in-view .reveal-g { animation: none; }
  .spec-img { transition: opacity 0.001s; transform: translateX(-50%); }
  .label.swap .label-body { animation: none; }
  .tl-fill, .tl-thumb { transition: none; }
}