/* ============================================================
   Mori's scene (2026-10-08): the app's own window, and in it the app: Today, a call being recorded, the transcript
   with the two voices, the decisions and the to-dos, an answer with the call it came from.
   Markup: products/scenes/mori.html (made by tools/build-mori-scene.mjs); motion: assets/js/scene-mori.js; the shared
   scene frame: scene.css.
   Same composition as Wavetype's scene (scene-wavetype.css): head and step words in the left column, the window to
   their right; below 1100px the head scrolls away, the stage pins, the words sit over the window.
   What is inside the window is the app's own markup and stylesheet, in a shadow root (.mo-app): laid out at
   1040 x 680 on a desk and 520 x 680 (the app's narrow layout, with its icon rail) below 1100px, then scaled to the
   window as one piece, so the scene can move every part of it and the text stays text.
   Without .is-live (no JS, no GSAP, reduced motion) the scene is one still frame: the call opened from the answer.
   ============================================================ */

/* the app's three families (OFL, licences beside the files). Declared here: a shadow root cannot declare fonts */
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: block; src: url("/assets/fonts/mori/instrument-serif-latin-400-normal-DnYpCC2O.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: block; src: url("/assets/fonts/mori/instrument-serif-latin-400-italic-DKMiL14s.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400; font-display: block; src: url("/assets/fonts/mori/hanken-grotesk-latin-400-normal-BG6hkEXj.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 500; font-display: block; src: url("/assets/fonts/mori/hanken-grotesk-latin-500-normal-DrDcrrxK.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 600; font-display: block; src: url("/assets/fonts/mori/hanken-grotesk-latin-600-normal-CIXX6EOa.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 700; font-display: block; src: url("/assets/fonts/mori/hanken-grotesk-latin-700-normal-CeQ8H3UY.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: block; src: url("/assets/fonts/mori/jetbrains-mono-latin-400-normal-V6pRDFza.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: block; src: url("/assets/fonts/mori/jetbrains-mono-latin-500-normal-BWZEU5yA.woff2") format("woff2"); }

.sc[data-scene="mori"] {
  --hw: clamp(340px, 30vw, 500px);
  --gap: clamp(40px, 4vw, 72px);
  --aw: 1040;                                        /* the app's layout width, in its own px */
  --ww: min(1040px, 100vw - 2 * var(--pad) - var(--hw) - var(--gap), (100svh - 170px) * 1040 / 712);
  --k: calc(var(--ww) / var(--aw));
}

/* ---------- the window ---------- */

.mo-win {
  position: relative;
  width: var(--ww);
  box-sizing: border-box;
  border-radius: calc(9 * var(--k));
  background: #EEECE7;                               /* the app's own ground */
  border: 1px solid rgba(13, 13, 15, 0.16);
  box-shadow: 0 2px 4px rgba(13, 13, 15, 0.06), 0 28px 60px -22px rgba(13, 13, 15, 0.34);
  overflow: hidden;
  font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
}
.mo-bar { height: calc(32 * var(--k)); display: flex; align-items: center; justify-content: space-between; }
.mo-bar__t { display: flex; align-items: center; gap: calc(8 * var(--k)); padding-left: calc(12 * var(--k)); font-size: calc(12 * var(--k)); line-height: 1; color: #1B1B1F; }
.mo-bar__t img { display: block; width: calc(16 * var(--k)); height: calc(16 * var(--k)); }
.mo-bar__c { display: flex; height: 100%; }
.mo-bar__c svg { display: block; height: 100%; width: auto; fill: none; stroke: #3A3A40; stroke-width: 1; }
.mo-screen { position: relative; aspect-ratio: 1040 / 680; overflow: hidden; }
.mo-app { position: absolute; inset: 0; }

/* ---------- still ---------- */

.sc[data-scene="mori"]:not(.is-live) .sc-device { align-self: center; }
.sc[data-scene="mori"]:not(.is-live) .sc-beat__n { display: none; }

/* ---------- live: pinned stage, desk composition (from 1100px) ---------- */

.sc[data-scene="mori"].is-live .sc-beats, .sc[data-scene="mori"].is-live .sc-steps { pointer-events: none; }
.sc[data-scene="mori"] .sc-beat__s > span { text-wrap: balance; }
/* each heading is two lines, never three: the size is set by the longest line, "It cites the call." */
.sc[data-scene="mori"].is-live .sc-ln { white-space: nowrap; }
.sc[data-scene="mori"].is-live .sc-steps { overflow: hidden; padding: 3px 0; }
.sc[data-scene="mori"].is-live .sc-steps span { display: inline-block; }
/* the head leaves through masks, never as a fade: each block sits in its own (set by the scene) */
.mo-hm { overflow: hidden; padding: 6px 0 0.16em; margin: -6px 0 -0.16em; }
@media (min-width: 1100px) {
  .sc[data-scene="mori"].is-live .sc-hero .pp-pitch { font-size: clamp(1.4rem, 2vw, 2.1rem); max-width: 18ch; }
  .sc[data-scene="mori"].is-live .sc-beat__t { font-size: min(calc(var(--hw) / 7.7), 6rem); line-height: 0.92; }
  .sc[data-scene="mori"].is-live .sc-device { top: 50%; transform: translate(var(--sx, 0px), -48%); }
}

/* ---------- below 1100px: the head scrolls away above, the stage pins, the window under the words ---------- */

@media (max-width: 1099px) {
  .sc[data-scene="mori"] { --aw: 520; --ww: min(520px, 100vw - 2 * var(--pad)); --gx: max(var(--pad), (100% - var(--ww)) / 2); }
  .mo-screen { aspect-ratio: 520 / 680; }
  .sc[data-scene="mori"] .sc-pin { grid-template-columns: 1fr; }
  .sc[data-scene="mori"] .sc-device { grid-column: 1; grid-row: 3; justify-self: center; }
  .sc[data-scene="mori"].is-live .sc-pin { height: auto; overflow: visible; display: block; padding: 0; }
  .sc[data-scene="mori"].is-live .sc-hero { position: relative; left: auto; top: auto; width: auto; transform: none; padding: 96px var(--pad) 8px; }
  .sc[data-scene="mori"].is-live .sc-stage { position: relative; inset: auto; height: 100svh; overflow: hidden; display: block; }
  .sc[data-scene="mori"].is-live .sc-steps { left: var(--gx); top: auto; bottom: calc(var(--bar) + 16px); gap: 18px; font-size: 14px; transform: none; }
  .sc[data-scene="mori"].is-live .sc-beats { left: var(--gx); right: var(--pad); top: var(--btop, 62px); width: auto; max-width: 40rem; transform: none; }
  .sc[data-scene="mori"].is-live .sc-beats { --bt: clamp(2.1rem, min(8.6vw, 7svh), 4.4rem); }
  .sc[data-scene="mori"].is-live .sc-beat { transform: none; gap: calc(0.22 * var(--bt)); }
  .sc[data-scene="mori"].is-live .sc-beat__t { font-size: var(--bt); }
  .sc[data-scene="mori"].is-live .sc-beat__s { font-size: clamp(1.02rem, calc(0.29 * var(--bt)), 1.2rem); max-width: 36ch; }
  /* --top: under the words (set by the scene from where they end); --sy: lifted to the middle at the end */
  .sc[data-scene="mori"].is-live .sc-device { left: var(--gx); bottom: auto; top: var(--top, 50%); transform: translateY(var(--sy, 0px)); }
}
@media (max-width: 600px) {
  .sc[data-scene="mori"].is-live .sc-beat { gap: 8px; }
  .sc[data-scene="mori"].is-live .sc-beat__t { font-size: clamp(2rem, 10.4vw, 3.2rem); }
  .sc[data-scene="mori"].is-live .sc-beat__s { font-size: 1rem; }
}