/* Animated figures for the guides (templates/_anim.html, anim.js).
   The markup is the finished frame; anim.js plays it. Dark panel in the spirit of .radio-card. */
.anim{--a-bg:#0b1322;--a-line:rgba(255,255,255,.1);--a-text:#e8edf6;--a-dim:rgba(232,237,246,.62);
  --a-blue:#4aa8ff;--a-amber:#ffc94d;--a-amber-text:#ffd877;--a-green:#34d17a;--a-red:#ff5449;--a-white:#f4f7fb;
  --a-rwy:#2a3549;--a-twy:#1f293b;--a-ramp:#172030;--a-yellow:#e7bf45;
  margin:26px 0 32px}
.anim-panel{position:relative;background:var(--a-bg);color:var(--a-text);border-radius:var(--radius,16px);padding:12px 18px 18px;overflow:hidden}
.anim-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:30px;margin-bottom:8px}
.anim-kicker{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#4aa8ff}
.anim-replay{display:inline-flex;align-items:center;gap:6px;flex:none;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.8);font:600 12.5px/1 var(--font);padding:6px 11px 6px 9px;border-radius:100px;cursor:pointer}
.anim-replay:hover{background:rgba(255,255,255,.1);color:#fff}
.anim-replay:focus-visible,.lg-name:focus-visible{outline:2px solid #4aa8ff;outline-offset:2px}
.anim-replay svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.anim-replay[hidden]{display:none}
.anim-stage svg{display:block;width:100%;height:auto;max-width:600px;margin:0 auto}
.anim figcaption{font-size:14px;line-height:1.55;color:var(--muted,#8a94a6);margin-top:10px}
.anim-note{margin-top:12px;padding:10px 12px;border-radius:10px;background:rgba(255,201,77,.08);font-size:14px;line-height:1.5;color:var(--a-amber-text)}

/* Radio strip: the calls in order, a transcript you can read at the end */
.anim-strip{list-style:none;display:grid;gap:9px;margin:14px 0 0;padding:13px 0 0;border-top:1px solid var(--a-line)}
.as-line{display:grid;grid-template-columns:78px 1fr;gap:10px;align-items:baseline;align-content:start}
.as-who{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--a-dim)}
.as-line.pilot .as-who{color:#4aa8ff}
.as-text{font-family:var(--mono);font-size:14.5px;line-height:1.55}
.anim mark{background:rgba(255,201,77,.16);color:var(--a-amber-text);border-radius:4px;padding:0 3px;margin:0 -1px}
/* long exchanges: while playing, one call at a time in the same spot */
.anim--live .anim-strip--subs{grid-template-areas:"s"}
.anim--live .anim-strip--subs .as-line{grid-area:s}

/* SVG parts */
.anim svg text{font-family:var(--font)}
.anim .lbl{font-size:12px;fill:var(--a-dim)}
.anim .lbl-strong{fill:var(--a-text);font-weight:650}
.anim .lbl-warn{fill:var(--a-amber-text)}
.anim .rwy{fill:var(--a-rwy)}
.anim .twy{fill:var(--a-twy)}
.anim .ramp{fill:var(--a-ramp)}
.anim .rwy-mark path{fill:none;stroke:#fff;stroke-opacity:.75;stroke-width:2}
.anim .rwy-mark .cl{stroke-width:1.4;stroke-opacity:.55;stroke-dasharray:10 8}
.anim .rwy-num{fill:#fff;fill-opacity:.9;font-size:17px;font-weight:700;text-anchor:middle;dominant-baseline:central}
.anim .rwy-num-s{font-size:10px}
.anim .tcl{fill:none;stroke:var(--a-yellow);stroke-width:1.2;stroke-opacity:.8}
.anim .hs path{fill:none;stroke:var(--a-yellow);stroke-width:1.3}
.anim .hs-dash{stroke-dasharray:2.6 2}
.anim .sign-hold rect{fill:#d0281d}
.anim .sign-hold text,.anim .sign-loc text{font-size:8.5px;font-weight:700;text-anchor:middle;dominant-baseline:central}
.anim .sign-hold text{fill:#fff}
.anim .sign-loc rect{fill:#050505;stroke:var(--a-yellow);stroke-width:1}
.anim .sign-loc text{fill:var(--a-yellow)}
.anim .route{fill:none;stroke:var(--a-blue);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:.6}
.anim .hl{fill:rgba(255,201,77,.12);stroke:var(--a-amber);stroke-width:1.4}
.anim .hl-fill{fill:var(--a-amber);opacity:0}
.anim .ac{fill:#fff}
.anim .ac-own{fill:var(--a-blue)}
.anim .ac-parked{fill-opacity:.25}
.anim .ac-trf{fill:var(--a-amber)}
.anim .ac-win{fill:var(--a-bg);fill-opacity:.55}
.anim .ac-gear{fill:none;stroke:currentColor;stroke-width:1.1}
.anim .ac-own .ac-gear{stroke:var(--a-blue)}
.anim .ac-trf .ac-gear{stroke:var(--a-amber)}
.anim .rp circle{fill:var(--a-amber)}
.anim .rp .rp-ring,.anim .ga-mark .rp-ring{fill:none;stroke:var(--a-amber);stroke-width:1.5;opacity:0}
.anim .ga-mark circle{fill:var(--a-amber)}
.anim .pattern-std{fill:none;stroke:#fff;stroke-opacity:.16;stroke-width:1.2;stroke-dasharray:4 5}

/* squawk and ident */
.anim .xp-body{fill:#1a2335;stroke:rgba(255,255,255,.12)}
.anim .xp-screen{fill:#06090f}
.anim .xp-digit{font-family:var(--mono);font-size:30px;font-weight:600;fill:#ffb547;text-anchor:middle}
.anim .xp-mode{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.08em;fill:#ffb547;fill-opacity:.75}
.anim .xp-ident rect{fill:#26324a;stroke:rgba(255,255,255,.2)}
.anim .xp-ident text{font-size:9.5px;font-weight:800;letter-spacing:.04em;fill:var(--a-text);text-anchor:middle;dominant-baseline:central}
.anim .sc-bg{fill:#05090f}
.anim .sc-ring,.anim .sc-edge{fill:none;stroke:#7fd3ff;stroke-opacity:.14;stroke-width:1}
.anim .sc-edge{stroke-opacity:.3}
.anim .sc-sweep{opacity:.5}
.anim .sc-apt{fill:none;stroke:#7fd3ff;stroke-opacity:.6;stroke-width:1.2}
.anim .sc-other circle{fill:#9fb3c8;fill-opacity:.55}
.anim .sc-other text{font-family:var(--mono);font-size:9.5px;fill:#9fb3c8;fill-opacity:.55}
.anim .sc-hist circle{fill:#5fd0ff}
.anim .sc-tgt{fill:#5fd0ff}
.anim .sc-bloom{fill:none;stroke:#5fd0ff;stroke-width:1.6;opacity:0}
.anim .sc-lead{stroke:#5fd0ff;stroke-width:1;stroke-opacity:.7}
.anim .db{font-family:var(--mono);font-size:11px;font-weight:600;fill:#bfe9ff}
.anim .db-before,.anim .db-after,.anim .db-id{opacity:0}
.anim .db-id{fill:var(--a-amber)}
.anim .sc-contact{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.12em;fill:var(--a-green)}

/* traffic by the clock */
.anim .ck-ring{fill:none;stroke:#fff;stroke-opacity:.12}
.anim .ck-tick{stroke:#fff;stroke-opacity:.35;stroke-width:1.5}
.anim .ck-num text{font-size:13px;font-weight:600;fill:var(--a-dim);text-anchor:middle;dominant-baseline:central}
.anim .ck-num .ck-hot{fill:var(--a-amber);font-weight:800}
.anim .ck-wedge{fill:var(--a-amber);fill-opacity:.13}
.anim .trf-trail circle{fill:var(--a-amber);fill-opacity:.45}
.anim .trf-path{fill:none;stroke:none}
.anim .ac-ghost{fill:var(--a-amber);fill-opacity:.12;stroke:var(--a-amber);stroke-width:1.2;opacity:0}
.anim .trf-ring{fill:none;stroke:var(--a-green);stroke-width:2}
.anim .trf-tag{font-size:11.5px;font-weight:600;fill:var(--a-amber-text)}

/* holding */
.anim .hd-radial{fill:none;stroke:#fff;stroke-opacity:.5;stroke-width:1.3;stroke-dasharray:6 4}
.anim .hd-track{fill:none;stroke:#fff;stroke-opacity:.3;stroke-width:1.5}
.anim .hd-chev{fill:none;stroke:var(--a-amber);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.anim .hd-legs path{fill:none;stroke:#fff;stroke-opacity:.45;stroke-width:1.2}
.anim .hd-vor path{fill:none;stroke:#7fd3ff;stroke-width:1.8}
.anim .hd-vor circle{fill:#7fd3ff}
.anim .hd-efc rect{fill:rgba(255,201,77,.1);stroke:rgba(255,201,77,.45)}
.anim .hd-efc text{font-size:12.5px;font-weight:700;fill:var(--a-amber-text)}
.anim .hd-clock{fill:none;stroke:var(--a-amber-text);stroke-width:1.5;stroke-linecap:round}
.anim .hd-route{fill:none;stroke:none}

/* go-around */
.anim .ga-ground{stroke:#fff;stroke-opacity:.18}
.anim .ga-thr{stroke:#fff;stroke-width:2}
.anim .ga-gs{fill:none;stroke:#fff;stroke-opacity:.22;stroke-dasharray:3 4}
.anim .ga-alt{fill:none;stroke:var(--a-green);stroke-opacity:.7;stroke-width:1.3;stroke-dasharray:6 4}
.anim .ga-altlbl{fill:var(--a-green)}

/* light gun */
.lg{display:grid;grid-template-columns:150px 1fr;gap:6px 12px;align-items:start}
.lg-tower{width:100%;height:auto;margin-top:8px}
.anim .lg-shaft{fill:#1e283b}
.anim .lg-cab{fill:#27334b}
.anim .lg-glass{fill:#070b13}
.anim .lg-mull{stroke:#27334b;stroke-width:1.6}
.anim .lg-roof{fill:#33415e}
.anim .lg-mast{stroke:#33415e;stroke-width:2;fill:none}
.anim .lg-beam,.anim .lg-lamp{opacity:0}
.anim .lg-lamp.lg-green{fill:var(--a-green)}
.anim .lg-lamp.lg-red{fill:var(--a-red)}
.anim .lg-lamp.lg-white{fill:var(--a-white)}
.anim .lg-halo{opacity:.28}
.lg-table{display:grid;font-size:14px;line-height:1.4}
.lg-headrow,.lg-row{position:relative;display:grid;grid-template-columns:minmax(150px,1.05fr) 1fr 1.25fr;gap:12px;padding:9px 10px}
.lg-headrow{padding-top:4px;padding-bottom:6px;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--a-dim)}
.lg-row{border-top:1px solid var(--a-line);color:rgba(232,237,246,.82)}
.lg-hl{position:absolute;inset:0;border-radius:10px;background:rgba(255,255,255,.07);box-shadow:inset 3px 0 0 var(--a-amber);opacity:0;pointer-events:none}
.lg-c{position:relative}
.lg-c em{display:none}
.lg-name{display:inline-flex;align-items:flex-start;gap:9px;padding:0;border:0;background:none;color:var(--a-text);font:600 14px/1.4 var(--font);text-align:left;cursor:pointer}
.lg-name:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.lg-dot{flex:none;width:14px;height:14px;margin-top:2px;border-radius:50%;background:var(--dot);box-shadow:0 0 10px var(--dot)}
.lg-dot.green{--dot:var(--a-green)}
.lg-dot.red{--dot:var(--a-red)}
.lg-dot.white{--dot:var(--a-white)}
.lg-dot.alt{--dot:#a8a14f;background:linear-gradient(90deg,var(--a-red) 50%,var(--a-green) 50%);box-shadow:none}
.lg-dot.flash{outline:1.5px dashed var(--dot);outline-offset:2.5px;box-shadow:none}


@media (max-width:560px){
  .anim{margin-left:-20px;margin-right:-20px}
  .anim-panel{border-radius:0;padding:10px 14px 16px}
  .anim figcaption{padding:0 20px}
  .anim .lbl{font-size:14px}
  .anim .ck-num text{font-size:15px}
  .anim .trf-tag{font-size:13.5px}
  .anim .db{font-size:13px}
  .anim .sc-other text{font-size:11.5px}
  .anim .sc-contact{font-size:12.5px}
  .anim .hd-efc text{font-size:14px}
  .as-line{grid-template-columns:1fr;gap:3px}
  .as-text{font-size:14px}
  .lg{grid-template-columns:1fr}
  .lg-tower{width:120px;margin:0 auto}
  .lg-headrow{display:none}
  .lg-row{grid-template-columns:1fr 1fr;gap:6px 12px;padding:10px 8px}
  .lg-row .lg-c:nth-child(2){grid-column:1/-1}
  .lg-c em{display:block;font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--a-dim)}
}