/* ==========================================================================
   motion.css: page chrome for "Coronation Night" + helper classes used by the
   motion engine. Loaded after theme.css. Never restyles the slide design itself:
   every .mo-* rule below only exists while an entrance is running.
   ========================================================================== */
:root{
  color-scheme:dark;
  --v-bg:#07040b; --v-panel:#120a19; --v-panel-2:#1a1024; --v-line:rgba(232,200,147,.14); --v-line-strong:rgba(232,200,147,.32);
  --v-text:#faf4f6; --v-mist:#dcd1e2; --v-muted:#ac9db8; --v-gold:#e8c893; --v-violet:#a78bfa;
  --v-serif:'Playfair Display',Georgia,'Times New Roman',serif; --v-sans:Inter,'Segoe UI',system-ui,-apple-system,sans-serif;
  --stage-max:calc((100vh - 176px) * 16 / 9);
}
html,body{background:var(--v-bg) !important;height:auto}
body{margin:0;color:var(--v-text);font:400 15px/1.5 var(--v-sans);-webkit-font-smoothing:antialiased;
  background:radial-gradient(70% 55% at 50% 22%,rgba(88,52,130,.20) 0%,rgba(7,4,11,0) 70%) no-repeat,var(--v-bg) !important;overflow-x:hidden}
.ui-app{max-width:1760px;margin:0 auto;padding:16px clamp(16px,2.4vw,36px) 36px;display:grid;gap:14px}
:where(.ui-app button){font:inherit;color:inherit}
.ui-app :focus-visible{outline:2px solid var(--v-gold);outline-offset:3px;border-radius:8px}

/* header (quiet) */
/* at least 960px wide: on short wide windows (link previews ~1200x630) the stage is narrow, and a header
   capped to it would wrap into two rows and push the cover below the fold */
.ui-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 28px;max-width:max(var(--stage-max),min(100%,960px));min-width:min(100%,300px);width:100%;margin-inline:auto}
.ui-brand{display:flex;align-items:center;gap:14px;min-width:0;flex:1 1 340px}
.ui-brand img{width:44px;height:44px;object-fit:contain;flex:none}
.ui-brand .ui-kicker{font:600 11px/1.2 var(--v-sans);letter-spacing:.24em;text-transform:uppercase;color:var(--v-gold);margin:0 0 5px}
.ui-brand h1{font:500 clamp(22px,2.4vw,30px)/1.1 var(--v-serif);margin:0;letter-spacing:-.005em}
.ui-brand h1 em{font-style:italic;background:linear-gradient(172deg,#fff3dc,#f0d09c 32%,#d2a263 60%,#f3d9ab 80%);-webkit-background-clip:text;background-clip:text;color:transparent}
.ui-brand .ui-sub{color:var(--v-muted);margin:4px 0 0;font-size:13px}
.ui-dl{display:grid;grid-template-columns:auto auto;gap:6px 8px;align-items:center;justify-content:end}
.ui-btn{display:inline-flex;align-items:center;gap:9px;padding:9px 15px;border-radius:999px;border:1px solid var(--v-line-strong);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0)),var(--v-panel-2);cursor:pointer;font-weight:600;font-size:13.5px;letter-spacing:.01em;transition:border-color .2s,background .2s,opacity .2s}
.ui-btn:hover:not(:disabled){border-color:var(--v-gold)}
.ui-btn:disabled{opacity:.45;cursor:not-allowed}
.ui-btn--gold{background:linear-gradient(172deg,#fff3dc,#f0d09c 40%,#d2a263 75%,#f3d9ab);color:#1a0f22;border-color:transparent}
.ui-btn small{font-weight:500;opacity:.72;font-size:12px}
.ui-btn svg{width:16px;height:16px;flex:none}
.ui-dl-status{grid-column:1 / -1;text-align:right;font-size:12px;line-height:1.3;color:var(--v-muted);min-height:1.3em;margin:0}

/* viewer + stage */
.ui-viewer{position:relative;display:grid;gap:12px}
.ui-screen{position:relative;width:100%;max-width:var(--stage-max);min-width:min(100%,300px);aspect-ratio:16/9;margin-inline:auto;
  overflow:hidden;border-radius:14px;background:#050308;isolation:isolate;touch-action:pan-y;
  box-shadow:0 40px 120px -20px rgba(0,0,0,.75),0 0 0 1px var(--v-line),0 0 90px -30px rgba(139,92,246,.35)}
/* the stage is a swipe surface: a mouse drag must not select slide text or drag a photo */
.ui-screen{-webkit-user-select:none;user-select:none}
.ui-screen img{-webkit-user-drag:none}
.ui-screen:focus{outline:none}
.ui-screen:focus-visible{outline:1px solid rgba(232,200,147,.45);outline-offset:3px}
.ui-stage{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;z-index:0}
.ui-stage > .slide{position:absolute !important;left:0;top:0;margin:0 !important;display:none !important;box-shadow:none !important}
.ui-stage:not(.is-js) > #s01,.ui-stage > .slide.is-on{display:block !important}
.ui-stage > .slide.is-top{z-index:2}
/* pre-render of the next slide during the current one's dwell (engine.js warm()): painted, invisible */
.ui-stage > .slide.mo-warm:not(.is-on){display:block !important;opacity:.003 !important;z-index:-1;pointer-events:none}
.ui-dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4}
/* stage-light sweep: a moving-head beam (warm haze + hot golden core) that ADDS light (screen) */
.ui-sweep{position:absolute;inset:0;pointer-events:none;z-index:3;opacity:0;overflow:hidden;mix-blend-mode:screen}
.ui-sweep__beam{position:absolute;left:50%;top:-34%;width:170%;height:200%;margin-left:-85%;transform-origin:50% 0;will-change:transform;
  background:
    conic-gradient(from 170deg at 50% 0%,rgba(255,226,170,0) 0deg,rgba(255,228,178,.07) 4deg,rgba(255,236,200,.22) 7.5deg,rgba(255,246,228,.36) 10deg,rgba(255,236,200,.22) 12.5deg,rgba(255,228,178,.07) 16deg,rgba(255,226,170,0) 20deg,rgba(0,0,0,0) 360deg),
    conic-gradient(from 157deg at 50% 0%,rgba(226,170,104,0) 0deg,rgba(232,184,120,.06) 9deg,rgba(240,198,138,.17) 18deg,rgba(246,210,156,.2) 23deg,rgba(240,198,138,.17) 28deg,rgba(232,184,120,.06) 37deg,rgba(226,170,104,0) 46deg,rgba(0,0,0,0) 360deg);
  -webkit-mask-image:radial-gradient(60% 100% at 50% 0%,rgba(0,0,0,.1) 0%,#000 28%,#000 60%,rgba(0,0,0,0) 100%);
          mask-image:radial-gradient(60% 100% at 50% 0%,rgba(0,0,0,.1) 0%,#000 28%,#000 60%,rgba(0,0,0,0) 100%)}
.ui-dip{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;z-index:3}

/* film progress (segmented, thin gold) */
.ui-progress{position:absolute;left:2.4%;right:2.4%;bottom:1.15%;display:flex;gap:3px;z-index:5;opacity:0;transition:opacity .5s;pointer-events:none}
.ui-progress.is-on{opacity:1}
.ui-progress i{position:relative;flex:1;height:2px;border-radius:2px;background:rgba(255,255,255,.14);overflow:hidden}
.ui-progress b{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#b98647,#f0d09c 60%,#fff3dc);box-shadow:0 0 6px rgba(240,208,156,.6)}

/* stage buttons */
.ui-nav{position:absolute;top:50%;translate:0 -50%;width:44px;height:44px;border-radius:50%;border:1px solid var(--v-line-strong);
  background:rgba(8,5,12,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);cursor:pointer;display:grid;place-items:center;z-index:6;opacity:0;transition:opacity .25s,border-color .2s}
.ui-screen:hover .ui-nav,.ui-nav:focus-visible{opacity:.9}
.ui-nav:hover{opacity:1;border-color:var(--v-gold)}
.ui-nav svg{width:18px;height:18px}
.ui-nav--prev{left:14px}.ui-nav--next{right:14px}
@media (hover:none){.ui-nav{opacity:.8}}
.ui-play{position:absolute;right:3.2%;bottom:6.4%;z-index:7;display:inline-flex;align-items:center;gap:.8em;padding:.62em 1.35em .62em .62em;border-radius:999px;cursor:pointer;
  font:600 clamp(12px,1.25vw,17px)/1 var(--v-sans);letter-spacing:.04em;color:var(--v-text);
  border:1px solid rgba(240,208,156,.55);background:rgba(10,6,15,.58);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 18px 50px -12px rgba(0,0,0,.8),0 0 40px -10px rgba(240,208,156,.35);transition:opacity .4s,transform .4s,border-color .2s}
.ui-play:hover{border-color:#f0d09c;transform:translateY(-1px)}
.ui-play__disc{display:grid;place-items:center;width:2.4em;height:2.4em;border-radius:50%;background:linear-gradient(160deg,#fff3dc,#f0d09c 40%,#c8955a);box-shadow:0 0 22px rgba(240,208,156,.55)}
.ui-play__disc svg{width:42%;height:42%;margin-left:8%;fill:#1a0f22}
.ui-play small{display:block;margin-top:.35em;font-weight:500;font-size:.72em;letter-spacing:.14em;text-transform:uppercase;color:var(--v-muted)}
.ui-play[hidden]{display:none}

/* control bar */
.ui-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;max-width:var(--stage-max);min-width:min(100%,300px);width:100%;margin-inline:auto}
.ui-bar__left{display:flex;align-items:center;gap:16px;min-width:0;flex:1 1 auto}
.ui-film{padding:9px 17px 9px 13px}
.ui-film .ui-ic-play,.ui-film .ui-ic-pause,.ui-film .ui-ic-again{display:none}
.ui-film[data-state="idle"] .ui-ic-play,.ui-film[data-state="paused"] .ui-ic-play{display:block}
.ui-film[data-state="playing"] .ui-ic-pause{display:block}
.ui-film[data-state="ended"] .ui-ic-again{display:block}
.ui-count{display:flex;align-items:baseline;gap:12px;min-width:0}
.ui-count b{font:italic 500 21px/1 var(--v-serif);color:var(--v-gold);font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.ui-count span{color:var(--v-mist);font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-tools{display:flex;flex-wrap:wrap;gap:8px}
.ui-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;border:1px solid var(--v-line);background:transparent;cursor:pointer;font-size:13px;font-weight:500;color:var(--v-mist)}
.ui-chip svg{width:14px;height:14px}
.ui-chip:hover,.ui-chip[aria-pressed="true"]{border-color:var(--v-gold);color:var(--v-text)}
.ui-chip:disabled{opacity:.4;cursor:not-allowed}
/* Sound chip: speaker + waves when on, speaker + cross when off; a gold nudge when the browser held the music back */
.ui-sound .ui-snd-x{display:none}
.ui-sound[aria-pressed="false"] .ui-snd-wave{display:none}
.ui-sound[aria-pressed="false"] .ui-snd-x{display:inline}
.ui-sound[aria-pressed="false"]{color:var(--v-muted)}
.ui-sound[data-state="blocked"]{border-color:var(--v-gold);color:var(--v-gold)}
.ui-sound[hidden]{display:none}
.ui-spk{max-width:var(--stage-max);min-width:min(100%,300px);width:100%;margin-inline:auto;border:1px solid var(--v-line);border-radius:12px;
  background:var(--v-panel);padding:15px 19px;color:var(--v-mist);font-size:15px;line-height:1.6}
.ui-spk h2{font:600 11px/1 var(--v-sans);letter-spacing:.24em;text-transform:uppercase;color:var(--v-gold);margin:0 0 9px}
.ui-spk p{margin:0;max-width:78ch}
.ui-viewer:fullscreen{background:#000;display:grid;place-items:center;padding:0}
.ui-viewer:fullscreen .ui-screen{max-width:min(100vw,calc(100vh * 16 / 9));border-radius:0;box-shadow:none}
.ui-viewer:fullscreen .ui-bar,.ui-viewer:fullscreen .ui-spk{display:none}
.slide .notes{display:none !important}

/* thumbnails */
.ui-scenes{max-width:var(--stage-max);min-width:min(100%,300px);width:100%;margin:10px auto 0}
.ui-strip-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.ui-strip-head h2{font:600 11.5px/1 var(--v-sans);letter-spacing:.26em;text-transform:uppercase;color:var(--v-gold);margin:0}
.ui-strip-head span{color:var(--v-muted);font-size:12.5px}
.ui-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-top:12px}
.ui-thumb{position:relative;padding:0;border:1px solid var(--v-line);border-radius:8px;overflow:hidden;background:#08050c;cursor:pointer;aspect-ratio:16/9;transition:border-color .2s}
.ui-thumb img{display:block;width:100%;height:100%;object-fit:cover;opacity:.72;transition:opacity .2s}
.ui-thumb:hover img,.ui-thumb[aria-current="true"] img{opacity:1}
.ui-thumb[aria-current="true"]{border-color:var(--v-gold);box-shadow:0 0 0 1px var(--v-gold)}
.ui-thumb__n{position:absolute;left:6px;bottom:6px;padding:3px 6px 2px;border-radius:5px;background:rgba(8,5,12,.78);font:italic 500 14px/1 var(--v-serif);color:var(--v-gold)}
.ui-foot{max-width:var(--stage-max);min-width:min(100%,300px);width:100%;margin:6px auto 0;color:var(--v-muted);font-size:12.5px;border-top:1px solid var(--v-line);padding-top:14px;display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:space-between}
kbd{font:500 11px/1 var(--v-sans);border:1px solid var(--v-line-strong);border-bottom-width:2px;border-radius:4px;padding:2px 5px;color:var(--v-mist)}
@media (max-width:760px){
  .ui-top{align-items:flex-start}
  .ui-dl{justify-content:start}
  .ui-btn{white-space:nowrap;font-size:13px;padding:9px 13px}
  .ui-dl .ui-btn small{display:none}
  .ui-dl-status{text-align:left}
  .ui-nav{width:32px;height:32px;opacity:.55}.ui-nav svg{width:15px;height:15px}.ui-nav--prev{left:6px}.ui-nav--next{right:6px}
  .ui-strip{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
  .ui-hint{display:none}
  .ui-bar__left{flex-wrap:wrap;gap:10px 14px}
  .ui-count span{max-width:52vw}
  .ui-play{right:3%;bottom:5%;padding:.35em;font-size:12px}
  .ui-play > span:last-child{display:none}
  .ui-play__disc{width:2.6em;height:2.6em}
}
/* narrow phones (360-380 px): the two download buttons no longer fit side by side: stack them */
@media (max-width:380px){
  .ui-dl{grid-template-columns:minmax(0,1fr);width:100%}
  .ui-dl .ui-btn{justify-content:center}
  .ui-dl-status{text-align:center}
}

/* capture / test: the stage fills the viewport, nothing else */
html.mo-stage-only,html.mo-stage-only body{overflow:hidden !important}
html.mo-stage-only .ui-screen{position:fixed;left:0;top:0;width:100vw;height:100vh;max-width:none;min-width:0;border-radius:0;box-shadow:none;z-index:1000;aspect-ratio:auto}
html.mo-stage-only .ui-nav,html.mo-stage-only .ui-play,html.mo-stage-only .ui-progress{display:none !important}

/* render mode (anim/out/_render.html, for the MP4 renderer): the stage alone at 1920x1080, scale 1,
   no chrome, no cursor, always in motion (the video is not subject to the OS reduced-motion setting) */
html.mo-render,html.mo-render body{margin:0 !important;padding:0;width:1920px;height:1080px;overflow:hidden !important;background:#000 !important;cursor:none}
html.mo-render *{cursor:none !important}
html.mo-render .ui-screen{position:fixed;left:0;top:0;width:1920px;height:1080px;max-width:none;min-width:0;aspect-ratio:auto;margin:0;border-radius:0;box-shadow:none;background:#000}
html.mo-render .ui-stage{transform:none !important}
html.mo-render .ui-dust,html.mo-render .ui-sweep{display:block !important}

/* ---------------- helper classes (only present during entrances) ---------------- */
.mo-w,.mo-c{display:inline-block}
.mo-w{white-space:nowrap}
.mo-gw{-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  padding:.08em .16em .14em .08em;margin:-.08em -.16em -.14em -.08em}
.mo-curtain{position:absolute;inset:0;z-index:-1;background:#000;pointer-events:none}
.mo-rig{position:absolute;mix-blend-mode:screen;pointer-events:none;will-change:transform,opacity}
/* the big gradient lights scale-breathe for the whole visit: a stable layer avoids re-rastering them at every scale step */
.slide.mo-visit > .layer-light > .spotlight,.slide.mo-visit > .layer-light > .floor-glow{will-change:transform,opacity}
.mo-sheen{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:2}
/* pseudo-element drawing driven by CSS variables (see U.drawVar) */
.slide.mo-live .step:not(:last-child)::before{transform-origin:0 50%;transform:scaleX(var(--mo-line,1))}
.slide.mo-live .steps--v .step:not(:last-child)::before{transform-origin:50% 0;transform:scaleY(var(--mo-line,1))}
.slide.mo-live .step:not(:last-child)::after{opacity:calc(.8 * var(--mo-head,1))}
.slide.mo-live .milestone::before{transform-origin:0 50%;transform:scaleX(var(--mo-line,1))}
.slide.mo-live .milestone::after{transform:scale(var(--mo-dot,1));opacity:var(--mo-dot,1)}

@media (prefers-reduced-motion:reduce){
  .ui-dust,.ui-sweep{display:none !important}
  .ui-app *{transition:none !important}
}