/* The ZAZA Map's story, shared by /vision/ and the homepage's #vision section: the map and its camera, the dots, the
   sealed manuscript that tells the chapters, and the status chips. Uses the site's tokens (--yellow, --navy-*, --radius,
   --gutter, --topbar-h, --font-display…), which styles.css and vision.css both define. */

/* Status chips: the word in a line-height 1 box, centred by flex. */
.chip {
  display: inline-flex;
  align-items: center;
  height: 1.45rem;
  padding: 0 0.6rem;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.chip.live { background: rgba(61, 220, 132, 0.16); color: var(--green); box-shadow: inset 0 0 0 1.5px rgba(61, 220, 132, 0.6); }
.chip.next { background: rgba(255, 214, 10, 0.14); color: var(--yellow); box-shadow: inset 0 0 0 1.5px rgba(255, 214, 10, 0.6); }
.chip.later { background: rgba(58, 102, 255, 0.18); color: #9db4ff; box-shadow: inset 0 0 0 1.5px rgba(58, 102, 255, 0.7); }
.chip.goal { background: rgba(255, 46, 77, 0.15); color: #ff8a9c; box-shadow: inset 0 0 0 1.5px rgba(255, 46, 77, 0.6); }

/* ---------- The stage: the map and the manuscript under it, sized to fit one screen ---------- */

@property --fx { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
@property --fy { syntax: "<percentage>"; inherits: true; initial-value: 50%; }

.stage {
  --ms-h: 360px;
  width: min(1400px, 100% - 2 * var(--gutter), (100vh - var(--topbar-h) - var(--ms-h)) * 1.79);
  width: min(1400px, 100% - 2 * var(--gutter), (100svh - var(--topbar-h) - var(--ms-h)) * 1.79);
  min-width: min(100% - 2 * var(--gutter), 640px);
  margin: 0 auto;
}

.vmap {
  position: relative;
  container-type: inline-size;
  overflow: hidden;
  aspect-ratio: 2752 / 1536;
  border-radius: var(--radius);
  background: #0b2a6e;
  box-shadow: 0 0 0 3px var(--navy-800), 0 0 0 6px rgba(255, 214, 10, 0.55), 0 24px 60px rgba(0, 0, 0, 0.55);
}

/* The camera: vision.js moves and zooms it onto each chapter's landmark. */
.vcam {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  transition: transform 1.5s cubic-bezier(0.65, 0, 0.3, 1);
}

.vcam > img { width: 100%; height: 100%; }

/* Story light: the frame darkens round the landmark the story is on. */
.vmap::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at var(--fx) var(--fy), transparent 0 16%, rgba(3, 10, 44, 0.55) 72%);
  opacity: 0;
  transition: opacity 0.9s ease, --fx 1.5s cubic-bezier(0.65, 0, 0.3, 1), --fy 1.5s cubic-bezier(0.65, 0, 0.3, 1);
}

.vmap.is-story::after { opacity: 1; }

.vdots { position: absolute; inset: 0; }

/* A dot like the reference's: a yellow disc in a soft white halo that breathes, the chapter's number on it. It keeps
   its size whatever the camera's zoom (scale 1 / --z). --x and --y: its place in % of the picture (vision.js). */
.vdot {
  --d: clamp(22px, 2.7cqw, 46px);
  --hover: 1.15;
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  display: grid;
  place-items: center;
  width: var(--d);
  height: var(--d);
  margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--navy-900);
  font-family: var(--font-display);
  font-size: clamp(11px, 1.3cqw, 21px);
  line-height: 1;
  cursor: pointer;
  scale: calc(1 / var(--z, 1));
  box-shadow: 0 0 0 clamp(4px, 0.55cqw, 9px) rgba(255, 255, 255, 0.4), 0 3px 10px rgba(0, 0, 0, 0.45);
  transition: scale 1.5s cubic-bezier(0.65, 0, 0.3, 1), opacity 0.5s ease, transform 160ms ease;
}

.vdot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
  animation: vdot-ping 2.4s ease-out infinite;
  animation-delay: calc(var(--n, 0) * 0.22s);
  pointer-events: none;
}

.vdot.loop { background: var(--white); color: var(--blue-deep); font-size: clamp(13px, 1.6cqw, 26px); }

@keyframes vdot-ping {
  0% { transform: scale(1); opacity: 0.9; }
  70%, 100% { transform: scale(2.1); opacity: 0; }
}

.vdot:hover, .vdot:focus-visible { z-index: 3; transform: scale(var(--hover)); }
.vmap.is-story .vdot:not(.is-on) { opacity: 0; pointer-events: none; }
.vdot.is-on { z-index: 3; background: var(--white); color: var(--blue-deep); box-shadow: 0 0 0 clamp(4px, 0.55cqw, 9px) var(--yellow), 0 3px 14px rgba(0, 0, 0, 0.5); }

/* The chapter's name, only while its dot is hovered or focused, above it (under it for the dots near the top, .under):
   nothing else is written over the painting. It's centred on the dot but slides along to stay 8px inside the map's
   frame (1cqw = 1% of the map; / --hover undoes the dot's hover growth), and wraps on a map too small for it. */
.vdot .tag {
  position: absolute;
  bottom: calc(100% + clamp(8px, 0.9cqw, 14px));
  left: 50%;
  width: max-content;
  max-width: calc((100cqw - 16px) / var(--hover));
  padding: 0.4em 0.75em;
  border: 2px solid var(--navy-900);
  border-radius: 999px;
  background: var(--yellow);
  color: var(--navy-900);
  font-size: clamp(12px, 1.05cqw, 16px);
  line-height: 1.15;
  text-align: center;
  transform: translateX(clamp(calc((8px - var(--x) * 1cqw) / var(--hover)), -50%, calc((100cqw - 8px - var(--x) * 1cqw) / var(--hover) - 100%)));
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease;
}

.vdot.under .tag { top: calc(100% + clamp(8px, 0.9cqw, 14px)); bottom: auto; }
.vdot:hover .tag, .vdot:focus-visible .tag { opacity: 1; }
.vdot.is-on .tag { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .vdot::before { animation: none; opacity: 0; }
  .vcam, .vmap::after, .vdot { transition: none; }
}

/* ---------- The manuscript: a scroll with two rolled ends (the World's Rankings scroll), sealed with ZAZA's coin ---------- */

.ms {
  --ink: #3a2812;
  --ink-2: #6e5532;
  --ink-red: #8f1520;
  --rule: rgba(92, 62, 24, 0.45);
  position: relative;
  margin: 16px 12px 0;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.5));
}

.ms::before, .ms::after, .scroll::before, .scroll::after {
  --lip: 70%;
  content: "";
  position: relative;
  z-index: 2;
  display: block;
  height: 28px;
  margin: 0 -12px;
  border-radius: 9px / 14px;
  background:
    radial-gradient(ellipse 8px 14px at 9px 50%, #4a3010 0 12%, #d8bd85 14% 30%, #8a6530 32% 42%, #efdcac 44% 60%, #9c7438 62% 72%, #e2c993 74% 88%, #6b4a1e 90% 100%, transparent 102%),
    radial-gradient(ellipse 8px 14px at calc(100% - 9px) 50%, #4a3010 0 12%, #d8bd85 14% 30%, #8a6530 32% 42%, #efdcac 44% 60%, #9c7438 62% 72%, #e2c993 74% 88%, #6b4a1e 90% 100%, transparent 102%),
    linear-gradient(180deg, transparent calc(var(--lip) - 1px), rgba(110, 76, 31, 0.6) calc(var(--lip) - 1px) calc(var(--lip) + 1px), rgba(255, 246, 220, 0.5) calc(var(--lip) + 1px) calc(var(--lip) + 2px), transparent calc(var(--lip) + 2px)),
    linear-gradient(180deg, #7d5a28, #c4a066 14%, #efdfb6 36%, #fbf2da 46%, #e9d4a2 60%, #bf9a5e 82%, #7a5626);
  box-shadow: inset 0 0 0 1px rgba(60, 36, 8, 0.5), 0 4px 5px -2px rgba(60, 36, 8, 0.55);
}

.ms::after, .scroll::after { --lip: 28%; box-shadow: inset 0 0 0 1px rgba(60, 36, 8, 0.5), 0 -4px 5px -2px rgba(60, 36, 8, 0.4); }

/* Aged paper, darker towards the edges and under the rolls. */
.ms-closed, .ms-sheet, .scroll > .chron {
  color: var(--ink);
  background:
    radial-gradient(ellipse 60% 40% at 30% 22%, rgba(255, 250, 228, 0.5), transparent 70%),
    radial-gradient(ellipse 50% 35% at 78% 72%, rgba(150, 108, 50, 0.13), transparent 70%),
    repeating-linear-gradient(90deg, rgba(120, 84, 36, 0.035) 0 2px, transparent 2px 5px),
    linear-gradient(90deg, #c4a066, #e4cd98 6%, #eddcb0 50%, #e4cd98 94%, #c4a066);
  box-shadow: inset 0 12px 12px -8px rgba(90, 58, 16, 0.55), inset 0 -12px 12px -8px rgba(90, 58, 16, 0.55);
}

/* Sealed (and rolled up again): a strip of the scroll, its title, the wax seal and the button. */
.ms-closed {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem clamp(1rem, 3vw, 2rem);
}

.ms-title {
  color: #4a2f0e;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  line-height: 1.1;
  text-shadow: 0 1px 0 rgba(255, 246, 214, 0.7);
}

.ms-title small {
  display: block;
  margin-top: 0.3rem;
  color: var(--ink-2);
  font-family: "IM Fell English", Georgia, serif;
  font-size: 1rem;
  font-style: italic;
  text-shadow: none;
}

.ms-closed .btn { justify-self: end; }

.ms.is-open .ms-closed { display: none; }

/* The wax seal: red wax with ZAZA's coin pressed in. Breaking it splits it in two along a crack. */
.seal {
  position: relative;
  width: clamp(76px, 8vw, 96px);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  filter: drop-shadow(0 4px 4px rgba(60, 20, 8, 0.55));
  transition: transform 160ms ease;
}

.seal:hover { transform: scale(1.06) rotate(-4deg); }

.seal-half {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 47% 53% 50% 50% / 52% 46% 54% 48%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 170, 160, 0.55), transparent 32%),
    radial-gradient(circle at 50% 50%, #c42a36 0 46%, #9b1420 60%, #6d0a12 100%);
  box-shadow: inset 0 -4px 8px rgba(60, 0, 8, 0.55), inset 0 3px 5px rgba(255, 150, 150, 0.35);
  transition: transform 0.6s cubic-bezier(0.5, 0, 0.7, 1), opacity 0.6s ease;
}

.seal-half img {
  width: 64%;
  height: auto;
  border-radius: 50%;
  filter: grayscale(1) contrast(1.4) brightness(1.05);
  mix-blend-mode: multiply;
  opacity: 0.85;
}

.seal-half.l { clip-path: polygon(0 0, 52% 0, 46% 18%, 56% 34%, 47% 52%, 55% 70%, 48% 86%, 53% 100%, 0 100%); }
.seal-half.r { clip-path: polygon(52% 0, 100% 0, 100% 100%, 53% 100%, 48% 86%, 55% 70%, 47% 52%, 56% 34%, 46% 18%); }
/* Once broken it stays cracked, its halves a little apart, when the scroll is rolled up again. */
.ms.was-opened .seal-half.l { transform: translate(-5px, 2px) rotate(-7deg); }
.ms.was-opened .seal-half.r { transform: translate(5px, 4px) rotate(6deg); }
.ms.is-breaking .seal-half.l { transform: translate(-22px, 16px) rotate(-24deg); opacity: 0; }
.ms.is-breaking .seal-half.r { transform: translate(22px, 20px) rotate(20deg); opacity: 0; }

/* Open: the sheet unrolls (and between pages rolls up over the text and down again; the controls stay). */
.ms-sheet {
  display: grid;
  grid-template-rows: 0fr auto;
  transition: grid-template-rows 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.ms.is-open .ms-sheet { grid-template-rows: 1fr auto; }
.ms.is-open.is-turning .ms-sheet { grid-template-rows: 0fr auto; transition-duration: 0.25s; }
.ms:not(.is-open) .ms-sheet { box-shadow: none; }
.ms:not(.is-open) .ms-foot { display: none; }

.ms-page { min-height: 0; overflow: hidden; }
.ms-page > .step-body { min-height: 11.5rem; padding: 1rem clamp(1.1rem, 4vw, 3rem) 0; }

.ms-foot {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem clamp(1.1rem, 4vw, 3rem) 0.9rem;
}

.ms-pips { display: flex; flex: 1; gap: 5px; }

.pip {
  flex: 1;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: rgba(92, 62, 24, 0.22);
  cursor: pointer;
  overflow: hidden;
}

.pip i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--ink-2); }
.pip.done i { width: 100%; }
.pip.now i { animation: pip-fill var(--dur, 12s) linear forwards; }
.pip:last-child i { background: var(--ink-red); }
.ms.is-paused .pip.now i { animation-play-state: paused; }

@keyframes pip-fill { to { width: 100%; } }

.ms-ctl { display: flex; align-items: center; gap: 0.4rem; }

.ms-ctl button {
  display: grid;
  place-items: center;
  min-width: 2.3rem;
  height: 2.3rem;
  padding: 0 0.6rem;
  border: 2px solid var(--rule);
  border-radius: 999px;
  background: rgba(255, 246, 214, 0.35);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}

.ms-ctl button:hover { background: rgba(255, 246, 214, 0.75); border-color: var(--ink-2); }
.ms-ctl #play { font-size: 0.8rem; letter-spacing: -0.1em; }
.ms-ctl .ms-whole { font-size: 0.9rem; }

/* A page: "Chapter IV" in small capitals, the title in the brand's Titan One in ink, the text in an old print face with
   an illuminated first letter. The same on the chronicle's scroll below. */
.step-top { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.4rem; }

.step-n {
  color: var(--ink-2);
  font-family: "IM Fell English SC", Georgia, serif;
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0.08em;
}

.step-body h3 {
  color: #4a2f0e;
  font-size: clamp(1.4rem, 2.3vw, 1.9rem);
  text-shadow: 0 1px 0 rgba(255, 246, 214, 0.7);
}

.step-body > p:not(.step-top) {
  margin-top: 0.45rem;
  color: var(--ink);
  font-family: "IM Fell English", Georgia, serif;
  font-size: clamp(1.08rem, 1.5vw, 1.24rem);
  line-height: 1.45;
}

.step-body h3 + p::first-letter {
  float: left;
  margin: 0.08em 0.12em 0 0;
  color: var(--ink-red);
  font-family: var(--font-display);
  font-size: 2.9em;
  line-height: 0.85;
  text-shadow: 1px 1px 0 #d9a53a, 2px 2px 0 rgba(90, 40, 10, 0.35);
}

/* The old print face draws its figures old-style ("11" reads like two dotless i's): numbers in a plain serif, and the
   live level line in the site's own font. */
.step-body .n { font-family: "Times New Roman", Times, "Noto Serif", serif; font-size: 0.95em; }

.step-body .step-live {
  display: inline-block;
  margin-right: 0.6rem;
  padding: 0.2rem 0.65rem;
  border: 1.5px dashed var(--rule);
  border-radius: 8px;
  font-family: var(--font-body) !important;
  font-size: 0.9rem !important;
  font-weight: 600;
}

.step-link {
  display: inline-flex;
  gap: 0.35rem;
  margin-top: 0.5rem;
  color: var(--ink-red);
  font-family: "IM Fell English", Georgia, serif;
  font-size: 1.08rem;
  font-style: italic;
  text-decoration: underline;
  text-decoration-color: rgba(143, 21, 32, 0.4);
  text-underline-offset: 3px;
}

.step-link:hover { text-decoration-color: currentColor; }

/* The status chips in ink on the paper. */
.ms .chip.live, .scroll .chip.live { background: rgba(30, 110, 60, 0.12); color: #1f6a3c; box-shadow: inset 0 0 0 1.5px rgba(30, 110, 60, 0.5); }
.ms .chip.next, .scroll .chip.next { background: rgba(160, 110, 10, 0.14); color: #8a5a00; box-shadow: inset 0 0 0 1.5px rgba(160, 110, 10, 0.5); }
.ms .chip.later, .scroll .chip.later { background: rgba(30, 60, 160, 0.1); color: #263f98; box-shadow: inset 0 0 0 1.5px rgba(30, 60, 160, 0.4); }
.ms .chip.goal, .scroll .chip.goal { background: rgba(143, 21, 32, 0.1); color: var(--ink-red); box-shadow: inset 0 0 0 1.5px rgba(143, 21, 32, 0.45); }

@media (max-width: 720px) {
  .stage { --ms-h: 0px; min-width: 0; }
  .ms { margin-inline: 10px; }
  .ms-closed { grid-template-columns: 1fr auto; padding: 0.9rem 1rem; }
  .ms-closed .btn { grid-column: 1 / -1; justify-self: stretch; }
  .ms-page > .step-body { min-height: 15rem; }
  .ms-foot { flex-wrap: wrap; gap: 0.6rem; }
  .ms-pips { flex-basis: 100%; }
  .ms-ctl { width: 100%; }
  .ms-ctl .ms-whole { margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .ms-sheet, .seal-half { transition: none; }
}

/* ---------- The homepage's #vision section: the stage under its heading, then a link to the whole chronicle ---------- */

.vision-more { margin-top: 1.5rem; text-align: center; }
.vision-more a { color: var(--yellow); font-weight: 800; }
.vision-more a:hover { color: var(--yellow-soft); text-decoration: underline; }