/* =====================================================================
   CS Anatolia — « FX » : transitions entre pages + effets au défilement.
   8 transitions (Pixel Explosion, Code Tunnel, UI Portal, Glitch Warp,
   Data Stream, Infinite Zoom, 3D Scan, Camera Through Object) traduites en
   web (canvas 2D + CSS), charte rouge/noir/blanc. Logique : assets/js/fx.js
   ===================================================================== */

/* ---------- Calque plein écran ---------- */
#csaFx{position:fixed;inset:0;z-index:3000;pointer-events:none;visibility:visible;overflow:hidden;contain:strict}
#csaFx canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#csaFx.is-block{pointer-events:auto}
#csaFxSvg{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- Entrée de page : on cache le contenu jusqu'au démarrage de l'effet
   (sécurité : ré-affiché tout seul après 2,4 s si le script ne tourne pas) ---------- */
html.fx-enter body{visibility:hidden;animation:fxSafety 1ms 2.4s forwards}
html.fx-enter.fx-live body{visibility:visible;animation:none}
@keyframes fxSafety{to{visibility:visible}}

/* ---------- Sortie : poussée caméra vers le point cliqué ---------- */
html.fx-out body{transform-origin:var(--fx-x,50%) var(--fx-y,50%);animation:fxOut .3s cubic-bezier(.77,0,.18,1) forwards}
@keyframes fxOut{to{transform:scale(1.16)}}
html.fx-in body{animation:fxIn .55s cubic-bezier(.16,1,.3,1) both}
@keyframes fxIn{from{transform:scale(1.06)}to{transform:none}}

/* ---------- 3D Scan : clone « wireframe » de la page ---------- */
.fx-wire{position:absolute;left:0;right:0;top:0;overflow:hidden;background:#07070a;clip-path:inset(0 0 0 var(--x,0%));contain:paint}
.fx-wire *{color:transparent!important;background:transparent!important;border-color:rgba(230,0,18,.45)!important;box-shadow:none!important;text-shadow:none!important;outline:1px solid rgba(230,0,18,.42);outline-offset:-1px;animation:none!important;transition:none!important;opacity:1!important;transform:none!important;clip-path:none!important;visibility:visible!important}
.fx-wire img,.fx-wire video,.fx-wire svg,.fx-wire iframe{opacity:.12!important;filter:grayscale(1) contrast(1.4)}
.fx-wire p,.fx-wire h1,.fx-wire h2,.fx-wire h3,.fx-wire li,.fx-wire a,.fx-wire span,.fx-wire b,.fx-wire small,.fx-wire label,.fx-wire td,.fx-wire th{background:repeating-linear-gradient(0deg,transparent 0 .62em,rgba(230,0,18,.22) .62em .85em,transparent .85em 1.1em)!important}
.fx-wire input,.fx-wire select,.fx-wire textarea,.fx-wire button{outline-color:rgba(255,255,255,.35)}
.fx-wire ::before,.fx-wire ::after{background:transparent!important;color:transparent!important;border-color:rgba(230,0,18,.3)!important;box-shadow:none!important}
.fx-scanline{position:absolute;top:0;bottom:0;width:3px;left:var(--x,0%);background:#fff;box-shadow:0 0 18px 4px rgba(255,255,255,.9),0 0 60px 12px rgba(230,0,18,.75);transform:translateX(-50%)}
.fx-scanline::before{content:"";position:absolute;top:0;bottom:0;right:3px;width:min(26vw,220px);background:linear-gradient(90deg,transparent,rgba(230,0,18,.28))}
.fx-scantag{position:absolute;left:calc(var(--x,0%) + 14px);font:600 11px/1 "Oswald",system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#fff;background:rgba(230,0,18,.85);padding:6px 9px;border-radius:3px;white-space:nowrap}

/* ---------- Effets au défilement : scan 3D des cartes ---------- */
@media (prefers-reduced-motion:no-preference){
  [data-fx-scan]{position:relative}
  [data-fx-scan]:not(.is-scanned){filter:grayscale(1) contrast(.55) opacity(.42);outline:1px solid rgba(230,0,18,.55);outline-offset:-1px}
  [data-fx-scan].is-scanned{filter:none;outline-color:transparent;transition:filter .5s ease .18s,outline-color .3s ease .5s}
  [data-fx-scan]::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:5;background:linear-gradient(90deg,transparent 0,transparent 42%,rgba(230,0,18,.06) 46%,rgba(255,255,255,.85) 50%,rgba(230,0,18,.06) 54%,transparent 58%,transparent 100%);transform:translateX(-120%);opacity:0;border-radius:inherit}
  [data-fx-scan].is-scanned::after{animation:fxCardScan .75s cubic-bezier(.77,0,.18,1) both}
  @keyframes fxCardScan{0%{transform:translateX(-120%);opacity:1}100%{transform:translateX(120%);opacity:1}}
  [data-fx-scan].is-scanned.is-done::after{animation:none;opacity:0}
}

/* ---------- Hero accueil : calque des transitions (pixel explosion / glitch) ---------- */
.kick__fx{position:absolute;inset:0;z-index:3;pointer-events:none;display:none}
.kick__fx.is-on{display:block}
.kick__fx canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* ---------- Liens « flux » (billets / cartes) ---------- */
[data-fx-exit="stream"]{position:relative}