/* Animated product-overview "video" (src/views/marketing/video.ejs, driven by public/js/video.js).
   It is a real self-playing presentation rather than an <video> file: everything is DOM + CSS
   animation, so it stays crisp at any size, needs no hosting/encoding pipeline, and can be edited
   by changing copy in the template instead of re-cutting a video.

   All styling lives here rather than in a <style> block because the app's CSP sets
   style-src 'self' with no 'unsafe-inline' (see middleware/security.js) - an inline <style> block
   would simply be dropped by the browser and the whole thing would render unstyled. Same reason
   there are no style="" attributes in the template: style-src-attr is 'none'. Values that genuinely
   must be dynamic (the progress bar width, the auto-fit scale) are set from JS via CSSOM, which CSP
   does not govern.

   ── Sizing works in two layers ──────────────────────────────────────────────────────────────────
   1. SCALE. Every dimension inside the stage is a multiple of --u, and --u is 1cqw: one percent of
      the stage's OWN width. An earlier version used vw (viewport width), which was a real bug: the
      stage is capped at max-width:1080px, so past a ~1100px window the viewport kept growing while
      the stage did not, type sailed past the edges of a box that had stopped growing, and
      overflow:hidden ate it. Sizing off the container instead makes each scene a uniform zoom of one
      fixed layout - fits at one stage width => fits at every stage width, at any window size or zoom.

   2. FIT. Layer 1 guarantees proportions, not that the content was ever the right size to begin
      with. Type here is deliberately large, and copy gets edited, so video.js measures each scene
      against the stage and applies a downward scale to any that would overflow (see fitScenes()).
      That is what makes the type sizes below safe to raise: the worst case is a scene rendering
      slightly smaller on a cramped screen, never a scene getting clipped. */

.vid-page { max-width: 1080px; margin: 0 auto; padding: 40px 48px 72px; }

.vid-heading { text-align: center; margin-bottom: 28px; }
.vid-heading h1 { font-size: 34px; margin: 0 0 10px; color: var(--text); }
.vid-heading p { color: var(--muted); font-size: 16px; margin: 0; }

.vid-stage {
  position: relative;
  margin: 0 auto;
  /* Constrained by BOTH axes. Width normally fills the column, but never so wide that the 16:9 box
     would run past the bottom of the window - otherwise on a short/laptop window the closing half
     of every scene sits below the fold. ~260px is the page chrome above and below the stage (nav,
     heading, controls, padding). The 600px floor stops a very short window from shrinking the stage
     into something unreadable; scrolling a little is the better trade at that point.
     The svh line is a progressive upgrade for mobile browsers whose toolbars change 100vh mid-scroll
     - browsers that don't know svh simply keep the vh line above it. */
  width: min(100%, max(600px, calc((100vh - 260px) * 16 / 9)));
  width: min(100%, max(600px, calc((100svh - 260px) * 16 / 9)));
  aspect-ratio: 16 / 9;
  background: linear-gradient(160deg, #2a1a40 0%, #150e1f 65%);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  /* Fallback for browsers without container queries: a static approximation of 1cqw at the 1080px
     reference width. Everything still renders sensibly, it just stops being fluid. */
  --u: 10.8px;
}

@supports (container-type: inline-size) {
  .vid-stage {
    container-type: inline-size;
    --u: 1cqw;
  }
}

.vid-scene {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: calc(0.8 * var(--u));
  padding: 4%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease;
  /* Set by video.js's fitScenes() when a scene would otherwise overflow; 1 means "fits as authored".
     Scaling about the centre keeps the composition centred as it shrinks. */
  transform: scale(var(--fit, 1));
}
.vid-scene.is-active { opacity: 1; visibility: visible; }

.vid-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: calc(1.4 * var(--u));
  font-weight: 700;
  color: var(--brand);
  margin-bottom: calc(1.4 * var(--u));
}
.vid-headline {
  font-size: calc(4.1 * var(--u));
  line-height: 1.18;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 calc(1.2 * var(--u));
  max-width: 88%;
}
.vid-sub {
  font-size: calc(1.85 * var(--u));
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
  max-width: 72%;
}
.vid-accent { color: var(--brand); }

/* Elements only animate once their scene becomes active, so a scene that is still queued up isn't
   silently burning through its entrance animation off-screen and arriving already finished. */
.vid-scene.is-active .vid-rise { animation: vidRise 0.65s cubic-bezier(0.22, 1, 0.36, 1) both; }
.vid-scene.is-active .vid-fade { animation: vidFade 0.7s ease both; }
.vid-scene.is-active .vid-pop { animation: vidPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; }

.vid-d1 { animation-delay: 0.15s; }
.vid-d2 { animation-delay: 0.3s; }
.vid-d3 { animation-delay: 0.45s; }
.vid-d4 { animation-delay: 0.6s; }
.vid-d5 { animation-delay: 0.75s; }
.vid-d6 { animation-delay: 0.9s; }
.vid-d7 { animation-delay: 1.05s; }
.vid-d8 { animation-delay: 1.2s; }

@keyframes vidRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes vidFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes vidPop { from { opacity: 0; transform: scale(0.82); } to { opacity: 1; transform: none; } }

/* --- Scene 2: the mess it replaces ---------------------------------------------------------- */
.vid-mess { display: flex; gap: calc(1.2 * var(--u)); flex-wrap: wrap; justify-content: center; max-width: 84%; }
.vid-mess-item {
  background: rgba(229, 103, 94, 0.09);
  border: 1px solid rgba(229, 103, 94, 0.4);
  color: #f0a9a3;
  border-radius: 8px;
  padding: calc(0.85 * var(--u)) calc(1.25 * var(--u));
  font-size: calc(1.55 * var(--u));
}

/* --- Scene 4: the two campaign types --------------------------------------------------------- */
.vid-split { display: flex; gap: calc(1.8 * var(--u)); width: 84%; }
.vid-split-card {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: calc(1.7 * var(--u));
  text-align: left;
}
.vid-split-card h3 { font-size: calc(2 * var(--u)); margin: 0 0 calc(0.7 * var(--u)); color: var(--brand); }
.vid-split-card p { font-size: calc(1.45 * var(--u)); line-height: 1.5; color: var(--muted); margin: 0; }

/* --- Scene 5: Snippets multiplying one question into many ------------------------------------ */
.vid-snippet-src {
  background: var(--surface);
  border: 1px solid var(--brand);
  border-radius: 8px;
  padding: calc(1.05 * var(--u)) calc(1.5 * var(--u));
  font-size: calc(1.65 * var(--u));
  color: var(--text);
}
.vid-token { color: var(--brand); font-weight: 700; }
.vid-arrow-down { color: var(--muted); font-size: calc(2.1 * var(--u)); }
.vid-generated { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(0.8 * var(--u)); width: 80%; }
.vid-generated div {
  background: rgba(75, 192, 124, 0.08);
  border: 1px solid rgba(75, 192, 124, 0.35);
  color: #9fe0bb;
  border-radius: 6px;
  padding: calc(0.7 * var(--u)) calc(1 * var(--u));
  font-size: calc(1.35 * var(--u));
  text-align: left;
}

/* --- Scene 6: response types ------------------------------------------------------------------ */
.vid-chips { display: flex; flex-wrap: wrap; gap: calc(0.85 * var(--u)); justify-content: center; max-width: 86%; }
.vid-chip {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: calc(0.65 * var(--u)) calc(1.2 * var(--u));
  font-size: calc(1.4 * var(--u));
  color: var(--text);
}
.vid-chip-brand { border-color: var(--brand); color: var(--brand); }

/* --- Scene 7: targeting ----------------------------------------------------------------------- */
.vid-target { display: flex; align-items: center; gap: calc(1.4 * var(--u)); }
.vid-tag {
  background: rgba(167, 139, 250, 0.12);
  border: 1px solid var(--brand);
  color: var(--brand);
  border-radius: 6px;
  padding: calc(0.7 * var(--u)) calc(1.15 * var(--u));
  font-size: calc(1.55 * var(--u));
  font-weight: 600;
}
.vid-plus { color: var(--muted); font-size: calc(1.85 * var(--u)); }
.vid-target-result {
  font-size: calc(1.6 * var(--u));
  color: var(--muted);
  margin: 0;
}

/* --- Scene 8: consensus converging ------------------------------------------------------------ */
.vid-meter-wrap { width: 62%; }
.vid-meter-row { display: flex; justify-content: space-between; font-size: calc(1.45 * var(--u)); color: var(--muted); margin-bottom: calc(0.7 * var(--u)); }
.vid-meter {
  height: calc(1.35 * var(--u));
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.vid-meter-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-dark), var(--brand));
}
.vid-scene.is-active .vid-meter-fill { animation: vidFill 2.6s cubic-bezier(0.4, 0, 0.2, 1) 0.4s both; }
@keyframes vidFill { from { width: 12%; } to { width: 94%; } }

.vid-rounds { display: flex; gap: calc(0.7 * var(--u)); justify-content: center; flex-wrap: wrap; }
.vid-round {
  font-size: calc(1.3 * var(--u));
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: calc(0.5 * var(--u)) calc(0.9 * var(--u));
}
.vid-round.is-final { border-color: var(--ok); color: var(--ok); }

/* --- Scene 9: API / MCP delivery -------------------------------------------------------------- */
.vid-flow { display: flex; align-items: center; gap: calc(1.2 * var(--u)); flex-wrap: wrap; justify-content: center; }
.vid-node {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: calc(1.1 * var(--u)) calc(1.4 * var(--u));
  font-size: calc(1.45 * var(--u));
  color: var(--text);
  min-width: calc(10 * var(--u));
}
.vid-node-brand { border-color: var(--brand); }
.vid-node small { display: block; color: var(--muted); font-size: calc(1.15 * var(--u)); margin-top: calc(0.3 * var(--u)); }
.vid-arrow { color: var(--brand); font-size: calc(1.95 * var(--u)); }

/* --- Scene 10: onboarding checklist ------------------------------------------------------------ */
.vid-checklist { width: 68%; text-align: left; }
.vid-check-item {
  display: flex;
  align-items: center;
  gap: calc(1 * var(--u));
  padding: calc(0.7 * var(--u)) 0;
  font-size: calc(1.65 * var(--u));
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.vid-check-item:last-child { border-bottom: none; }
.vid-check-mark {
  width: calc(2.5 * var(--u));
  height: calc(2.5 * var(--u));
  min-width: calc(2.5 * var(--u));
  border-radius: 999px;
  background: var(--ok-bg);
  color: var(--ok);
  border: 1px solid var(--ok);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(1.35 * var(--u));
}

/* --- Scene 11: full capability grid ------------------------------------------------------------ */
.vid-cap-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(0.75 * var(--u));
  width: 92%;
}
.vid-cap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: calc(0.8 * var(--u)) calc(0.7 * var(--u));
  font-size: calc(1.2 * var(--u));
  color: var(--text);
  line-height: 1.35;
}

/* --- Final CTA --------------------------------------------------------------------------------- */
.vid-cta-row { display: flex; gap: calc(1 * var(--u)); flex-wrap: wrap; justify-content: center; }
.vid-stage .btn { font-size: calc(1.55 * var(--u)); padding: calc(0.9 * var(--u)) calc(1.9 * var(--u)); }

/* --- Player chrome ------------------------------------------------------------------------------ */
.vid-progress-track {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: rgba(255, 255, 255, 0.09);
  /* Sits on the stage, not inside a scene, so it must not inherit the auto-fit scale. */
  z-index: 2;
}
.vid-progress-bar { height: 100%; width: 0; background: var(--brand); }

.vid-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 18px;
  justify-content: center;
  flex-wrap: wrap;
}
.vid-dots { display: flex; gap: 7px; }
.vid-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border-radius: 999px;
  border: none;
  background: var(--surface-2);
  cursor: pointer;
}
.vid-dot:hover { background: var(--muted); }
.vid-dot.is-active { background: var(--brand); }
.vid-scene-label { color: var(--muted); font-size: 13px; min-width: 190px; text-align: left; }

/* Narrow screens. Uniform zoom alone isn't enough here: a phone-width stage has far less room per
   line, so it needs a taller box and a bigger scale factor, not just a smaller copy of the desktop
   layout. Raising --u rescales everything at once, so almost nothing needs a per-element override -
   only the two densest items, which would still be too small at that scale. The rest of this block
   is layout collapse (multi-column blocks that can't survive the narrower measure), not type. */
@media (max-width: 760px) {
  .vid-page { padding: 28px 20px 52px; }
  .vid-heading h1 { font-size: 25px; }

  .vid-stage {
    /* No viewport-height cap on mobile - vertical scrolling is normal there, and a 3:4 box is what
       actually gives these scenes room to breathe on a phone. */
    width: 100%;
    aspect-ratio: 3 / 4;
    --u: 10.8px;
  }
  @supports (container-type: inline-size) {
    .vid-stage { --u: 1.9cqw; }
  }

  .vid-headline { max-width: 96%; }
  .vid-sub { max-width: 94%; }

  .vid-split { flex-direction: column; width: 94%; }
  .vid-generated { grid-template-columns: 1fr; width: 94%; }
  .vid-mess { max-width: 94%; }
  .vid-chips { max-width: 94%; }
  .vid-checklist { width: 94%; }
  .vid-meter-wrap { width: 90%; }
  .vid-target { flex-wrap: wrap; justify-content: center; }

  .vid-cap-grid { grid-template-columns: repeat(2, 1fr); width: 94%; }
  .vid-cap { font-size: calc(1.45 * var(--u)); }

  .vid-flow { flex-direction: column; gap: calc(0.7 * var(--u)); }
  .vid-node { min-width: 0; }
  .vid-node small { font-size: calc(1.4 * var(--u)); }
  .vid-arrow { transform: rotate(90deg); }

  .vid-scene-label { min-width: 0; text-align: center; }
}

/* Someone who has asked their OS to reduce motion still gets the whole story - every scene still
   advances and every element is still visible - just without the movement. The auto-fit scale is
   deliberately still applied here: it is a layout correction, not an animation. */
@media (prefers-reduced-motion: reduce) {
  .vid-scene { transition: none; }
  .vid-scene.is-active .vid-rise,
  .vid-scene.is-active .vid-fade,
  .vid-scene.is-active .vid-pop,
  .vid-scene.is-active .vid-meter-fill { animation: none; }
  .vid-meter-fill { width: 94%; }
}