/* ==========================================================================
   movie.html: the Movie studio in Tino. Round 4: the live product.
   1 hero (light, the live studio window)   2 talk it through, then step inside
   (the section's ground goes white to black with the window)   3 step inside:
   how Tino helps (dark: the studio window)   4 Vibe and Pro: one window that
   morphs (dark)   4.5 three cards (light)   5 features (light)   6 films, live   7 close.
   Page classes are mv-. Windows are the UI kit (css/ui.css); films are js/film.js.
   ========================================================================== */

body { background: var(--surface); }

/* ------------------------------------------------------------ Shared bits */
.mv-kicker {
  font-size: var(--t-19); line-height: 1.2; font-weight: var(--w-semibold);
  letter-spacing: -0.012em; color: var(--ink-3);
}
.studio .mv-kicker { color: var(--studio-text-3); }
.mv-head > * + * { margin-top: 10px; }
.mv-head-center { text-align: center; margin-inline: auto; }
.mv-h3 { font-size: var(--t-24); line-height: var(--lh-24); letter-spacing: var(--tr-24); font-weight: var(--w-semibold); }
.mv-h4 { font-size: var(--t-19); line-height: 1.3; letter-spacing: -0.014em; font-weight: var(--w-semibold); }
.mv-p { margin-top: 8px; color: var(--ink-3); font-size: var(--t-17); line-height: var(--lh-17); text-wrap: pretty; }
.studio .mv-p { color: var(--studio-text-2); }
@media (max-width: 733px) { .mv-br { display: none; } }

.mv-shot-cap {
  display: flex; justify-content: center; margin-top: 22px;
  font-size: var(--t-14); line-height: var(--lh-14); color: var(--ink-3); text-align: center; text-wrap: balance;
}
.mv-shot-cap i, .mv-stage-cap i { font-style: italic; }

/* ------------------------------------------------------------------- Hero */
.mv-hero { padding-top: clamp(48px, 6vw, 80px); padding-bottom: calc(var(--section-y) * 1.1); }
.mv-hero-copy { text-align: center; }
.mv-eyebrow { font-size: var(--t-24); line-height: 1.2; font-weight: var(--w-semibold); letter-spacing: -0.02em; color: var(--ink); }
.mv-h1 { margin-top: 14px; }
.mv-sub {
  max-width: 34em; margin: 22px auto 0;
  font-size: var(--t-19); line-height: var(--lh-19); letter-spacing: var(--tr-19); color: var(--ink-2); text-wrap: balance;
}
.mv-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 28px; margin-top: 34px; }
.mv-actions .btn-link { font-size: var(--t-17); }
.mv-free { margin-top: 16px; font-size: var(--t-14); color: var(--ink-3); }

.mv-hero-shot {
  width: 100%; max-width: calc(1280px + var(--gutter) * 2);
  margin: clamp(48px, 6vw, 80px) auto 0; padding-inline: var(--gutter);
}
.mv-hero-ui { box-shadow: 0 0 0 0.5px rgba(0,0,0,0.5), 0 40px 100px -20px rgba(17,17,20,0.36), 0 12px 32px rgba(17,17,20,0.14); }
/* The hero poster sits in the film slot at first paint */
.mv-hero-ui .film-poster { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 733px) {
  .mv-actions { flex-direction: column; gap: 18px; }
  .mv-eyebrow { font-size: 19px; }
  .mv-sub { margin-top: 16px; }
}

/* ===================================== 2. Talk it through, then step inside
   .mv-step holds this section and the two dark bands after it. When the
   window steps inside, this section's ground goes from white to the studio
   well, so it runs on into the bands without a seam.                       */
.mv-step { position: relative; }
.mv-starts {
  position: relative; isolation: isolate;
  padding-top: var(--section-y); padding-bottom: calc(var(--section-y) * 0.9);
  color: var(--ink);
}
.mv-starts::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--studio-ground); opacity: 0;
  transition: opacity 700ms var(--ease);
}
.mv-starts .mv-head { max-width: 760px; }
.mv-starts .mv-kicker, .mv-starts h2, .mv-starts .mv-p, .mv-stage-cap { transition: color 700ms var(--ease); }
.mv-starts-p { max-width: 34em; margin-inline: auto; font-size: var(--t-19); line-height: var(--lh-19); letter-spacing: var(--tr-19); }

.mv-step.is-inside .mv-starts::before { opacity: 1; }
/* The bars go dark with the room: this box is the ground nav.js watches ([data-ground="dark"]).
   It has no box until the room turns, so it flips in the same frame as the swap. */
.mv-ground { position: absolute; inset: 0; pointer-events: none; display: none; }
.mv-step.is-inside .mv-ground { display: block; }
.mv-step.is-inside .mv-starts h2 { color: var(--studio-text); }
.mv-step.is-inside .mv-starts .mv-kicker { color: var(--studio-text-3); }
.mv-step.is-inside .mv-starts .mv-p { color: var(--studio-text-2); }
.mv-step.is-inside .mv-stage-cap { color: var(--studio-text-3); }
/* The bands under it join the same ground: square tops, no gap. */
.mv-step .studio-band { padding-inline: 0; }
.mv-step .studio { border-radius: 0; max-width: none; }
.mv-helps-band .studio { padding-top: calc(var(--band-y) * 0.6); }
.mv-modes-band .studio { padding-top: 0; }

.mv-stage { max-width: 1280px; margin: clamp(40px, 5vw, 64px) auto 0; }
/* The two windows share one grid cell, so the swap never changes layout: the
   cell is as tall as the taller window (the light one on phones, its feed held
   at its first height by movie.js) and the studio sits centred in it. */
.mv-swap { display: grid; align-items: center; }
.mv-swap > .ui { grid-area: 1 / 1; min-width: 0; transition: opacity 520ms var(--ease), transform 700ms cubic-bezier(.32,.72,0,1); }
.mv-swap > .mv-light { box-shadow: 0 0 0 0.5px rgba(17,17,20,0.16), 0 40px 100px -24px rgba(17,17,20,0.24), 0 10px 28px rgba(17,17,20,0.08); }
.mv-swap > .mv-dark { opacity: 0; transform: scale(.985); pointer-events: none; }
.mv-step.is-inside .mv-swap > .mv-light { opacity: 0; transform: scale(1.015); pointer-events: none; }
.mv-step.is-inside .mv-swap > .mv-dark { opacity: 1; transform: none; }
.mv-step.is-settled .mv-swap > .mv-light { visibility: hidden; }
/* Phones: the conversation keeps its first height and scrolls inside (js keeps the newest in view). */
@media (max-width: 733px) {
  .mv-light .tw-convo {
    height: var(--mv-feed-h, auto); overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 20px); mask-image: linear-gradient(to bottom, transparent 0, #000 20px);
  }
}

.mv-stage-cap { position: relative; display: grid; justify-items: center; margin-top: 22px; font-size: var(--t-14); line-height: var(--lh-14); color: var(--ink-3); text-align: center; text-wrap: balance; }
.mv-stage-cap::after { content: ""; grid-area: 2 / 1; height: 38px; } /* the Replay row, held so it never shifts the page */
.mv-stage-cap > span { grid-area: 1 / 1; transition: opacity 400ms var(--ease); }
.mv-cap-dark { opacity: 0; }
.mv-step.is-inside .mv-cap-light { opacity: 0; }
.mv-step.is-inside .mv-cap-dark { opacity: 1; }
.mv-replay {
  grid-area: 2 / 1; margin-top: 10px; padding: 4px 10px; border: 0; border-radius: var(--r-pill);
  background: none; color: inherit; font: inherit; font-weight: var(--w-medium); cursor: pointer;
}
.mv-replay:hover { color: var(--studio-text); }
.mv-replay:focus-visible { outline: none; box-shadow: var(--focus-ring-dark); }
/* In the studio the dot is the only pink: while Tino is the playhead its line is white (as on
   home), your playhead steps aside (.is-tino-ph), the panel's progress is neutral, and the ruler
   numbers under its label step aside too (movie.js). */
#mvs-studio .ui-at[data-tool="playhead"] .ui-tool { background: rgba(255, 255, 255, 0.7); }
#mvs-studio .ts-prog i::after { background: var(--ts-t3, #6B6B73); }
#mvs-studio .ts-ruler > span:not(.ts-range) { transition: opacity 160ms var(--ease); }

@media (max-width: 733px) {
  .mv-starts { padding-top: calc(var(--section-y) * 0.7); }
}

/* ======================================================= 3. How Tino helps */
.mv-helps .mv-head { max-width: 820px; }
.mv-point { margin-top: clamp(40px, 5vw, 64px); }

/* The live scene: Vibe mode on Moss & Ember, a note on the frame */
.mv-scene {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px;
  border-radius: 14px; background: #0E0E10; color: var(--studio-text);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.10), 0 40px 90px rgba(0,0,0,0.5);
  overflow: visible;
}
.mv-scene-viewer { position: relative; padding: 0 clamp(20px, 4vw, 48px) 18px; border-radius: 14px 0 0 14px; }
.mv-scene-bar { display: flex; align-items: center; gap: 10px; height: 40px; margin-inline: calc(clamp(20px, 4vw, 48px) * -1 + 12px); }
.mv-lights { display: inline-flex; gap: 6px; }
.mv-lights i { width: 8px; height: 8px; border-radius: 50%; background: #FF5F57; box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.18); }
.mv-lights i:nth-child(2) { background: #FEBC2E; }
.mv-lights i:nth-child(3) { background: #28C840; }
.mv-seg {
  display: inline-flex; padding: 2px; border-radius: 12px; margin-left: 6px;
  background: rgba(255,255,255,0.075); box-shadow: inset 0 0 0 0.5px rgba(255,255,255,0.10);
  font-size: 10px; line-height: 1;
}
.mv-seg span { padding: 5px 8px; border-radius: 10px; color: var(--studio-text-2); }
.mv-seg .is-on { background: rgba(255,255,255,0.14); color: var(--studio-text); font-weight: var(--w-semibold); }
.mv-scene-title { font-size: 10px; font-weight: var(--w-semibold); letter-spacing: -0.01em; white-space: nowrap; }
.mv-scene-title em { font-style: normal; font-weight: var(--w-regular); color: var(--studio-text-3); margin-left: 5px; font-size: 9.5px; }

.mv-frame {
  position: relative; aspect-ratio: 16 / 9; border-radius: 4px; overflow: visible;
  box-shadow: 0 0 0 0.5px rgba(255,255,255,0.10), 0 18px 48px rgba(0,0,0,0.55);
  background: #0b0a10;
}
.mv-frame > .film {
  position: absolute; inset: 0; border-radius: 4px; overflow: hidden;
  /* Before: a flat, cool grade. Tino's edit brings the film's own light back. */
  filter: saturate(0.5) brightness(0.84) hue-rotate(-12deg);
  transition: filter 1100ms var(--ease-in-out);
}
.mv-frame.is-tino-done > .film { filter: none; }

/* The person's note: neutral white. People are never pink. */
.mv-pin {
  position: absolute; left: 50.5%; top: 62%; transform: translate(-50%, -50%);
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--studio-text);
  box-shadow: 0 0 0 3px rgba(20,20,22,0.55), 0 4px 12px rgba(0,0,0,0.4);
}
.mv-note {
  position: absolute; left: calc(50.5% + 16px); top: calc(62% - 18px);
  display: block; width: max-content; max-width: 200px;
  padding: 7px 10px 8px; border-radius: 9px;
  background: rgba(28,28,31,0.92); box-shadow: inset 0 0 0 1px var(--studio-line-2), 0 10px 30px rgba(0,0,0,0.45);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font-size: 10.5px; line-height: 14px; color: var(--studio-text);
}
.mv-note-who { display: flex; gap: 6px; margin-bottom: 2px; font-size: 9.5px; font-weight: var(--w-semibold); color: var(--studio-text-2); }
.mv-note-who .mono { font-weight: var(--w-regular); color: var(--studio-text-3); font-size: 9.5px; }
.mv-stop { position: absolute; left: 50.5%; top: 80%; width: 0; height: 0; }

/* Vibe's scrubber under the frame (it follows the film) */
.mv-scrub { display: flex; align-items: center; gap: 12px; height: 30px; margin-top: 12px; font-size: 10px; color: var(--studio-text-3); }
.mv-scrub-play { width: 0; height: 0; border-left: 7px solid var(--studio-text); border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; }
.mv-scrub-bar { position: relative; flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.14); overflow: hidden; }
.mv-scrub-bar i { position: absolute; inset: 0; background: var(--studio-text); transform-origin: left; transform: scaleX(var(--p, 0.8)); }
.mv-scrub .mono { font-size: 10px; }

/* Panel */
.mv-scene-panel {
  position: relative; display: flex; flex-direction: column;
  background: var(--studio-panel); box-shadow: inset 1px 0 0 var(--studio-line-2);
  border-radius: 0 14px 14px 0; min-width: 0;
}
.mv-panel-head { display: flex; align-items: center; height: 40px; padding: 0 16px; border-bottom: 1px solid var(--studio-line); }
.mv-home { height: 15px; color: var(--studio-text); }
.mv-home svg { height: 15px; width: auto; display: block; }
.mv-panel-body { flex: 1; padding: 16px 14px 0; font-size: 10.5px; line-height: 15.5px; }
.mv-msg-you {
  margin-left: auto; width: max-content; max-width: 86%;
  padding: 7px 10px; border-radius: 10px 10px 4px 10px;
  background: var(--studio-raised); color: var(--studio-text);
}
.mv-msg-you + .mv-msg-tino { margin-top: 12px; }
.mv-msg-tino { position: relative; }
.mv-msg-tino.is-past { color: var(--studio-text-2); }
.mv-msg-name { font-size: 10px; font-weight: var(--w-semibold); margin-bottom: 2px; color: var(--studio-text); }
.mv-today { display: flex; align-items: center; gap: 10px; margin: 14px 0; font-size: 9.5px; color: var(--studio-text-3); }
.mv-today::before, .mv-today::after { content: ""; flex: 1; height: 1px; background: var(--studio-line); }
.mv-changes { margin-top: 10px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--studio-line); }
.mv-row-change { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; font-size: 9.5px; white-space: nowrap; }
.mv-row-change + .mv-row-change { box-shadow: inset 0 1px 0 var(--studio-line); }
.mv-row-change b { font-weight: var(--w-semibold); }
.mv-row-change span { color: var(--studio-text-3); overflow: hidden; text-overflow: ellipsis; }
.mv-row-change em { margin-left: auto; font-style: normal; color: var(--studio-text-3); }
.mv-reply-wait, .mv-reply-done { color: var(--studio-text); transition: opacity 320ms var(--ease); }
.mv-reply-wait { color: var(--studio-text-3); position: absolute; top: 17.5px; left: 0; }
.mv-reply-done { opacity: 0; }
.mv-msg-tino.is-tino-done .mv-reply-wait { opacity: 0; }
.mv-msg-tino.is-tino-done .mv-reply-done { opacity: 0.94; transition-delay: 200ms; }
.mv-change {
  position: relative; display: flex; align-items: center; gap: 8px;
  margin-top: 10px; height: 30px; padding: 0 10px 0 12px;
  border-radius: 8px; background: rgba(255,255,255,0.035); box-shadow: inset 0 0 0 1px var(--studio-line);
  font-size: 9.5px; white-space: nowrap;
  opacity: 0; transform: translateY(6px);
  transition: opacity 320ms var(--ease), transform 420ms var(--ease-out);
}
.mv-change.is-tino-done { opacity: 1; transform: none; transition-delay: 360ms; }
.mv-change b { font-weight: var(--w-semibold); }
.mv-change span { color: var(--studio-text-2); overflow: hidden; text-overflow: ellipsis; }
.mv-change em { margin-left: auto; font-style: normal; font-weight: var(--w-medium); }
.mv-change[data-tino-line]::after { transition-delay: 520ms; }
.mv-panel-ask {
  margin: 12px; padding: 10px 12px 34px; border-radius: 10px;
  background: rgba(255,255,255,0.05); box-shadow: inset 0 0 0 1px var(--studio-line-2);
  font-size: 10px; color: var(--studio-text-3);
}
.mv-point-copy { margin-top: 36px; }
.mv-point-copy .mv-p { max-width: 30em; }

/* Three cards on the light ground: explanations, so not dark (dark means inside a studio) */
.mv-more { padding-top: var(--section-y); background: var(--surface); }
.mv-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.mv-card { min-width: 0; }
.mv-mini {
  position: relative; height: 240px; margin-bottom: 24px; padding: 22px;
  border-radius: var(--r-lg); background: var(--surface-2);
  overflow: hidden; display: flex; flex-direction: column; justify-content: center;
}
.mv-mini-note { margin-top: 12px; font-size: 12px; color: var(--ink-3); text-align: center; }

/* Say it: the Ask field, listening. The level is yours (neutral); the dot is Tino. */
.mv-ask { padding: 14px 14px 10px; border-radius: 14px; background: var(--surface); box-shadow: 0 0 0 0.5px rgba(17,17,20,0.10), 0 2px 8px rgba(17,17,20,0.05); }
.mv-ask-text { font-size: 14px; line-height: 21px; color: var(--ink); }
.mv-listen { white-space: nowrap; margin-left: 6px; font-size: 11px; color: var(--ink-3); }
.mv-listen i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--pink); margin-right: 6px; vertical-align: 0; }
.mv-listen b { font-weight: var(--w-semibold); color: var(--ink); }
.mv-ask-row { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 10px; }
.mv-level { display: inline-flex; align-items: center; gap: 2px; height: 16px; }
.mv-level i { width: 2px; border-radius: 1px; background: var(--ink-4); height: 4px; }
.mv-level i:nth-child(3n+1) { height: 10px; } .mv-level i:nth-child(4n+2) { height: 14px; } .mv-level i:nth-child(5n) { height: 7px; }
.mv-mic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--surface); }
.mv-mic svg { width: 15px; height: 15px; }
@media (prefers-reduced-motion: no-preference) {
  .mv-card.is-in .mv-level i { animation: mv-level 900ms var(--ease-in-out) infinite alternate; }
  .mv-level i:nth-child(2n) { animation-delay: -300ms !important; }
  .mv-level i:nth-child(3n) { animation-delay: -600ms !important; }
  .mv-card.is-in .mv-listen i { animation: mv-breathe 1400ms var(--ease-in-out) infinite alternate; }
}
@keyframes mv-level { from { transform: scaleY(0.45); } to { transform: scaleY(1); } }
@keyframes mv-breathe { from { transform: scale(1); } to { transform: scale(1.35); } }

/* Hear it: the score in sections, bars and a still waveform (no sound here) */
.mv-mini-score { justify-content: flex-start; padding-top: 24px; }
.mv-score-head { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink); font-weight: var(--w-medium); }
.mv-score-head .mono { color: var(--ink-3); font-weight: var(--w-regular); }
.mv-bars { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 18px; font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); }
.mv-bars span { padding-left: 4px; box-shadow: inset 1px 0 0 var(--line-strong); }
.mv-sections { position: relative; height: 22px; margin-top: 6px; }
.mv-sections span {
  position: absolute; top: 0; height: 22px; left: calc(var(--a) / 15 * 100%); width: calc((var(--b) - var(--a)) / 15 * 100% - 3px);
  padding: 0 6px; border-radius: 5px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: 10.5px; line-height: 22px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mv-wave { display: flex; align-items: center; gap: 2px; height: 64px; margin-top: 10px; }
.mv-wave i { flex: 1; min-width: 1px; border-radius: 1px; background: rgba(17,17,20,0.24); }
.mv-silent { margin-top: auto; padding-top: 8px; font-size: 12px; line-height: 16px; color: var(--ink-3); }

/* Checks: four frames, the one it looked at ringed in ink (its eyes are yours) */
.mv-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.mv-strip span { aspect-ratio: 16 / 10; border-radius: 6px; background: #1a1a1d url(../img/films/casa-lume.webp) no-repeat; background-size: 330% auto; }
.mv-strip .is-looked { box-shadow: 0 0 0 1.5px var(--surface-2), 0 0 0 3px var(--ink); }
.mv-check-msg {
  margin-top: 16px; padding: 11px 13px; border-radius: 12px; background: var(--surface);
  box-shadow: 0 0 0 0.5px rgba(17,17,20,0.10);
  font-size: 13px; line-height: 18px; color: var(--ink-2);
}
.mv-check-msg b { display: block; margin-bottom: 2px; color: var(--ink); font-weight: var(--w-semibold); font-size: 12px; }

/* ========================================== 4. Vibe and Pro: one window
   Pro is the STUDIO.md frame. Vibe is the same stage with the inspector and
   the timeline away and the frame grown to fill the work area: one transform. */
.mv-modes .mv-head { max-width: 760px; }
.mv-switch {
  position: relative; display: flex; width: max-content; margin: 36px auto 0; padding: 3px;
  border-radius: var(--r-pill); background: var(--studio-raised);
  box-shadow: inset 0 0 0 0.5px var(--studio-line-2);
}
.mv-switch button {
  position: relative; z-index: 1; width: 88px; height: 34px; border: 0; border-radius: var(--r-pill);
  background: none; color: var(--studio-text-2); font-size: 15px; font-weight: var(--w-medium); letter-spacing: -0.01em;
  cursor: pointer; transition: color var(--d-2) var(--ease);
}
.mv-switch button[aria-selected="true"] { color: var(--studio-text); }
.mv-switch button:focus-visible { outline: none; box-shadow: var(--focus-ring-dark); }
.mv-switch-plate {
  position: absolute; top: 3px; left: 3px; width: 88px; height: 34px; border-radius: var(--r-pill);
  background: rgba(255,255,255,0.16); box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.12);
  transition: transform var(--d-3) var(--ease-spring);
}
.mv-switch[data-mode="pro"] .mv-switch-plate { transform: translateX(88px); }

.mv-modes-stage { max-width: 1180px; margin: 40px auto 0; }
.mv-vp-ui { box-shadow: 0 0 0 1px rgba(255,255,255,0.12), 0 40px 90px rgba(0,0,0,0.5); }
/* The window is as tall as its mode needs (board px): Vibe ends 32px under
   the scrubber (798 + 32), Pro is the full 1000 with the timeline. The frame
   and the Tino panel follow --mv-h, which eases between the two on the
   switch's curve. Without @property it simply snaps. */
@property --mv-h { syntax: '<number>'; inherits: true; initial-value: 1000; }
.ui.mv-vp-ui {
  --mv-h: 1000;
  aspect-ratio: var(--cw) / calc(var(--mv-h) - var(--cy));
  transition: --mv-h 640ms cubic-bezier(.32,.72,0,1);
}
.ui.mv-vp-ui:has(> .mv-vp.is-vibe) { --mv-h: 830; }
.mv-vp .ts-panel { height: calc(var(--mv-h) * 1px); }

.mv-vp { --mv-ease: cubic-bezier(.32,.72,0,1); }
.mv-vp .ts-viewer { width: 1200px; height: 1000px; background: transparent; z-index: 2; pointer-events: none; }
.mv-vp .ts-frame { transform-origin: 0 0; transition: transform 640ms var(--mv-ease); will-change: transform; overflow: hidden; }
.mv-vp .ts-insp, .mv-vp .ts-lower, .mv-vp .mv-vp-pro-only { transition: opacity 380ms var(--ease), transform 640ms var(--mv-ease); }
.mv-vp .ts-lower { z-index: 1; }
.mv-vp .mv-vp-under { transition: opacity 300ms var(--ease); }
/* Vibe: frame 784 x 441 at (38,105) grows to 1104 x 621 at (48,108) */
.mv-vp.is-vibe .ts-frame { transform: translate(10px, 3px) scale(1.40816); }
.mv-vp.is-vibe .ts-insp { opacity: 0; transform: translateX(40px); }
.mv-vp.is-vibe .ts-lower { opacity: 0; transform: translateY(60px); }
.mv-vp.is-vibe .mv-vp-pro-only { opacity: 0; }
.mv-vp.is-vibe .mv-vp-under { opacity: 0; }
.mv-vp-mode > span { transition: background-color 240ms var(--ease), color 240ms var(--ease); color: var(--ts-t2); }
.mv-vp.is-vibe .mv-m-vibe, .mv-vp:not(.is-vibe) .mv-m-pro { background: var(--ts-plate); color: var(--ts-t1); font-weight: 600; }

/* Vibe's own pieces: the note on the picture and the scrubber */
.mv-vp-pin, .mv-vp-note { position: absolute; z-index: 3; transition: opacity 320ms var(--ease); }
.mv-vp-pin { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--ts-t1); box-shadow: 0 0 0 2px rgba(20,20,22,0.55), 0 3px 8px rgba(0,0,0,0.4); }
.mv-vp-note {
  transform: translateX(-100%); width: max-content; max-width: 170px; padding: 5px 8px 6px; border-radius: 7px;
  background: rgba(28,28,31,0.94); box-shadow: inset 0 0 0 1px var(--ts-line-2), 0 8px 24px rgba(0,0,0,0.45);
  font-size: 9px; line-height: 12px; color: var(--ts-t1);
}
.mv-vp-note b { display: block; font-size: 8px; font-weight: 600; color: var(--ts-t2); }
.mv-vp-note em { font-style: normal; font-family: var(--font-mono); font-weight: 400; color: var(--ts-t3); margin-left: 4px; }
.mv-vp:not(.is-vibe) .mv-vp-pin, .mv-vp:not(.is-vibe) .mv-vp-note { opacity: 0; }
.mv-vp-scrub {
  position: absolute; left: 48px; width: 1104px; top: 762px; height: 36px; z-index: 2;
  display: flex; align-items: center; gap: 16px; color: var(--ts-t2); font-size: 12px;
  transition: opacity 380ms var(--ease) 200ms, transform 640ms var(--mv-ease);
}
.mv-vp:not(.is-vibe) .mv-vp-scrub { opacity: 0; transform: translateY(-40px); transition-delay: 0ms; }
.mv-vp-play { color: var(--ts-t1); }
.mv-vp-bar { position: relative; flex: 1; height: 4px; border-radius: 2px; background: var(--ts-line-2); overflow: hidden; }
.mv-vp-bar i { position: absolute; inset: 0; border-radius: 2px; background: var(--ts-t1); transform-origin: left; transform: scaleX(var(--p, 0.86)); }
.mv-vp-tc { font-family: var(--font-mono); font-size: 12px; color: var(--ts-t3); font-variant-numeric: tabular-nums; }

.mv-modes-copy { display: grid; max-width: 560px; margin: 36px auto 0; text-align: center; }
.mv-mode-text { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 320ms var(--ease), transform 420ms var(--ease-out), visibility 0s linear 320ms; }
.mv-mode-text.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 320ms var(--ease) 80ms, transform 420ms var(--ease-out) 80ms, visibility 0s; }

/* ============================================================= 5. Features */
.mv-features { padding-top: var(--section-y); background: var(--surface); }
.mv-features-head { max-width: 760px; margin-bottom: clamp(40px, 5vw, 64px); }
.mv-fx-shot { max-width: 1120px; margin: 0 auto; }
.mv-fx-shot .window-shot { aspect-ratio: 16 / 10; box-shadow: 0 0 0 0.5px rgba(0,0,0,0.42), 0 40px 100px -20px rgba(17,17,20,0.32), 0 12px 32px rgba(17,17,20,0.12); }
.window-shot img { width: 100%; height: 100%; object-fit: cover; }
.mv-fx-lane { display: none; }
.mv-grid-sec { padding-top: clamp(56px, 7vw, 96px); }
.mv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 48px; }
.mv-grid li { padding: 26px 0 34px; border-top: 1px solid var(--line); }
.mv-grid h3 { font-size: var(--t-19); line-height: 1.3; font-weight: var(--w-semibold); letter-spacing: -0.014em; }
.mv-grid p { margin-top: 6px; color: var(--ink-3); max-width: 22em; }
.mv-grid .btn-link { margin-top: 8px; font-size: var(--t-14); }

/* =============================================================== 6. Films */
.mv-films-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 48px; flex-wrap: wrap; }
.mv-films-head > div > * + * { margin-top: 10px; }
.mv-films-aside { font-size: var(--t-17); color: var(--ink-3); padding-bottom: 8px; }
.mv-films-aside .btn-link { margin-left: 6px; }
.mv-reel { display: flex; flex-direction: column; gap: 28px; margin-top: 48px; }
.mv-row { display: flex; gap: 20px; align-items: flex-start; }
.mv-film { flex: var(--ar) 1 0; min-width: 0; }
.mv-poster {
  position: relative; aspect-ratio: var(--ar); border-radius: var(--r-md); overflow: hidden; background: #111114;
  box-shadow: 0 0 0 0.5px rgba(17,17,20,0.08);
}
/* Captions: as made-with.html, the title and its shape and length side by side */
.mv-film figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding-top: 16px; padding-right: 4px; }
.mv-film figcaption b { font-size: 15px; line-height: 1.33; font-weight: var(--w-semibold); letter-spacing: -0.012em; color: var(--ink); }
.mv-film figcaption .mono { font-size: 12px; line-height: 1.33; color: var(--ink-3); white-space: nowrap; }

/* The player bar: the made-with tile's (css/made-with.css .mw-hud). Dark glass, white marks, never pink. */
.mv-hud {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  padding: 28px 12px 12px;
  background: linear-gradient(rgba(10, 10, 12, 0), rgba(10, 10, 12, 0.5));
  opacity: 0; transform: translateY(6px);
  transition: opacity 240ms var(--ease), transform 320ms cubic-bezier(.32,.72,0,1);
  pointer-events: none;
}
.mv-film:hover .mv-hud, .mv-film:focus-within .mv-hud, .mv-hud:has(.is-drag), .film--ask > .mv-hud { opacity: 1; transform: none; pointer-events: auto; }
@media (hover: none) { .mv-hud { opacity: 1; transform: none; pointer-events: auto; } }
.mv-play {
  flex: none; width: 32px; height: 32px; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: rgba(17, 17, 20, 0.56); color: #fff;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  cursor: pointer;
  transition: transform var(--d-1) var(--ease-snap), background-color var(--d-2) var(--ease);
}
.mv-play svg { width: 13px; height: 13px; }
.mv-play:hover { background: rgba(17, 17, 20, 0.72); }
.mv-play:active { transform: scale(0.92); }
.mv-play:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 4px var(--ink); }
.mv-tscrub {
  flex: 1 1 auto; min-width: 0; height: 24px;
  display: flex; align-items: center;
  cursor: pointer; touch-action: none; border-radius: 4px;
}
.mv-tscrub-track {
  position: relative; flex: 1; height: 3px; border-radius: 2px; overflow: hidden;
  background: rgba(255, 255, 255, 0.34);
  transition: transform 200ms var(--ease);
}
.mv-tscrub:hover .mv-tscrub-track, .mv-tscrub.is-drag .mv-tscrub-track, .mv-tscrub:focus-visible .mv-tscrub-track { transform: scaleY(1.67); }
.mv-tscrub-fill { position: absolute; inset: 0; background: #fff; transform-origin: 0 50%; transform: scaleX(0); will-change: transform; }
.mv-tscrub:focus-visible { outline: 2px solid #fff; outline-offset: 0; }
/* The time only on a tile wide enough for it (16:9 rows); narrow tiles keep play and the scrubber. */
.mv-film > .mv-poster { container-type: inline-size; }
@container (max-width: 419px) { .mv-tc { display: none; } }
.mv-tc {
  flex: none; font-size: 11px; line-height: 1; letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.92); font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* =============================================================== 7. Close */
.mv-close-icon { margin: 0 auto 28px; }
.mv-close .mv-actions { margin-top: 30px; }

/* ============================================================ Responsive */
@media (max-width: 1068px) {
  .mv-scene { grid-template-columns: minmax(0, 1fr) 260px; }
  .mv-trio { grid-template-columns: 1fr 1fr; }
  .mv-trio .mv-card:last-child { grid-column: 1 / -1; }
  .mv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 733px) {
  .mv-scene { grid-template-columns: 1fr; border-radius: 12px; }
  .mv-scene-viewer { padding: 0 12px 14px; border-radius: 12px 12px 0 0; }
  .mv-scene-bar { margin-inline: 4px; height: 44px; gap: 10px; }
  .mv-scene-bar .mv-lights { display: none; }
  .mv-seg { margin-left: 0; font-size: 12px; }
  .mv-seg span { padding: 6px 9px; }
  .mv-note { left: 8px; right: 8px; top: 8px; bottom: auto; max-width: none; width: auto; font-size: 12px; line-height: 16px; padding: 7px 10px 8px; display: flex; gap: 8px; align-items: baseline; }
  .mv-note .mv-note-who { margin: 0; flex: none; }
  /* Pinned beside the fire, to its left, under the title (the title holds the top third from 0:15). */
  .mv-note { left: auto; right: calc(49.5% + 12px); top: calc(62% - 12px); max-width: 136px; display: block; font-size: 11px; line-height: 14px; padding: 6px 9px 7px; }
  .mv-note .mv-note-who { margin-bottom: 1px; font-size: 10px; }
  .mv-note .mv-note-who .mono { font-size: 10px; }
  .mv-stop { top: 75%; }   /* Tino's label clears the film's Wishlist button (from 0:15) */
  /* Vibe's player under the frame stays readable at phone scale: 11px type and glyph, whatever the board's scale (--s). */
  .mv-vp-scrub { top: calc(780px - 14px / var(--s)); height: calc(28px / var(--s)); gap: calc(10px / var(--s)); }
  .mv-vp-play .ic { width: calc(11px / var(--s)); height: calc(11px / var(--s)); }
  .mv-vp-bar { height: calc(3px / var(--s)); border-radius: calc(2px / var(--s)); }
  .mv-vp-tc { font-size: calc(11px / var(--s)); }
  .mv-scene-panel { border-radius: 0 0 12px 12px; box-shadow: inset 0 1px 0 var(--studio-line-2); }
  .mv-panel-head { height: 44px; }
  .mv-panel-body { padding: 14px 14px 16px; font-size: 12.5px; line-height: 18px; }
  .mv-msg-name, .mv-today, .mv-row-change, .mv-change { font-size: 11.5px; }
  .mv-panel-ask { display: none; }
  .mv-msg-tino.is-past, .mv-changes.is-past, .mv-panel-body > .mv-msg-you:first-child { display: none; }
  .mv-point-copy { margin-top: 28px; }
  .mv-trio { grid-template-columns: 1fr; gap: 48px; }
  .mv-trio .mv-card:last-child { grid-column: auto; }
  .mv-mini { height: auto; min-height: 220px; }
  .mv-switch button, .mv-switch-plate { width: 80px; }
  .mv-switch[data-mode="pro"] .mv-switch-plate { transform: translateX(80px); }
  .mv-modes-stage { margin-top: 28px; }
  .mv-features-head { margin-bottom: 28px; }
  .mv-fx-shot .window-shot { border-radius: 10px; }
  .mv-grid { grid-template-columns: 1fr; }
  .mv-grid li { padding: 20px 0 22px; }
  .mv-films-aside > span { display: block; }
  .mv-films-aside .btn-link { display: inline-flex; margin: 8px 0 0; }
  .mv-reel { gap: 24px; margin-top: 32px; }
  .mv-row { flex-wrap: wrap; gap: 24px 12px; }
  .mv-film[style*="1.7778"] { flex-basis: 100%; order: -1; }
  .mv-film figcaption { display: block; padding-top: 12px; padding-right: 0; }
  .mv-film figcaption b { display: block; font-size: 14px; }
  .mv-film figcaption .mono { display: block; margin-top: 2px; font-size: 11px; }
  /* Phones pair the verticals and the squares; the odd vertical out (48 Hours in Lisbon)
     would stand alone, so the phone grid ends on Moss & Ember. All ten are a tap away. */
  .mv-film-solo { display: none; }
  .mv-shot-cap { margin-top: 16px; }
  /* Phones: only what the caption names, at a size that reads. Two crops of the 1536 x 1920
     phone still at the same scale (760 px wide, so its 12 px labels land at 11 px or more):
     the Heure Ambrée frame with the leaks on it (x 481, y 130, 760 x 1040), and under it the
     Light Leaks lane with Tino's dot and label (x 700, y 1402, 760 x 66; short of your playhead). */
  .mv-fx-shot .window-shot { aspect-ratio: auto; }
  .mv-fx-shot picture, .mv-fx-lane { position: relative; display: block; overflow: hidden; }
  .mv-fx-shot picture { aspect-ratio: 760 / 1040; }
  .mv-fx-lane { aspect-ratio: 760 / 66; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
  .mv-fx-shot .window-shot img { position: absolute; left: 0; top: 0; width: 202.105%; height: auto; max-width: none; object-fit: fill; }
  .mv-fx-shot picture img { transform: translate(-31.315%, -6.771%); }
  .mv-fx-lane img { transform: translate(-45.573%, -73.021%); }
}

/* Phones, 600 and under: the tile controls as on made-with.html. Always shown, a 32px play/pause
   bottom-left with the scrubber beside it, no timecode on the tile. */
@media (max-width: 600px) {
  .mv-hud {
    gap: 8px; padding: 24px 10px 10px 8px;
    opacity: 1; transform: none; pointer-events: auto;
    background: linear-gradient(rgba(10, 10, 12, 0), rgba(10, 10, 12, 0.44));
  }
  .mv-play svg { width: 12px; height: 12px; }
  .mv-tscrub { height: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .mv-hud { transition: opacity 200ms linear; transform: none; }
  .mv-frame > .film, .mv-change, .mv-mode-text, .mv-switch-plate,
  .ui.mv-vp-ui, .mv-vp .ts-frame, .mv-vp .ts-insp, .mv-vp .ts-lower, .mv-vp-scrub, .mv-vp-pin, .mv-vp-note { transition-duration: 1ms; }
  .mv-swap > .ui { transition: opacity 200ms linear; transform: none !important; }
  .mv-starts::before { transition-duration: 200ms; }
}
.is-shot .mv-frame > .film, .is-shot .mv-change, .is-shot .mv-reply-done, .is-shot .mv-reply-wait { transition: none !important; }

/* Objects on the picture hide while their layer is off screen (movie.js) */
.mv-hero-ui .ts-sel, .mv-hero-ui .ts-under, .mv-vp-pin, .mv-vp-note, .mv-vp-under { transition: opacity 200ms var(--ease); }
.mv-off { opacity: 0 !important; }