/* ============================================================
   THE OCTAGON
   An interactive reading of an eight-clause creed.
   Self-contained: no dependencies, no network, no build step.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --ink:        #0b0a09;
  --ink-2:      #13110f;
  --bone:       #efe7d8;
  --bone-dim:   #c0b5a2;
  --bone-faint: #8e8575;
  --rule:       #39332c;
  --accent:     #d9903f;
  --accent-ink: #1a1207;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --mono:  ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --sans:  "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-in: cubic-bezier(.55,.085,.68,.53);
}

html, body { margin: 0; padding: 0; }

#app {
  position: relative;
  width: 100%;
  height: 800px;            /* embedded default; script sets 100vh when top-level */
  min-height: 560px;
  overflow: hidden;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  cursor: default;
  isolation: isolate;
}

/* --- grain + vignette over everything, non-interactive --- */
#grain {
  /* canvas is a replaced element: absolute + inset:0 is NOT enough,
     it would keep its intrinsic 300x150. Explicit size required. */
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 60; pointer-events: none;
  opacity: .5; mix-blend-mode: overlay;
}
#vignette {
  position: absolute; inset: 0; z-index: 59; pointer-events: none;
  /* kept gentle: a heavy vignette dims the lower facets unevenly and
     costs the longest verbs (CONSUME, EXPRESS) their legibility */
  background: radial-gradient(150% 115% at 50% 46%, transparent 48%, rgba(0,0,0,.46) 100%);
}

/* --- generative backdrop --- */
#bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }

/* --- scene stage --- */
.stage {
  position: absolute; inset: 0; z-index: 10;
  display: none;
}
.stage.on { display: block; }

/* =========================== OVERTURE =========================== */
#overture {
  display: none;
  place-items: center;
  padding: clamp(18px, 5vw, 64px);
}
#overture.on { display: grid; }

.piece {
  max-width: 44ch;
  margin: 0;
  font-size: clamp(17px, 2.35vw, 30px);
  line-height: 1.62;
  letter-spacing: .005em;
  text-wrap: pretty;
}
.piece .cl {
  display: block;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1.05s var(--ease), transform 1.05s var(--ease);
  color: var(--bone);
}
.piece .cl.in { opacity: 1; transform: none; }
.piece .cl .tail { color: var(--bone-faint); }

#frameline {
  margin-top: clamp(20px, 4vh, 40px);
  font-family: var(--sans);
  font-size: clamp(11px, 1.1vw, 13px);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bone-faint);
  opacity: 0;
  transition: opacity 1.4s var(--ease);
}
#frameline.in { opacity: 1; }

#enter {
  margin-top: clamp(22px, 5vh, 46px);
  opacity: 0;
  transition: opacity 1.1s var(--ease);
}
#enter.in { opacity: 1; }

.btn {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bone);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 13px 26px;
  min-height: 44px;
  cursor: pointer;
  transition: border-color .3s, color .3s, background .3s, transform .3s var(--ease);
}
.btn:hover, .btn:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(217,144,63,.06);
  outline: none;
  transform: translateY(-1px);
}

/* =========================== OCTAGON =========================== */
#octagon { }
#octwrap {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  transition: transform .82s var(--ease-in), opacity .6s var(--ease-in), filter .82s var(--ease-in);
  transform-origin: 50% 50%;
}
#octwrap.zoom { opacity: 0; filter: blur(7px); }
/* NO fill-mode: an entrance animation must never own the resting state.
   With `both`, a paused compositor (hidden tab) pins the element at the
   `from` keyframe — opacity 0 — and the artwork is invisible forever. */
#octwrap.arrive { animation: arrive .92s var(--ease); }
@keyframes arrive {
  from { transform: scale(.72); opacity: 0; filter: blur(9px); }
  to   { transform: none; opacity: 1; filter: none; }
}

#oct { overflow: visible; display: block; }

.side-hit { cursor: pointer; fill: transparent; stroke: none; }
.side-band {
  fill: rgba(239,231,216,.052);
  stroke: #4a4238;
  stroke-width: 1;
  transition: fill .35s var(--ease), stroke .35s var(--ease);
}
.side.hot .side-band { fill: rgba(217,144,63,.13); stroke: var(--accent); }
.side.dim .side-band { stroke: #332e27; fill: rgba(239,231,216,.02); }

.side-verb {
  font-family: var(--sans);
  font-size: 12.5px;
  letter-spacing: .32em;
  fill: #d6cab4;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
  transition: fill .35s var(--ease);
}
.side.hot .side-verb { fill: var(--accent); }
.side.dim .side-verb { fill: #807665; }

.side-num {
  font-family: var(--mono);
  font-size: 9.5px;
  fill: #6b6354;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}
.side.hot .side-num { fill: var(--accent); }

.filament { stroke: rgba(239,231,216,.085); stroke-width: .6; fill: none; }
.ring { fill: none; stroke: rgba(239,231,216,.07); stroke-width: 1; }
.ring-hot { stroke: rgba(217,144,63,.2); }

.core-label {
  font-family: var(--sans); font-size: 9.5px; letter-spacing: .26em;
  fill: #8d8373; text-anchor: middle;
}
.core-thought {
  font-family: var(--serif); font-style: italic;
  fill: var(--bone); text-anchor: middle;
}

/* =========================== WORLD =========================== */
#world { }
#worldwrap { position: absolute; inset: 0; }
#worldwrap.arrive { animation: arrive .9s var(--ease); }

.world-head {
  position: absolute;
  top: clamp(58px, 9vh, 92px);
  left: 50%; transform: translateX(-50%);
  text-align: center;
  width: min(92%, 52ch);
  pointer-events: none;
}
.world-kicker {
  font-family: var(--sans); font-size: 10px; letter-spacing: .3em;
  text-transform: uppercase; color: var(--bone-faint); margin-bottom: 12px;
}
.world-clause {
  font-size: clamp(21px, 3.4vw, 40px);
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--bone);
  margin: 0;
}
.world-clause em { font-style: italic; color: var(--accent); }
.world-gloss {
  margin-top: 14px;
  font-size: clamp(13px, 1.35vw, 15.5px);
  color: var(--bone-dim);
  max-width: 46ch; margin-left: auto; margin-right: auto;
  text-wrap: pretty;
}

.artifacts {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: clamp(74px, 13vh, 132px);
  width: min(96%, 1040px);
  display: flex;
  gap: clamp(10px, 2vw, 26px);
  justify-content: center;
  align-items: flex-end;
  flex-wrap: wrap;
}

.artifact {
  position: relative;
  flex: 1 1 180px;
  max-width: 260px;
  min-height: 44px;
  background: rgba(11,10,9,.58);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 14px 15px 15px;
  text-align: left;
  color: var(--bone);
  font-family: var(--serif);
  cursor: pointer;
  backdrop-filter: blur(2px);
  transition: transform .4s var(--ease), border-color .4s, background .4s;
}
/* `backwards` covers the stagger delay only; the resting state stays visible */
.artifact.rise { animation: rise .7s var(--ease) backwards; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.artifact:hover, .artifact:focus-visible {
  transform: translateY(-6px);
  border-color: var(--accent);
  background: rgba(217,144,63,.07);
  outline: none;
}
.artifact canvas { display: block; width: 100%; height: 56px; margin-bottom: 11px; opacity: .85; }
.artifact .a-name {
  font-size: 14.5px; line-height: 1.28; margin-bottom: 5px;
}
.artifact .a-kind {
  font-family: var(--sans); font-size: 9px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--bone-faint);
}

/* =========================== ARTIFACT PANEL =========================== */
#panel {
  position: absolute; inset: 0; z-index: 40;
  display: none;
  place-items: center;
  padding: clamp(14px, 3vw, 40px);
  background: rgba(6,5,4,.78);
  backdrop-filter: blur(6px);
}
#panel.on { display: grid; }
#panel.fadein { animation: fadein .45s var(--ease); }
@keyframes fadein { from { opacity: 0 } to { opacity: 1 } }

.panel-card {
  width: min(100%, 720px);
  max-height: 100%;
  overflow: auto;
  background: linear-gradient(180deg, #16130f 0%, #100e0c 100%);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: clamp(18px, 3vw, 34px);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.9);
}
/* opt-in, like every other entrance: a running animation overrides the
   resting style even with no fill-mode, so it must not be unconditional */
.panel-card.cardin { animation: cardin .55s var(--ease); }
@keyframes cardin { from { opacity: 0; transform: translateY(22px) scale(.985) } to { opacity: 1; transform: none } }

.panel-kind {
  font-family: var(--sans); font-size: 9.5px; letter-spacing: .28em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 11px;
}
.panel-name {
  font-size: clamp(21px, 2.9vw, 31px); line-height: 1.16; margin: 0 0 18px;
  letter-spacing: -.01em;
}
#panel-diagram {
  display: block; width: 100%; height: clamp(150px, 24vh, 210px);
  border: 1px solid var(--rule); border-radius: 3px;
  background: #0a0908;
  margin-bottom: 7px;
}
.panel-caption {
  font-family: var(--sans); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--bone-faint); margin-bottom: 20px;
}
.panel-body {
  font-size: clamp(14.5px, 1.5vw, 17px); line-height: 1.62;
  color: #ddd4c4; text-wrap: pretty;
}
.panel-body p { margin: 0 0 14px; }
.panel-body .quote {
  font-style: italic; color: var(--accent);
}
/* class, not an inline style attribute: a strict CSP blocks style-src-attr,
   and this string is injected through innerHTML on recombinant panels */
.panel-body .panel-aside { color: #8a8071; }
.panel-body code {
  font-family: var(--mono); font-size: .87em;
  background: rgba(239,231,216,.06); padding: 1.5px 5px; border-radius: 2px;
  color: #cfe6c2;
}
.panel-foot {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--rule);
}
.panel-foot .spacer { flex: 1 1 auto; }
.deeper {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--sans); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase;
  background: transparent; border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 999px; padding: 12px 20px; min-height: 44px; cursor: pointer;
  transition: background .3s, transform .3s var(--ease);
}
.deeper:hover, .deeper:focus-visible { background: rgba(217,144,63,.13); outline: none; transform: translateY(-1px); }
.deeper svg { display: block; }
.deeper svg polygon { fill: none; stroke: currentColor; stroke-width: 1.4; }
.deeper .in1 { opacity: .55 } .deeper .in2 { opacity: .25 }

/* =========================== HUD =========================== */
.hud { position: absolute; z-index: 50; font-family: var(--sans); }

#hud-tl { top: 0; left: 0; padding: clamp(14px, 2.4vw, 26px); pointer-events: none; }
#hud-tl .t {
  font-size: 10px; letter-spacing: .34em; text-transform: uppercase; color: var(--bone-dim);
}
#hud-tl .s {
  font-size: 10px; letter-spacing: .1em; color: #464038; margin-top: 5px;
}

#hud-tr {
  top: 0; right: 0; padding: clamp(14px, 2.4vw, 26px);
  display: flex; align-items: center; gap: 12px;
}
.meter {
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  color: var(--bone-faint); text-align: right; line-height: 1.5; pointer-events: none;
}
.meter b { color: var(--accent); font-weight: normal; }
.icon-btn {
  width: 44px; height: 44px; display: grid; place-items: center;
  background: transparent; border: 1px solid var(--rule); border-radius: 50%;
  color: var(--bone-dim); cursor: pointer; transition: color .3s, border-color .3s, transform .3s;
}
.icon-btn:hover, .icon-btn:focus-visible { color: var(--accent); border-color: var(--accent); outline: none; }
.icon-btn:disabled { opacity: .28; cursor: default; }
.icon-btn svg { display: block; }

#trail {
  bottom: 0; left: 0;
  padding: clamp(12px, 2.2vw, 22px);
  padding-bottom: max(clamp(12px, 2.2vw, 22px), env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 7px;
  flex-wrap: wrap;
  max-width: 68%;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
}
#trail .crumb {
  background: transparent; border: 0; padding: 6px 2px;
  color: var(--bone-faint); cursor: pointer; font: inherit;
  border-bottom: 1px solid transparent;
}
#trail .crumb:hover, #trail .crumb:focus-visible { color: var(--accent); border-bottom-color: var(--accent); outline: none; }
#trail .crumb.here { color: var(--bone); cursor: default; }
#trail .sep { color: #332e28; }
#trail .ell { color: #332e28; letter-spacing: .3em; }

#swipe {
  bottom: 0; right: 0;
  padding: clamp(12px, 2.2vw, 22px);
  padding-bottom: max(clamp(12px, 2.2vw, 22px), env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 16px;
}
#swipe .lab {
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--bone-faint); white-space: nowrap; flex: 0 0 auto;
}
#swipe button {
  background: transparent; border: 1px solid var(--rule); border-radius: 999px;
  color: var(--bone-dim); cursor: pointer;
  font: inherit; font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  padding: 12px 17px; min-height: 44px;
  transition: color .3s, border-color .3s, background .3s;
}
#swipe button:hover, #swipe button:focus-visible {
  color: #e8707f; border-color: #e8707f; background: rgba(232,112,127,.08); outline: none;
}

#toast {
  position: absolute; z-index: 55;
  /* sits ABOVE the octagon, not over its bottom band — the pill was
     covering side 5's verb when it was anchored to the bottom. */
  left: 50%; top: clamp(78px, 13vh, 124px); transform: translateX(-50%);
  font-family: var(--serif); font-style: italic;
  font-size: clamp(13px, 1.5vw, 16px);
  color: var(--bone);
  background: rgba(8,7,6,.86);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 11px 22px;
  opacity: 0; pointer-events: none;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  text-align: center; max-width: 86%;
}
#toast.on { opacity: 1; transform: translateX(-50%) translateY(6px); }

#hearts { position: absolute; inset: 0; z-index: 54; pointer-events: none; }
.heart {
  position: absolute; color: #e8707f; font-size: 18px;
  animation: float 2.4s var(--ease) both;
}
@keyframes float {
  from { opacity: 0; transform: translateY(0) scale(.5) }
  25%  { opacity: 1 }
  to   { opacity: 0; transform: translateY(-150px) scale(1.25) }
}

@media (max-width: 720px) {
  #hud-tl { max-width: 46%; }
  #hud-tl .t { font-size: 9px; letter-spacing: .26em; }
  #hud-tl .s { font-size: 9px; }
  .artifacts { gap: 8px; bottom: clamp(66px, 11vh, 92px); }
  .artifact { flex: 1 1 128px; padding: 10px 11px 12px; }
  .artifact canvas { height: 40px; margin-bottom: 8px; }
  .artifact .a-name { font-size: 12.5px; }
  .world-head { top: clamp(50px, 8vh, 70px); }
  #trail { max-width: 100%; }
  #swipe .lab { display: none; }
}
@media (max-height: 620px) {
  .world-gloss { display: none; }
  .artifact canvas { height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .08s !important; }
}

#home-link {
  display: inline-block; margin-top: 7px;
  font-family: var(--sans); font-size: 9px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--bone-faint);
  text-decoration: none; border-bottom: 1px solid transparent; pointer-events: auto;
}
#home-link:hover, #home-link:focus-visible {
  color: var(--accent); border-bottom-color: var(--accent); outline: none;
}

/* 404 page. Class-based: a strict CSP blocks inline style attributes too. */
.nf-wrap {
  min-height: 100vh; display: grid; place-items: center;
  background: var(--ink); color: var(--bone);
  font-family: var(--serif); text-align: center; padding: 24px;
}
.nf-msg { font-style: italic; font-size: 20px; margin: 0 0 18px; }
.nf-back {
  font-family: var(--sans); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--accent); text-decoration: none;
  border-bottom: 1px solid transparent;
}
.nf-back:hover, .nf-back:focus-visible { border-bottom-color: var(--accent); outline: none; }