/* Watchtower shine: a radar sweeping behind VALOR's emblem, a searchlight across the header tinted by the real posture,
   calm glows on healthy readings and a stronger pulse on anything not healthy, and a lamp for each backup destination.
   Soft and dim, dimmer at night (US Central). Loaded after watchtower-palette.css.
   Decoration only: nothing here takes the pointer or changes any data. */

/* --- title glint --- */
.watchtower-hero h1 .title-glint{position:absolute;inset:0;font-style:normal;color:transparent;-webkit-text-stroke:0;text-shadow:none;pointer-events:none;
  background:linear-gradient(100deg,transparent 42%,rgba(255,255,255,.55) 50%,transparent 58%) 130% 0/260% 100% no-repeat;
  -webkit-background-clip:text;background-clip:text;animation:wt-glint 9s ease-in-out infinite}
@keyframes wt-glint{0%,62%{background-position:130% 0}92%,100%{background-position:-30% 0}}

/* --- radar behind the emblem --- */
.watchtower-emblem{isolation:isolate}
.watchtower-emblem .radar{position:absolute;left:50%;top:75px;width:330px;height:330px;margin:-165px 0 0 -165px;z-index:-1;pointer-events:none;border-radius:50%;
  background:
    radial-gradient(circle,transparent 0 24%,rgba(101,250,255,.2) 24.4%,transparent 25.2%,transparent 48%,rgba(101,250,255,.16) 48.4%,transparent 49.2%,transparent 72%,rgba(101,250,255,.12) 72.4%,transparent 73.2%),
    linear-gradient(90deg,transparent 49.7%,rgba(101,250,255,.14) 50%,transparent 50.3%),
    linear-gradient(0deg,transparent 49.7%,rgba(101,250,255,.14) 50%,transparent 50.3%)}
.radar .sweep{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 78%,rgba(234,255,255,.0) 78%,rgba(101,250,255,.26) 98%,rgba(234,255,255,.55) 100%);animation:radar-turn 9s linear infinite}
.radar .blip{position:absolute;width:5px;height:5px;border-radius:50%;background:#eaffff;box-shadow:0 0 6px #65faff,0 0 12px rgba(101,250,255,.7);opacity:0;animation:blip 9s linear infinite}
.radar .blip.b1{left:68%;top:30%;animation-delay:-1.6s}
.radar .blip.b2{left:26%;top:62%;animation-delay:-5.2s;background:#ffd9b0;box-shadow:0 0 6px #ff7a18,0 0 12px rgba(255,122,24,.7)}
.radar .blip.b3{left:58%;top:76%;animation-delay:-7.4s}
@keyframes radar-turn{to{transform:rotate(360deg)}}
@keyframes blip{0%,4%{opacity:0}6%{opacity:.95}30%{opacity:.4}45%,100%{opacity:0}}

/* --- VALOR's searchlight across the header, tinted by the real posture --- */
.watchtower-hero .valor-light{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:.5;
  background:linear-gradient(105deg,transparent 38%,rgba(234,255,255,.14) 48%,rgba(101,250,255,.1) 52%,transparent 62%) -70% 0/230% 100% no-repeat;animation:valor-light 16s ease-in-out infinite}
@keyframes valor-light{0%,25%{background-position:-70% 0}75%,100%{background-position:170% 0}}
.watchtower-hero[data-status="warning"] .valor-light{background-image:linear-gradient(105deg,transparent 38%,rgba(255,236,170,.2) 48%,rgba(255,207,51,.12) 52%,transparent 62%)}
.watchtower-hero[data-status="critical"] .valor-light{background-image:linear-gradient(105deg,transparent 38%,rgba(255,160,165,.26) 48%,rgba(255,59,66,.16) 52%,transparent 62%);opacity:.7}

/* --- calm glow on healthy readings, a stronger pulse on anything else (data-tone is set by js/watchtower-shine.js) --- */
.system-block dd[data-tone="good"],.defense-banner strong[data-tone="good"]{animation:tone-good 5s ease-in-out infinite}
.system-block dd[data-tone="warn"],.defense-banner strong[data-tone="warn"]{animation:tone-warn 1.6s ease-in-out infinite}
.system-block dd[data-tone="bad"],.defense-banner strong[data-tone="bad"]{animation:tone-bad .9s ease-in-out infinite}
@keyframes tone-good{0%,100%{text-shadow:0 0 4px rgba(77,255,154,.25)}50%{text-shadow:0 0 10px rgba(77,255,154,.5)}}
@keyframes tone-warn{0%,100%{text-shadow:0 0 6px rgba(255,207,51,.4)}50%{text-shadow:0 0 16px rgba(255,207,51,.9)}}
@keyframes tone-bad{0%,100%{text-shadow:0 0 8px rgba(255,59,66,.5)}50%{text-shadow:0 0 20px rgba(255,59,66,1)}}

/* --- a lamp for each backup destination --- */
.backup-lamps{display:flex;flex-wrap:wrap;gap:8px 18px;margin:10px 0 0;padding:0;list-style:none}
.backup-lamps li{display:flex;align-items:center;gap:8px;font:700 11px "Courier New",monospace;letter-spacing:.12em;color:#c3ced8}
.backup-lamps .lamp{width:9px;height:9px;border-radius:50%;background:#8fa9b6;box-shadow:0 0 6px #8fa9b6;animation:wt-lamp 3.4s ease-in-out infinite}
.backup-lamps .lamp.ok{background:#4dff9a;box-shadow:0 0 6px #4dff9a,0 0 12px rgba(77,255,154,.55)}
.backup-lamps .lamp.warn{background:#ffcf33;box-shadow:0 0 6px #ffcf33,0 0 12px rgba(255,207,51,.55);animation-duration:1.6s}
.backup-lamps .lamp.bad{background:#ff3b42;box-shadow:0 0 6px #ff3b42,0 0 12px rgba(255,59,66,.65);animation-duration:.9s}
@keyframes wt-lamp{0%,100%{opacity:1}50%{opacity:.5}}

/* --- dimmer at dusk and at night (data-time is set by js/watchtower-shine.js) --- */
html[data-time="dusk"] .valor-light{opacity:.4}
html[data-time="night"] .valor-light{opacity:.3}
html[data-time="night"] .radar{opacity:.7}

@media(max-width:700px){.watchtower-emblem .radar{width:260px;height:260px;margin:-130px 0 0 -130px}}
@media(prefers-reduced-motion:reduce){
  .title-glint,.radar .sweep,.radar .blip,.valor-light,.backup-lamps .lamp,.system-block dd[data-tone],.defense-banner strong[data-tone]{animation:none}
  .title-glint,.valor-light,.radar .blip{display:none}
}