/* 13 · Curtain call — frieze → 3D sea → landfall → frieze → cave, with the look of the whole as a toggle. */
@import "@fontsource/cormorant-garamond/latin-500.css";
@import "@fontsource/cormorant-garamond/latin-600.css";
@import "@fontsource/cormorant-garamond/latin-700.css";
@import "@fontsource/cormorant-garamond/latin-500-italic.css";
@import "@fontsource/inter/latin-400.css";
@import "@fontsource/inter/latin-600.css";

:root {
  /* black-figure (04) */
  --clay: #c46a33;
  --clay-hi: #dc8d52;
  --glaze: #1d140e;
  --added-white: #efe3c8;
  /* vellum (12) */
  --vellum: #e3d6b4;
  --vellum-hi: #ece2c6;
  --iron: #2b2118;
  --iron-soft: #5e4d3a;
  --rhumb-red: #a23a2a;
  --desk: #3a2f24;
  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", system-ui, sans-serif;
  --ease-out: cubic-bezier(0.22, 0.8, 0.2, 1);

  /* the frieze, per look (default: look 2, terracotta and black) */
  --surround: var(--glaze);
  --band: var(--clay);
  --ink: var(--glaze);
  --inc: var(--clay);
  /* the interface, per look */
  --ui-bg: rgb(236 226 198 / 0.94);
  --ui-fg: var(--iron);
  --ui-soft: var(--iron-soft);
  --ui-line: rgb(43 33 24 / 0.22);
  --ui-accent: var(--rhumb-red);
  --cut: var(--glaze);
  --foot-bg: var(--desk);
  --foot-fg: var(--vellum-hi);
}
body[data-look="1"] {
  --surround: #ddcfa9;
  --band: var(--vellum-hi);
  --ink: #5b4128;
  --inc: var(--vellum-hi);
  --cut: var(--vellum);
  --foot-bg: #d6c69e;
  --foot-fg: var(--iron);
}
body[data-look="3"] {
  --ui-bg: rgb(29 20 14 / 0.9);
  --ui-fg: var(--added-white);
  --ui-soft: var(--clay-hi);
  --ui-line: rgb(196 106 51 / 0.45);
  --ui-accent: var(--clay-hi);
  --foot-bg: var(--glaze);
  --foot-fg: var(--clay-hi);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  height: 100dvh;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
  background: var(--foot-bg);
  color: var(--ui-fg);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--ui-accent); outline-offset: 2px; }
[hidden] { display: none !important; }

#app { min-height: 0; display: grid; }
[data-fan-credits] {
  position: relative;
  z-index: 5;
  padding: 0.85rem 1.5rem;
  background: var(--foot-bg);
  color: var(--foot-fg);
  opacity: 1;
  border-top: 1px solid var(--ui-line);
}

/* ---------- stage ---------- */
.stage {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: var(--surround);
  isolation: isolate;
}
.stage__three, .frieze-host, .cut, .stage__paper, .stage__fallback { position: absolute; inset: 0; }
.stage__three { z-index: 0; }
.stage__canvas { display: block; width: 100%; height: 100%; }
body[data-look="1"] .stage__canvas { filter: sepia(0.38) saturate(0.85) contrast(0.96); }
.stage__fallback { display: grid; place-items: center; background: linear-gradient(#6f9fb4, #efc996 60%, #185a70 61%); color: var(--iron); }

/* Look 1 lays a vellum grain over the 3D, so sea and chart read as one sheet. */
.stage__paper {
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(ellipse at center, transparent 55%, rgb(120 92 52 / 0.32) 100%),
    repeating-linear-gradient(90deg, rgb(91 65 40 / 0.035) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(0deg, rgb(91 65 40 / 0.03) 0 1px, transparent 1px 9px);
  mix-blend-mode: multiply;
  transition: opacity 0.4s;
}
body[data-look="1"] .stage__paper { opacity: 1; }

/* ---------- friezes ---------- */
.frieze-host { z-index: 2; pointer-events: none; will-change: transform, opacity; }
.frieze { display: block; width: 100%; height: 100%; overflow: visible; }
.frieze-host--cyclops { z-index: 3; }
.f-surround { fill: var(--surround); }
.f-band { fill: var(--band); }
.ink { fill: var(--ink); }
.clay { fill: var(--inc); }
.inc { fill: none; stroke: var(--inc); stroke-linecap: round; stroke-linejoin: round; }
.limb { fill: none; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; }
.limb-edge { fill: none; stroke: var(--inc); stroke-linecap: round; stroke-linejoin: round; }
.oar { stroke: var(--ink); stroke-width: 3.2; stroke-linecap: round; }
.rig { fill: none; stroke: var(--ink); stroke-width: 1.4; }
.wave { fill: none; stroke: var(--ink); stroke-linecap: round; }
.ground { stroke: var(--ink); stroke-width: 3.5; }
.rule { fill: none; stroke: var(--ink); stroke-width: 2.6; }
.vol { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.mean { fill: none; stroke: var(--ink); stroke-width: 3; }
.frame-rule { fill: none; stroke: var(--ink); stroke-width: 1.2; display: none; }
.inscr { font: 600 19px var(--serif); letter-spacing: 0.2em; fill: var(--ink); }
.saga-name { font: 600 15px var(--serif); letter-spacing: 0.22em; fill: var(--ink); }
.glow-a { stop-color: #e2803a; }
.glow-b { stop-color: #3a170a; }
.glow-c { stop-color: #0c0705; }

/* Look 1: the same figures, redrawn as pen and wash on vellum — the chart's illustrated border. */
body[data-look="1"] .frieze .ink { fill: rgb(91 65 40 / 0.14); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
body[data-look="1"] .frieze .inc { stroke: var(--ink); opacity: 0.55; }
body[data-look="1"] .frieze .limb { stroke-width: 3px; }
body[data-look="1"] .frieze .limb-edge { stroke: transparent; }
body[data-look="1"] .frieze .clay { fill: var(--ink); }
body[data-look="1"] .mean, body[data-look="1"] .rule { stroke-width: 1.6; }
body[data-look="1"] .frame-rule { display: inline; }
body[data-look="1"] .inscr, body[data-look="1"] .saga-name { font-style: italic; font-weight: 500; letter-spacing: 0.12em; fill: var(--rhumb-red); }
body[data-look="1"] .glow-a { stop-color: #d99a55; }
body[data-look="1"] .glow-b { stop-color: #4a3420; }
body[data-look="1"] .glow-c { stop-color: #241911; }

/* the fade-through used for jumps and under reduced motion */
.cut {
  z-index: 6;
  background: var(--cut);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.cut.is-on { opacity: 1; }

/* ---------- the captain's-table map ---------- */
.chart {
  position: absolute;
  z-index: 1;
  left: 28px;
  bottom: 112px;
  width: 330px;
  margin: 0;
  padding: 10px 12px 12px;
  background: linear-gradient(160deg, #ece2c6, #dccca5);
  color: var(--iron);
  border-radius: 3px;
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.4) inset, 0 18px 30px -12px rgb(20 12 6 / 0.55), 0 3px 8px rgb(20 12 6 / 0.3);
  transform-origin: 30% 100%;
}
.chart::before, .chart::after {
  content: "";
  position: absolute;
  top: -6px; bottom: -6px;
  width: 9px;
  border-radius: 5px;
  background: linear-gradient(90deg, #8e7b58, #e2d5b2 45%, #8e7b58);
}
.chart::before { left: -5px; }
.chart::after { right: -5px; }
.chart__head { margin: 0 0 6px; font: 600 1.05rem/1.1 var(--serif); }
.chart__head span { display: block; font: italic 500 0.8rem/1.2 var(--serif); color: var(--iron-soft); }
.chart__svg { display: block; width: 100%; height: auto; }
.c-vellum { fill: #e6dab9; }
.c-frame { fill: none; stroke: var(--iron); stroke-width: 0.8; }
.c-rhumb { fill: none; stroke: rgb(162 58 42 / 0.18); stroke-width: 0.5; }
.c-land { fill: #c9b07a; stroke: var(--iron); stroke-width: 0.9; }
.c-ink { fill: none; stroke: var(--iron); stroke-width: 0.7; }
.c-course { fill: none; stroke: var(--rhumb-red); stroke-width: 1.3; stroke-dasharray: 3 2.4; }
.c-port { fill: #f3ebd6; stroke: var(--iron); stroke-width: 0.9; }
.c-num { font: 600 6.5px var(--sans); fill: var(--iron); }
.c-place { font: 600 italic 13px var(--serif); fill: var(--iron); }
.c-sea { font: italic 500 8.5px var(--serif); fill: var(--rhumb-red); }
.c-rose circle { fill: none; stroke: var(--iron-soft); stroke-width: 0.6; }
.c-rose path { fill: var(--iron-soft); }
.c-here__ring { fill: rgb(162 58 42 / 0.18); stroke: var(--rhumb-red); stroke-width: 1.4; }
.c-here__dot { fill: var(--rhumb-red); }
.c-here__label { font: 600 8.5px var(--sans); fill: var(--rhumb-red); paint-order: stroke; stroke: #efe6cd; stroke-width: 2.5px; }

/* ---------- caption ---------- */
.cap {
  position: absolute;
  z-index: 7;
  top: 22px;
  left: 28px;
  min-width: 300px;
  max-width: 460px;
  padding: 12px 18px 14px;
  background: var(--ui-bg);
  color: var(--ui-fg);
  border-left: 3px solid var(--ui-accent);
  border-radius: 4px;
  box-shadow: 0 10px 28px -14px rgb(0 0 0 / 0.6);
  backdrop-filter: blur(4px);
}
.cap__eyebrow { margin: 0; font-size: 0.75rem; letter-spacing: 0.04em; color: var(--ui-soft); }
.cap__title { margin: 2px 0 8px; font: 600 2rem/1.05 var(--serif); }
.cap__row { margin: 0; display: flex; align-items: center; gap: 10px; min-height: 26px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 10px 3px 4px;
  border: 1px solid var(--ui-line);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
}
.chip__n {
  display: inline-grid;
  place-items: center;
  width: 19px; height: 19px;
  border-radius: 50%;
  background: var(--ui-fg);
  color: var(--ui-bg);
  font-size: 0.68rem;
}
.back {
  padding: 4px 12px;
  border: 1px solid var(--ui-accent);
  border-radius: 999px;
  background: var(--ui-accent);
  color: #fff8ea;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}
body[data-look="3"] .back { color: var(--glaze); }

/* ---------- control bar ---------- */
.bar {
  position: absolute;
  z-index: 7;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--ui-bg);
  color: var(--ui-fg);
  border-radius: 6px;
  box-shadow: 0 12px 30px -14px rgb(0 0 0 / 0.65);
  backdrop-filter: blur(4px);
  white-space: nowrap;
}
.bar button { cursor: pointer; }
.bar__play {
  min-width: 74px;
  padding: 7px 14px;
  border: 1px solid var(--ui-accent);
  border-radius: 999px;
  background: var(--ui-accent);
  color: #fff8ea;
  font-weight: 600;
  font-size: 0.85rem;
}
body[data-look="3"] .bar__play { color: var(--glaze); }
.bar__step {
  width: 32px; height: 32px;
  border: 1px solid var(--ui-line);
  border-radius: 50%;
  background: transparent;
}
.bar__step:disabled { opacity: 0.35; cursor: default; }
.dots { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
.dots button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px 5px 5px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-size: 0.8rem;
  color: var(--ui-soft);
}
.dots__n {
  display: inline-grid;
  place-items: center;
  width: 20px; height: 20px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 600;
}
.dots button[aria-current] { color: var(--ui-fg); font-weight: 600; }
.dots button[aria-current] .dots__n { background: var(--ui-accent); border-color: var(--ui-accent); color: var(--ui-bg); }
.looks { display: flex; align-items: center; gap: 4px; margin-left: 8px; padding-left: 14px; border-left: 1px solid var(--ui-line); font-size: 0.8rem; }
.looks__label { margin-right: 4px; color: var(--ui-soft); }
.looks__sep { color: var(--ui-soft); }
.looks button {
  width: 26px; height: 26px;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  font-weight: 600;
}
.looks button[aria-pressed="true"] { border-color: var(--ui-accent); color: var(--ui-accent); }
.looks__name { min-width: 118px; margin-left: 6px; font: italic 500 0.95rem var(--serif); color: var(--ui-soft); }

@media (prefers-reduced-motion: reduce) {
  .cut { transition-duration: 0.25s; }
  .stage__paper { transition: none; }
}