/* Launch Control motion test (2026-10-05), loaded after story.css on /launch-control/test/.
   The page runs on the clock: short, stepped motion set in DM Mono. A countdown track
   around the pinned phone drains toward the leave time, split-flap tiles show the time,
   the plan builds backward from the door, and the running-late bar skips breakfast.
   html.motion-on comes from the inline <head> script unless reduced motion is requested;
   html.motion-ready comes from motion.js. Hidden starting states need both, so without
   either every piece shows its final state. */
:root{--lc-snap:cubic-bezier(.2,.9,.1,1);--lc-flap-bg:#2c2a22;--lc-flap-fg:#f8eedf}

/* --------------------------------------------------------------------- Mark */
/* The Ascent Path icon: the tile snaps in and the hill rises, then the sun launches like a
   ball from behind the hill, drawing the route as it climbs, grows into the full sun at the
   top and lands with a small pulse. motion.js runs the launch (it follows the route's own
   curve); without it the finished icon shows. Units are the icon's 1024 grid. */
.lc-mark{width:clamp(4.5rem,8vw,6rem);height:clamp(4.5rem,8vw,6rem);margin:0 0 1.9rem;border-radius:22.5%;box-shadow:0 0 0 1px #2c2a2214,0 12px 30px #493c2326}
.lc-mark-eraser{display:none;stroke-dasharray:100 100;stroke-dashoffset:-100}
.lc-mark-sun{transform-box:fill-box;transform-origin:center}
.motion-on .lc-mark{animation:lc-mark-in 260ms var(--lc-snap) 120ms both}
.motion-on .lc-mark-hill{animation:lc-mark-hill 440ms var(--lc-snap) 300ms both}
.motion-on.motion-ready .lc-mark-eraser{display:inline}
@keyframes lc-mark-in{from{opacity:0;transform:scale(.88)}}
@keyframes lc-mark-hill{from{translate:0 280px}}

/* ------------------------------------------------------------------ Entrances */
/* Moment times type on like a terminal; the thought lands when the line is done. */
.motion-on.motion-ready .moments [data-reveal]{opacity:1;transform:none}
.motion-on.motion-ready .moments .moment-when{clip-path:inset(0 100% 0 0)}
.motion-on.motion-ready .moments .moment-thought{opacity:0;transform:translateY(8px)}
.motion-on.motion-ready .moments .is-visible .moment-when{clip-path:inset(0);transition:clip-path calc(var(--n,16) * 30ms) steps(var(--n,16),end)}
.motion-on.motion-ready .moments .is-visible .moment-thought{opacity:1;transform:none;transition:opacity 200ms linear calc(var(--n,16) * 30ms + 60ms),transform 380ms var(--lc-snap) calc(var(--n,16) * 30ms + 60ms)}

.motion-on.motion-ready .usual-grid [data-reveal],.motion-on.motion-ready .punchline[data-reveal]{opacity:0;transform:translateY(10px)}
.motion-on.motion-ready .usual-grid [data-reveal].is-visible,.motion-on.motion-ready .punchline[data-reveal].is-visible{opacity:1;transform:none;transition:opacity 200ms linear,transform 420ms var(--lc-snap)}
.motion-on.motion-ready .usual-grid li:nth-child(2).is-visible{transition-delay:100ms}
.motion-on.motion-ready .usual-grid li:nth-child(3).is-visible{transition-delay:200ms}
.motion-on.motion-ready .stage-inner[data-reveal]{opacity:0;transform:none}
.motion-on.motion-ready .stage-inner[data-reveal].is-visible{opacity:1;transition:opacity 240ms linear}

/* Screens push in from the side time is moving to (motion.js flips the sign going back). */
.motion-on .stage .shot{transform:none;transition:opacity 180ms linear}
.motion-on .stage .shot[data-active]{z-index:1;animation:lc-shot-in 420ms var(--lc-snap)}
@keyframes lc-shot-in{from{opacity:0;transform:translateX(var(--lc-shot-from,7%))}}

/* ------------------------------------------------- Countdown track and board */
.motion-ready .stage-inner{gap:2.2rem}
.motion-ready .stage-inner::before{content:none}
.motion-ready .stage-steps{display:none}
.motion-ready .stage-device{position:relative}
.lc-track{position:absolute;left:-26px;top:-26px;z-index:-1;width:calc(100% + 52px);height:calc(100% + 52px);overflow:visible;pointer-events:none}
.lc-track-base{fill:none;stroke:var(--rule-soft);stroke-width:1.5}
.lc-track-ticks line{stroke:var(--rule);stroke-width:1;opacity:.5}
.lc-track-ticks .major{stroke-width:1.5;opacity:1}
.lc-track-arc{fill:none;stroke:var(--orange);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:60 60;stroke-dashoffset:60;transition:stroke-dashoffset 900ms cubic-bezier(.65,0,.35,1),opacity 200ms linear}
.lc-track.is-out .lc-track-arc{opacity:0;transition-delay:0ms,700ms}
.lc-track-door line{stroke:var(--rust);stroke-width:3;stroke-linecap:round}
.lc-track-door text{fill:var(--rust);font:500 11px/1 var(--mono);letter-spacing:.08em;text-anchor:middle}
.lc-track.is-out .lc-track-door line{stroke:var(--check)}

.lc-board{display:flex;gap:3px;padding:5px;border-radius:7px;background:#1b1a15;box-shadow:0 10px 24px #2c2a2229,inset 0 0 0 1px #ffffff0f;font:500 .9375rem/1 var(--mono)}

/* Split-flap tile: ft/fb are the resting halves, ftf (old top) falls and fbf (new bottom) lands. */
.flap{position:relative;flex:none;width:1.3em;height:1.85em;perspective:9em;color:var(--lc-flap-fg)}
.flap>span{position:absolute;left:0;right:0;height:50%;overflow:hidden;background:var(--lc-flap-bg);backface-visibility:hidden}
.flap>span::after{content:attr(data-c);position:absolute;left:0;right:0;height:200%;line-height:1.85em;text-align:center;white-space:pre}
.flap>.ft,.flap>.ftf{top:0;height:calc(50% - .5px);border-radius:3px 3px 0 0}
.flap>.fb,.flap>.fbf{bottom:0;height:calc(50% - .5px);border-radius:0 0 3px 3px}
.flap>.ft::after,.flap>.ftf::after{top:0}
.flap>.fb::after,.flap>.fbf::after{bottom:0}
.flap>.ftf{z-index:2;transform-origin:50% 100%}
.flap>.fbf{z-index:2;transform-origin:50% 0;transform:rotateX(90deg)}
.flap.is-flipping>.ftf{animation:lc-flap-top 140ms ease-in var(--d,0ms) forwards}
.flap.is-flipping>.fbf{animation:lc-flap-bottom 160ms ease-out calc(var(--d,0ms) + 140ms) forwards}
@keyframes lc-flap-top{to{transform:rotateX(-90deg);filter:brightness(.6)}}
@keyframes lc-flap-bottom{from{transform:rotateX(90deg);filter:brightness(1.4)}to{transform:none}}

/* The chapter times, as tiles */
/* story.css styles every span in the kicker; reset them inside the tiles. */
.kicker-moment .lc-flaps,.kicker-moment .lc-flaps span{margin:0;color:inherit}
.kicker-moment .lc-flaps .flap{color:var(--lc-flap-fg)}
.lc-flaps{display:inline-flex;gap:2px;margin-right:.75rem;vertical-align:-.5em;font:500 .8125rem/1 var(--mono)}
.lc-flaps .flap{width:1.25em}

/* ------------------------------------------------- Plan bar, built backward */
.lc-plan{max-width:30rem;margin:2rem 0 0}
.lc-plan-ends{display:flex;justify-content:space-between;gap:1rem;font:500 .75rem/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.lc-plan-leave{color:var(--rust)}
.lc-plan-bar{display:flex;gap:2px;height:2.1rem;margin:.5rem 0 0;padding:0;list-style:none}
.lc-plan-bar li{flex:var(--m) 1 0;display:grid;place-items:center;min-width:0;overflow:hidden;border-radius:3px;background:var(--peach-band);color:var(--rust);font:500 .6875rem/1 var(--mono);font-variant-numeric:tabular-nums}
.lc-plan-bar li:nth-child(even){background:color-mix(in srgb,var(--orange) 22%,var(--peach-band))}
.lc-plan-bar li.lc-cushion{background:repeating-linear-gradient(-45deg,var(--result-bg) 0 5px,transparent 5px 9px);box-shadow:inset 0 0 0 1px var(--check);color:var(--forest)}
.lc-plan-key{margin:.6rem 0 0;color:var(--muted);font:.75rem/1.5 var(--mono)}
.lc-plan.is-armed .lc-plan-bar li{clip-path:inset(0 0 0 100%)}
.lc-plan.is-armed .lc-plan-wake{opacity:0}
.lc-plan.is-playing .lc-plan-bar li{clip-path:inset(0);transition:clip-path 240ms var(--lc-snap) calc(var(--o) * 110ms)}
.lc-plan.is-playing .lc-plan-wake{opacity:1;animation:lc-blink 360ms steps(1,end) 1000ms both}
@keyframes lc-blink{0%{opacity:0}50%{opacity:1}75%{opacity:.2}100%{opacity:1}}

/* ---------------------------------------------- Running late: skip breakfast */
.lc-late{max-width:30rem;margin:2rem 0 0}
.lc-late-title{display:none;margin:0;color:var(--rust);font:500 .75rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.lc-late-track{position:relative;display:flex;gap:2px;height:2.1rem;margin-top:1.5rem}
.lc-late-steps,.lc-late-skip{display:grid;place-items:center;min-width:0;overflow:hidden;border-radius:3px;font:500 .6875rem/1 var(--mono);white-space:nowrap}
.lc-late-steps{width:76%;background:var(--peach-band);color:var(--rust)}
.lc-late-skip{width:0;opacity:0;background:color-mix(in srgb,var(--orange) 22%,var(--peach-band));color:var(--rust)}
.lc-late-over,.lc-late-spare{position:absolute;top:0;bottom:0;border-radius:3px}
.lc-late-over{left:90%;width:calc(6% + 2px);opacity:0;background:repeating-linear-gradient(45deg,var(--rust) 0 2px,transparent 2px 5px)}
.lc-late-spare{left:calc(76% + 2px);width:calc(14% - 2px);background:repeating-linear-gradient(-45deg,var(--result-bg) 0 5px,transparent 5px 9px);box-shadow:inset 0 0 0 1px var(--check)}
.lc-late-door{position:absolute;top:-.45rem;bottom:-.45rem;left:90%;width:2px;margin-left:-1px;background:var(--ink)}
.lc-late-door b{position:absolute;bottom:calc(100% + .25rem);left:50%;transform:translateX(-50%);font:500 .6875rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.lc-late-status{display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .55rem;margin:1rem 0 0;font:500 .875rem/1.5 var(--mono)}
.lc-late-before{position:relative;color:var(--muted)}
.lc-late-before::after{content:"";position:absolute;left:-.1em;right:-.1em;top:52%;height:1.5px;background:currentColor}
.lc-late-arrow{color:var(--muted)}
.lc-late-after{color:var(--check)}

.lc-late.is-armed .lc-late-skip{width:20%;opacity:1}
.lc-late.is-armed .lc-late-over{opacity:.9}
.lc-late.is-armed .lc-late-spare{clip-path:inset(0 100% 0 0)}
.lc-late.is-armed .lc-late-before{color:var(--rust)}
.lc-late.is-armed .lc-late-before::after{transform:scaleX(0);transform-origin:0 50%}
.lc-late.is-armed .lc-late-arrow,.lc-late.is-armed .lc-late-after{opacity:0;transform:translateX(-4px)}
.lc-late.is-armed.is-done .lc-late-skip{width:0;opacity:0;transform:translateY(-10px);transition:transform 260ms var(--lc-snap),opacity 220ms linear 80ms,width 380ms var(--lc-snap) 160ms}
.lc-late.is-armed.is-done .lc-late-over{opacity:0;transition:opacity 160ms linear 200ms}
.lc-late.is-armed.is-done .lc-late-spare{clip-path:inset(0);transition:clip-path 360ms var(--lc-snap) 520ms}
.lc-late.is-armed.is-done .lc-late-before{color:var(--muted);transition:color 200ms linear 360ms}
.lc-late.is-armed.is-done .lc-late-before::after{transform:none;transition:transform 220ms var(--lc-snap) 360ms}
.lc-late.is-armed.is-done .lc-late-arrow,.lc-late.is-armed.is-done .lc-late-after{opacity:1;transform:none;transition:opacity 160ms linear 620ms,transform 320ms var(--lc-snap) 620ms}
.lc-late.is-armed.is-done .lc-late-after{transition-delay:720ms}

@media (prefers-reduced-motion:reduce){
  .lc-track-arc{transition:none}
}

/* Try it: the late bar waits for a choice, as the app's suggestion card does. Skip plays
   the existing skip sequence (.is-done); Keep everything leaves the bar behind (.is-kept). */
.motion-ready .lc-late-title{display:block}
.lc-late-kept{display:none;color:var(--rust)}
.lc-late.is-kept .lc-late-before,.lc-late.is-kept .lc-late-arrow,.lc-late.is-kept .lc-late-after{display:none}
.lc-late.is-kept .lc-late-kept{display:inline}
.lc-late.is-kept .lc-late-over{animation:lc-over 520ms ease-in-out 2}
@keyframes lc-over{50%{opacity:.35}}
.lc-late-choices{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0 0}
.lc-late-choices[hidden]{display:none}
.lc-late-choice{display:inline-flex;align-items:baseline;gap:.5rem;min-height:2.75rem;padding:.55rem .9rem;border:1px solid var(--card-rule);border-radius:5px;background:var(--paper);color:var(--ink);font:500 .8125rem/1.2 var(--mono);cursor:pointer;transition:background-color 150ms ease,border-color 150ms ease,color 150ms ease,transform 160ms var(--ease-out)}
.lc-late-choice span{color:var(--muted)}
.lc-late-choice[data-choice="skip"]{border-color:transparent;background:var(--button-fill);color:var(--button-label)}
.lc-late-choice[data-choice="skip"] span{color:inherit;opacity:.75}
.lc-late-choice[aria-pressed="true"]{box-shadow:0 0 0 2px var(--cream),0 0 0 4px var(--rust)}
.lc-late-choice:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){.lc-late-choice[data-choice="keep"]:hover{border-color:var(--rust)}.lc-late-choice[data-choice="skip"]:hover{background:var(--button-fill-hover)}}
@media (prefers-reduced-motion:reduce){.lc-late.is-kept .lc-late-over{animation:none}}