/* Lighthouse — "Light the dark" beacon (What's broken)
   Self-running animation (plays once on scroll-in), placed under the hero. */
.beacon-field svg { width: 100%; height: auto; display: block; overflow: visible; }
/* (dead .beacon h2.big heading rules + .fld-lab pruned - the beacon now lives
   inside the hero resolve web with no heading or field labels of its own) */

/* field vocabulary (namespaced) */
.beacon .rec-lab { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.13em; text-transform: uppercase; fill: var(--text-tertiary); }
/* V8 origin treatment: FRAGMENT sits under its node in secondary with a
   canvas-stroke halo so it survives the beam pulse passing through it */
.beacon .rec-lab { font-size: 15.5px; fill: var(--text-secondary); stroke: var(--canvas); stroke-width: 3px; stroke-linejoin: round; paint-order: stroke; }
.beacon .dot { fill: var(--text-dim); opacity: 0; transition: fill 0.3s, opacity 0.3s; }
.beacon .dot.scan { fill: var(--marigold-soft); opacity: 0.95; }
.beacon .nd { transform-box: fill-box; transform-origin: center; transform: scale(0); }
.beacon .nd.lit { fill: var(--surface-2); stroke: var(--marigold); stroke-width: 1.8; }
.beacon .nd.peri { fill: var(--surface-2); stroke: var(--periwinkle); stroke-width: 1.8; }
.beacon .nd.flg { fill: var(--canvas-2); stroke: var(--flag, #e2504b); stroke-width: 1.8; }
.beacon .br-edge { stroke: rgba(202,169,11,0.38); stroke-width: 1.8; fill: none; }
.beacon .br-edge.to-flg { stroke: rgba(226,80,75,0.55); }
.beacon .br-edge.to-peri { stroke: rgba(136,156,231,0.5); }
.beacon .cl-edge { stroke: rgba(202,169,11,0.5); stroke-width: 1.6; stroke-dasharray: 5 5; opacity: 0; }
.beacon .nlab { font-family: var(--font-mono); font-size: 15.5px; letter-spacing: 0.12em; text-transform: uppercase; fill: var(--text-tertiary); opacity: 0; }
.beacon .nlab.fl { fill: var(--flag, #e2504b); }
.beacon .nlab.pl { fill: var(--periwinkle); }
.beacon .nlab.ml { fill: var(--marigold); }
.beacon .wedge { fill: rgba(202,169,11,0.10); }
.beacon .wedge-core { stroke: rgba(255,243,200,0.5); stroke-width: 1; }
/* M29 announce-then-relax: risk flashes twice at the alarm cadence, then
   settles into a steady ember matched to the 3.4s breathe. The announce's
   100% keyframe lands on the ember's resting fill so the handoff is seamless.
   The two animation lists below MUST stay byte-identical (settled toggles
   mid-sequence; a differing list would restart the chain). */
@keyframes bcFlashAnnounce { 0% { fill: var(--canvas-2); } 50% { fill: rgba(226,80,75,0.5); } 100% { fill: rgba(226,80,75,0.32); } }
@keyframes bcFlashEmber { 0%, 100% { fill: rgba(226,80,75,0.32); } 50% { fill: rgba(226,80,75,0.5); } }
.beacon .nd.flg.flash { animation: bcFlashAnnounce 1.6s ease-in-out 2, bcFlashEmber 3.4s ease-in-out 3.2s infinite; }
@keyframes bcBreathe { 0%,100% { opacity: 1; } 50% { opacity: 0.72; } }
.beacon svg.settled .nd { animation: bcBreathe 3.4s ease-in-out infinite; }
.beacon svg.settled .nd.flg.flash { animation: bcFlashAnnounce 1.6s ease-in-out 2, bcFlashEmber 3.4s ease-in-out 3.2s infinite; }

/* frozen/?snap: steady lit ember, zero motion */
body.frozen .beacon .nd.flg.flash, body.frozen .beacon svg.settled .nd { animation: none; }
body.frozen .beacon .nd.flg.flash { fill: rgba(226,80,75,0.5); }
@media (prefers-reduced-motion: reduce) {
  .beacon .nd.flg.flash, .beacon svg.settled .nd { animation: none; }
  .beacon .nd.flg.flash { fill: rgba(226,80,75,0.5); }
}
.beacon .g-glow { opacity: 0; }
.beacon .g-glow.fl { fill: rgba(226,80,75,0.15); }
.beacon .g-glow.ml { fill: rgba(202,169,11,0.14); }

/* hero placement — no overlay layer (edge-free); the atmosphere itself is dimmed */
.hresolve.beacon .fsvg { overflow: visible; position: relative; }
.hresolve.beacon .hr-stage { height: auto; position: relative; padding: 0; border: 0; }
.hresolve.beacon .hr-stage .fsvg { position: relative; }

/* mobile rail: the web renders at ~0.35x; compensate strokes so the
   resolve language keeps its weight (target ~1.2-1.5px rendered) */
@media (max-width: 760px) {
  .beacon .nd.lit, .beacon .nd.peri, .beacon .nd.flg { stroke-width: 4; }
  .beacon .br-edge { stroke-width: 3.4; }
  .beacon .cl-edge { stroke-width: 3; }
  /* D158: the strokes were compensated for the 0.34x scale but the TEXT never was -
     labels landed at 5.3px and sat behind the hero lead for 47x177px. Same call the
     enrichment web already makes at this size (enrichment.css:49): the SVG labels go,
     the sr-only hero description carries the meaning. The web stays as atmosphere. */
  .beacon .nlab, .beacon .rec-lab { display: none; }
}