/* ==========================================================================
   Rabab Tuner — live app screens
   Three of the app's screens, rebuilt in HTML/CSS and animated by
   assets/js/live.js so visitors can watch the app work: strings coming into
   tune and turning green, the raga profile filling up, and strokes being
   read as Tari or Chap.

   Everything is laid out at the app's own 390 x 844 size and scaled to fit
   whatever phone frame it sits in, so one set of numbers matches the real UI.
   Colours come from the tokens in site.css, which are the app's own.
   ========================================================================== */

.lv {
  position: relative; width: 100%; height: auto; aspect-ratio: 390 / 844; border-radius: 36px;
  overflow: hidden; background: #0F1115;
  /* Safari does not reliably clip a TRANSFORMED descendant against a rounded
     overflow:hidden box. .lv-fixed is transformed, so without this the app
     screen can escape the phone's rounded corners on iOS. The mask forces a
     clipping layer; it is a no-op everywhere else. */
  -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
  isolation: isolate;
}
.phone--sm .lv { border-radius: 28px; }
.lv .lv-poster { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.lv-screen { position: absolute; inset: 0; overflow: hidden; }
.lv-fixed {
  width: 390px; height: 844px; transform-origin: top left;
  transform: scale(var(--lvs, .82));
  font-family: var(--sans); color: #fff; font-size: 14px; line-height: 1.25;
  -webkit-font-smoothing: antialiased;
}

/* Rejected alternative, recorded so nobody retries it: deriving the scale from
   a container query. calc(100cqw / 390) evaluates to a LENGTH, and scale()
   requires a unitless number, so the transform becomes invalid and every screen
   renders unscaled at 390 x 844 — reproducing the exact bug it was meant to
   fix. CSS has no way to divide two lengths into a plain number without
   tan(atan2(...)), which fails to a broken state on older engines. Measuring in
   script and gating on .lv-ready is the safer arrangement. */

/* Progressive enhancement: the still screenshot is what shows without JS, for
   anyone who prefers reduced motion — and, importantly, until the live screen
   has actually been measured and scaled.

   The live layout is 390 x 844 and is shrunk to fit by a transform whose scale
   live.js computes from the frame's width. Until that lands the fallback
   scale(.82) applies: 320px of app screen inside a ~218px phone, so the screen
   draws LARGER than the phone containing it and spills past its edges. Only the
   three live mockups can do this — the others are plain images.

   So the live screen stays hidden until live.js has set the scale and added
   .lv-ready. If the measurement never happens, the visitor sees the still
   screenshot: the correct degraded state, rather than a burst app screen. */
.lv-screen { display: none; }
.js .lv.lv-ready .lv-screen { display: block; }
.js .lv.lv-ready .lv-poster { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  .js .lv-screen { display: none; }
  .js .lv-poster { visibility: visible; }
}

/* ---------- shared app chrome ---------- */
.lv-status { height: 32px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 18px; font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,.85); }
.lv-bar { height: 56px; display: flex; align-items: center; gap: 4px; padding: 0 8px 0 12px; }
.lv-bar h4 { font-family: var(--sans); font-size: 20px; font-weight: 500; letter-spacing: 0; flex: 1; }
.lv-bar .ic { width: 20px; height: 20px; margin: 0 10px; opacity: .9; }
.lv-count { font-size: 13px; font-variant-numeric: tabular-nums; }
.lv-card { background: #14181F; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 14px; }
.lv-eyebrow { font-size: 10px; letter-spacing: 1.2px; font-weight: 800; color: rgba(255,255,255,.38); }
.lv-sub { font-size: 12.5px; color: rgba(255,255,255,.60); line-height: 1.45; }
.lv svg { display: block; }

/* ---------- 1. TUNER ---------- */
.lv-body { position: absolute; top: 88px; left: 0; width: 390px; height: 608px; overflow: hidden; }
.lv-backdrop { position: absolute; inset: 0;
  background:
    radial-gradient(56% 38% at 50% 62%, rgba(232,163,61,.20) 0%, rgba(232,163,61,0) 70%),
    radial-gradient(130% 90% at 50% 38%, #1C222C 0%, #0F1115 76%); }
/* the app's camera: it glides in to the pegbox for headstock strings and
   pulls back out for the Bachi rail, over the app's own 350 ms */
.lv-cam picture { display: contents; }
.lv-cam { position: absolute; inset: 0; transform-origin: 0 0;
  transition: transform .38s cubic-bezier(.4, 0, .2, 1); will-change: transform; }
.lv .lv-instr { position: absolute; left: 0; top: 44px; width: 390px; height: 520px;
  border-radius: 0; object-fit: fill; filter: drop-shadow(0 16px 26px rgba(0,0,0,.5)); }
.lv-ov { position: absolute; inset: 0; width: 390px; height: 608px; }
/* strokes are drawn in screen space, as the app draws them, so zooming
   the camera does not fatten the strings */
.lv-ov path, .lv-ov circle { vector-effect: non-scaling-stroke; }
.lv-ov path, .lv-ov circle { transition: stroke .45s ease, fill .45s ease, stroke-opacity .45s ease, stroke-width .3s ease; }
.lv-tag {
  position: absolute; left: 0; top: 0; font: 800 11px/1 var(--sans); letter-spacing: .3px;
  background: rgba(20,24,31,.72); border-radius: 7px; padding: 3px 5px; white-space: nowrap;
  opacity: 0; transform: scale(.7);
  transition: opacity .35s ease, transform .35s cubic-bezier(.2,1.4,.4,1),
              left .38s cubic-bezier(.4,0,.2,1), top .38s cubic-bezier(.4,0,.2,1);
}
.lv-tag.on { opacity: 1; transform: none; }
.lv-fab { position: absolute; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(22,27,34,.80); border: 1px solid rgba(255,255,255,.24);
  display: grid; place-items: center; }
.lv-fab .dot9 { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--amber); right: -2px; top: -2px; }

/* particle burst on lock */
.lv-burst { transform-box: fill-box; transform-origin: center; }
.lv-burst.fire { animation: lvBurst .55s ease-out; }
@keyframes lvBurst {
  0% { transform: scale(.35); opacity: .95; }
  100% { transform: scale(2.1); opacity: 0; }
}
.lv-ring { animation: lvPulse 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes lvPulse { 0%,100% { transform: scale(1); opacity: .95 } 50% { transform: scale(1.22); opacity: .55 } }

/* HUD */
.lv-hud { position: absolute; left: 0; bottom: 0; width: 390px; padding: 8px 16px 12px; }
.lv-hudcard { background: rgba(22,27,34,.80); border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px; padding: 12px 14px 13px; }
.lv-row { display: flex; align-items: center; gap: 8px; }
.lv-dot { width: 10px; height: 10px; border-radius: 50%; transition: background .4s ease; }
.lv-name { font-size: 18px; font-weight: 600; transition: color .4s ease; }
.lv-note { font-size: 14px; color: rgba(255,255,255,.54); }
.lv-blocks { display: flex; margin-top: 10px; }
.lv-blocks > div { flex: 1; min-width: 0; }
.lv-blocks > .lv-div { flex: 0 0 1px; }
.lv-div { width: 1px; height: 34px; background: rgba(255,255,255,.12); margin: 0 14px; align-self: center; }
.lv-lbl { font-size: 10px; letter-spacing: 1.2px; color: rgba(255,255,255,.38); font-weight: 700; }
.lv-big { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 3px;
  white-space: nowrap; }
.lv-hz { font-size: 12px; color: rgba(255,255,255,.38); font-weight: 400; }
.lv-cents { font-size: 14px; font-weight: 700; color: rgba(255,255,255,.70); margin-top: 1px;
  font-variant-numeric: tabular-nums; }
.lv-advice { display: flex; align-items: center; gap: 7px; margin-top: 11px; font-size: 14px; font-weight: 500; }
.lv-advice svg { width: 16px; height: 16px; }

/* ---------- 2. RAGA ---------- */
.lv-page { padding: 16px; }
.lv-bars { height: 110px; display: flex; align-items: flex-end; gap: 6px; }
.lv-bars > i { flex: 1; display: block; border-radius: 4px; height: 6px; background: rgba(61,220,132,.26);
  transition: height .16s linear, background .16s linear; }
.lv-degs { display: flex; gap: 6px; margin-top: 8px; }
.lv-degs > span { flex: 1; text-align: center; font-size: 10.5px; color: rgba(255,255,255,.54); font-weight: 500;
  transition: color .15s linear; }
.lv-degs > span.on { color: var(--amber); font-weight: 800; }
.lv-now { text-align: center; font-size: 22px; font-weight: 800; color: var(--amber); margin-top: 14px;
  min-height: 28px; }
.lv-verdict svg { width: 20px; height: 20px; flex: none; }
.lv-verdict { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12.5px; font-weight: 600; }
.lv-match { background: #14181F; border: 1px solid rgba(255,255,255,.12); border-radius: 14px;
  padding: 14px; margin-bottom: 8px; transition: border-color .4s ease; }
.lv-match.lead { border: 1.4px solid var(--amber); }
.lv-match .r { display: flex; align-items: baseline; }
.lv-match .nm { font-size: 14px; font-weight: 800; color: rgba(255,255,255,.70); }
.lv-match.lead .nm { font-size: 16px; color: var(--amber); }
.lv-match .pc { margin-left: auto; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.lv-hint { font-size: 12.5px; color: rgba(255,255,255,.60); line-height: 1.4; margin-top: 6px; }

/* ---------- 3. PRACTICE ---------- */
.lv-hero { padding: 22px 0; border-radius: 20px; background: #14181F; text-align: center;
  border: 1.5px solid rgba(255,255,255,.12); transition: border-color .25s ease; }
.lv-hero.tari { border-color: #FF5D5D; }
.lv-hero.chap { border-color: #5DB8FF; }
.lv-hero [data-stroke-icon] svg { width: 44px; height: 44px; }
.lv-hero .lab { font-size: 20px; font-weight: 800; margin-top: 10px; }
.lv-hero .conf { font-size: 12px; color: rgba(255,255,255,.38); margin-top: 4px; font-variant-numeric: tabular-nums; }
.lv-meter { margin: 9px 60px 0; height: 5px; border-radius: 3px; background: rgba(255,255,255,.10); overflow: hidden; }
.lv-meter > i { display: block; height: 5px; border-radius: 3px; transition: width .25s ease, background .25s ease; }
.lv-ribbon { display: flex; justify-content: space-between; background: #14181F;
  border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 10px 14px; margin-top: 10px; }
.lv-ribbon svg { width: 18px; height: 18px; }
.lv-ribbon svg.new { animation: lvPop .35s cubic-bezier(.2,1.5,.4,1); }
@keyframes lvPop { 0% { transform: scale(.2); opacity: 0 } 100% { transform: none; opacity: 1 } }
.lv-stats { display: flex; gap: 10px; margin-top: 10px; }
.lv-stat { flex: 1; padding: 13px 0; background: #14181F; border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px; text-align: center; }
.lv-stat b { display: block; font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.lv-stat span { display: block; font-size: 9.5px; letter-spacing: 1.1px; color: rgba(255,255,255,.38);
  font-weight: 700; margin-top: 3px; }
.lv-timing { margin-top: 10px; border-color: var(--green); }
.lv-timing .v { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.lv-timing .avg { margin-left: auto; font-size: 13px; color: rgba(255,255,255,.54); font-variant-numeric: tabular-nums; }
.lv-note-sm { font-size: 11px; color: rgba(255,255,255,.38); line-height: 1.4; margin-top: 7px; }

/* ---------- caption under a live screen ---------- */
.lv-cap {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  font-size: .82rem; color: var(--text-4);
}
.lv-cap .led { width: 7px; height: 7px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 0 rgba(61,220,132,.6); animation: lvLed 2s ease-out infinite; }
@keyframes lvLed {
  0% { box-shadow: 0 0 0 0 rgba(61,220,132,.55) }
  70% { box-shadow: 0 0 0 7px rgba(61,220,132,0) }
  100% { box-shadow: 0 0 0 0 rgba(61,220,132,0) }
}
@media (prefers-reduced-motion: reduce) { .lv-cap { display: none; } }