/* ============================================================================
   VeiMester product trailer — app/trailer.js. Ten seconds, four beats, looped.

   TWO LAYOUTS, not one scaled picture.  The stage is a fixed coordinate space
   scaled by a single transform, which is what keeps it resolution-independent —
   but one 1000-wide space scaled to a 360 px phone renders 24 px type at 8 px,
   i.e. a damaged screenshot.  So there are two spaces, `.vt--w` (1000x900,
   browser + phone) and `.vt--n` (560x860, one device, denser type), and
   trailer.js swaps between them on the HOST's width, not the viewport's — the
   trailer has to react to its column, which in a hero is half the page.
   ========================================================================== */

/* The only two tokens the trailer invents: the word already spoken by the
   read-aloud, and the word being spoken. Flat rgba rather than color-mix because
   they are written per word, seventeen times a beat, twice over (card + handset).
   Everything else comes off :root in styles.css. */
.vt { --vt-hl: rgba(200,16,46,.13); --vt-hl2: rgba(200,16,46,.26); }
:root[data-theme="dark"] .vt { --vt-hl: rgba(255,90,110,.16); --vt-hl2: rgba(255,90,110,.32); }

/* ---------------------------------------------------------------- the stage */
.vt {
  position: relative; width: 100%;
  font-family: var(--font); color: var(--text);
  overflow: hidden; border-radius: var(--r-2xl);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
/* width/height/aspect-ratio are written by trailer.js, because which coordinate
   space is live is a JS decision (it reads the host's box, not a media query). */
.vt-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; transform: scale(var(--vt-k, 1)); }

/* ---------------------------------------------------------------- backdrop */
.vt-amb { position: absolute; inset: -10%; pointer-events: none; }
.vt-amb i { position: absolute; display: block; border-radius: 50%; filter: blur(70px); }
.vt-amb .a1 { width: 620px; height: 620px; left: -80px;  top: -140px; background: var(--amb-1); }
.vt-amb .a2 { width: 560px; height: 560px; right: -120px; top: 40px;  background: var(--amb-2); }
.vt-amb .a3 { width: 520px; height: 520px; left: 220px;  bottom: -220px; background: var(--amb-3); }

/* The road ribbon: the logo's own motif (a road curving up, dashed centre line)
   used as the trailer's connective tissue. It is the only element that never
   stops moving, so the loop never feels like four slides. */
.vt-road { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }

/* ---------------------------------------------------------------- device */
.vt-frame {
  position: absolute; border-radius: 26px; background: var(--surface);
  box-shadow: var(--e4); border: 1px solid var(--border);
  transform-origin: 50% 50%;
}
/* The lit top edge does the same job here it does on every card in the app. */
.vt-frame::after {
  content: ""; position: absolute; inset: 0; border-radius: 26px;
  box-shadow: var(--hairline); pointer-events: none;
}
/* Browser chrome: three dots and an address pill. Cheap, and it is what tells
   the viewer in one glance that this is the real site and not an illustration. */
.vt-chrome {
  position: absolute; left: 0; right: 0; top: 0; height: 42px;
  display: flex; align-items: center; gap: 7px; padding: 0 16px;
  border-bottom: 1px solid var(--border);
}
.vt-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border); }
.vt-url {
  margin-left: 10px; height: 23px; flex: 1; border-radius: var(--r-pill);
  background: var(--surface-2); display: flex; align-items: center;
  padding: 0 10px; gap: 6px; font-size: 11px; font-weight: 600; color: var(--muted);
}
.vt-url b { font-weight: 700; color: var(--text); }

.vt-screens { position: absolute; left: 0; right: 0; top: 42px; bottom: 0; overflow: hidden; border-radius: 0 0 25px 25px; }
.vt-scr { position: absolute; inset: 0; padding: 22px 26px; opacity: 0; will-change: transform, opacity; }

/* The cut: a soft diagonal sheen at the road's angle, 300 ms, under which the
   two screens swap. See the opacity note in trailer.js — this is what makes a
   hard swap read as a cut with a hand on it rather than a dropped frame. */
.vt-wipe {
  position: absolute; inset: -20% -60%; pointer-events: none; opacity: 0;
  background: linear-gradient(104deg,
    transparent 38%,
    color-mix(in srgb, var(--brand) 16%, transparent) 47%,
    color-mix(in srgb, var(--brand-2) 26%, transparent) 50%,
    color-mix(in srgb, var(--brand) 16%, transparent) 53%,
    transparent 62%);
}

/* ---------------------------------------------------------------- in-screen UI */
.vt-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted);
}
.vt-eyebrow .vt-pill {
  padding: 3px 9px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  color: var(--brand); letter-spacing: .07em;
}
.vt-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vt-timer { font-size: 12px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

.vt-pbar { height: 7px; border-radius: var(--r-pill); background: var(--surface-2); margin: 12px 0 0; overflow: hidden; }
.vt-pbar i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--grad-ui); }

/* The question's own photograph. qIllustration() in main.js shows this INSTEAD
   of a drawn scene when a question ships one, because the picture *is* the
   situation the stem asks about. */
.vt-photo {
  margin-top: 12px; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--border); background: var(--surface-2);
}
.vt-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

.vt-q { font-size: 24px; font-weight: 700; line-height: 1.32; margin: 12px 0 12px; letter-spacing: -.01em; }
.vt-q--sm { font-size: 22px; margin: 0 0 14px; }

.vt-opts { display: grid; gap: 8px; position: relative; }
.vt-opt {
  display: flex; gap: 12px; align-items: center;
  padding: 11px 14px; border: 2px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); box-shadow: var(--hairline), var(--e1);
  font-size: 16px; font-weight: 550; line-height: 1.25;
  will-change: transform, opacity;
}
.vt-opt .k {
  flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--surface-2);
  display: grid; place-items: center; font-weight: 800; font-size: 13px;
}
.vt-opt .k svg { width: 15px; height: 15px; }
/* Selected / correct reproduce the app's rings exactly — a halo added to the
   elevation the option already had, never a new box-shadow that drops it. */
.vt-opt.is-sel { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, var(--surface)); }
.vt-opt.is-sel .k { background: var(--brand); color: #fff; }
.vt-opt.is-ok  { border-color: var(--ok); background: var(--ok-bg); }
.vt-opt.is-ok .k { background: var(--ok); color: #fff; }

/* The tap: a ring that expands and fades where a finger would land. */
.vt-tap {
  position: absolute; width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border-radius: 50%; border: 2.5px solid var(--brand); opacity: 0; pointer-events: none;
}

.vt-explain {
  margin-top: 12px; padding: 12px 15px; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: 14.5px; line-height: 1.45;
}
.vt-explain-wrap { overflow: hidden; height: 0; }
.vt-explain .tag { color: var(--ok-ink); font-weight: 800; }
.vt-explain .src { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); }

/* ---- beat 2: the sign drill ----
   Stacked, not side-by-side: 138.2 is a wide St Andrew's cross, and the thing a
   learner has to see is the SECOND bar. Shrunk into a column beside four answers
   it stops being legible, which is the one thing a sign drill cannot afford. */
.vt-signbox {
  margin: 22px auto 0; width: 360px; height: 240px; border-radius: var(--r-xl);
  background: var(--surface-2); border: 1px solid var(--border);
  display: grid; place-items: center; will-change: transform;
}
.vt-signbox svg { width: 280px; height: 240px; }
.vt-signq { text-align: center; font-size: 21px; font-weight: 700; margin: 22px 0 16px; letter-spacing: -.01em; }
.vt-signname { margin-top: 18px; font-size: 13.5px; font-weight: 600; color: var(--muted); text-align: center; }
.vt-signname b { color: var(--text); font-weight: 750; }

/* ---- beat 3: the course reader + read-aloud ---- */
.vt-lesson { font-size: 27px; font-weight: 750; letter-spacing: -.015em; margin: 16px 0 12px; }
.vt-prose { font-size: 16.5px; line-height: 1.66; margin: 0; }
/* One span per word. tts.js marks the sentence it is speaking; word-by-word is
   the only honest way to show that in a silent loop, and unlike one long span it
   survives the sentence wrapping across three lines. */
.vt-prose .w { border-radius: 4px; padding: 2px 4px; margin: 0 -2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.vt-src { margin-top: 10px; font-size: 12px; color: var(--muted); }
.vt-figure {
  margin-top: 14px; height: 290px; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--border); background: var(--surface-2);
}
.vt-figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vt-audio {
  margin-top: 14px; display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--hairline), var(--e1);
}
.vt-play { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--grad-ui); display: grid; place-items: center; }
.vt-play svg { width: 14px; height: 14px; fill: #fff; margin-left: 2px; }
.vt-wave { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 3px; height: 26px; }
.vt-wave i { flex: none; width: 5px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--brand) 38%, transparent); min-height: 3px; }
.vt-lang { flex: none; display: flex; border: 1px solid var(--border); border-radius: var(--r-pill); overflow: hidden; font-size: 11px; font-weight: 800; }
.vt-lang span { padding: 4px 9px; color: var(--muted); }
.vt-lang span.on { background: var(--grad-ui); color: #fff; }

/* ---- beat 4: the dashboard ---- */
.vt-prog { display: flex; gap: 32px; align-items: center; margin-top: 30px; }
.vt-ring { flex: none; position: relative; width: 206px; height: 206px; }
.vt-ring svg { width: 206px; height: 206px; transform: rotate(-90deg); }
.vt-ring .val { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.vt-ring .num { font-size: 48px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.05; }
.vt-ring .cap { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }
.vt-bars { flex: 1; display: grid; gap: 16px; min-width: 0; }
.vt-bar { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; font-size: 14px; font-weight: 650; }
.vt-bar .pct { color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 700; }
.vt-bar .track { grid-column: 1 / -1; height: 10px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.vt-bar .track i { display: block; height: 100%; border-radius: var(--r-pill); }
/* "What to do today" — the one action the dashboard offers, straight off
   todayCard() in main.js. A progress screen that only reports is a chart; this
   row is what makes it a coach. */
.vt-today {
  margin-top: 30px; display: flex; align-items: center; gap: 13px;
  padding: 15px 17px; border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--blue) 7%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--blue) 22%, transparent);
}
.vt-today .ic { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--blue); display: grid; place-items: center; }
.vt-today .ic svg { width: 17px; height: 17px; stroke: #fff; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.vt-today b { display: block; font-size: 14.5px; font-weight: 800; }
.vt-today span { display: block; font-size: 13px; color: var(--muted); font-weight: 600; }
.vt-verdict {
  margin-top: 22px; display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 18px; border-radius: var(--r-pill);
  background: var(--ok-bg); color: var(--ok-ink); font-size: 14px; font-weight: 800;
}
.vt-verdict svg { width: 16px; height: 16px; }

/* ---------------------------------------------------------------- the phone
   Second device, so "fungerer på alle enheter" is shown rather than claimed —
   and it plays THE SAME FOUR BEATS as the browser card. It used to hold a fixed
   ring and a streak chip that never moved, which made the one thing in frame
   labelled "mobile" the one thing that was a still image.
   Its screen is a clip box around its own 320-unit coordinate space, scaled by
   --vt-pk, carrying `vt--n` so the narrow layout's type applies inside it
   whatever the host is doing. Nothing about the beats is duplicated. */
.vt-phone {
  position: absolute; border-radius: 32px; background: var(--surface);
  border: 1px solid var(--border); box-shadow: var(--e4); overflow: hidden;
}
.vt-phone::after { content: ""; position: absolute; inset: 0; border-radius: 32px; box-shadow: var(--hairline); pointer-events: none; z-index: 2; }
.vt-notch { position: absolute; left: 50%; transform: translateX(-50%); top: 14px; width: 56px; height: 5px; border-radius: var(--r-pill); background: var(--border); z-index: 2; }
.vt-pbody { position: absolute; overflow: hidden; background: var(--surface); border-radius: 14px; }
.vt-pstage {
  position: absolute; left: 0; top: 0; width: 320px; height: 760px;
  transform-origin: 0 0; transform: scale(var(--vt-pk, .58));
}
/* No browser chrome on the phone — the screens fill it from the top. */
.vt-pstage .vt-scr { padding: 16px 17px; }
/* A phone screen is TALLER relative to its width than the narrow card is, so the
   beats tuned for that card left a quarter of the phone blank underneath them.
   Each beat's one elastic element — the photo, the sign plate, the figure, the
   ring — takes that room, rather than leaving the mockup looking half-loaded.
   Everything else stays exactly as the narrow layout has it. */
.vt-pstage .vt-photo { height: 142px; }
.vt-pstage .vt-signbox { width: 286px; height: 246px; margin-top: 22px; }
.vt-pstage .vt-signbox svg { width: 252px; height: 246px; }
.vt-pstage .vt-signq { margin: 24px 0 16px; }
.vt-pstage .vt-signname { margin-top: 20px; }
.vt-pstage .vt-lesson { margin: 16px 0 12px; }
.vt-pstage .vt-figure { height: 306px; }
.vt-pstage .vt-ring { width: 172px; height: 172px; }
.vt-pstage .vt-ring svg { width: 172px; height: 172px; }
.vt-pstage .vt-ring .num { font-size: 40px; }
.vt-pstage .vt-bars { gap: 14px; }
.vt-pstage .vt-today { margin-top: 20px; }

/* ---------------------------------------------------------------- captions */
.vt-caps { position: absolute; height: 48px; }
.vt-cap {
  position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 18px 11px 13px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--hairline), var(--e2);
  font-size: 16px; font-weight: 750; letter-spacing: -.01em; white-space: nowrap;
  will-change: transform, opacity;
}
.vt-cap .ic { width: 28px; height: 28px; border-radius: 50%; background: var(--grad-ui); display: grid; place-items: center; flex: none; }
.vt-cap .ic svg { width: 16px; height: 16px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------- brand mark */
.vt-mark { position: absolute; display: flex; align-items: center; gap: 14px; }
.vt-mark img { height: 34px; width: auto; display: block; }
.vt-mark span {
  font-size: 13.5px; font-weight: 650; color: var(--muted);
  padding-left: 14px; border-left: 1px solid var(--border);
}

/* The question photograph is the one box whose height differs per layout and is
   not implied by its content — object-fit does the cropping either way. */
.vt--w .vt-photo { height: 160px; }

/* Markless: in a hero the page already carries the logo in the topbar and the
   headline right beside this, so a second lockup reads as an advert pasted into
   the page. Dropping it frees the strip, which the composition takes as
   breathing room rather than leaving as a hole. */
.vt--nomark .vt-mark { display: none; }
.vt--nomark.vt--w .vt-caps  { top: 46px; }
.vt--nomark.vt--w .vt-frame { top: 112px; }
.vt--nomark.vt--w .vt-phone { top: 286px; }
.vt--nomark.vt--n .vt-caps  { top: 26px; }
.vt--nomark.vt--n .vt-frame { top: 84px; }

/* ============================================================ WIDE (1000x900) */
.vt--w .vt-caps  { left: 44px; top: 30px; width: 660px; }
.vt--w .vt-frame { left: 44px; top: 96px; width: 668px; height: 690px; }
.vt--w .vt-phone { left: 696px; top: 258px; width: 244px; height: 470px; }
.vt--w .vt-pbody { left: 15px; right: 15px; top: 34px; bottom: 15px; }
.vt--w .vt-mark  { left: 44px; top: 826px; }

/* =========================================================== NARROW (560x860)
   The SAME SCENE, turned portrait — not a stripped-down one. The first attempt
   dropped the phone and let the browser card go full-bleed, and the result read
   as a screenshot of a web page rather than a frame of a trailer: with no
   backdrop, no road and no second device showing around it, nothing said
   "composed shot". So the card keeps generous margins here too, the phone comes
   back at the bottom-right corner, and every element the wide layout carries —
   today's task, the source line — is carried here as well. Only the geometry
   changes. */
.vt--n .vt-caps  { left: 16px; top: 12px; width: 528px; height: 42px; }
.vt--n .vt-frame { left: 16px; top: 66px; width: 384px; height: 648px; }
.vt--n .vt-phone { left: 382px; top: 404px; width: 166px; height: 330px; border-radius: 26px; }
.vt--n .vt-phone::after { border-radius: 26px; }
.vt--n .vt-notch { top: 10px; width: 42px; height: 4px; }
.vt--n .vt-pbody { left: 10px; right: 10px; top: 24px; bottom: 10px; border-radius: 10px; }
.vt--n .vt-mark  { left: 16px; top: 772px; gap: 11px; }
.vt--n .vt-mark img { height: 26px; }
.vt--n .vt-mark span { font-size: 11px; padding-left: 11px; }

.vt--n .vt-cap { font-size: 13.5px; padding: 9px 15px 9px 9px; gap: 8px; }
.vt--n .vt-cap .ic { width: 23px; height: 23px; }
.vt--n .vt-cap .ic svg { width: 13px; height: 13px; }

/* Mobile browser chrome is an address bar, not three traffic-light dots. */
.vt--n .vt-dot { display: none; }
.vt--n .vt-url { margin-left: 0; justify-content: center; font-size: 10px; }
.vt--n .vt-chrome { height: 38px; padding: 0 12px; }
.vt--n .vt-screens { top: 38px; }
.vt--n .vt-scr { padding: 18px 22px; }

.vt--n .vt-eyebrow { font-size: 9.5px; gap: 5px; letter-spacing: .07em; }
.vt--n .vt-eyebrow .vt-pill { padding: 2px 7px; }
.vt--n .vt-timer { font-size: 9.5px; }
.vt--n .vt-pbar { height: 6px; margin-top: 10px; }
.vt--n .vt-q { font-size: 20px; margin: 10px 0 10px; }
.vt--n .vt-opt { font-size: 14px; padding: 9px 11px; gap: 9px; border-width: 1.5px; }
.vt--n .vt-opt .k { width: 22px; height: 22px; font-size: 11px; border-radius: 7px; }
.vt--n .vt-opts { gap: 7px; }
.vt--n .vt-explain { font-size: 12px; padding: 10px 12px; margin-top: 11px; line-height: 1.42; }
.vt--n .vt-explain .src { font-size: 9.5px; margin-top: 5px; }
.vt--n .vt-photo { height: 104px; margin-top: 10px; }

.vt--n .vt-signbox { width: 250px; height: 186px; margin-top: 18px; border-radius: var(--r-lg); }
.vt--n .vt-signbox svg { width: 216px; height: 186px; }
.vt--n .vt-signq { font-size: 16.5px; margin: 18px 0 12px; }
.vt--n .vt-signname { font-size: 10.5px; margin-top: 14px; }

.vt--n .vt-lesson { font-size: 21px; margin: 12px 0 9px; }
.vt--n .vt-prose { font-size: 13.5px; line-height: 1.6; }
.vt--n .vt-prose .w { padding: 1px 3px; margin: 0 -1.5px; }
.vt--n .vt-figure { height: 200px; margin-top: 13px; }
.vt--n .vt-audio { margin-top: 13px; padding: 8px 11px; gap: 8px; }
.vt--n .vt-play { width: 27px; height: 27px; }
.vt--n .vt-play svg { width: 11px; height: 11px; }
.vt--n .vt-wave { height: 19px; gap: 2px; }
.vt--n .vt-wave i { width: 4px; }
.vt--n .vt-lang { font-size: 9px; }
.vt--n .vt-lang span { padding: 3px 7px; }
.vt--n .vt-src { font-size: 9.5px; margin-top: 12px; }

/* The ring cannot sit beside seven bars in a 360 px column, so it sits above
   them and the bars take the full width. Same rows, same numbers, same task
   card as the wide layout — only the axis changes. */
.vt--n .vt-prog { flex-direction: column; gap: 14px; align-items: stretch; margin-top: 14px; }
.vt--n .vt-ring { width: 140px; height: 140px; margin: 0 auto; }
.vt--n .vt-ring svg { width: 140px; height: 140px; }
.vt--n .vt-ring .num { font-size: 33px; }
.vt--n .vt-ring .cap { font-size: 9px; }
.vt--n .vt-bars { gap: 10px; }
.vt--n .vt-bar { font-size: 11.5px; gap: 3px 8px; }
.vt--n .vt-bar .track { height: 8px; }
.vt--n .vt-today { margin-top: 16px; padding: 10px 11px; gap: 9px; border-radius: var(--r-md); }
.vt--n .vt-today .ic { width: 26px; height: 26px; }
.vt--n .vt-today .ic svg { width: 13px; height: 13px; }
.vt--n .vt-today b { font-size: 11.5px; }
.vt--n .vt-today span { font-size: 10.5px; line-height: 1.35; }
.vt--n .vt-verdict { margin-top: 14px; font-size: 11.5px; padding: 8px 14px; gap: 7px; }
.vt--n .vt-verdict svg { width: 13px; height: 13px; }


/* ---------------------------------------------------------------- a11y
   A reader who has asked for less motion gets one complete, legible product
   shot and nothing that moves; trailer.js holds the frame, this stops the road. */
@media (prefers-reduced-motion: reduce) {
  .vt-dash { animation: none !important; }
}

/* ================================================== FILM (no handset, no mark)
   The composition used under "Et innblikk", where the handset beside the trailer
   is showcase.js's real one (.dev-cluster--wide). Dropping the trailer's own
   phone frees the right third, so the browser card takes the whole stage and the
   stage itself gets narrower — which is what makes the type bigger in the same
   column rather than merely wider. */
.vt--np .vt-phone { display: none; }
.vt--np.vt--w .vt-caps  { left: 44px; top: 30px; width: 660px; }
.vt--np.vt--w .vt-frame { left: 44px; top: 96px; width: 672px; height: 704px; }
.vt--np.vt--n .vt-caps  { left: 16px; top: 14px; width: 528px; }
.vt--np.vt--n .vt-frame { left: 16px; top: 62px; width: 528px; height: 656px; }