/* "The Exhibition": selected work as three full-colour chapters.
   Without JavaScript (and on small or short screens, or with reduced motion) the chapters stack as cards.
   On large screens showcase.mjs pins the frame and each chapter rises over the last like a curtain. */

.exhibition { padding-inline: clamp(12px, 2vw, 28px); }
.exhibition-frame { display: grid; gap: clamp(14px, 2vw, 24px); }

.chapter {
  --c-surface: #231e2a; --c-solid: #231e2a; --c-ink: #fff4e8; --c-muted: #e1d5df;
  --c-accent: #fbc994; --c-rule: #ffffff26; --c-panel: #ffffff10;
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: clamp(20px, 2.4vw, 34px);
  background: var(--c-surface); color: var(--c-ink);
}
.chapter-funa-gigs {
  --c-surface: radial-gradient(120% 95% at 88% 8%, #ffe3a8 0%, #f3c058 42%, #e3a033 100%);
  --c-solid: #efb447; --c-ink: #261904; --c-muted: #563f13; --c-accent: #8a3110;
  --c-rule: #26190430; --c-panel: #fff6dc8c;
}
.chapter-cyber-dragon {
  --c-surface: radial-gradient(120% 95% at 82% 0%, #22405f 0%, #101c2c 55%, #0a121d 100%);
  --c-solid: #101c2c; --c-ink: #eaf5ff; --c-muted: #a8bed3; --c-accent: #7fe3d6;
  --c-rule: #9ed6ff2e; --c-panel: #ffffff0d;
}
.chapter-agentflight {
  --c-surface: radial-gradient(120% 95% at 86% 0%, #2d4b3b 0%, #13241f 55%, #0b1613 100%);
  --c-solid: #13241f; --c-ink: #f1f6e6; --c-muted: #b4c6b3; --c-accent: #c9f08f;
  --c-rule: #c9f08f2e; --c-panel: #ffffff0b;
}
.chapter :focus-visible { outline-color: var(--c-accent); outline-offset: 4px; }

.chapter-inner {
  position: relative; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  align-items: center; gap: clamp(26px, 4.5vw, 84px);
  padding: clamp(30px, 5vw, 84px) clamp(20px, 5.5vw, 100px);
}
.chapter-numeral {
  position: absolute; left: -.05em; bottom: -.24em; z-index: -1; pointer-events: none;
  font: 400 clamp(11rem, 30vw, 30rem)/.8 var(--display); letter-spacing: -.08em;
  color: transparent; -webkit-text-stroke: 1.5px var(--c-rule);
}

.chapter-copy { position: relative; }
.chapter-label {
  display: flex; align-items: center; gap: 12px; color: var(--c-accent);
  font: 650 .72rem/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase;
}
.chapter-label span { padding: 3px 8px; border: 1px solid currentColor; border-radius: 999px; letter-spacing: .06em; }
.folio .chapter h3 {
  margin-block: 16px 20px; color: var(--c-ink);
  font-size: clamp(3.3rem, 7.2vw, 7.6rem); line-height: .9; letter-spacing: -.07em;
}
.chapter-title-mask { display: block; overflow: clip; overflow-clip-margin: .05em; padding: .04em .1em .12em 0; margin-bottom: -.12em; }
.chapter-word { display: inline-block; white-space: nowrap; }
.chapter-char { display: inline-block; transform-origin: 0 100%; }
.folio .chapter-headline {
  max-width: 22ch; font: 640 clamp(1.15rem, 1.9vw, 1.6rem)/1.22 var(--sans); letter-spacing: -.025em;
}
.folio .chapter-intro { max-width: 42ch; margin-block: 14px 28px; color: var(--c-muted); }
.folio .chapter-link {
  display: inline-flex; align-items: center; gap: 14px; min-height: 54px; padding: 6px 6px 6px 22px;
  border: 1px solid var(--c-rule); border-radius: 999px; color: var(--c-ink); text-decoration: none;
  font: 650 .92rem/1.2 var(--sans);
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.chapter-link-arrow {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: var(--c-ink); color: var(--c-solid); transition: rotate .45s cubic-bezier(.2,.9,.3,1.4), background-color .3s ease;
}
.folio .chapter-link:hover { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-solid); }
.chapter-link:hover .chapter-link-arrow { rotate: 45deg; background: var(--c-accent); color: var(--c-ink); }
.chapter-funa-gigs .chapter-link:hover .chapter-link-arrow { color: #fff4dc; }

.chapter-stage { position: relative; min-width: 0; }
.folio .chapter-note {
  margin-top: 16px; color: var(--c-muted); font: .68rem/1.4 var(--mono); letter-spacing: .02em;
}
.demo-kicker { color: var(--c-accent); font: 650 .68rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.folio .demo-caution { margin-top: 14px; color: var(--c-muted); font-size: .86rem; }

/* Segmented control with a sliding pill. */
.demo-switcher > .switcher-controls {
  position: relative; display: inline-flex; gap: 2px; max-width: 100%; margin-bottom: 20px; padding: 4px;
  border: 1px solid var(--c-rule); border-radius: 999px; background: var(--c-panel);
}
.demo-switcher > .switcher-controls::before {
  content: ""; position: absolute; top: 4px; bottom: 4px; left: var(--pill-x, 4px); width: var(--pill-w, 0);
  border-radius: 999px; background: var(--c-ink);
}
.demo-switcher .switcher-controls button {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 42px; padding: 8px 16px;
  border: 0; border-radius: 999px; background: transparent; color: var(--c-muted); cursor: pointer;
  font: 650 .84rem/1.2 var(--sans); white-space: nowrap;
}
.demo-switcher .switcher-controls button:hover { color: var(--c-ink); }
.demo-switcher .switcher-controls button[aria-selected="true"] { color: var(--c-solid); }
.switcher-number { font: .64rem/1 var(--mono); opacity: .7; }
.demo-switcher:not([data-enhanced]) > [data-switcher-panel] + [data-switcher-panel] {
  margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--c-rule);
}

/* Funa Gigs: the app in a phone, with a radar while it searches nearby. */
.funa-step { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(22px, 3.4vw, 52px); margin: 0; }
.funa-phone-wrap { position: relative; display: grid; place-items: center; }
.funa-phone {
  position: relative; z-index: 1;
  width: clamp(150px, min(15vw, calc((100vh - 330px) * .46)), 214px);
  padding: 6px; border-radius: 30px; background: #1d150b;
  box-shadow: 0 0 0 1px #0000002e, 0 46px 60px -26px #4a2a0a99, 0 18px 30px -14px #4a2a0a73;
}
.funa-phone img { display: block; width: 100%; height: auto; border-radius: 24px; }
.funa-glow {
  position: absolute; inset: -18%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, #fff2c9 0%, #fff2c900 100%);
}
.funa-radar { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.funa-radar i {
  position: absolute; left: -190px; top: -190px; width: 380px; height: 380px; border-radius: 50%;
  border: 1.5px solid #8a31104d; scale: .5;
}
.funa-radar i:nth-child(2) { scale: .75; }
.funa-radar i:nth-child(3) { scale: 1; }
.funa-radar b {
  position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%;
  background: #8a3110; box-shadow: 0 0 0 4px #fff3d0;
  transform: rotate(var(--a)) translateX(var(--d)) rotate(calc(var(--a) * -1));
}
.funa-step figcaption { display: grid; gap: 12px; color: var(--c-muted); }
.funa-step figcaption strong {
  color: var(--c-ink); font: 400 clamp(1.8rem, 3vw, 2.8rem)/1.02 var(--display); letter-spacing: -.045em;
}

/* Cyber Dragon: scan the message, light up each signal, sweep the gauge. */
.scan-result { display: grid; gap: 16px; }
.scan-message {
  position: relative; overflow: hidden; padding: 18px 20px;
  border: 1px solid var(--c-rule); border-radius: 20px 20px 20px 5px; background: #d9ecff12;
  font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.6;
}
.scan-message mark {
  padding: 0 3px; margin-inline: -1px; border-radius: 5px; color: inherit; background: #ff7a5938;
  box-shadow: inset 0 -2px 0 #ff7a59;
  transition: background-color .35s ease, box-shadow .35s ease;
}
.scan-beam {
  position: absolute; top: 0; bottom: 0; left: -35%; width: 35%; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, #7fe3d652 55%, #c7fff6aa 62%, transparent 64%);
}
.scan-readout { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(16px, 2.4vw, 30px); }
.scan-gauge { position: relative; width: 168px; text-align: center; }
.scan-gauge svg { display: block; width: 100%; overflow: visible; }
.gauge-track,.gauge-value { fill: none; stroke-width: 9; stroke-linecap: round; }
.gauge-track { stroke: #ffffff17; }
.gauge-value {
  stroke: var(--risk); stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--score));
  transition: stroke-dashoffset 1.3s cubic-bezier(.2,.8,.2,1);
}
.scan-high { --risk: #ff7a59; }
.scan-low { --risk: #6fe0a6; }
.folio .scan-gauge p { position: absolute; inset: 34% 0 auto; display: flex; justify-content: center; align-items: baseline; gap: 2px; }
.scan-gauge strong { font: 400 2.7rem/1 var(--display); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.scan-gauge small { color: var(--c-muted); font: .7rem var(--mono); }
.scan-gauge > span {
  display: block; margin-top: 2px; color: var(--risk);
  font: 650 .7rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase;
}
.scan-signals { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.scan-signals li {
  padding: 6px 12px; border: 1px solid #ff7a5980; border-radius: 999px;
  background: #ff7a591c; color: #ffd8cc; font-size: .82rem;
  transition: background-color .35s ease, border-color .35s ease, color .35s ease, translate .45s cubic-bezier(.2,.9,.3,1.4);
}
.scan-low .scan-signals li { border-color: #6fe0a666; background: #6fe0a614; color: #c9f5dc; }
.scan-result.is-armed .scan-message mark:not(.is-lit) { background: transparent; box-shadow: inset 0 -2px 0 transparent; }
.scan-result.is-armed .scan-signals li:not(.is-lit) { border-color: var(--c-rule); background: transparent; color: var(--c-muted); translate: 0 4px; }
.scan-result.is-armed:not(.is-scored) .gauge-value { stroke-dashoffset: 100; transition-duration: 0s; }
.scan-result.is-scanning .scan-beam { animation: scan-sweep 1s cubic-bezier(.5,0,.5,1) both; }

/* AgentFlight: a terminal that types out the replay. */
.replay-console {
  overflow: hidden; border: 1px solid var(--c-rule); border-radius: 18px; background: #040b08e8;
  box-shadow: 0 46px 80px -34px #000d;
}
.console-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--c-rule); }
.console-bar i { width: 10px; height: 10px; border-radius: 50%; background: #ff6b5a; }
.console-bar i:nth-child(2) { background: #ffc857; }
.console-bar i:nth-child(3) { background: #6fe08a; }
.console-bar span { margin-left: 10px; color: var(--c-muted); font: .72rem var(--mono); }
.replay-console > .demo-switcher { padding: 16px; }
.replay-console .switcher-controls button { font-family: var(--mono); font-size: .78rem; }
.console-lines { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; font: .82rem/1.55 var(--mono); }
.console-lines > li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: start; }
.line-tag { padding-top: 2px; color: var(--c-muted); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.console-lines code { color: var(--c-ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.line-recorded code { color: var(--c-muted); }
.console-lines mark { padding: 0 3px; border-radius: 4px; background: #ff6b5a33; color: #ffb3a6; }
.line-ok { color: #a7f0b5; }
.line-ok .line-tag { color: #6fe08a; }
.line-error .line-tag { color: #ff8a78; }
.line-error strong { color: #ffb3a6; }
.console-lines > .line-output { grid-template-columns: minmax(0, 1fr); }
.line-output pre {
  margin: 0; padding: 12px 14px; border: 1px solid var(--c-rule); border-radius: 10px; background: #ffffff07;
  color: var(--c-ink); font: inherit; white-space: pre-wrap; overflow-wrap: anywhere;
}
.line-output del { color: #ff8a78; text-decoration: none; }
.line-output ins { color: #6fe08a; text-decoration: none; }
.replay-run.is-armed .console-lines > li:not(.is-shown) { opacity: 0; translate: 0 8px; }

/* Rail: only shown while the exhibition is pinned. */
.exhibition-rail { display: none; }

/* Pinned stage. */
.exhibition[data-pinned] { height: calc(var(--chapters) * 92vh + 100vh); padding-inline: 0; }
.exhibition[data-pinned] .exhibition-frame {
  position: sticky; top: 0; display: block; height: 100vh; overflow: hidden;
  clip-path: inset(calc(var(--enter, 0) * 3.4vw) round calc(var(--enter, 0) * 44px));
}
.exhibition[data-pinned] .chapter {
  position: absolute; inset: 0; border-radius: 0;
  clip-path: inset(calc((1 - var(--reveal, 1)) * 100%) 0 0 0);
}
.exhibition[data-pinned] .chapter-inner {
  height: 100%; transform-origin: 50% 0;
  padding: clamp(80px, 11vh, 124px) clamp(28px, 6.5vw, 116px) clamp(104px, 14vh, 140px);
  translate: 0 calc((1 - var(--reveal, 1)) * 16vh - var(--cover, 0) * 5vh);
  scale: calc(1 - var(--cover, 0) * .07);
  filter: brightness(calc(1 - var(--cover, 0) * .5));
}
.exhibition[data-pinned] .chapter-numeral { translate: 0 calc((1 - var(--reveal, 1)) * 40%); }
.exhibition[data-pinned] .exhibition-rail {
  position: absolute; z-index: 5; left: clamp(28px, 6.5vw, 116px); right: clamp(28px, 6.5vw, 116px); bottom: clamp(20px, 4vh, 40px);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 24px;
  color: var(--rail-ink, #fff4e8); transition: color .5s ease;
}
.exhibition[data-theme="funa-gigs"] { --rail-ink: #261904; }
.exhibition[data-theme="cyber-dragon"] { --rail-ink: #eaf5ff; }
.exhibition[data-theme="agentflight"] { --rail-ink: #f1f6e6; }
.exhibition-rail ol { display: flex; flex-wrap: wrap; gap: 4px clamp(16px, 3vw, 46px); margin: 0; padding: 0; list-style: none; }
.exhibition-rail button {
  display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 6px 0;
  border: 0; background: none; color: inherit; cursor: pointer; opacity: .5;
  font: 650 .84rem/1.2 var(--sans); transition: opacity .3s ease;
}
.exhibition-rail button span { font: .66rem/1 var(--mono); }
.exhibition-rail button:hover,.exhibition-rail button[aria-current="true"] { opacity: 1; }
.exhibition-rail button:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.rail-progress { grid-column: 1 / -1; position: relative; height: 2px; margin-top: 6px; overflow: hidden; border-radius: 2px; background: color-mix(in srgb, currentColor 18%, transparent); }
.rail-progress i { position: absolute; inset: 0; background: currentColor; transform-origin: left center; scale: var(--progress, 0) 1; }
.folio .rail-counter { grid-row: 1; grid-column: 2; font: 400 1.5rem/1 var(--display); letter-spacing: -.04em; }

@media (max-width: 980px) {
  .chapter-inner { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .funa-step { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .funa-phone { width: 170px; }
  .scan-readout { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .demo-switcher .switcher-controls button { padding-inline: 11px; font-size: .78rem; }
  .switcher-number { display: none; }
  .console-lines > li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

@media (prefers-reduced-motion: no-preference) {
  .demo-switcher > .switcher-controls::before { transition: left .5s cubic-bezier(.7,0,.2,1), width .5s cubic-bezier(.7,0,.2,1); }
  .demo-switcher .switcher-controls button { transition: color .3s ease; }

  /* Titles rise letter by letter the first time a chapter arrives, and on every return. */
  .exhibition[data-live] .chapter:not(.was-active) .chapter-char { opacity: 0; transform: translateY(110%); }
  .exhibition[data-live] .chapter.is-active .chapter-char {
    animation: chapter-char-rise .95s cubic-bezier(.2,.85,.25,1) both; animation-delay: calc(var(--i) * 38ms + 140ms);
  }
  .exhibition[data-live] .chapter:not(.was-active) :is(.chapter-label, .chapter-headline, .chapter-intro, .chapter-link, .chapter-stage) { opacity: 0; }
  .exhibition[data-live] .chapter.is-active :is(.chapter-label, .chapter-headline, .chapter-intro, .chapter-link) {
    animation: chapter-copy-rise .9s cubic-bezier(.2,.8,.25,1) both;
  }
  .exhibition[data-live] .chapter.is-active .chapter-headline { animation-delay: .32s; }
  .exhibition[data-live] .chapter.is-active .chapter-intro { animation-delay: .42s; }
  .exhibition[data-live] .chapter.is-active .chapter-link { animation-delay: .52s; }
  .exhibition[data-live] .chapter.is-active .chapter-stage { animation: chapter-stage-in 1.1s .2s cubic-bezier(.16,1,.3,1) both; }

  [data-enhanced] > [data-switcher-panel]:not([hidden]) { animation: demo-panel-in .55s cubic-bezier(.16,1,.3,1) both; }
  [data-enhanced] > [data-switcher-panel]:not([hidden]) .funa-phone { animation: phone-swap .8s cubic-bezier(.16,1,.3,1) both; }
  .funa-radar i { animation: radar-ping 2.6s cubic-bezier(.2,.6,.3,1) infinite; }
  .funa-radar i:nth-child(2) { animation-delay: .87s; }
  .funa-radar i:nth-child(3) { animation-delay: 1.74s; }
  .funa-radar b { animation: radar-blip 2.6s ease-in-out infinite; }
  .funa-radar b:nth-child(5) { animation-delay: .6s; }
  .funa-radar b:nth-child(6) { animation-delay: 1.3s; }
  .funa-radar b:nth-child(7) { animation-delay: 1.9s; }
  .funa-glow { animation: glow-breathe 4s ease-in-out infinite; }
  .replay-run.is-armed .console-lines > li { transition: opacity .4s ease, translate .5s cubic-bezier(.2,.8,.3,1); }
  .replay-run.is-armed .console-lines > li.is-shown code[data-type] { animation: type-in .9s steps(42, end) both; }
  .line-error.is-shown { animation: line-shake .5s .1s cubic-bezier(.36,.07,.19,.97) both; }
}

@keyframes chapter-char-rise { from { opacity: 0; transform: translateY(110%) rotate(8deg); } 40% { opacity: 1; } }
@keyframes chapter-copy-rise { from { opacity: 0; transform: translateY(22px); } }
@keyframes chapter-stage-in { from { opacity: 0; transform: translateX(60px) rotate(1.5deg); } }
@keyframes demo-panel-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes phone-swap { from { opacity: 0; transform: translateX(46px) rotate(5deg) scale(.94); } }
@keyframes radar-ping { from { scale: .15; opacity: .9; } to { scale: 1.15; opacity: 0; } }
@keyframes radar-blip { 0%, 100% { scale: .6; opacity: .35; } 40%, 60% { scale: 1; opacity: 1; } }
@keyframes glow-breathe { 0%, 100% { opacity: .55; scale: .94; } 50% { opacity: .9; scale: 1.04; } }
@keyframes scan-sweep { from { left: -35%; opacity: 1; } 85% { opacity: 1; } to { left: 105%; opacity: 0; } }
@keyframes type-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes line-shake { 20%, 60% { translate: -5px 0; } 40%, 80% { translate: 5px 0; } }