/* home-fx.css — animations « HUD » de l'accueil : parallaxe souris, HUD réticule,
   radar vivant, intro « SYSTEMS ONLINE ». Activées par blocs via window.__HOMEFX.
   Tout est coupé si le visiteur demande « réduire les animations ». */

.site-hero { position: relative; }
.hfx-layer { transition: transform .18s cubic-bezier(.2,.7,.2,1); will-change: transform; }

/* ── HUD interactif : coins de visée + réticule qui suit la souris ── */
.hfx-hud { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; }
.hfx-hud__corner { position: absolute; width: 26px; height: 26px; border: 2px solid rgba(120,220,160,.5); }
.hfx-hud__corner.tl { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.hfx-hud__corner.tr { top: 12px; right: 12px; border-left: 0; border-bottom: 0; }
.hfx-hud__corner.bl { bottom: 12px; left: 12px; border-right: 0; border-top: 0; }
.hfx-hud__corner.br { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }
.hfx-hud__reticle { position: absolute; top: 0; left: 0; width: 64px; height: 64px; margin: -32px 0 0 -32px; opacity: 0; transition: opacity .25s ease; }
.hfx-hud.on .hfx-hud__reticle { opacity: .7; }
.hfx-hud__reticle::before, .hfx-hud__reticle::after { content: ""; position: absolute; background: rgba(120,220,160,.7); }
.hfx-hud__reticle::before { left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-.5px); }
.hfx-hud__reticle::after  { top: 50%; left: 0; height: 1px; width: 100%; transform: translateY(-.5px); }
.hfx-hud__ring { position: absolute; inset: 18px; border: 1px solid rgba(120,220,160,.6); border-radius: 50%; }

/* ── Radar vivant (canvas), coin bas-droite du hero ── */
.hfx-radar { position: absolute; right: 14px; bottom: 14px; z-index: 2; pointer-events: none; opacity: .92;
             filter: drop-shadow(0 0 8px rgba(90,220,140,.25)); }
.hfx-radar canvas { display: block; }

/* ── Intro « SYSTEMS ONLINE » (plein écran, 1×/session) ── */
.hfx-intro { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center;
             flex-direction: column; gap: 1rem;
             background: radial-gradient(circle at 50% 45%, #0b1712 0%, #05090c 72%, #04070a 100%); }
.hfx-intro.out { opacity: 0; transition: opacity .55s ease; pointer-events: none; }
.hfx-intro canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hfx-intro__txt { position: relative; font-family: var(--font-mono, monospace); color: #7CFF9B;
                  letter-spacing: .28em; font-size: clamp(16px, 3vw, 26px); text-shadow: 0 0 14px rgba(90,220,140,.55); }
.hfx-intro__sub { position: relative; font-family: var(--font-mono, monospace); color: #4a7;
                  letter-spacing: .2em; font-size: 12px; animation: hfx-blink 1.1s .4s steps(1) 3; }
@keyframes hfx-blink { 50% { opacity: 0; } }

@media (max-width: 760px) { .hfx-radar { display: none; } }  /* radar masqué sur mobile (comme le logo) */

@media (prefers-reduced-motion: reduce) {
  .hfx-hud, .hfx-radar, .hfx-intro { display: none !important; }
  .hfx-layer { transform: none !important; transition: none !important; }
}