/* ============================================================
   LBMG HUD SYSTEM — hud.css
   The cinematographer's HUD: the site's standing accent language.
   Link once per page:  <link rel="stylesheet" href="hud.css">
   Pair with hud.js for the animated/stateful pieces.

   Relies on brand tokens from styles.css (--rust-2, --linen, --line,
   --line-2, --muted, --ink, --slate, --caps). Adds --signal (status green).

   ROLES
     Anchors  : hud-frame (drone brackets) · hud-focus (lens ring)
     Readouts : hud-rec · hud-readout · hud-tc (timecode)
     Texture  : hud-thirds · hud-center · hud-wave (ghost waveform)
     Dividers : hud-slatebar
     Controls : hud-selector · hud-aperture
     Event    : hud-tally · hud-meters · hud-countdown · hud-rf
     AI       : hud-facemesh · hud-diffusion · hud-pipeline

   COLOR LAW
     rust  (--rust-2) = live · record · program · alert
     green (--signal) = ready · preview · locked · online · complete
     Green is a STATUS cue only — never type, fills, or buttons.

   THE ONE-ANCHOR RULE
     One anchor per zone (frame OR focus), thirds/center as quiet
     texture beneath, slatebar marks transitions. Never stack anchors.

   Most overlays need a positioned parent:  .zone{position:relative}
   2026-06-01
   ============================================================ */

:root{
  --signal:#4FE36E;
  --hud-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}

/* shared keyframes */
@keyframes hudBlink{0%,100%{opacity:1}50%{opacity:.12}}
@keyframes hudSlate{to{background-position:56px 0}}
@keyframes hudSpin{to{transform:rotate(360deg)}}
@keyframes hudPull{0%,100%{transform:scale(1);opacity:.5}44%{transform:scale(.78);opacity:1}56%{transform:scale(.78);opacity:1}}
@keyframes hudApMove{0%,8%{top:8%}46%,54%{top:86%}92%,100%{top:8%}}
@keyframes hudAcquire{0%{opacity:0;transform:scale(.2)}9%{opacity:1;transform:scale(1)}82%{opacity:1;transform:scale(1)}92%{opacity:.25;transform:scale(.6)}100%{opacity:0;transform:scale(.2)}}
@keyframes hudFScan{0%{top:20%}82%{top:76%}100%{top:20%}}
@keyframes hudResolve{0%{opacity:.92}70%{opacity:0}86%{opacity:0}100%{opacity:.92}}
@keyframes hudDScan{0%{top:0}70%{top:100%}100%{top:100%}}
@keyframes hudProg{0%{width:0}70%{width:100%}100%{width:100%}}
@keyframes hudFlow{0%{offset-distance:0%;opacity:0}12%{opacity:1}88%{opacity:1}100%{offset-distance:100%;opacity:0}}
@keyframes hudNodePulse{0%,100%{transform:scale(1);opacity:.65}50%{transform:scale(1.5);opacity:1}}
@keyframes hudRevGlow{0%,100%{box-shadow:0 0 0 0 rgba(214,54,42,.45)}50%{box-shadow:0 0 38px 6px rgba(214,54,42,.28)}}
@keyframes hudRipple{0%{opacity:.55;transform:scale(1)}70%{opacity:0;transform:scale(1.5)}100%{opacity:0;transform:scale(1.5)}}

/* ---------- TEXTURE ---------- */

/* thirds grid — drop into a relative parent; edge-fade optional via -soft */
.hud-thirds{position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    linear-gradient(90deg,transparent calc(33.333% - .5px),var(--line-2) calc(33.333% - .5px),var(--line-2) calc(33.333% + .5px),transparent calc(33.333% + .5px)),
    linear-gradient(90deg,transparent calc(66.666% - .5px),var(--line-2) calc(66.666% - .5px),var(--line-2) calc(66.666% + .5px),transparent calc(66.666% + .5px)),
    linear-gradient(180deg,transparent calc(33.333% - .5px),var(--line-2) calc(33.333% - .5px),var(--line-2) calc(33.333% + .5px),transparent calc(33.333% + .5px)),
    linear-gradient(180deg,transparent calc(66.666% - .5px),var(--line-2) calc(66.666% - .5px),var(--line-2) calc(66.666% + .5px),transparent calc(66.666% + .5px))}
.hud-thirds.hud-soft{opacity:.45}
.hud-thirds.hud-fade{-webkit-mask-image:radial-gradient(120% 90% at 50% 40%,#000 30%,transparent 82%);mask-image:radial-gradient(120% 90% at 50% 40%,#000 30%,transparent 82%)}

/* center markers — crosshair + edge ticks */
.hud-center{position:absolute;inset:0;pointer-events:none;z-index:1}
.hud-center::before,.hud-center::after{content:"";position:absolute;left:50%;top:50%;background:var(--rust-2)}
.hud-center::before{width:22px;height:1px;transform:translate(-50%,-50%)}
.hud-center::after{width:1px;height:22px;transform:translate(-50%,-50%)}
.hud-center i{position:absolute;background:var(--linen);opacity:.7}
.hud-center i.t{top:0;left:50%;width:1px;height:12px;transform:translateX(-50%)}
.hud-center i.b{bottom:0;left:50%;width:1px;height:12px;transform:translateX(-50%)}
.hud-center i.l{left:0;top:50%;height:1px;width:12px;transform:translateY(-50%)}
.hud-center i.r{right:0;top:50%;height:1px;width:12px;transform:translateY(-50%)}

/* ghost waveform — ambient audio signature (hud.js fills bars + playhead) */
.hud-wave{position:absolute;inset:0;display:flex;align-items:center;gap:3px;padding:0 26px;z-index:0}
.hud-wave .wb{flex:1;min-width:0;background:rgba(233,217,202,.22);border-radius:2px;transition:background .18s}
.hud-wave .wb.lit{background:rgba(214,54,42,.85)}
.hud-wave-ph{position:absolute;top:18%;bottom:18%;width:1px;background:var(--rust-2);left:0;z-index:1}

/* ---------- ANCHORS ---------- */

/* drone viewfinder — corner brackets framing a zone */
.hud-frame{position:absolute;inset:0;pointer-events:none;z-index:2}
.hud-frame i{position:absolute;width:26px;height:26px}
.hud-frame i.tl{top:14px;left:14px;border-top:1.5px solid var(--rust-2);border-left:1.5px solid var(--rust-2)}
.hud-frame i.tr{top:14px;right:14px;border-top:1.5px solid var(--rust-2);border-right:1.5px solid var(--rust-2)}
.hud-frame i.bl{bottom:14px;left:14px;border-bottom:1.5px solid var(--rust-2);border-left:1.5px solid var(--rust-2)}
.hud-frame i.br{bottom:14px;right:14px;border-bottom:1.5px solid var(--rust-2);border-right:1.5px solid var(--rust-2)}

/* readout chips that ride inside a framed zone */
.hud-rec{position:absolute;top:16px;left:16px;font-family:var(--hud-mono);font-size:10px;letter-spacing:.18em;color:var(--linen);display:flex;align-items:center;gap:6px;z-index:3}
.hud-rec::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--rust-2);animation:hudBlink 1s steps(1) infinite}
.hud-readout{position:absolute;bottom:16px;right:16px;font-family:var(--hud-mono);font-size:10px;letter-spacing:.12em;color:var(--muted);z-index:3}

/* lens focus ring — active accent (hero/feature moments only) */
.hud-focus{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2}
.hud-focus .ticks{width:160px;height:160px;border-radius:50%;
  background:repeating-conic-gradient(rgba(233,217,202,.6) 0deg .55deg, transparent .55deg 7.5deg);
  -webkit-mask:radial-gradient(closest-side,transparent 71%,#000 73%,#000 81%,transparent 83%);
          mask:radial-gradient(closest-side,transparent 71%,#000 73%,#000 81%,transparent 83%);
  animation:hudSpin 24s linear infinite}
.hud-focus .ring{position:absolute;width:108px;height:108px;border-radius:50%;border:1px solid rgba(214,54,42,.75);animation:hudPull 4.6s ease-in-out infinite}
.hud-focus .core{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--rust-2)}

/* ---------- READOUTS ---------- */

/* timecode slate numbers (hud.js runs the clock) */
.hud-tc{font-family:var(--hud-mono);letter-spacing:.06em;color:var(--ink);font-variant-numeric:tabular-nums}
.hud-tc .ff{color:var(--rust-2)}

/* ---------- DIVIDERS ---------- */

/* slate motion bar — clapper stripes, a moving rule between sections */
.hud-slatebar{height:22px;border-radius:3px;border:1px solid var(--line-2);
  background:repeating-linear-gradient(115deg,var(--linen) 0 14px,#0b0b0b 14px 28px);
  background-size:56px 100%;animation:hudSlate 2.6s linear infinite}
.hud-slatebar.hud-thin{height:8px;border:none;opacity:.85}

/* ---------- CONTROLS ---------- */

/* horizontal selector — segmented control (matches site .segmented) */
.hud-selector{display:inline-flex;border:1px solid var(--line-2)}
.hud-selector button{font-family:var(--caps,"Jost",sans-serif);text-transform:uppercase;letter-spacing:.2em;
  font-size:11px;font-weight:500;padding:14px 20px;background:none;border:none;
  border-right:1px solid var(--line-2);color:var(--muted);cursor:pointer;transition:.25s}
.hud-selector button:last-child{border-right:none}
.hud-selector button:hover{color:var(--ink)}
.hud-selector button.active{background:var(--rust,#B12A1C);color:#fff}

/* aperture select — vertical scale, red marker hunts up/down */
.hud-aperture{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2}
.hud-aperture .scale{position:relative;width:24px;height:74%}
.hud-aperture .line{position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(233,217,202,.4);transform:translateX(-50%)}
.hud-aperture .ticks{position:absolute;left:50%;top:0;bottom:0;width:12px;transform:translateX(-50%);
  background:repeating-linear-gradient(180deg,transparent 0 9px,rgba(233,217,202,.32) 9px 10px)}
.hud-aperture .sel{position:absolute;left:50%;width:22px;height:2px;background:var(--rust-2);transform:translateX(-50%);
  border-radius:1px;box-shadow:0 0 9px rgba(214,54,42,.7);animation:hudApMove 4.4s ease-in-out infinite}

/* ---------- EVENT ---------- */

/* multicam tally switcher (hud.js cuts the live/preview busses) */
.hud-tally{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:6px;height:100%;padding:10px}
.hud-tally .cam{position:relative;background:repeating-linear-gradient(45deg,#0e0e10 0 10px,#101013 10px 20px);
  border:1px solid var(--line);border-radius:3px;display:flex;align-items:flex-end;transition:.18s;overflow:hidden}
.hud-tally .lbl{font-family:var(--hud-mono);font-size:9px;letter-spacing:.18em;color:var(--muted);padding:6px 8px}
.hud-tally .tdot{position:absolute;top:6px;left:8px;width:6px;height:6px;border-radius:50%;background:var(--rust-2);opacity:0}
.hud-tally .pgm{position:absolute;top:6px;right:8px;font-family:var(--hud-mono);font-size:8px;letter-spacing:.16em;color:var(--rust-2);opacity:0;display:flex;align-items:center;gap:4px}
.hud-tally .pgm::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--rust-2)}
.hud-tally .pvw{position:absolute;top:6px;right:8px;font-family:var(--hud-mono);font-size:8px;letter-spacing:.16em;color:var(--signal);opacity:0;display:flex;align-items:center;gap:4px}
.hud-tally .pvw::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--signal)}
.hud-tally .cam.pgm-block{border-color:var(--rust-2);box-shadow:0 0 0 1px var(--rust-2),inset 0 0 34px rgba(214,54,42,.12)}
.hud-tally .cam.pgm-block .lbl{color:#fff}
.hud-tally .cam.pgm-block .pgm{opacity:1}
.hud-tally .cam.onair{border-color:rgba(214,54,42,.55)}
.hud-tally .cam.onair .tdot{opacity:1;animation:hudBlink 1s steps(1) infinite}
.hud-tally .cam.preview{border-color:rgba(79,227,110,.5)}
.hud-tally .cam.preview .pvw{opacity:1}

/* live level meters (hud.js drives the bars) */
.hud-meters{display:flex;align-items:flex-end;justify-content:center;gap:6px;height:100%;padding:22px 26px}
.hud-meters .meter{width:10px;height:100%;position:relative;border-radius:2px;overflow:hidden;background:#111014}
.hud-meters .bar{position:absolute;inset:0;background:linear-gradient(to top,rgba(233,217,202,.75) 0%,#E0A85A 58%,var(--rust-2) 100%)}
.hud-meters .msk{position:absolute;left:0;right:0;top:0;height:70%;background:var(--slate,#0c0c0f);transition:height .09s linear}

/* showtime countdown (hud.js ticks it) */
.hud-countdown{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;height:100%}
.hud-countdown .lbl{font-family:var(--caps,"Jost",sans-serif);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--rust-2)}
.hud-countdown .clock{font-family:var(--hud-mono);font-size:clamp(28px,4.8vw,48px);letter-spacing:.05em;color:var(--ink);font-variant-numeric:tabular-nums}
.hud-countdown .clock .ff{color:var(--rust-2)}
.hud-countdown .meta{font-family:var(--hud-mono);font-size:10px;letter-spacing:.22em;color:var(--muted)}

/* rf signal bars (hud.js flickers the level; add .locked for green) */
.hud-rf{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;height:100%}
.hud-rf .bars{display:flex;align-items:flex-end;gap:5px;height:46px}
.hud-rf .b{width:8px;background:rgba(233,217,202,.22);border-radius:1px;transition:background .15s}
.hud-rf .b.on{background:var(--rust-2)}
.hud-rf.locked .b.on{background:var(--signal)}
.hud-rf .meta{font-family:var(--hud-mono);font-size:10px;letter-spacing:.2em;color:var(--muted)}

/* ---------- AI ---------- */

/* face-tracking mesh (SVG markup in usage doc; hud.js staggers dots) */
.hud-facemesh{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2}
.hud-facemesh svg{height:92%}
.hud-facemesh .fline{fill:none;stroke:rgba(233,217,202,.5);stroke-width:.8}
.hud-facemesh .fdot{fill:var(--rust-2);transform-box:fill-box;transform-origin:center;animation:hudAcquire 3.6s ease-in-out infinite}
.hud-facemesh .fbox{fill:none;stroke:var(--rust-2);stroke-width:1.1;stroke-linecap:square}
.hud-facemesh.locked .fdot,.hud-facemesh.locked .fbox{stroke:var(--signal);fill:var(--signal)}
.hud-facemesh .scan{position:absolute;left:50%;width:130px;height:1px;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,var(--rust-2),transparent);opacity:.7;animation:hudFScan 3.6s ease-in-out infinite}
.hud-facemesh .tag{position:absolute;bottom:14px;left:16px;font-family:var(--hud-mono);font-size:9px;letter-spacing:.18em;color:var(--muted)}
.hud-facemesh .tag b{color:var(--signal);font-weight:400}

/* diffusion reveal (SVG subject + noise in usage doc; hud.js runs %) */
.hud-diffusion{position:absolute;inset:0;overflow:hidden;z-index:1}
.hud-diffusion .subj{position:absolute;inset:0;width:100%;height:100%}
.hud-diffusion .noise{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:screen;animation:hudResolve 5s ease-in-out infinite}
.hud-diffusion .scan{position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--rust-2),transparent);opacity:.7;animation:hudDScan 5s linear infinite}
.hud-diffusion .prog{position:absolute;left:24px;right:24px;bottom:20px;height:2px;background:rgba(233,217,202,.15)}
.hud-diffusion .prog::after{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:var(--rust-2);animation:hudProg 5s ease-in-out infinite}
.hud-diffusion .dlbl{position:absolute;left:24px;bottom:30px;font-family:var(--hud-mono);font-size:9px;letter-spacing:.2em;color:var(--muted)}
.hud-diffusion .dpct{position:absolute;right:24px;bottom:30px;font-family:var(--hud-mono);font-size:9px;letter-spacing:.1em;color:var(--rust-2)}

/* pipeline node graph (SVG markup in usage doc; pure CSS animation) */
.hud-pipeline{display:flex;align-items:center;justify-content:center;width:100%}
.hud-pipeline svg{width:100%}
.hud-pipeline .plink{stroke:rgba(233,217,202,.28);stroke-width:1}
.hud-pipeline .pnode{fill:var(--slate,#0c0c0f);stroke:var(--rust-2);stroke-width:1.2}
.hud-pipeline .pcore{fill:var(--rust-2);transform-box:fill-box;transform-origin:center;animation:hudNodePulse 2.4s ease-in-out infinite}
.hud-pipeline .pcore.done{fill:var(--signal);animation:none}
.hud-pipeline .plabel{fill:var(--muted);font-family:var(--hud-mono);font-size:7px;letter-spacing:.08em;text-anchor:middle}
.hud-pipeline .ppulse{fill:var(--rust-2);offset-rotate:0deg;animation:hudFlow 2.4s linear infinite}

/* reduced-motion: animations are JS-driven where it matters; this only
   calms the purely-decorative CSS loops for users who ask for less motion */
@media (prefers-reduced-motion: reduce){
  .hud-slatebar,.hud-focus .ticks,.hud-focus .ring,.hud-aperture .sel,
  .hud-facemesh .fdot,.hud-facemesh .scan,.hud-diffusion .noise,
  .hud-diffusion .scan,.hud-diffusion .prog::after,.hud-pipeline .pcore,
  .hud-pipeline .ppulse{animation-duration:.001s;animation-iteration-count:1}
}