/* ============================================================
   JARVIS : radar de scan doré (Claude Code, 25/09/2026), balisage dans assets/scanner.js.
   Noyau de l'accueil et plan « scan d'identité » de la connexion.
   L'origine du SVG est au centre (viewBox -240 … 240) : les rotations CSS
   des groupes tournent donc autour du centre du radar.
   ============================================================ */

.sc {
  --sc-gold: #f4b545;
  --sc-hi: #ffd98c;
  --sc-red: #ff4b4b;
  position: relative; width: 100%; height: 100%;
}
.sc__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 5px rgba(244, 181, 69, .45)); }
.sc__svg * { transform-box: view-box; transform-origin: 0 0; }

.sc__tick { stroke: var(--sc-gold); stroke-width: 1; opacity: .45; }
.sc__tick--major { stroke: var(--sc-hi); stroke-width: 1.6; opacity: .95; }
.sc__num { fill: rgba(255, 217, 140, .72); font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 17px; letter-spacing: .04em; text-anchor: middle; dominant-baseline: middle; }
.sc__num--hi { fill: #fff3d6; }
.sc__arcs path { fill: none; stroke: var(--sc-gold); stroke-width: 6; stroke-linecap: butt; }
.sc__band circle { fill: none; stroke: var(--sc-gold); stroke-width: 22; stroke-dasharray: 1.3 2.6; opacity: .6; }
.sc__line { fill: none; stroke: var(--sc-gold); stroke-width: 1.2; opacity: .6; }
.sc__line--faint { opacity: .28; }
.sc__line--dash { stroke-dasharray: 3 7; opacity: .75; }
.sc__inner path { fill: none; stroke: var(--sc-hi); stroke-width: 2.4; opacity: .85; }
.sc__pins rect { fill: var(--sc-hi); }
.sc__glow { opacity: .8; }
.sc__alert circle { fill: rgba(255, 75, 75, .14); stroke: var(--sc-red); stroke-width: 1.4; }
.sc__alert path { fill: var(--sc-red); }
.sc__alert { filter: drop-shadow(0 0 6px rgba(255, 75, 75, .8)); }
.sc:not(.sc--alert) .sc__alert { display: none; }

/* Faisceau : cône doré qui tourne, bord d'attaque lumineux, traînée qui s'efface. */
.sc__sweep {
  position: absolute; inset: 18.75%; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, rgba(255, 214, 110, 0) 0deg, rgba(255, 214, 110, .06) 22deg, rgba(255, 214, 110, .5) 56deg, rgba(255, 238, 190, .85) 57.5deg, transparent 58deg);
  mix-blend-mode: screen;
}
.sc__center { position: absolute; inset: 34%; display: grid; place-content: center; justify-items: center; gap: 2px; text-align: center; }
.sc__center small { font-family: var(--font-mono, monospace); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: rgba(255, 228, 170, .86); }
.sc__center b { font-family: var(--font-mono, monospace); font-size: clamp(30px, 6vh, 50px); font-weight: 500; line-height: 1; color: #fff4dc; text-shadow: 0 0 16px rgba(244, 181, 69, .75), 0 0 36px rgba(244, 150, 40, .35); }
.sc__center .ph { font-size: clamp(34px, 7vh, 56px); color: var(--sc-hi); filter: drop-shadow(0 0 10px rgba(244, 181, 69, .8)); }

/* Mouvement continu */
.sc__sweep { animation: scSweep 3.2s linear infinite; }
.sc__ticks { animation: scSpin 120s linear infinite; }
.sc__band { animation: scSpin 70s linear infinite reverse; }
.sc__inner { animation: scSpin 9s linear infinite; }
.sc__alert { animation: scBlink 1.4s steps(2, jump-none) infinite; }
@keyframes scSweep { to { transform: rotate(360deg); } }
@keyframes scSpin { to { transform: rotate(360deg); } }
@keyframes scBlink { 50% { opacity: .35; } }

/* Construction à l'apparition (accueil) : arcs tracés, chiffres qui s'allument. */
.sc--build .sc__arcs path, .sc--build .sc__inner path { stroke-dasharray: 1; animation: scDraw 1.1s cubic-bezier(.2, .8, .2, 1) both; }
.sc--build .sc__arcs path:nth-child(2) { animation-delay: .08s; }
.sc--build .sc__arcs path:nth-child(3) { animation-delay: .16s; }
.sc--build .sc__arcs path:nth-child(4) { animation-delay: .24s; }
.sc--build .sc__arcs path:nth-child(5) { animation-delay: .32s; }
.sc--build .sc__scale { animation: scNumIn .6s .35s ease-out both; }
@keyframes scDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes scNumIn { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .sc__sweep, .sc__ticks, .sc__band, .sc__inner, .sc__alert, .sc--build .sc__arcs path, .sc--build .sc__inner path, .sc--build .sc__scale { animation: none !important; }
}
html.no-motion :is(.sc__sweep, .sc__ticks, .sc__band, .sc__inner, .sc__alert, .sc--build .sc__arcs path, .sc--build .sc__inner path, .sc--build .sc__scale) { animation: none !important; }