/* film2.css — Life of a Launch II: a continuous-camera film with an HTML HUD
   layered over the SVG world. HUD sizes use container-query units so the
   overlay scales with the stage (and renders identically in the MP4 export). */
.f2-stage{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--lk-paper);container-type:inline-size;
  border-bottom:1px solid var(--lk-rule-soft)}
.f2-stage svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.f2-stage:fullscreen{width:100vw;height:100vh;aspect-ratio:auto;background:var(--lk-paper)}
/* atmosphere: vignette + paper grain */
.f2-vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(243,239,227,0) 55%, rgba(233,226,206,.55) 88%, rgba(214,205,182,.8) 100%)}
.f2-grain{position:absolute;inset:0;pointer-events:none;opacity:.10;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .3  0 0 0 0 .28  0 0 0 0 .22  0 0 0 .9 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>")}
.f2-veil{position:absolute;inset:0;background:var(--lk-paper);pointer-events:none}
/* HUD */
.f2-badge{position:absolute;left:3cqw;top:6.6cqw;font:1.05cqw var(--lk-mono);color:var(--lk-ink);padding:.4cqw .9cqw;
  background:rgba(250,247,239,.9);border-left:.35cqw solid var(--lk-vermilion)}
.f2-badge b{font:700 1.3cqw var(--lk-display);letter-spacing:.06em;color:var(--lk-vermilion)}
.f2-loc{position:absolute;left:3cqw;top:2.6cqw;font:700 1.35cqw/1 var(--lk-utility);letter-spacing:.2em;color:var(--lk-vermilion);
  padding:.55cqw .9cqw;border-left:.35cqw solid var(--lk-vermilion);background:rgba(250,247,239,.85)}
.f2-loc:empty{display:none}
.f2-clockbox{position:absolute;right:3cqw;top:2.6cqw;text-align:right;transition:opacity .4s;
  padding:.55cqw .9cqw;background:rgba(250,247,239,.85);border-right:.35cqw solid var(--lk-cobalt)}
.f2-clock{font:600 1.45cqw/1.25 var(--lk-mono);color:var(--lk-cobalt-dark);font-variant-numeric:tabular-nums}
.f2-slow{font:400 1.1cqw/1.3 var(--lk-mono);color:var(--lk-ink-soft);font-variant-numeric:tabular-nums}
.f2-prog{position:absolute;right:3cqw;top:8.2cqw;font:600 1.15cqw var(--lk-mono);color:var(--lk-forest);
  padding:.4cqw .8cqw;background:rgba(250,247,239,.85);transition:opacity .4s}
.f2-sub{position:absolute;left:50%;bottom:3.2cqw;transform:translateX(-50%);width:max-content;max-width:78cqw;
  font:400 2.05cqw/1.42 var(--lk-font);color:var(--lk-ink);text-align:center;padding:.8cqw 1.6cqw;
  background:rgba(250,247,239,.93);border:1px solid var(--lk-rule-soft);border-bottom:.3cqw solid var(--lk-vermilion);
  box-shadow:0 .2cqw 1cqw rgba(60,50,30,.08)}
.f2-sub code{font-size:.85em;background:none;border:0;padding:0;color:var(--lk-cobalt-dark)}
.f2-card{position:absolute;right:3cqw;top:10cqw;width:24cqw;padding:1.2cqw 1.4cqw;background:var(--lk-paper-light);
  border:1px solid var(--lk-rule);border-top:.45cqw solid var(--lk-vermilion);font:1.15cqw/1.55 var(--lk-mono);color:var(--lk-ink);
  box-shadow:0 .3cqw 1.4cqw rgba(60,50,30,.12)}
.f2-card b{display:block;font:700 2.6cqw/1 var(--lk-display);letter-spacing:.04em;color:var(--lk-vermilion);margin-bottom:.6cqw}
.f2-card .k{color:var(--lk-ink-soft)}
.f2-title{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.f2-title .kick{font:700 1.3cqw var(--lk-utility);letter-spacing:.3em;color:var(--lk-vermilion)}
.f2-title .t{font:700 8cqw/1 var(--lk-display);color:var(--lk-cobalt);letter-spacing:.02em;margin:.6cqw 0}
.f2-title .s{font:italic 2.2cqw var(--lk-font);color:var(--lk-ink)}
.f2-bigtext{position:absolute;left:10cqw;right:10cqw;top:50%;transform:translateY(-50%);text-align:center;pointer-events:none;
  font:italic 3.6cqw/1.35 var(--lk-font);color:var(--lk-ink)}
.f2-end{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:4cqw;background:var(--lk-paper)}
.f2-end .t{font:700 6cqw/1 var(--lk-display);color:var(--lk-cobalt);letter-spacing:.02em}
.f2-end .stats{font:1.5cqw/1.7 var(--lk-mono);color:var(--lk-ink);margin:1.6cqw 0;border-top:1px solid var(--lk-rule);border-bottom:1px solid var(--lk-rule);padding:1cqw 2cqw}
.f2-end .stats b{color:var(--lk-vermilion)}
.f2-end .moves{font:700 2cqw var(--lk-display);letter-spacing:.12em;color:var(--lk-vermilion)}
.f2-end .cred{font:italic 1.35cqw var(--lk-font);color:var(--lk-ink-soft);margin-top:1.4cqw}
.f2-big{position:absolute;left:50%;top:72%;transform:translate(-50%,-50%);font:700 1.4cqw var(--lk-utility);letter-spacing:.14em;
  text-transform:uppercase;padding:1.1cqw 2.4cqw;border-radius:3px;cursor:pointer;background:var(--lk-cobalt);color:var(--lk-paper-light);
  border:1px solid var(--lk-cobalt-dark);white-space:nowrap}
.f2-big:hover{background:var(--lk-cobalt-dark)}
/* embedded in a chapter (~700-760px wide): lift the small HUD text */
@container (min-width: 701px) and (max-width: 900px){
  .f2-loc{font-size:1.6cqw}.f2-clock{font-size:1.75cqw}.f2-slow,.f2-prog{font-size:1.4cqw}
  .f2-badge{font-size:1.4cqw;top:8.2cqw}.f2-badge b{font-size:1.7cqw}
  .f2-sub{font-size:2.35cqw}.f2-card{font-size:1.45cqw;width:30cqw}.f2-card b{font-size:3cqw}
}
@container (max-width: 700px){
  .f2-sub{font-size:3.3cqw;max-width:92cqw;bottom:2cqw}
  .f2-loc,.f2-clock{font-size:2.2cqw}.f2-slow,.f2-prog{font-size:1.9cqw}
  .f2-card{width:40cqw;font-size:2cqw}.f2-card b{font-size:4cqw}
  .f2-big{font-size:2.6cqw}
}
/* export mode: just the stage, 1280x720 */
body.f2-export{margin:0;padding:0;max-width:none;background:var(--lk-paper)}
body.f2-export > *:not(.film){display:none}
body.f2-export .film{margin:0;border:0}
body.f2-export .film > *:not(.f2-stage){display:none}
body.f2-export .f2-stage{width:1280px;height:720px;aspect-ratio:auto;border:0}
body.f2-export .f2-big{display:none}