/* Corridor problem theater animation (from corridor-problem.html) */
/* ---- theater shell ---- */
.theater{
  position:relative;container-type:inline-size;
  --card:#f8fbfd; --accent:#1f5fd0; --muted:#55636f; --line:#c9d5de; --ink:#17212b;
  background:var(--card);border:2.5px solid var(--ink);border-radius:22px;overflow:hidden;
  box-shadow:0 8px 0 rgba(0,0,0,.16);
  --slide-ms:7200ms;
  margin-top:36px;
}
.theater:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.toon{display:block;width:100%;height:auto}
.toon text{font-family:"Fredoka","Trebuchet MS",ui-rounded,system-ui,sans-serif}
.toon .o{stroke:#1f2a37;stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.toon .o.t2{stroke-width:2}

/* ---- sky palette per act ---- */
.toon{--sky-a:#ff9f43;--sky-b:#ffe7a8}
.theater[data-act="climb"]  .toon{--sky-a:#5db8f5;--sky-b:#dff3ff}
.theater[data-act="blame"]  .toon{--sky-a:#86aee0;--sky-b:#f6e6cc}
.theater[data-act="divert"] .toon{--sky-a:#38407a;--sky-b:#f28d5f}
.theater[data-act="split"]  .toon{--sky-a:#49577a;--sky-b:#b9a7bd}
.theater[data-act="fixed"]  .toon{--sky-a:#4fc2ff;--sky-b:#eafaff}
.sky-a{stop-color:var(--sky-a);transition:stop-color 1.8s ease}
.sky-b{stop-color:var(--sky-b);transition:stop-color 1.8s ease}

/* ---- layers: hidden unless their act is on ---- */
.siphon,.officer,.pair,.offices,.fileband,.theft-board,.left-tag,.shrink,.weather-why,
.beam,.dusk,.shimmer,.frost,.sweat{opacity:0;transition:opacity .8s ease;pointer-events:none}
.say,.port,.depot,.thermo{transition:opacity .8s ease}

.theater[data-act="heat"]   .weather-why,
.theater[data-act="climb"]  .weather-why{opacity:1}
.theater[data-act="heat"]   .shimmer{opacity:1}
.theater[data-act="heat"]   .sweat,
.theater[data-act="blame"]  .sweat{opacity:1}
.theater[data-act="climb"]  .frost,
.theater[data-act="climb"]  .shrink{opacity:1}
.theater[data-act="blame"]  .officer{opacity:1}

.siphon, .officer, .pair, .offices, .fileband, .theft-board, .left-tag{opacity:0}
.theater[data-act="divert"] .siphon,
.theater[data-act="divert"] .theft-board,
.theater[data-act="divert"] .left-tag{opacity:1}
.theater[data-act="divert"] .beam{opacity:.55}
.theater[data-act="divert"] .dusk{opacity:.34}

.theater[data-act="split"]  .beam{opacity:.4}
.theater[data-act="split"]  .dusk{opacity:.24}
.theater[data-act="split"]  .offices{opacity:1}
.theater[data-act="split"]  .port,
.theater[data-act="split"]  .depot,
.theater[data-act="split"]  .thermo{opacity:0}

.theater[data-act="fixed"]  .say{opacity:0}
.theater[data-act="fixed"]  .fileband{opacity:1}
.theater[data-act="fixed"]  .pair{opacity:1}

/* ---- sun ---- */
.sun{transform:translate(130px,72px) scale(1.15);transition:transform 2.4s ease-in-out,opacity 1.6s ease}
.theater[data-act="climb"]  .sun{transform:translate(190px,56px) scale(.95)}
.theater[data-act="blame"]  .sun{transform:translate(560px,52px) scale(.9)}
.theater[data-act="divert"] .sun{transform:translate(400px,182px) scale(.9)}
.theater[data-act="split"]  .sun{transform:translate(400px,240px) scale(.9);opacity:0}
.theater[data-act="fixed"]  .sun{transform:translate(820px,72px) scale(.95)}
.rays{animation:spin 30s linear infinite}
.rays line{stroke:#ffb400;stroke-width:5;stroke-linecap:round}
.sun .shades{opacity:0;transition:opacity .6s}
.theater[data-act="heat"] .sun .shades{opacity:1}
.sun .eyes{transition:opacity .6s}
.theater[data-act="heat"] .sun .eyes{opacity:0}

/* ---- clouds ---- */
.cloud{animation:drift var(--d,80s) linear infinite;animation-delay:var(--o,0s)}

/* ---- truck ---- */
#toon-truck{transition:transform 2.6s cubic-bezier(.5,0,.2,1),opacity .4s ease}
#toon-truck.fade-out{opacity:0}
.truck-tilt{transform-box:fill-box;transform-origin:50% 100%}
.truck-tilt.up{animation:tiltUp 2.6s ease-in-out}
.truck-tilt.down{animation:tiltDown 2.6s ease-in-out}
.liquid{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(var(--lvl,1));transition:transform 2.2s ease-in-out}
.tank-txt{font-size:17px;font-weight:600;fill:#1f2a37}
.tank-txt.unknown{font-size:26px;animation:pulse 1.1s ease-in-out infinite}
.wheel{transform-box:fill-box;transform-origin:center}
.puff{opacity:0;transform-box:fill-box;transform-origin:center}
.theater[data-moving="1"] .wheel{animation:spin .55s linear infinite}
.theater[data-moving="1"] .truck-bob{animation:bob .3s ease-in-out infinite alternate}
.theater[data-moving="1"] .puff{animation:puff 1.2s ease-out infinite}
.theater[data-moving="1"] .puff.p2{animation-delay:-.6s}
.theater[data-moving="1"] .dash{animation:dashmove .5s linear infinite}
.theater[data-dir="rev"][data-moving="1"] .wheel,
.theater[data-dir="rev"][data-moving="1"] .dash{animation-direction:reverse}
.shimmer path{fill:none;stroke:#ff6b1a;stroke-width:3;stroke-linecap:round;animation:shim 1.6s ease-in-out infinite}
.shimmer path:nth-child(2){animation-delay:-.5s}
.shimmer path:nth-child(3){animation-delay:-1s}
.frost path{fill:none;stroke:#3fb6ff;stroke-width:2.5;stroke-linecap:round;animation:twinkle 1.8s ease-in-out infinite}
.frost path:nth-child(2){animation-delay:-.6s}
.frost path:nth-child(3){animation-delay:-1.2s}
.sweat path{animation:drip 1.3s ease-in infinite}
.sweat path:nth-child(2){animation-delay:-.6s}

/* ---- siphon ---- */
.flow{offset-path:path("M278 -28 C246 -90 120 -90 70 -42");offset-rotate:0deg;offset-distance:0%;opacity:0}
.theater[data-act="divert"] .flow{opacity:1;animation:flow 1.5s linear infinite;animation-delay:calc(var(--i) * -.3s)}
@supports not (offset-path: path("M0 0")){.flow{display:none}}
.glug{animation:glug 1s ease-in-out infinite}

/* ---- thermometer ---- */
.merc{fill:var(--merc,#ff3b30);transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(var(--tl,.6));transition:transform 1.8s ease-in-out,fill 1.8s ease}
.merc-bulb{fill:var(--merc,#ff3b30);transition:fill 1.8s ease}

/* ---- speech, offices ---- */
.offices .bubble{animation:talk 1.8s ease-in-out infinite}
.offices .bubble.b2{animation-delay:-.9s}
.qmark{transform-box:fill-box;transform-origin:center;animation:wob 1.4s ease-in-out infinite}
.pair .chips{animation:float 2.4s ease-in-out infinite}

/* ---- captions ---- */
.say-title{font-size:26px;font-weight:600;fill:#1f2a37}
.say-text{font-size:18px;fill:#4a5665}

/* ---- progress + bar ---- */
.act-progress{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;padding:14px 16px 0}
.seg{position:relative;border:0;background:none;padding:0;margin:0;cursor:pointer;text-align:left;color:var(--muted);font:inherit;font-size:.8rem;min-height:32px}
.seg .bar{display:block;height:6px;border-radius:99px;background:var(--line);overflow:hidden;position:relative}
.seg .fill{position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:left}
.seg.done .fill{transform:scaleX(1)}
.seg.active .fill{animation:fill var(--slide-ms,7200ms) linear forwards}
.seg .name{display:block;margin-top:6px}
.seg.active{color:var(--ink);font-weight:600}
.seg:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}

.theater-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 16px 16px}
.controls{display:flex;align-items:center;gap:10px;margin-left:auto}
.act-count{min-width:3.4em;text-align:center;color:var(--muted);font-size:.9rem;font-variant-numeric:tabular-nums}
#theater .btn{display:inline-grid;place-items:center;width:42px;height:42px;padding:0;border-radius:50%;border:2px solid var(--ink);background:var(--card);color:var(--ink);cursor:pointer}
#theater .btn:hover{background:var(--line)}
#theater .btn:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
#theater .btn.is-off .i-pause{display:none}
#theater .btn:not(.is-off) .i-play{display:none}

.caption-html{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0}
.caption-html strong{font-weight:600}

@container (max-width:699px){
  .say{display:none}
  .caption-html{position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal;flex:1;font-size:.95rem}
}
@container (max-width:520px){
  .seg .name{display:none}
  .theater-bar{flex-wrap:wrap}
  .caption-html{flex:1 1 100%}
  .controls{margin:0 auto}
}

/* ---- keyframes ---- */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes bob{to{transform:translateY(-2px)}}
@keyframes puff{0%{opacity:.75;transform:translate(0,0) scale(.6)}100%{opacity:0;transform:translate(-30px,-26px) scale(1.7)}}
@keyframes dashmove{to{stroke-dashoffset:34}}
@keyframes drift{from{transform:translateX(-160px)}to{transform:translateX(1080px)}}
@keyframes twinkle{0%,100%{opacity:.15}50%{opacity:1}}
@keyframes shim{0%{transform:translateY(4px);opacity:0}50%{opacity:1}100%{transform:translateY(-10px);opacity:0}}
@keyframes drip{0%{transform:translateY(0);opacity:0}30%{opacity:1}100%{transform:translateY(12px);opacity:0}}
@keyframes flow{from{offset-distance:0%}to{offset-distance:100%}}
@keyframes talk{50%{transform:translateY(-4px)}}
@keyframes wob{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
@keyframes pulse{50%{opacity:.35}}
@keyframes glug{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes float{50%{transform:translateY(-4px)}}
@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes tiltUp{0%,100%{transform:rotate(0)}30%,70%{transform:rotate(-11deg)}}
@keyframes tiltDown{0%,100%{transform:rotate(0)}30%,70%{transform:rotate(9deg)}}

/* ---- states ---- */
.theater.boot *{transition:none !important}
.theater.is-paused *{animation-play-state:paused !important}

@media (prefers-reduced-motion: reduce){
  .theater *{animation:none !important;transition:none !important}
  .seg.active .fill{transform:scaleX(1)}
}