/* ============================================================
   CISCO // COUCHE FUTUR — technos avancées (autonome, sans dépendance)
   Tout s'appuie sur --accent-rgb (suit le thème du HUD).
   ============================================================ */

/* ---------- 0. Curseur néon personnalisé ---------- */
body.cisco-cursor{ cursor:none; }
body.cisco-cursor a, body.cisco-cursor button,
body.cisco-cursor input, body.cisco-cursor [role="button"]{ cursor:none; }
#fx-cursor{
  position:fixed; top:0; left:0; z-index:9999; pointer-events:none;
  width:26px; height:26px; margin:-13px 0 0 -13px;
  border:1px solid rgba(var(--accent-rgb),.9);
  border-radius:50%;
  box-shadow:0 0 10px rgba(var(--accent-rgb),.7), inset 0 0 6px rgba(var(--accent-rgb),.4);
  transition:width .15s, height .15s, background .15s, border-color .15s;
  display:none;
}
#fx-cursor::before, #fx-cursor::after{
  content:""; position:absolute; background:rgba(var(--accent-rgb),.9);
}
#fx-cursor::before{ top:50%; left:-6px; right:-6px; height:1px; transform:translateY(-50%); }
#fx-cursor::after{ left:50%; top:-6px; bottom:-6px; width:1px; transform:translateX(-50%); }
#fx-dot{
  position:fixed; top:0; left:0; z-index:9999; pointer-events:none;
  width:5px; height:5px; margin:-2.5px 0 0 -2.5px; border-radius:50%;
  background:rgb(var(--accent-rgb)); box-shadow:0 0 8px rgb(var(--accent-rgb)); display:none;
}
#fx-cursor.hot{ width:42px; height:42px; margin:-21px 0 0 -21px;
  background:rgba(var(--accent-rgb),.10); border-color:rgba(var(--accent-rgb),1); }

/* ---------- 1. Couche HYPERSPACE (warp) ---------- */
#fx-warp{
  position:fixed; inset:0; z-index:6; pointer-events:none; opacity:0;
  transition:opacity .6s ease; mix-blend-mode:screen;
}
body.warp #fx-warp{ opacity:1; }

/* ---------- 2. Titres holographiques (glitch) ---------- */
.brand .logo, .brand{ position:relative; }
.holo{ position:relative; display:inline-block; }
.holo::before, .holo::after{
  content:attr(data-txt); position:absolute; left:0; top:0; width:100%;
  overflow:hidden; opacity:.7; pointer-events:none;
}
.holo::before{ color:#ff2e88; transform:translate(-1px,0);
  animation:holoShift 3.2s infinite linear alternate; clip-path:inset(0 0 55% 0); }
.holo::after{ color:#00fff2; transform:translate(1px,0);
  animation:holoShift 2.4s infinite linear alternate-reverse; clip-path:inset(55% 0 0 0); }
@keyframes holoShift{
  0%{ transform:translate(-1px,0) } 20%{ transform:translate(1px,-1px) }
  40%{ transform:translate(-2px,1px) } 60%{ transform:translate(1px,0) }
  80%{ transform:translate(-1px,-1px) } 100%{ transform:translate(2px,1px) }
}

/* glitch ponctuel sur le logo du titre */
.brand .logo{ animation:pulse 2s infinite, glitchJump 7s steps(1) infinite; }
@keyframes glitchJump{
  0%,96%,100%{ transform:translate(0,0); filter:none }
  97%{ transform:translate(-2px,1px); filter:hue-rotate(90deg) }
  98%{ transform:translate(2px,-1px); filter:hue-rotate(-90deg) }
  99%{ transform:translate(-1px,0); filter:none }
}

/* ---------- 3. Tilt 3D des cartes ---------- */
.modules-grid-full{ perspective:900px; }
.mcard{ transform-style:preserve-3d; transition:transform .12s ease, box-shadow .2s; will-change:transform; }
.mcard .mic, .mcard .mlbl{ transform:translateZ(22px); }
.mcard.tilted{ box-shadow:0 18px 40px rgba(0,0,0,.55), 0 0 22px rgba(var(--accent-rgb),.35); }
.mcard .mshine{
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(180px circle at var(--mx,50%) var(--my,50%),
            rgba(var(--accent-rgb),.22), transparent 60%);
  opacity:0; transition:opacity .2s;
}
.mcard.tilted .mshine{ opacity:1; }

/* ---------- 4. Révélation des lignes de journal ---------- */
.log p{ animation:logIn .35s ease both; }
@keyframes logIn{
  from{ opacity:0; transform:translateX(8px); filter:blur(2px); }
  to{ opacity:1; transform:none; filter:none; }
}
.type-caret::after{ content:"▋"; margin-left:1px; animation:caret .8s steps(1) infinite; color:rgb(var(--accent-rgb)); }
@keyframes caret{ 50%{ opacity:0 } }

/* ---------- 5. Palette de commandes (Ctrl+K) ---------- */
#fx-palette{
  position:fixed; inset:0; z-index:9000; display:none;
  background:rgba(0,4,12,.55); backdrop-filter:blur(4px);
}
#fx-palette.open{ display:block; animation:fadeIn .15s ease; }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
.fx-pal-box{
  position:absolute; top:16vh; left:50%; transform:translateX(-50%);
  width:min(640px,92vw); background:rgba(5,8,20,.96);
  border:1px solid rgba(var(--accent-rgb),.55);
  border-radius:14px; box-shadow:0 0 50px rgba(var(--accent-rgb),.25), 0 20px 60px rgba(0,0,0,.7);
  overflow:hidden; font-family:var(--font);
}
.fx-pal-box input{
  width:100%; padding:18px 20px; background:transparent; border:0; outline:0;
  color:#dff6ff; font-size:18px; font-family:var(--mono);
  border-bottom:1px solid rgba(var(--accent-rgb),.3);
}
.fx-pal-box input::placeholder{ color:#56688f; }
.fx-pal-list{ max-height:48vh; overflow:auto; padding:6px; }
.fx-pal-item{
  display:flex; align-items:center; gap:14px; padding:11px 14px; border-radius:9px;
  color:#aebbd8; cursor:pointer; font-size:15px;
}
.fx-pal-item .pi-ic{ font-size:19px; width:26px; text-align:center; }
.fx-pal-item .pi-kbd{ margin-left:auto; font-family:var(--mono); font-size:11px;
  color:rgb(var(--accent-rgb)); border:1px solid rgba(var(--accent-rgb),.4);
  padding:2px 7px; border-radius:5px; opacity:.8; }
.fx-pal-item.sel, .fx-pal-item:hover{
  background:rgba(var(--accent-rgb),.14); color:#fff;
  box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.4);
}
.fx-pal-hint{ padding:8px 16px; font-family:var(--mono); font-size:11px; color:#56688f;
  border-top:1px solid rgba(var(--accent-rgb),.18); display:flex; gap:16px; }

/* ---------- 6. Overlay de DÉMARRAGE (boot) ---------- */
#fx-boot{
  position:fixed; inset:0; z-index:9500; background:#00040a;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family:var(--mono); color:rgb(var(--accent-rgb));
  transition:opacity .7s ease;
}
#fx-boot.done{ opacity:0; pointer-events:none; }
.fx-boot-logo{ font-family:var(--title); font-size:46px; font-weight:900; letter-spacing:10px;
  text-shadow:0 0 24px rgba(var(--accent-rgb),.8); margin-bottom:6px; }
.fx-boot-sub{ font-size:12px; letter-spacing:5px; color:#7df6ff; opacity:.7; margin-bottom:30px; }
.fx-boot-lines{ width:min(520px,86vw); min-height:130px; font-size:13px; line-height:1.7; }
.fx-boot-lines .ok{ color:#19ff8a; }
.fx-boot-bar{ width:min(520px,86vw); height:3px; margin-top:18px;
  background:rgba(var(--accent-rgb),.15); border-radius:3px; overflow:hidden; }
.fx-boot-bar i{ display:block; height:100%; width:0;
  background:linear-gradient(90deg, transparent, rgb(var(--accent-rgb)));
  box-shadow:0 0 12px rgb(var(--accent-rgb)); transition:width .25s linear; }

/* ---------- 7. Mode OVERDRIVE (easter egg Konami) ---------- */
body.overdrive{ animation:hueSpin 6s linear infinite; }
@keyframes hueSpin{ from{ filter:hue-rotate(0) } to{ filter:hue-rotate(360deg) } }
.fx-toast{
  position:fixed; bottom:120px; left:50%; transform:translateX(-50%) translateY(20px);
  z-index:9600; background:rgba(5,8,20,.95); color:#dff6ff;
  border:1px solid rgba(var(--accent-rgb),.6); border-radius:10px;
  padding:12px 22px; font-family:var(--mono); font-size:13px; letter-spacing:1px;
  box-shadow:0 0 30px rgba(var(--accent-rgb),.35); opacity:0; pointer-events:none;
  transition:opacity .3s, transform .3s;
}
.fx-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------- 8. Transitions douces des overlays modules ---------- */
.overlay{ transition:opacity .25s ease; }
.overlay.hidden{ opacity:0; }

/* ---------- Réduction de mouvement ---------- */
@media (prefers-reduced-motion: reduce){
  .holo::before,.holo::after,.brand .logo,#fx-boot,.log p{ animation:none !important; }
}
@media (hover:none){
  #fx-cursor,#fx-dot{ display:none !important; }
  body.cisco-cursor{ cursor:auto; }
}