/* Aimlink | Hero, live data (assets/film/live.js): the detection over the target clip, the phone that crops the film into its screen on a
   clean green, GO's flat target and shot list, and the line "Turn target shooting into live data."
   The green is a deeper lime than the brand's (#A0E020): white words on it keep 3.4 to 1 (large text), the storyboard's white on green. */
@layer sections {
  .film-live { display: none; }
  .film.is-live .film-live { display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none; visibility: hidden; overflow: clip; contain: strict; }
  .lv { --lv-green: #4F9E1A; --lv-lime: var(--color-lime); --lv-low: var(--color-orange); }

  /* ── detection, in the stage's pixels (moved with the clip) ── */
  .lv-cam { position: absolute; inset: 0; transform-origin: 50% 50%; visibility: hidden; }
  .lv-under { position: absolute; left: 0; top: 0; overflow: visible; }
  .lv-det { position: absolute; left: 0; top: 0; overflow: visible; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--color-lime) 70%, transparent)); }
  .lv-dring { fill: none; stroke: var(--lv-lime); }
  .lv-dbr { fill: none; stroke: var(--color-snow); stroke-linecap: round; }
  .lv-dline { stroke: var(--lv-lime); stroke-linecap: round; }
  .lv-dmed { fill: none; stroke: var(--lv-lime); opacity: 0.7; }
  .lv-ddot { fill: var(--lv-lime); }

  /* ── the phone: at rest it is the frame's size (live.js sets it), moved and scaled from its middle ── */
  .lv-dev { position: absolute; left: 0; top: 0; transform-origin: 50% 50%; will-change: transform; }
  /* the screen is a hole in the green: the green is the hole's own shadow, spread over the whole picture */
  .lv-hole {
    position: absolute; inset: var(--lv-b); border-radius: var(--lv-r);
    box-shadow: 0 0 0 300vmax var(--lv-green);
  }
  .lv-frame {
    position: absolute; inset: 0; border-radius: calc(var(--lv-r) + var(--lv-b));
    box-shadow:
      inset 0 0 0 var(--lv-b) #0B0F14,
      inset 0 0 0 calc(var(--lv-b) + 1px) rgb(255 255 255 / 0.06),
      0 0 0 2px #2A3956, 0 0 0 3px #415A86, 0 0 0 4px #1C2638,
      0 40px 80px -20px rgb(6 24 4 / 0.55);
  }
  .lv-island { position: absolute; left: 50%; top: calc(var(--lv-b) + var(--lv-u) * 2.6); width: calc(var(--lv-u) * 28); height: calc(var(--lv-u) * 8); margin-left: calc(var(--lv-u) * -14); border-radius: 999px; background: #000; }
  .lv-screen {
    position: absolute; inset: var(--lv-b); border-radius: var(--lv-r); overflow: hidden;
    background: rgb(11 15 20 / var(--lv-bg, 0));
    font-family: var(--font-text); color: var(--color-snow);
  }
  .lv-flat { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: visible; }
  .lv-paper { fill: #E7DCC5; }
  .lv-black { fill: #15181C; }
  .lv-line { fill: none; stroke: #2B2B2B; stroke-width: 0.32; }
  .lv-line-d { fill: none; stroke: #E7DCC5; stroke-width: 0.32; }
  .lv-num { font: 600 4.6px/1 var(--font-text); fill: #2B2B2B; text-anchor: middle; dominant-baseline: central; }
  .lv-num-d { fill: #E7DCC5; }
  .lv-fhole { fill: #FBF8F1; stroke: #3A3A3A; stroke-width: 0.35; }
  .lv-fring { fill: none; stroke: var(--lv-lime); stroke-width: 0.75; }
  .lv-fring.is-new { stroke-width: 2.1; }
  .lv-fring.is-low { stroke: var(--lv-low); }
  .lv-fline { stroke: var(--lv-lime); stroke-width: 0.55; stroke-linecap: round; }
  .lv-fmed { fill: none; stroke: var(--lv-lime); stroke-width: 0.4; opacity: 0.85; }
  .lv-fdot { fill: var(--lv-lime); }

  /* ── GO round it: status bar, the session, the viewer, the shot list (sizes in the screen's own unit, its width / 100) ── */
  .lv-ui { position: absolute; inset: 0; font-size: calc(var(--lv-u) * 3.4); }
  .lv-status, .lv-head { opacity: var(--lv-ui, 0); }
  .lv-status { position: absolute; left: calc(var(--lv-u) * 8); right: calc(var(--lv-u) * 7); top: calc(var(--lv-u) * 3.6); display: flex; align-items: center; gap: calc(var(--lv-u) * 1.4); font-size: calc(var(--lv-u) * 3.6); }
  .lv-status b { margin-right: auto; font-weight: 600; }
  .lv-sig { display: inline-flex; align-items: end; gap: calc(var(--lv-u) * 0.5); height: calc(var(--lv-u) * 2.6); }
  .lv-sig i { width: calc(var(--lv-u) * 0.7); background: currentColor; border-radius: 1px; }
  .lv-sig i:nth-child(1) { height: 35%; } .lv-sig i:nth-child(2) { height: 55%; } .lv-sig i:nth-child(3) { height: 78%; } .lv-sig i:nth-child(4) { height: 100%; }
  .lv-bat { width: calc(var(--lv-u) * 5.6); height: calc(var(--lv-u) * 2.7); border-radius: calc(var(--lv-u) * 0.8); box-shadow: inset 0 0 0 1px rgb(244 246 248 / 0.5); padding: 1.5px; display: inline-flex; }
  .lv-bat i { flex: 1; border-radius: calc(var(--lv-u) * 0.5); background: currentColor; }
  .lv-head { position: absolute; left: calc(var(--lv-u) * 5); right: calc(var(--lv-u) * 5); top: calc(var(--lv-u) * 13); display: grid; grid-template-columns: auto 1fr auto; align-items: center; text-align: center; }
  .lv-back { font-size: calc(var(--lv-u) * 7); line-height: 1; opacity: 0.85; }
  .lv-more { font-size: calc(var(--lv-u) * 2.6); letter-spacing: 0.1em; opacity: 0.85; }
  .lv-htitle b { display: block; font-size: calc(var(--lv-u) * 4.2); font-weight: 600; }
  .lv-htitle small { display: block; margin-top: calc(var(--lv-u) * 0.6); font-size: calc(var(--lv-u) * 2.8); color: var(--color-snow-2); }
  .lv-viewer { position: absolute; left: 4%; right: 4%; top: calc(var(--lv-u) * 29); aspect-ratio: 1; border-radius: calc(var(--lv-u) * 2); box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08); opacity: 0; }
  .lv-panel { position: absolute; left: 0; right: 0; bottom: 0; top: calc(var(--lv-u) * 125); padding: calc(var(--lv-u) * 3) calc(var(--lv-u) * 6) calc(var(--lv-u) * 6); background: #0B0F14; display: flex; flex-direction: column; transform: translateY(105%); }
  .lv-row { display: grid; grid-template-columns: calc(var(--lv-u) * 9) calc(var(--lv-u) * 16) 1fr auto; align-items: center; padding: calc(var(--lv-u) * 2.3) 0; border-bottom: 1px solid rgb(255 255 255 / 0.07); opacity: 0; }
  .lv-i { display: inline-flex; align-items: center; gap: calc(var(--lv-u) * 1.4); color: var(--color-snow-2); }
  .lv-i::before { content: ""; width: calc(var(--lv-u) * 1.8); height: calc(var(--lv-u) * 1.8); border-radius: 50%; background: var(--lv-lime); }
  .lv-row.is-low .lv-i { color: var(--lv-low); }
  .lv-row.is-low .lv-i::before { background: var(--lv-low); }
  .lv-s { font: 500 calc(var(--lv-u) * 5.6)/1 var(--font-display); letter-spacing: 0.02em; padding-top: 0.1em; }
  .lv-d { display: inline-flex; align-items: center; gap: calc(var(--lv-u) * 1.2); color: var(--color-snow-2); }
  .lv-d svg { width: calc(var(--lv-u) * 3.2); height: calc(var(--lv-u) * 3.2); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .lv-c { color: var(--color-snow-3); font-size: calc(var(--lv-u) * 2.9); }
  .lv-stats { margin-top: auto; display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; padding-top: calc(var(--lv-u) * 3); }
  .lv-stat small { display: block; font-size: calc(var(--lv-u) * 2.5); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-snow-2); }
  .lv-stat b { display: block; margin-top: calc(var(--lv-u) * 1); font: 500 calc(var(--lv-u) * 6.4)/1 var(--font-display); font-variant-numeric: tabular-nums; }

  /* ── the line, on the green: left of the phone on a wide screen, over it on a tall one ── */
  .lv-words {
    position: absolute; left: max(var(--gutter), 6vw); margin: 0; transform: translateY(50%); visibility: hidden;
    font: 600 clamp(3rem, 1.4rem + 5.4vw, 7.5rem)/0.84 var(--font-display); letter-spacing: 0.005em; color: #fff; text-wrap: balance;
    text-shadow: 0 2px 24px rgb(20 50 6 / 0.25);
  }
  .lv-words > span { display: block; overflow: hidden; padding-top: 0.08em; }
  .lv-words > span > span { display: block; }
  .lv.is-tall .lv-words { left: 0; right: 0; margin-inline: auto; transform: none; text-align: center; font-size: clamp(2.6rem, 1rem + 8vw, 4.5rem); }
}