/* ── How-it-works movie ─────────────────────────────────────
   The modal player (views/landing-movie.js), opened from the hero's
   "How it works" CTA and /#how. Scenes reuse the demo-* conversation
   language from landing-demo.css and mini-* bits from landing-uses.css,
   framed in real product chrome (topbar, chat header). */

.mv-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: mv-fade 0.25s var(--ease);
}

@keyframes mv-fade { from { opacity: 0; } }

.mv-frame {
  position: relative;
  width: min(1100px, calc((100vh - 32px) * 16 / 9), 100%);
  border: 1px solid var(--line-hi);
  border-radius: 14px;
  background: #050607;
  box-shadow: var(--shadow-lg), 0 0 140px rgba(45, 127, 249, 0.13);
  overflow: hidden;
  animation: mv-enter 0.35s var(--ease);
}

@keyframes mv-enter { from { opacity: 0; transform: translateY(16px) scale(0.98); } }

.mv-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 8;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.62);
  color: rgba(255, 255, 255, 0.82);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease), background 0.18s var(--ease);
}

.mv-close:hover { color: #fff; border-color: rgba(255, 255, 255, 0.5); background: rgba(0, 0, 0, 0.8); }
.mv-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mv-close svg { width: 15px; height: 15px; }

/* ── Stage, shots, camera ───────────────────────────────── */

.mv-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  display: grid;
  align-items: stretch;
  overflow: hidden;
  background: #080b0f;
  cursor: pointer; /* the whole stage is the pause/play control */
}

.mv-shot-layer { position: absolute; inset: 0; display: grid; }

/* Shots stack in one grid cell so scene changes crossfade like an edit. */
.mv-shot {
  grid-area: 1 / 1;
  position: relative;
  display: grid;
  align-items: stretch;
  animation: mv-shot-in 0.5s var(--ease);
}

.mv-shot.is-leaving { pointer-events: none; animation: mv-shot-out 0.45s var(--ease) forwards; }

@keyframes mv-shot-in { from { opacity: 0; transform: translateY(12px) scale(0.985); } }
@keyframes mv-shot-out { to { opacity: 0; transform: translateY(-8px) scale(0.99); } }

.mv-browser {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  /* The camera never sits still: a slow push-in over the life of the shot. */
  animation: mv-zoom 14s linear forwards;
}

@keyframes mv-zoom { to { transform: scale(1.015); } }

/* Product chrome inside scenes, echoing the real topbar and chat header. */
.mv-appbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
}

.mv-appbrand { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; letter-spacing: -0.02em; }
.mv-appbrand svg { width: 22px; height: 22px; }
.mv-appbar-right { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.mv-fakebtn { pointer-events: none; font-size: 12.5px; padding: 7px 13px; }

.mv-chathead {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
}

.mv-chathead .demo-avatar { width: 28px; height: 28px; }
.mv-chathead .demo-avatar svg { width: 16px; height: 16px; }

.mv-chathead-name { flex: 1; display: flex; flex-direction: column; font-size: 14.5px; font-weight: 600; line-height: 1.25; }
.mv-chathead-name small { font-size: 12px; font-weight: 400; color: var(--subtle); }

.mv-body { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 26px; gap: 12px; }

.mv-form { display: flex; flex-direction: column; gap: 11px; max-width: 430px; margin: 0 auto; width: 100%; }
.mv-form-title { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 4px; }
.mv-label { font-size: 12.5px; font-weight: 500; color: var(--subtle); }

.mv-field {
  display: flex;
  align-items: center;
  min-height: 46px;
  font-size: 15px;
  color: var(--text);
  background: var(--bg-raised);
  border: 1px solid var(--line-hi);
  border-radius: 12px;
  padding: 11px 14px;
}

.mv-create-btn { align-self: flex-start; margin-top: 8px; pointer-events: none; transition: transform 0.15s var(--ease), opacity 0.15s; }
.mv-create-btn.is-pressed { transform: scale(0.95); opacity: 0.85; }

.mv-rise { animation: rise 0.35s var(--ease); }
.mv-pop { animation: mv-pop 0.3s var(--ease); }
@keyframes mv-pop { from { transform: scale(0.4); opacity: 0; } }

.mv-sharebox {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 17px;
  border: 1px solid var(--line-hi);
  border-radius: var(--r-md);
  background: var(--bg-raised);
}

.mv-sharebox > svg { width: 15px; height: 15px; color: var(--subtle); flex: none; }
.mv-sharebox .mini-link-url { font-size: 14px; }
.mv-hint { font-size: 13px; color: var(--subtle); }

.mv-thread {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  padding: 18px 20px 6px;
  min-height: 230px;
}

.mv-thread .demo-msg { font-size: 14px; }
.mv-inputbar { margin: 6px 18px 18px; }

/* The cursor actor: glides on a transform transition, clicks with a ripple. */
.mv-cursor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  width: 20px;
  height: 20px;
  color: var(--text);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
  transition: transform 0.65s cubic-bezier(0.3, 0.9, 0.3, 1);
  pointer-events: none;
}

.mv-cursor svg { width: 100%; height: 100%; }

.mv-cursor::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: 0;
}

.mv-cursor.is-click::after { animation: mv-click 0.4s var(--ease); }
@keyframes mv-click { 0% { transform: scale(0.4); opacity: 0.8; } 100% { transform: scale(1.2); opacity: 0; } }

/* People: gradient avatars with initials, and colored file-type badges. */
.mv-person {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  flex: none;
}

.mv-person--lg { width: 32px; height: 32px; font-size: 13px; }

.mv-user-row { display: flex; align-items: flex-end; justify-content: flex-end; gap: 8px; max-width: 90%; align-self: flex-end; animation: rise 0.3s var(--ease); }
.mv-user-row .demo-msg { animation: none; }

.mv-filebadge {
  min-width: 34px;
  padding: 4px 6px;
  border-radius: 7px;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
  flex: none;
}

.mv-file-row {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--bg-raised);
  font-size: 13.5px;
}

.mv-faces { display: inline-flex; margin-bottom: 4px; }
.mv-faces .mv-person { margin-left: -8px; }
.mv-faces .mv-person:first-child { margin-left: 0; }

/* Audience montage */
.mv-cases { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.mv-case-swap { animation: mv-scene 0.45s var(--ease); }
@keyframes mv-scene { from { opacity: 0; transform: translateY(10px); } }

.mv-kicker { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.mv-case-line { font-size: clamp(21px, 3vw, 28px); font-weight: 600; letter-spacing: -0.02em; }

/* Outro */
.mv-outro { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; animation: mv-scene 0.45s var(--ease); }
.mv-outro-logo svg { width: 48px; height: 48px; }
.mv-outro-title { font-size: clamp(26px, 3.8vw, 36px); font-weight: 600; letter-spacing: -0.03em; }
.mv-outro-title em { font-family: var(--font-display); font-style: italic; font-weight: 400; color: var(--accent); }

/* ── Pause / play ───────────────────────────────────────── */

/* Clicking the stage toggles pause; while paused, every animation in the
   frame freezes and a video-player play button sits over the dimmed stage. */
.mv-frame.is-paused .mv-stage * { animation-play-state: paused !important; }

.mv-frame.is-paused .mv-stage { opacity: 0.55; }

.mv-veil {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: none;
  place-items: center;
  cursor: pointer;
}

.mv-frame.is-paused .mv-veil { display: grid; }

.mv-veil-btn {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-lg);
  animation: mv-pop 0.25s var(--ease);
}

.mv-veil-btn svg { width: 30px; height: 30px; margin-left: 4px; }

/* ── YouTube-style controls and captions ───────────────── */

/* Chrome stays out of the picture: close button and control bar appear only
   on hover, keyboard focus, or while paused (which is how touch users reach
   them, since tapping the stage pauses). Captions are content, so they stay. */
.mv-close, .mv-controls { opacity: 0; pointer-events: none; transition: opacity 0.25s var(--ease); }

.mv-frame:hover .mv-close, .mv-frame:hover .mv-controls,
.mv-frame:focus-within .mv-close, .mv-frame:focus-within .mv-controls,
.mv-frame.is-paused .mv-close, .mv-frame.is-paused .mv-controls { opacity: 1; pointer-events: auto; }

.mv-controls {
  position: absolute;
  z-index: 5;
  inset: auto 0 0;
  padding: 34px 16px 10px;
  color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.82));
  cursor: default;
}

.mv-timeline {
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
}

.mv-timeline-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #f03;
}

.mv-control-row { display: flex; align-items: center; gap: 8px; min-height: 34px; padding-top: 5px; }

.mv-control-btn {
  width: 32px;
  height: 32px;
  border: 0;
  padding: 6px;
  display: grid;
  place-items: center;
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.mv-control-btn svg, .mv-control-icon svg { width: 20px; height: 20px; }
.mv-control-icon { width: 28px; display: grid; place-items: center; opacity: 0.9; }
.mv-time, .mv-time-sep { font: 500 12px/1 var(--font-mono); color: rgba(255, 255, 255, 0.88); }
.mv-time-sep { margin-inline: -4px; color: rgba(255, 255, 255, 0.55); }
.mv-control-spacer { flex: 1; }
.mv-cc { padding: 2px 4px; border: 1.5px solid currentColor; border-radius: 3px; font: 700 10px/1 sans-serif; }

.mv-caption {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 68px;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(82%, 700px);
  padding: 6px 10px 7px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.78);
  text-align: center;
  font-size: clamp(15px, 2vw, 21px);
  font-weight: 500;
  line-height: 1.3;
  color: #fff;
  text-wrap: balance;
  text-shadow: 0 1px 2px #000;
  pointer-events: none;
}

.mv-caption.is-changing { animation: mv-caption-in 0.16s ease-out; }
@keyframes mv-caption-in { from { opacity: 0; transform: translate(-50%, 4px); } }

@media (max-width: 640px) {
  .mv-overlay { padding: 8px; }
  .mv-frame { width: 100%; }
  /* A 16:9 stage on a portrait phone is ~200px tall and crops the scenes.
     The scenes are product UI, which is vertical by nature: let the stage
     stand tall instead and everything fits. */
  .mv-stage { aspect-ratio: auto; height: min(78dvh, 620px); }
  .mv-body { padding: 14px; }
  .mv-form-title { font-size: 16px; }
  .mv-field { min-height: 40px; font-size: 14px; }
  .mv-thread { min-height: 150px; padding: 12px 12px 4px; }
  .mv-appbar { padding: 10px 12px; }
  .mv-appbar .mv-fakebtn { font-size: 11px; padding: 5px 9px; }
  .mv-caption { bottom: 58px; max-width: 90%; font-size: 13px; }
  .mv-controls { padding: 24px 9px 5px; }
  .mv-control-icon { display: none; }
  .mv-time, .mv-time-sep { font-size: 10px; }
}