/* ============================================================
   STORY PAGE — A Thousand Years in Silver and Gold
   Animated narrative of Polish coinage history.
   Era theming via CSS custom properties switched per scene.
   ============================================================ */

/* ── Page baseline ─────────────────────────────────────────── */
body.story-page {
  background: #0d0d0f;
  color: #f1ece1;
  overflow-x: hidden;
}
.story-page main {
  padding: 0;
  max-width: none;
  margin: 0;
}

/* ── Stage: full-viewport scene container ──────────────────── */
.story-stage {
  position: relative;
  /* Use 100% (not 100vw) — 100vw includes scrollbar width and overflows on
     desktop with vertical scrollbar. 100% follows the body width. */
  width: 100%;
  height: 100vh;
  /* clamp prevents cramped layouts on landscape phones (viewport < 600px tall)
     while still ensuring desktop has full breathing room */
  min-height: clamp(420px, 100vh, 600px);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Era-themed colors. Default = Piast palette; JS swaps per scene */
  --era-color: #7A2030;
  --era-bg-1: #1a0f10;
  --era-bg-2: #2c1a17;
  background:
    radial-gradient(ellipse at center, var(--era-bg-2) 0%, var(--era-bg-1) 70%, #050505 100%);
  transition: background 1.2s ease, --era-color 0.8s ease;
}

/* ── Scene: each scene fills the stage, only one active at a time ──── */
.scene {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem 8rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.8s ease, visibility 0s linear 0.8s;
  text-align: center;
}
.scene.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.8s ease, visibility 0s linear 0s;
}

/* ── Era-themed scenes (background and accent colors swap) ────── */
.scene[data-era="piast"]            { --era-color: #7A2030; --era-bg-1: #1a0f10; --era-bg-2: #2c1a17; }
.scene[data-era="angevin"]          { --era-color: #9E5330; --era-bg-1: #1c100a; --era-bg-2: #2b1c12; }
.scene[data-era="jagiellonian"]     { --era-color: #A67C00; --era-bg-1: #1a1408; --era-bg-2: #2c2310; }
.scene[data-era="commonwealth"]     { --era-color: #C8962C; --era-bg-1: #1f1408; --era-bg-2: #332514; }
.scene[data-era="partitions"]       { --era-color: #5A6878; --era-bg-1: #0c1015; --era-bg-2: #18222c; }
.scene[data-era="second-republic"]  { --era-color: #C8102E; --era-bg-1: #1a0408; --era-bg-2: #2a0a14; }
.scene[data-era="wwii"]             { --era-color: #9a9a9a; --era-bg-1: #0a0a0a; --era-bg-2: #161616; }
.scene[data-era="prl"]              { --era-color: #3A5670; --era-bg-1: #0a1018; --era-bg-2: #16222e; }
.scene[data-era="third"]            { --era-color: #C8102E; --era-bg-1: #1a0408; --era-bg-2: #2a0a14; }
.scene[data-era="title"]            { --era-color: #C8962C; --era-bg-1: #050505; --era-bg-2: #1a1408; }

/* Active scene drives the stage background via :has() */
.story-stage:has(.scene[data-era="piast"].is-active)            { --era-color: #7A2030; --era-bg-1: #1a0f10; --era-bg-2: #2c1a17; }
.story-stage:has(.scene[data-era="angevin"].is-active)          { --era-color: #9E5330; --era-bg-1: #1c100a; --era-bg-2: #2b1c12; }
.story-stage:has(.scene[data-era="jagiellonian"].is-active)     { --era-color: #A67C00; --era-bg-1: #1a1408; --era-bg-2: #2c2310; }
.story-stage:has(.scene[data-era="commonwealth"].is-active)     { --era-color: #C8962C; --era-bg-1: #1f1408; --era-bg-2: #332514; }
.story-stage:has(.scene[data-era="partitions"].is-active)       { --era-color: #5A6878; --era-bg-1: #0c1015; --era-bg-2: #18222c; }
.story-stage:has(.scene[data-era="second-republic"].is-active)  { --era-color: #C8102E; --era-bg-1: #1a0408; --era-bg-2: #2a0a14; }
.story-stage:has(.scene[data-era="wwii"].is-active)             { --era-color: #9a9a9a; --era-bg-1: #0a0a0a; --era-bg-2: #161616; }
.story-stage:has(.scene[data-era="prl"].is-active)              { --era-color: #3A5670; --era-bg-1: #0a1018; --era-bg-2: #16222e; }
.story-stage:has(.scene[data-era="third"].is-active)            { --era-color: #C8102E; --era-bg-1: #1a0408; --era-bg-2: #2a0a14; }

/* ── Scene composition ─────────────────────────────────────── */
.scene__painting {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.6s ease, transform 14s ease-out;
  filter: brightness(0.55) saturate(0.85);
}
.scene.is-active .scene__painting {
  opacity: 0.9;
  transform: scale(1.06); /* slow Ken Burns */
}
/* Era WWII gets sepia tint */
.scene[data-era="wwii"] .scene__painting { filter: brightness(0.45) saturate(0.4) sepia(0.4); }
/* Title and credits scenes: no painting */
.scene[data-era="title"] .scene__painting,
.scene[data-era="credits"] .scene__painting { display: none; }

/* Scrim layer for legibility over painting */
.scene__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.35) 50%, rgba(0,0,0,0.7) 100%);
  pointer-events: none;
}

/* Era badge — top-left corner identifying the current era */
.scene__era-badge {
  position: absolute;
  top: 1.5rem;
  left: 2rem;
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  color: var(--era-color);
  text-transform: uppercase;
  font-weight: 600;
  z-index: 5;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.8s ease 0.4s, transform 0.8s ease 0.4s;
}
.scene.is-active .scene__era-badge { opacity: 1; transform: translateY(0); }

/* Year card */
.scene__year-card {
  font-family: 'Cinzel', serif;
  font-size: clamp(2.5rem, 7vw, 5rem);
  font-weight: 700;
  color: var(--era-color);
  letter-spacing: 0.04em;
  text-shadow: 0 2px 24px rgba(0,0,0,0.65);
  margin-bottom: 1rem;
  position: relative;
  z-index: 3;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease 0.5s, transform 1s ease 0.5s;
}
.scene.is-active .scene__year-card { opacity: 1; transform: translateY(0); }

/* Scene heading */
.scene__heading {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.5rem, 3.5vw, 2.5rem);
  color: #f6efdc;
  letter-spacing: 0.06em;
  font-weight: 700;
  margin: 0 0 1.5rem;
  position: relative;
  z-index: 3;
  text-shadow: 0 2px 18px rgba(0,0,0,0.7);
  max-width: 24ch;
  line-height: 1.2;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease 0.8s, transform 1s ease 0.8s;
}
.scene.is-active .scene__heading { opacity: 1; transform: translateY(0); }

/* Body / VO subtitle */
.scene__body {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.7;
  max-width: 60ch;
  color: rgba(255,255,255,0.85);
  position: relative;
  z-index: 3;
  text-shadow: 0 1px 10px rgba(0,0,0,0.65);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease 1.1s, transform 1s ease 1.1s;
}
.scene.is-active .scene__body { opacity: 1; transform: translateY(0); }

/* Featured coin (per scene) */
.scene__coin {
  position: relative;
  z-index: 3;
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 1.2s ease 1.5s, transform 1.2s cubic-bezier(.2,.7,.3,1.2) 1.5s;
}
.scene.is-active .scene__coin { opacity: 1; transform: scale(1); }
.scene__coin img {
  width: clamp(120px, 18vw, 200px);
  height: auto;
  border-radius: 50%;
  box-shadow:
    0 0 0 3px var(--era-color),
    0 0 28px rgba(255,200,80,0.35),
    0 12px 40px rgba(0,0,0,0.7);
}
.scene__coin-caption {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.75);
  letter-spacing: 0.04em;
  text-align: center;
  max-width: 22ch;
}

/* Lower-third date / fact overlay */
.scene__fact {
  position: absolute;
  bottom: 8rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  color: var(--era-color);
  background: rgba(0,0,0,0.55);
  padding: 0.5rem 1.25rem;
  border-left: 3px solid var(--era-color);
  border-radius: 2px;
  z-index: 4;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.scene__fact.is-shown { opacity: 1; }

/* ── Persistent timeline strip at the bottom ───────────────── */
.story-timeline {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3.25rem;
  display: flex;
  align-items: stretch;
  background: rgba(0,0,0,0.85);
  border-top: 1px solid rgba(255,255,255,0.1);
  z-index: 30;
  font-family: 'Cinzel', serif;
}
.story-timeline__seg {
  flex: var(--seg-weight, 1) 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 0.5rem;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  border-right: 1px solid rgba(255,255,255,0.05);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
  transition: color 0.5s ease, background 0.5s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.story-timeline__seg:hover { color: rgba(255,255,255,0.75); }
.story-timeline__seg.is-current {
  color: #fff;
  background: var(--seg-color);
}
.story-timeline__seg-name { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: 100%; }
.story-timeline__seg-years { font-size: 0.55rem; opacity: 0.7; margin-top: 2px; }

/* ── Player controls (top-right) ───────────────────────────── */
.story-controls {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  display: flex;
  flex-wrap: wrap;       /* allow buttons to wrap on very narrow screens */
  justify-content: flex-end;
  gap: 0.5rem;
  z-index: 50;
  max-width: calc(100vw - 2.5rem);  /* never exceed viewport */
}
.story-controls button {
  background: rgba(0,0,0,0.65);
  color: #f6efdc;
  border: 1px solid rgba(246,239,220,0.3);
  border-radius: 4px;
  padding: 0.5rem 0.85rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.story-controls button:hover,
.story-controls button:focus-visible {
  background: rgba(255,255,255,0.1);
  border-color: rgba(246,239,220,0.6);
  outline: none;
}
.story-controls button:focus-visible {
  box-shadow: 0 0 0 3px var(--red, #C8102E);
}

/* ── Scene 0: Title / Cold open ────────────────────────────── */
.scene[data-era="title"] .scene__heading {
  font-size: clamp(2.2rem, 5vw, 4rem);
  max-width: 18ch;
  margin-top: 1rem;
  color: var(--era-color);
}
.scene[data-era="title"] .scene__body {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  font-style: italic;
}
.scene__title-eagle {
  width: clamp(60px, 10vw, 120px);
  height: auto;
  margin-bottom: 1rem;
  filter: drop-shadow(0 0 18px rgba(255,200,80,0.5));
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 1.2s ease 0.3s, transform 1.4s cubic-bezier(.2,.7,.3,1.2) 0.3s;
}
.scene.is-active .scene__title-eagle { opacity: 1; transform: scale(1); }

/* ── Begin button (initial state, before play) ─────────────── */
.story-begin {
  position: fixed;
  bottom: 50%;
  left: 50%;
  transform: translate(-50%, 50%);
  background: var(--era-color, #C8962C);
  color: #fff;
  border: 2px solid var(--era-color, #C8962C);
  padding: 1rem 2.5rem;
  font-family: 'Cinzel', serif;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 4px;
  cursor: pointer;
  z-index: 60;
  box-shadow: 0 8px 32px rgba(200,150,44,0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.6s ease;
}
.story-begin:hover,
.story-begin:focus-visible {
  transform: translate(-50%, 50%) scale(1.04);
  box-shadow: 0 12px 40px rgba(200,150,44,0.55);
  outline: none;
}
.story-begin.is-hidden { opacity: 0; pointer-events: none; }

/* ── Scene 11: Credits scroll ──────────────────────────────── */
.scene[data-era="credits"] {
  background:
    radial-gradient(ellipse at center, #2c1a0d 0%, #160a05 70%, #050505 100%);
  align-items: stretch;
  padding: 0;
}
.scene[data-era="credits"] .credits-scroll {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 6rem 2rem 8rem;
  font-family: 'Libre Baskerville', Georgia, serif;
  color: rgba(246,239,220,0.85);
  line-height: 1.8;
  text-align: center;
  z-index: 3;
  position: relative;
  /* Animated scroll up */
  animation: credits-scroll 60s linear forwards;
}
.scene[data-era="credits"].is-active .credits-scroll {
  animation-play-state: running;
}
@keyframes credits-scroll {
  from { transform: translateY(40vh); }
  to   { transform: translateY(-100%); }
}
.credits-scroll h2 {
  font-family: 'Cinzel', serif;
  font-size: 1.8rem;
  color: #C8962C;
  letter-spacing: 0.15em;
  margin: 3rem 0 1rem;
  text-transform: uppercase;
}
.credits-scroll h3 {
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  color: var(--gold, #C8962C);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 2.5rem 0 0.75rem;
}
.credits-scroll p { margin: 0.5rem 0; font-size: 0.95rem; }
.credits-scroll p.dim { color: rgba(246,239,220,0.55); font-size: 0.85rem; font-style: italic; }
.credits-scroll hr {
  border: none;
  border-top: 1px solid rgba(246,239,220,0.2);
  margin: 2rem auto;
  max-width: 200px;
}

/* ── prefers-reduced-motion ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .scene,
  .scene__painting,
  .scene__year-card,
  .scene__heading,
  .scene__body,
  .scene__coin,
  .scene__title-eagle,
  .scene__era-badge,
  .credits-scroll {
    transition: opacity 0.3s ease !important;
    animation: none !important;
    transform: none !important;
  }
}

/* ── Mobile ────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .scene { padding: 3rem 1.25rem 7rem; }
  .scene__era-badge { left: 1rem; top: 1rem; font-size: 0.7rem; }
  .story-controls { top: 0.75rem; right: 0.75rem; }
  .story-controls button { padding: 0.4rem 0.65rem; font-size: 0.65rem; }
  .story-timeline__seg-name { display: none; } /* show only color bands on small */
  .story-timeline__seg-years { font-size: 0.5rem; }
}
/* Very narrow phones — tighten further */
@media (max-width: 400px) {
  .scene { padding: 2.5rem 1rem 6.5rem; }
  .scene__year-card { font-size: clamp(2rem, 12vw, 3rem); }
  .story-controls button { padding: 0.35rem 0.5rem; font-size: 0.6rem; }
  .story-begin { font-size: 1rem; padding: 0.85rem 1.75rem; letter-spacing: 0.08em; }
}