/* Advanced Monkey — animated explainer, shared stage.
   Used by demos/four-layers.html, demos/ops-hub-story.html, demos/buildready-story.html,
   demos/am-engage-story.html.
   One stage, crossfading scenes (copy left / drawing right), a clickable progress rail,
   a pause button, and a stacked layout whenever the frame is taller than it is wide.
   Scene drawings use the small SVG vocabulary at the bottom; scene-specific rules stay
   in each page. Behaviour lives in explainer.js. */

:root {
  --ink:    #111010;
  --paper:  #F4F1EA;
  --warm:   #EDE9E0;
  --accent: #C94F1A;
  --mid:    #6E6860;
  --faint:  #D9D4CA;
  --accent-700: #A83D10;
  --accent-600: #B24616;
  --accent-300: #D96E3D;
  --good:   #3F6B3A;
  --radius-pill: 999px;
  --font-head: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'DM Sans', 'Segoe UI', system-ui, sans-serif;

  /* Roles. Everything paints from these, so a theme only re-points them. */
  --stage:  var(--warm);    /* ground */
  --tile:   var(--paper);   /* raised boxes */
  --text:   var(--ink);
  --text2:  var(--mid);
  --line:   var(--faint);   /* hairlines */
  --line2:  var(--faint);   /* secondary node outlines */
  --track:  var(--faint);   /* empty bars */
  --wire:   rgba(17,16,16,.22);  /* diagram connectors */
  --work:   var(--ink);     /* the machine: motion, structure, progress */
  --ok:     var(--good);    /* approved / done state */
  --on-work: var(--paper);  /* marks drawn on a --ok fill */
  --accent-text: var(--accent-600);  /* small terracotta text */
}
/* Teal: dark ink-blue + teal (brand skill §1 "Teal — the machine"). Set by
   <html data-theme="teal"> or ?theme=teal. */
:root[data-theme="teal"] {
  --stage:  #111E2B;
  --tile:   #18293A;
  --text:   #EAF0F2;
  --text2:  #93A7B5;
  --line:   #263B4F;
  --line2:  #246E6E;
  --track:  #18293A;
  --wire:   #263B4F;
  --work:   #3FB1AC;
  --ok:     #3FB1AC;
  --on-work: #0B141E;
  --accent-text: var(--accent-300);
  color-scheme: dark;
}
html, body { height: 100%; }
body { margin:0; background:var(--stage); color:var(--text); font-family:var(--font-body); font-weight:400; line-height:1.65; overflow:hidden; }

/* ---- Stage ---- */
.stage { position:relative; width:100%; height:100vh; container-type:inline-size; background:var(--stage); overflow:hidden; cursor:pointer; }
.scene { position:absolute; inset:0; display:grid; grid-template-columns:40fr 60fr; gap:3.5cqw; align-items:center;
  padding:4.5cqw 4.5cqw 6cqw; opacity:0; transition:opacity .55s ease; pointer-events:none; }
.scene.active { opacity:1; pointer-events:auto; }
.scene svg { width:100%; height:auto; display:block; overflow:visible; }
.copy { min-width:0; }
.eyebrow { display:block; font-size:1.05cqw; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--text2); margin:0 0 1.3cqw; }
.copy h2 { font-family:var(--font-head); font-weight:700; letter-spacing:-0.015em; line-height:1.1; margin:0 0 1.4cqw; color:var(--text); text-wrap:balance; font-size:3.3cqw; }
.copy h2 em { font-style:normal; color:var(--accent); }
.copy p { font-size:1.35cqw; line-height:1.55; color:var(--text2); margin:0 0 1.8cqw; max-width:34ch; }
.alist { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.9cqw; }
.alist li { font-size:1.2cqw; line-height:1.45; color:var(--text); padding-left:1.9cqw; position:relative; }
.alist li::before { content:'→'; position:absolute; left:0; color:var(--accent); font-weight:500; }
:root[data-theme="teal"] .alist li::before { color:var(--work); }
.btn { display:inline-block; font-family:var(--font-body); font-size:1.15cqw; font-weight:500; padding:1cqw 2.2cqw; border-radius:var(--radius-pill); text-decoration:none;
  border:1.5px solid transparent; cursor:pointer; transition:background .18s ease, border-color .18s ease; }
.btn-primary { background:var(--accent); color:#fff; border-color:var(--accent); }
.btn-primary:hover { background:var(--accent-700); border-color:var(--accent-700); }
.btn-ghost { background:transparent; color:var(--text); border-color:var(--line); }
.btn-ghost:hover { border-color:var(--text); }
.btn:focus-visible { outline:3px solid var(--accent-300); outline-offset:3px; }
.cta-row { display:flex; align-items:center; gap:1.2cqw; margin-top:.6cqw; flex-wrap:wrap; }
.copy p.cta-note { margin:1.4cqw 0 0; font-size:1.15cqw; }
.cta-note a { color:var(--text); text-decoration:underline; text-underline-offset:.2em; }
.cta-note a:hover { color:var(--accent-text); }
.wordmark { font-family:var(--font-head); font-weight:700; letter-spacing:-0.015em; color:var(--text); font-size:1.7cqw; }
.wordmark span { color:var(--accent); }

/* copy entrances */
.scene .copy > * { opacity:0; }
.scene.active .copy > * { animation:rise .8s cubic-bezier(.2,.7,.2,1) both; }
.scene.active .copy > :nth-child(1) { animation-delay:.1s; }
.scene.active .copy > :nth-child(2) { animation-delay:.28s; }
.scene.active .copy > :nth-child(3) { animation-delay:.5s; }
.scene.active .copy > :nth-child(4) { animation-delay:.75s; }
.scene.active .copy > :nth-child(5) { animation-delay:.95s; }
.scene .alist li { opacity:0; }
.scene.active .alist li { animation:rise .7s cubic-bezier(.2,.7,.2,1) both; }
.scene.active .alist li:nth-child(1) { animation-delay:1.3s; }
.scene.active .alist li:nth-child(2) { animation-delay:1.9s; }
.scene.active .alist li:nth-child(3) { animation-delay:2.5s; }

@keyframes rise { from { opacity:0; transform:translateY(.8cqw); } to { opacity:1; transform:none; } }
@keyframes pop  { from { opacity:0; transform:scale(.7); } to { opacity:1; transform:none; } }
@keyframes fadein { to { opacity:1; } }
@keyframes fadeout { to { opacity:0; } }
@keyframes draw { to { stroke-dashoffset:0; } }
@keyframes drain { to { stroke-dashoffset:91.7; } }
@keyframes feed { 0% { transform:translateX(0); opacity:.75; } 70% { opacity:.4; } 100% { transform:translateX(150px); opacity:0; } }
@keyframes pulse { 0% { transform:scale(1); opacity:.5; } 100% { transform:scale(1.6); opacity:0; } }
@keyframes light { to { stroke:var(--work); fill:var(--tile); } }
@keyframes lighttext { to { fill:var(--text); } }
@keyframes retrypulse { 0% { stroke-dashoffset:1; opacity:0; } 20% { opacity:1; } 60% { stroke-dashoffset:0; opacity:1; } 100% { stroke-dashoffset:0; opacity:.35; } }
@keyframes grow { to { transform:scaleX(var(--to, .8)); } }
@keyframes ecg { 0% { stroke-dashoffset:1; } 60% { stroke-dashoffset:0; } 100% { stroke-dashoffset:0; } }
@keyframes flow { to { stroke-dashoffset:-20; } }
@keyframes blink { 0%, 100% { opacity:1; } 50% { opacity:.25; } }

/* ---- shared SVG styling ---- */
svg text { font-family:var(--font-body); font-weight:400; fill:var(--text2); text-anchor:middle; }
svg .pop { opacity:0; transform-box:fill-box; transform-origin:center; }
.scene.active svg .pop { animation:pop .55s cubic-bezier(.2,.8,.2,1) both; animation-delay:var(--d, calc(var(--i, 0) * .1s + .35s)); }
svg .cap { font-size:13px; fill:var(--text2); }
svg .h { font-size:14px; font-weight:500; fill:var(--text); text-anchor:start; letter-spacing:.02em; }

/* Drawing vocabulary for scene SVGs (timing via --d, or --i in tenths) */
svg .l { text-anchor:start; }
svg .r { text-anchor:end; }
svg .k  { font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:500; fill:var(--text2); }
svg .tx { font-size:12.5px; fill:var(--text); }
svg .tx2 { font-size:11px; fill:var(--text2); }
svg .big { font-family:var(--font-head); font-weight:700; letter-spacing:-0.02em; fill:var(--text); }
svg .hot { fill:var(--accent); }
svg .hot-t { fill:var(--accent-text); }
svg .on-hot { fill:#fff; }
svg .box > rect:first-of-type, svg rect.box { fill:var(--tile); stroke:var(--line); stroke-width:1; }
svg .box.work > rect:first-of-type, svg rect.box.work { stroke:var(--work); stroke-width:1.5; }
svg .box.hot > rect:first-of-type, svg rect.box.hot { stroke:var(--accent); stroke-width:1.5; }
svg .core rect, svg .core circle { fill:var(--work); }
svg .core text { fill:var(--on-work); }
svg .wire { fill:none; stroke:var(--wire); stroke-width:2; }
svg .flow { fill:none; stroke:var(--work); stroke-width:2; stroke-dasharray:3 7; opacity:.75; }
.scene.active svg .flow { animation:flow 1.1s linear infinite; }
svg .dot { fill:var(--work); }
svg .track { fill:var(--line); }  /* drawn inside boxes, so the hairline tone, not --track */
svg .bar { fill:var(--work); transform-box:fill-box; transform-origin:left center; transform:scaleX(0); }
.scene.active svg .bar { animation:grow 1.4s cubic-bezier(.3,0,.2,1) both; animation-delay:var(--d, .8s); }
svg .bar.hotbar { fill:var(--accent); }
svg .fade { opacity:0; }
.scene.active svg .fade { animation:fadein .5s ease both; animation-delay:var(--d, .6s); }
svg .out { }
.scene.active svg .out { animation:fadeout .4s ease both; animation-delay:var(--d, 2s); }
svg .blink { }
.scene.active svg .blink { animation:blink 1.6s ease-in-out infinite; animation-delay:var(--d, 0s); }
svg .x { stroke:var(--accent); stroke-width:2; stroke-linecap:round; fill:none; }
svg .tickmark { fill:none; stroke:var(--on-work); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }

/* Walkthrough vocabulary: a product screen, a cursor that uses it, and what changes when
   it clicks. The cursor's route is a per-scene @keyframes (set with --path on .cur); the
   click ring, typed text and state swaps are timed with --d like everything else.
   Reference: demos/am-engage-story.html. */
svg .ln { fill:none; stroke:var(--wire); stroke-width:2; stroke-dasharray:1; stroke-dashoffset:1; }  /* needs pathLength="1" */
.scene.active svg .ln { animation:draw .7s ease-out both; animation-delay:var(--d, .8s); }
svg .win > rect:first-of-type { fill:var(--tile); stroke:var(--line); stroke-width:1; }
svg .win .chrome { fill:var(--stage); stroke:var(--line); stroke-width:1; }
svg .win .lights circle { fill:var(--line); }
svg .field { fill:var(--stage); stroke:var(--line); stroke-width:1; }
svg .skel { fill:var(--line); }
svg .cur { opacity:0; }
svg .cur path { fill:var(--text); stroke:var(--stage); stroke-width:1.5; stroke-linejoin:round; }
.scene.active svg .cur { animation:var(--path) var(--len, 8s) cubic-bezier(.4,0,.2,1) both; animation-delay:var(--d, .6s); }
svg .ring { fill:none; stroke:var(--accent); stroke-width:2; opacity:0; transform-box:fill-box; transform-origin:center; }
.scene.active svg .ring { animation:click .6s ease-out both; animation-delay:var(--d, 1s); }
svg .type { clip-path:inset(0 100% 0 0); }
.scene.active svg .type { animation:typeon var(--len, 1s) steps(var(--n, 12)) both; animation-delay:var(--d, 1s); }
svg .sel { fill:none; stroke:var(--accent); stroke-width:1.5; opacity:0; }
.scene.active svg .sel { animation:fadein .25s ease both; animation-delay:var(--d, 1s); }
@keyframes click { 0% { opacity:.9; transform:scale(.4); } 100% { opacity:0; transform:scale(1.8); } }
@keyframes typeon { to { clip-path:inset(0 0 0 0); } }

/* ---- Progress rail (each segment jumps to its scene) + pause ---- */
.rail { position:absolute; left:0; right:0; bottom:0; display:flex; align-items:center; gap:.35cqw; padding:0 4.5cqw 1.2cqw; cursor:default; }
.rail .seg { flex:1; padding:1cqw 0; background:none; border:0; cursor:pointer; }
.rail .seg b { display:block; height:.4cqw; min-height:3px; background:var(--track); border-radius:var(--radius-pill); overflow:hidden; }
.rail .seg i { display:block; height:100%; background:var(--work); transform:scaleX(0); transform-origin:left; }
.rail .seg:hover b { background:var(--wire); }
.rail .seg:focus-visible { outline:3px solid var(--accent-300); outline-offset:1px; border-radius:var(--radius-pill); }
.pp { margin-left:1.2cqw; font-family:var(--font-body); font-size:clamp(11px, 1cqw, 14px); font-weight:500; color:var(--text); background:var(--tile);
  border:1px solid var(--line); border-radius:var(--radius-pill); padding:.35em 1em; cursor:pointer; transition:border-color .18s ease; min-width:5.2em; }
.pp:hover { border-color:var(--text); }
.pp:focus-visible { outline:3px solid var(--accent-300); outline-offset:2px; }
.stage.paused .scene * { animation-play-state:paused !important; }

/* ---- Portrait (phones): the parent frame goes tall, copy stacks above the drawing ---- */
@media (max-aspect-ratio: 1/1) {
  .scene { grid-template-columns:1fr; grid-template-rows:auto auto; align-content:center; align-items:start; gap:5cqw; padding:6cqw 6cqw 14cqw; }
  .eyebrow { font-size:2.8cqw; margin-bottom:2.4cqw; }
  .copy h2 { font-size:6.6cqw; margin-bottom:2.6cqw; }
  .copy p { font-size:3.8cqw; margin-bottom:3cqw; max-width:none; }
  .alist { gap:1.8cqw; }
  .alist li { font-size:3.6cqw; padding-left:5cqw; }
  .btn { font-size:3.8cqw; padding:2.6cqw 5.5cqw; }
  .wordmark { font-size:4.4cqw; }
  .cta-row { gap:2.4cqw; }
  .copy p.cta-note { font-size:3.4cqw; margin-top:3cqw; }
  .rail { padding:0 6cqw 3cqw; gap:1cqw; }
  .rail .seg { padding:2.4cqw 0; }
  .rail .seg b { height:1cqw; }
  .pp { margin-left:2cqw; font-size:12px; }
}

@media (prefers-reduced-motion: reduce) {
  .scene, .scene.active .copy > *, .scene.active .alist li, .scene.active svg * { animation-duration:.01ms !important; animation-delay:0ms !important; animation-iteration-count:1 !important; }
  .mo { display:none; }
  .scene { transition-duration:.01ms; }
}