/* ---------------------------------------------------------------------------
   imagic motion kit (ported from the lewks.world motion system, 2026-10-28).
   Opt-in per element with data attributes; motion.js splits the words and
   flips .mo-in when an element scrolls into view. Everything here is scoped
   to html.mo, which the head snippet only sets when the visitor has not asked
   for reduced motion, so without JS or with reduced motion the page is static.

   data-mo="rise"    masked words rise in (page heroes, h1)
   data-mo="words"   words blur and lift in, one by one (section headings)
   data-mo="scrub"   words light up as you scroll past (one big statement)
   data-mo="reveal"  the block fades up
   data-mo-group     each direct child fades up in turn
   data-mo="unveil"  the block opens from a clipped inset (screenshots, photos)
   data-mo="zoom"    with unveil: the img inside settles from a slight zoom
   data-mo-tile      cursor spotlight, glowing edge and a gentle tilt
   data-mo-magnetic  the button leans towards the cursor
   data-mo-parallax  drifts against the scroll by the given factor

   Talks (scrollytelling, the lewks.world intro engine):
   <section class="mo-talk" data-mo-talk> <div class="mo-talk-pin">
       <div class="mo-scene" data-tone="amber"> <h2 class="mo-line">..</h2> props.. </div> ...
   The stage pins while each scene takes a stretch of scroll. .mo-line words
   spring in one by one, the previous scene blurs away, [data-mo-type] types
   itself, .mo-pop / [data-mo-stagger] children enter after --d, and --sp
   (0..1 through the scene) or --pn (scene index + progress, on the pin)
   drive scrubbed props. Without html.mo the scenes simply stack.
   --------------------------------------------------------------------------- */

:root {
    --mo-out: cubic-bezier(.16, 1, .3, 1);
    --mo-spring: cubic-bezier(.2, 1.5, .4, 1);
    --mo-glow: rgba(255, 152, 0, .13);
    --mo-ring: rgba(255, 167, 38, .55);
}

/* Until motion.js has split a heading, keep it hidden so the words never
   flash in place first. The failsafe shows it anyway if the script fails. */
html.mo [data-mo~="rise"]:not(.mo-ready),
html.mo [data-mo~="words"]:not(.mo-ready) {
    opacity: 0;
    animation: mo-failsafe 0s 2.4s forwards;
}
@keyframes mo-failsafe { to { opacity: 1; } }

.mo-wd { display: inline-block; }

/* Words carried inside .gradient-text get the gradient themselves (a parent
   background-clip:text does not paint through transformed children).
   motion.js copies the parent's gradient onto each word, clears the parent's,
   and lines each word's slice up so the gradient reads continuous. */
.mo-g {
    background: var(--gradient-1);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* rise: each word slides up out of its own mask */
.mo-mask {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding: 0 .04em .1em;
    margin: 0 -.04em -.1em;
}
html.mo [data-mo~="rise"] .mo-wd {
    transform: translateY(112%);
    transition: transform 1.05s var(--mo-out);
    transition-delay: calc(var(--w) * 85ms + 60ms);
}
html.mo [data-mo~="rise"].mo-in .mo-wd { transform: none; }

/* words: blur and lift, with a little spring at the end */
html.mo [data-mo~="words"] .mo-wd {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(.45em);
    transition: opacity .7s var(--mo-out), filter .7s var(--mo-out), transform .9s var(--mo-spring);
    transition-delay: calc(var(--w) * 60ms + var(--mo-delay, 0ms));
}
html.mo [data-mo~="words"].mo-in .mo-wd { opacity: 1; filter: none; transform: none; }

/* scrub: dim until the reader scrolls to them; motion.js drives opacity */
html.mo [data-mo~="scrub"] .mo-wd { opacity: .16; will-change: opacity; }

/* reveal + group */
html.mo [data-mo~="reveal"],
html.mo [data-mo-group] > * {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .9s var(--mo-out), transform .9s var(--mo-out);
    transition-delay: calc(var(--i, 0) * 85ms + var(--mo-delay, 0ms));
}
html.mo [data-mo~="reveal"].mo-in,
html.mo [data-mo-group].mo-in > * { opacity: 1; transform: none; }

/* unveil: opens from a clipped inset; zoom settles the image inside */
html.mo [data-mo~="unveil"] {
    opacity: 0;
    clip-path: inset(14% 5% 0 5% round 18px);
    transition: clip-path 1.25s var(--mo-out), opacity .8s var(--mo-out);
    transition-delay: calc(var(--i, 0) * 70ms);
}
html.mo [data-mo~="unveil"].mo-in { opacity: 1; clip-path: inset(0 0 0 0 round 0); }
html.mo [data-mo~="zoom"] img {
    transform: scale(1.1);
    transition: transform 1.7s var(--mo-out);
}
html.mo [data-mo~="zoom"].mo-in img { transform: none; }

/* tile: spotlight + glowing edge that follow the cursor */
[data-mo-tile] { --mx: 50%; --my: 50%; }
.mo-glow, .mo-ring {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity .45s var(--mo-out);
}
.mo-glow { background: radial-gradient(420px circle at var(--mx) var(--my), var(--mo-glow), transparent 45%); }
.mo-ring {
    padding: 1px;
    background: radial-gradient(260px circle at var(--mx) var(--my), var(--mo-ring), transparent 60%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}
[data-mo-tile]:hover > .mo-glow,
[data-mo-tile]:hover > .mo-ring { opacity: 1; }
html.mo [data-mo-tile].mo-tilting {
    transition: transform .25s var(--mo-out), box-shadow .25s, border-color .25s;
    transition-delay: 0ms;
}

/* magnetic */
html.mo [data-mo-magnetic] { transition: transform .5s var(--mo-spring); }
html.mo [data-mo-magnetic].mo-pull { transition: transform .15s ease-out; }

@media (prefers-reduced-motion: reduce) {
    .mo-glow, .mo-ring { display: none; }
}

/* Lenis smooth scroll (its recommended base rules) */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

/* ===========================================================================
   Talks
   =========================================================================== */
@property --mo-tone { syntax: '<color>'; inherits: true; initial-value: rgba(255, 152, 0, .22); }

.mo-talk { position: relative; }
.mo-talk-pin { position: relative; }
.mo-scene {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(18px, 3.2vh, 34px);
    padding: 72px 20px;
    text-align: center;
}
.mo-talk-ui { display: none; }

html.mo .mo-talk-pin {
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(110% 80% at 15% 0%, var(--mo-tone), transparent 62%),
        radial-gradient(80% 60% at 92% 100%, color-mix(in srgb, var(--mo-tone) 55%, transparent), transparent 64%),
        #0b0a09;
    transition: --mo-tone 1.1s var(--mo-out);
}
html.mo .mo-talk-pin[data-tone="amber"] { --mo-tone: rgba(255, 152, 0, .26); }
html.mo .mo-talk-pin[data-tone="red"]   { --mo-tone: rgba(226, 58, 48, .26); }
html.mo .mo-talk-pin[data-tone="blue"]  { --mo-tone: rgba(74, 118, 214, .26); }
html.mo .mo-talk-pin[data-tone="green"] { --mo-tone: rgba(52, 196, 128, .22); }
html.mo .mo-talk-pin[data-tone="dim"]   { --mo-tone: rgba(255, 255, 255, .05); }
/* grain, so the gradients never band */
html.mo .mo-talk-pin::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    opacity: .05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

html.mo .mo-scene {
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 96px 20px 112px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6vh) scale(.97);
    filter: blur(10px);
    transition: opacity .45s var(--mo-out), transform .7s var(--mo-out), filter .45s var(--mo-out), visibility 0s .7s;
}
html.mo .mo-scene[data-state="on"] {
    opacity: 1;
    visibility: visible;
    transform: none;
    filter: none;
    transition: opacity .3s var(--mo-out), transform .7s var(--mo-out), filter .35s var(--mo-out), visibility 0s;
}
html.mo .mo-scene[data-state="past"] { transform: translateY(-7vh) scale(1.04); }

/* the lines: big, close-set, in your face */
.mo-line {
    margin: 0;
    max-width: 15ch;
    font-size: clamp(40px, 6.8vw, 112px);
    font-weight: 900;
    line-height: .95;
    letter-spacing: -.048em;
    color: var(--text-primary, #f0f0f0);
    text-wrap: balance;
}
.mo-line.mo-md { font-size: clamp(34px, 5.2vw, 84px); max-width: 18ch; }
.mo-line.mo-sm { font-size: clamp(28px, 3.9vw, 60px); max-width: 22ch; }
.mo-line em, .mo-line .mo-q { font-style: normal; color: var(--accent, #ff9800); }
.mo-type {
    margin: 0;
    font-size: clamp(44px, 7.6vw, 124px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.05em;
    color: var(--text-primary, #f0f0f0);
}
.mo-sub {
    margin: 0;
    max-width: 52ch;
    font-size: clamp(15px, 1.35vw, 19px);
    line-height: 1.55;
    color: var(--text-secondary, #a0a0a0);
}
.mo-by { font-size: 14px; font-weight: 600; color: var(--text-muted, #6b6b6b); letter-spacing: .02em; }

html.mo .mo-scene .mo-line .mo-wd { opacity: 0; }
html.mo .mo-scene:is([data-state="on"], [data-state="past"]) .mo-line .mo-wd {
    animation: mo-word-in .82s var(--mo-spring) both;
    animation-delay: calc(var(--w) * 72ms + 70ms);
}
@keyframes mo-word-in {
    0% { opacity: 0; filter: blur(16px); transform: translateY(.6em) scale(.86) rotate(2.5deg); }
    55% { opacity: 1; filter: blur(0); }
    100% { opacity: 1; filter: none; transform: none; }
}

html.mo .mo-scene .mo-ch { opacity: 0; }
html.mo .mo-scene:is([data-state="on"], [data-state="past"]) .mo-ch {
    animation: mo-char .01s forwards;
    animation-delay: calc(var(--c) * var(--cps, 52ms) + var(--d, 120ms));
}
@keyframes mo-char { to { opacity: 1; } }
.mo-caret {
    display: inline-block;
    width: .07em;
    height: .82em;
    margin-left: .06em;
    vertical-align: -.05em;
    background: var(--accent, #ff9800);
    animation: mo-blink .8s steps(1) infinite;
}
@keyframes mo-blink { 50% { opacity: 0; } }

html.mo .mo-scene .mo-pop,
html.mo .mo-scene [data-mo-stagger] > * { opacity: 0; }
html.mo .mo-scene:is([data-state="on"], [data-state="past"]) .mo-pop {
    animation: mo-pop .62s var(--mo-spring) both;
    animation-delay: var(--d, .55s);
}
html.mo .mo-scene:is([data-state="on"], [data-state="past"]) [data-mo-stagger] > * {
    animation: mo-pop .55s var(--mo-spring) both;
    animation-delay: calc(var(--d, .5s) + var(--i) * var(--gap, .1s));
}
@keyframes mo-pop {
    from { opacity: 0; transform: translateY(18px) scale(.94); }
    to { opacity: 1; transform: none; }
}

/* progress dots, hint, skip */
html.mo .mo-talk-ui {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 26px;
    z-index: 4;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    pointer-events: none;
}
.mo-dots { display: flex; gap: 7px; pointer-events: auto; }
.mo-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 99px;
    background: rgba(255, 255, 255, .22);
    cursor: pointer;
    transition: width .45s var(--mo-spring), background .3s;
}
.mo-dots button[data-done] { background: rgba(255, 152, 0, .55); }
.mo-dots button[data-on] { width: 26px; background: var(--accent, #ff9800); }
.mo-skip, .mo-hint {
    pointer-events: auto;
    font: 600 12.5px/1 var(--font-sans, Inter, sans-serif);
    color: var(--text-secondary, #a0a0a0);
}
.mo-skip {
    padding: 8px 14px;
    border-radius: 99px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(20, 18, 16, .6);
    backdrop-filter: blur(10px);
    cursor: pointer;
}
.mo-skip:hover { color: #fff; border-color: rgba(255, 152, 0, .5); }
.mo-hint { display: inline-flex; gap: 6px; align-items: center; transition: opacity .4s; }
.mo-hint i { font-style: normal; animation: mo-nudge 1.4s ease-in-out infinite; }
@keyframes mo-nudge { 50% { transform: translateY(4px); } }
.mo-talk-pin[data-first="false"] .mo-hint { opacity: 0; pointer-events: none; }

/* ---------------------------------------------------------------------------
   Props
   --------------------------------------------------------------------------- */

/* photo tiles that pour in, then get sorted */
.mo-tiles {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 7px;
    width: min(100%, 760px);
}
.mo-tiles > span {
    position: relative;
    aspect-ratio: 3 / 2;
    border-radius: 7px;
    background: #222 center / cover no-repeat;
    box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .9);
    overflow: hidden;
}
.mo-tiles .mo-tag {
    position: absolute;
    left: 4px;
    bottom: 4px;
    padding: 2px 6px;
    border-radius: 5px;
    font: 600 10px/1.3 var(--font-mono, monospace);
    color: #fff;
    background: rgba(0, 0, 0, .7);
    opacity: 0;
}
html.mo .mo-scene .mo-tiles > span { opacity: 0; }
html.mo .mo-scene:is([data-state="on"], [data-state="past"]) .mo-tiles > span {
    animation: mo-pour .7s var(--mo-spring) both;
    animation-delay: calc(var(--d, .45s) + var(--i) * 35ms);
}
@keyframes mo-pour {
    from { opacity: 0; transform: translateY(-46px) rotate(-7deg) scale(.6); }
    to { opacity: 1; transform: none; }
}
/* sorting: rejects fade to grey with their reason, keepers light up */
html.mo .mo-scene:is([data-state="on"], [data-state="past"]) .mo-tiles.mo-sort > span.rej {
    animation: mo-pour .6s var(--mo-spring) both, mo-reject .6s var(--mo-out) forwards;
    animation-delay: calc(var(--d, .3s) + var(--i) * 25ms), calc(1.3s + var(--i) * 45ms);
}
html.mo .mo-scene:is([data-state="on"], [data-state="past"]) .mo-tiles.mo-sort > span.rej .mo-tag {
    animation: mo-pop .4s var(--mo-out) forwards;
    animation-delay: calc(1.45s + var(--i) * 45ms);
}
@keyframes mo-reject { to { filter: grayscale(1) brightness(.45); transform: scale(.9); } }
html.mo .mo-scene:is([data-state="on"], [data-state="past"]) .mo-tiles.mo-sort > span.keep {
    animation: mo-pour .6s var(--mo-spring) both, mo-keep .5s var(--mo-spring) forwards;
    animation-delay: calc(var(--d, .3s) + var(--i) * 25ms), calc(1.9s + var(--i) * 30ms);
}
@keyframes mo-keep {
    to { transform: scale(1.06); box-shadow: 0 0 0 2px var(--accent, #ff9800), 0 14px 30px -10px rgba(255, 152, 0, .5); }
}
.mo-tiles .keep::after {
    content: '\2713';
    position: absolute;
    top: 4px;
    right: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font: 800 10px/1 var(--font-sans, sans-serif);
    color: #1a1006;
    background: var(--accent, #ff9800);
    opacity: 0;
}
html.mo .mo-scene:is([data-state="on"], [data-state="past"]) .mo-tiles .keep::after {
    animation: mo-pop .4s var(--mo-spring) forwards;
    animation-delay: calc(2.05s + var(--i) * 30ms);
}

/* a chat prompt that types itself */
.mo-chat {
    width: min(100%, 640px);
    padding: 16px 18px;
    border-radius: 18px;
    text-align: left;
    background: rgba(24, 22, 20, .86);
    border: 1px solid rgba(255, 255, 255, .1);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9);
    backdrop-filter: blur(14px);
}
.mo-chat small {
    display: block;
    margin-bottom: 8px;
    font: 600 11px/1 var(--font-mono, monospace);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted, #6b6b6b);
}
.mo-chat p { margin: 0; font: 500 clamp(15px, 1.6vw, 19px)/1.5 var(--font-mono, monospace); color: #f3efe9; }
.mo-chat .mo-caret { width: .5em; height: 1.05em; vertical-align: -.2em; }

/* tool calls */
.mo-calls { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; width: min(100%, 560px); text-align: left; }
.mo-calls li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .09);
    font: 500 13.5px/1.3 var(--font-mono, monospace);
    color: #e9e4dc;
}
.mo-calls li::before {
    content: '';
    width: 7px;
    height: 7px;
    flex: none;
    border-radius: 50%;
    background: var(--accent, #ff9800);
    box-shadow: 0 0 10px var(--accent, #ff9800);
}
.mo-calls code { color: var(--accent-light, #ffa726); background: none; padding: 0; }
.mo-calls .mo-res { margin-left: auto; color: #8fd19e; white-space: nowrap; }

/* a big counted number */
.mo-count {
    display: flex;
    align-items: baseline;
    gap: 14px;
    font-weight: 900;
    letter-spacing: -.04em;
    color: var(--accent, #ff9800);
}
.mo-count b { font-size: clamp(48px, 6.6vw, 104px); line-height: .9; font-variant-numeric: tabular-nums; }
.mo-count span { font-size: clamp(16px, 1.7vw, 22px); font-weight: 700; letter-spacing: 0; color: var(--text-secondary, #a0a0a0); }

/* receipt */
.mo-receipt {
    position: relative;
    width: min(100%, 400px);
    padding: 20px 22px 26px;
    text-align: left;
    font: 500 13px/1.55 var(--font-mono, monospace);
    color: #2b2620;
    background: #f4efe6;
    box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .85);
    rotate: -2deg;
    -webkit-mask: radial-gradient(7px at 50% 100%, #0000 98%, #000) 50% / 14px 100%;
            mask: radial-gradient(7px at 50% 100%, #0000 98%, #000) 50% / 14px 100%;
}
.mo-receipt b { display: block; text-align: center; letter-spacing: .14em; margin-bottom: 10px; }
.mo-receipt div { display: flex; justify-content: space-between; gap: 16px; }
.mo-receipt .tot { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #8d8478; font-weight: 800; }
.mo-stamp {
    position: absolute;
    right: 14px;
    bottom: 26px;
    padding: 4px 10px;
    border: 3px solid #d2392b;
    border-radius: 6px;
    font: 900 18px/1 var(--font-sans, sans-serif);
    letter-spacing: .08em;
    color: #d2392b;
    rotate: -12deg;
    opacity: 0;
}
html.mo .mo-scene:is([data-state="on"], [data-state="past"]) .mo-stamp {
    animation: mo-stamp .4s cubic-bezier(.3, 1.6, .5, 1) forwards;
    animation-delay: var(--d, 1.6s);
}
@keyframes mo-stamp { from { opacity: 0; transform: scale(2.4); } to { opacity: .9; transform: none; } }

/* upload that crawls and stalls */
.mo-upload { width: min(100%, 520px); text-align: left; }
.mo-upload .bar { height: 10px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.mo-upload .bar i { display: block; height: 100%; width: 3%; border-radius: inherit; background: linear-gradient(90deg, #5c7fd6, #8fb0ff); }
html.mo .mo-talk .mo-upload .bar i { width: 0; }
html.mo .mo-scene:is([data-state="on"], [data-state="past"]) .mo-upload .bar i { animation: mo-crawl 3.2s cubic-bezier(.1, .8, .2, 1) .6s forwards; }
@keyframes mo-crawl { to { width: 3%; } }
.mo-upload .lbl { display: flex; justify-content: space-between; margin-bottom: 10px; font: 600 13px/1.3 var(--font-mono, monospace); color: #c9d4f2; }
.mo-upload small { display: block; margin-top: 10px; font: 500 12.5px/1.3 var(--font-mono, monospace); color: var(--text-muted, #6b6b6b); }
.mo-cloud { font-size: clamp(54px, 7vw, 88px); color: #8fb0ff; line-height: 1; }
html.mo .mo-scene:is([data-state="on"], [data-state="past"]) .mo-cloud { animation: mo-pop .6s var(--mo-spring) both, mo-float 3s ease-in-out .6s infinite; }
@keyframes mo-float { 50% { transform: translateY(-8px); } }

/* export that finishes */
.mo-export { width: min(100%, 520px); text-align: left; }
.mo-export .bar { height: 10px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.mo-export .bar i { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff9800, #ffcc80); }
html.mo .mo-talk .mo-export .bar i { width: 0; }
html.mo .mo-scene:is([data-state="on"], [data-state="past"]) .mo-export .bar i { animation: mo-fill 1.5s cubic-bezier(.5, 0, .2, 1) .5s forwards; }
@keyframes mo-fill { to { width: 100%; } }
.mo-export .lbl { display: flex; justify-content: space-between; margin-bottom: 10px; font: 600 13px/1.3 var(--font-mono, monospace); color: #f3d9b4; }
.mo-done {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-radius: 99px;
    font-weight: 800;
    color: #0f1a12;
    background: #8fd19e;
}

/* before/after wipe scrubbed by the scroll */
.mo-ba {
    --wipe: clamp(0, calc((var(--sp, 1) - .1) * 1.7), 1);
    position: relative;
    width: min(100%, 760px);
    aspect-ratio: 3 / 2;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9);
}
.mo-ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mo-ba img + img { clip-path: inset(0 calc((1 - var(--wipe)) * 100%) 0 0); }
.mo-ba::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--wipe) * 100%);
    width: 2px;
    background: #fff;
    box-shadow: 0 0 18px rgba(255, 255, 255, .8);
}
.mo-ba .mo-ba-l, .mo-ba .mo-ba-r {
    position: absolute;
    bottom: 12px;
    z-index: 1;
    padding: 4px 10px;
    border-radius: 99px;
    font: 700 11px/1.4 var(--font-mono, monospace);
    letter-spacing: .08em;
    text-transform: uppercase;
    background: rgba(0, 0, 0, .6);
    color: #fff;
}
.mo-ba .mo-ba-l { right: 12px; }
.mo-ba .mo-ba-r { left: 12px; color: #1a1006; background: var(--accent, #ff9800); }

/* full-bleed photo behind a whole talk; --pn scrubs its wipe */
.mo-bleed { position: absolute; inset: 0; z-index: 0; }
.mo-bleed img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mo-bleed img + img { clip-path: inset(0 calc((1 - var(--bw, 1)) * 100%) 0 0); }
.mo-bleed::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(55% 34% at 50% 50%, rgba(8, 7, 6, .38), transparent 72%),
        linear-gradient(180deg, rgba(8, 7, 6, .4), transparent 22%, transparent 74%, rgba(8, 7, 6, .5));
}
html.mo .mo-bleed {
    --bw: clamp(0, calc((var(--pn, 0) - 1.15) * 1.5), 1);
    transform: scale(calc(1.12 - var(--p, 0) * .12));
}
.mo-bleed ~ .mo-scene .mo-line { text-shadow: 0 2px 6px rgba(0, 0, 0, .35), 0 8px 44px rgba(0, 0, 0, .6); }
.mo-bleed ~ .mo-scene .mo-sub { color: #f2ede6; text-shadow: 0 2px 12px rgba(0, 0, 0, .7); }

/* the imagic mark, spinning its shutter in */
.mo-mark { position: relative; width: clamp(84px, 10vw, 132px); aspect-ratio: 1; }
.mo-mark img { position: absolute; inset: 0; width: 100%; height: 100%; }
html.mo .mo-scene:is([data-state="on"], [data-state="past"]) .mo-mark .sh { animation: mo-shutter 1.2s var(--mo-out) both .1s; }
html.mo .mo-scene:is([data-state="on"], [data-state="past"]) .mo-mark .bg { animation: mo-pop .6s var(--mo-spring) both; }
@keyframes mo-shutter { from { opacity: 0; transform: rotate(-200deg) scale(.4); } to { opacity: 1; transform: none; } }

/* big scroll-lit statement between sections */
.mo-statement {
    max-width: 22ch;
    margin: 0 auto;
    padding: clamp(80px, 16vh, 180px) 20px;
    font-size: clamp(32px, 4.8vw, 72px);
    font-weight: 850;
    line-height: 1.04;
    letter-spacing: -.04em;
    text-align: center;
    color: var(--text-primary, #f0f0f0);
    text-wrap: balance;
}
.mo-statement em { font-style: normal; color: var(--accent, #ff9800); }

@media (max-width: 700px) {
    .mo-tiles { grid-template-columns: repeat(5, 1fr); gap: 5px; }
    .mo-tiles > span:nth-child(n+26) { display: none; }
    html.mo .mo-talk-ui { bottom: 18px; }
    .mo-calls li { font-size: 12px; padding: 9px 11px; }
    .mo-calls .mo-res { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .mo-ba { --wipe: 1; }
}

/* crop stage: the full original, a crop frame closing onto the published
   framing, then the zoom (motion.js cropFrame drives the geometry) */
.mo-cropstage { display: none; }
html.mo .mo-cropstage { display: block; position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.mo-cropstage img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; }
.mo-crop-box {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    border: 1.5px solid rgba(255, 255, 255, .92);
    box-shadow: 0 0 0 200vmax rgba(6, 5, 4, calc(var(--cd, 0) * .66));
    background:
        linear-gradient(90deg, transparent calc(33.33% - .5px), rgba(255, 255, 255, .45) calc(33.33% - .5px), rgba(255, 255, 255, .45) calc(33.33% + .5px), transparent calc(33.33% + .5px), transparent calc(66.66% - .5px), rgba(255, 255, 255, .45) calc(66.66% - .5px), rgba(255, 255, 255, .45) calc(66.66% + .5px), transparent calc(66.66% + .5px)),
        linear-gradient(180deg, transparent calc(33.33% - .5px), rgba(255, 255, 255, .45) calc(33.33% - .5px), rgba(255, 255, 255, .45) calc(33.33% + .5px), transparent calc(33.33% + .5px), transparent calc(66.66% - .5px), rgba(255, 255, 255, .45) calc(66.66% - .5px), rgba(255, 255, 255, .45) calc(66.66% + .5px), transparent calc(66.66% + .5px));
    opacity: calc(min(1, var(--cd, 0) * 6) * (1 - var(--cz, 0)));
    pointer-events: none;
}
.mo-crop-box i {
    position: absolute;
    width: 22px;
    height: 22px;
    border: 0 solid #fff;
}
.mo-crop-box i:nth-child(1) { left: -4px; top: -4px; border-width: 4px 0 0 4px; }
.mo-crop-box i:nth-child(2) { right: -4px; top: -4px; border-width: 4px 4px 0 0; }
.mo-crop-box i:nth-child(3) { left: -4px; bottom: -4px; border-width: 0 0 4px 4px; }
.mo-crop-box i:nth-child(4) { right: -4px; bottom: -4px; border-width: 0 4px 4px 0; }
.mo-crop-box b {
    position: absolute;
    left: 0;
    top: -30px;
    padding: 3px 8px;
    border-radius: 6px;
    font: 600 11px/1.4 var(--font-mono, monospace);
    color: #1a1006;
    background: var(--accent, #ff9800);
    white-space: nowrap;
}
.mo-cropstage ~ .mo-scene .mo-line { text-shadow: 0 2px 6px rgba(0, 0, 0, .35), 0 8px 44px rgba(0, 0, 0, .6); }
.mo-cropstage ~ .mo-scene .mo-sub { color: #f2ede6; text-shadow: 0 2px 12px rgba(0, 0, 0, .7); }
html.mo .mo-scene.mo-top { justify-content: flex-start; padding-top: max(92px, 10vh); }
html.mo .mo-scene.mo-top .mo-line { font-size: clamp(36px, 5.4vw, 88px); }