/*
 * effects.css — Morpheus Building Diorama
 * Effets CSS vivants pour les overlays diorama
 * Auteur : Rick (Mission 5 — 2026-02-28)
 *
 * Règles strictes :
 *   - 100% CSS, zéro JS
 *   - Compositor thread only : opacity + transform (+ filter GPU)
 *   - will-change sur toutes les animations
 *   - prefers-reduced-motion respecté — toutes animations OFF
 *   - Aucune animation < 2s de durée
 *   - Aucune propriété qui trigge layout (width/height/margin/padding)
 */

/* ================================================================
   VARIABLES GLOBALES — Design tokens par étage
   ================================================================ */
:root {
  /* R&D — Vert néon électrique */
  --fx-rd-green:         #00ff41;
  --fx-rd-glow:          rgba(0, 255, 65, 0.4);

  /* Ops — Bleu acier LED */
  --fx-ops-blue:         #aaccff;
  --fx-ops-glow:         rgba(170, 204, 255, 0.45);

  /* Finance — Amber chaud */
  --fx-finance-amber:    #f5a623;
  --fx-finance-glow:     rgba(245, 166, 35, 0.4);

  /* Business — Indigo dramatique */
  --fx-business-indigo:  #8888ff;
  --fx-business-glow:    rgba(136, 136, 255, 0.4);

  /* Production — Liège naturel chaud */
  --fx-production-warm:  #ffe8b0;
  --fx-production-glow:  rgba(255, 232, 176, 0.3);

  /* Penthouse — Or noir */
  --fx-penthouse-gold:   #c9a96e;
  --fx-penthouse-glow:   rgba(201, 169, 110, 0.35);
}


/* ================================================================
   .fx-hologram — Scintillement holographique (R&D)
   Simule un hologramme vert instable sur des données projetées
   ================================================================ */
.fx-hologram {
  mix-blend-mode: screen;
  opacity: 0.7;
  will-change: opacity, transform, filter;
  animation: hologram-flicker 3.2s ease-in-out infinite;
  filter: brightness(1.3) saturate(2.0);
  color: var(--fx-rd-green);
  text-shadow:
    0 0 8px  var(--fx-rd-green),
    0 0 20px var(--fx-rd-glow);
}

@keyframes hologram-flicker {
  0%   { opacity: 0.70; filter: brightness(1.3) saturate(2.0); transform: translateY(0px);  }
  8%   { opacity: 0.85; filter: brightness(1.6) saturate(2.5); transform: translateY(-1px); }
  16%  { opacity: 0.45; filter: brightness(0.8) saturate(1.4); transform: translateY(0px);  }
  20%  { opacity: 0.72; filter: brightness(1.4) saturate(2.2); transform: translateY(0px);  }
  35%  { opacity: 0.80; filter: brightness(1.5) saturate(2.0); transform: translateY(1px);  }
  44%  { opacity: 0.25; filter: brightness(0.6) saturate(1.1); transform: translateY(-2px); }
  46%  { opacity: 0.75; filter: brightness(1.4) saturate(2.2); transform: translateY(0px);  }
  60%  { opacity: 0.70; filter: brightness(1.3) saturate(2.0); transform: translateY(0px);  }
  75%  { opacity: 0.90; filter: brightness(1.7) saturate(2.8); transform: translateY(-1px); }
  82%  { opacity: 0.35; filter: brightness(0.7) saturate(1.2); transform: translateY(0px);  }
  100% { opacity: 0.70; filter: brightness(1.3) saturate(2.0); transform: translateY(0px);  }
}


/* ================================================================
   .fx-led-blink — Clignotement LED aléatoire (Ops)
   Simule des voyants LED sur rack de serveurs
   Chaque .fx-led-blink est un petit dot indépendant
   ================================================================ */
.fx-led-blink {
  display: inline-block;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  background-color: var(--fx-ops-blue);
  box-shadow:
    0 0 6px  2px var(--fx-ops-glow),
    0 0 12px 4px rgba(170, 204, 255, 0.15);
  will-change: opacity;
  animation:
    led-blink  2.3s step-end    infinite,
    led-pulse  4.1s ease-in-out infinite;
}

/* Delays naturels via nth-child — évite l'effet "tous ensemble" */
.fx-led-blink:nth-child(2n)   {
  animation-delay: 0.7s, 1.3s;
  background-color: #22c55e;
  box-shadow: 0 0 6px 2px rgba(34, 197, 94, 0.5), 0 0 12px 4px rgba(34, 197, 94, 0.15);
}
.fx-led-blink:nth-child(3n)   {
  animation-delay: 1.4s, 0.5s;
  background-color: #ef4444;
  box-shadow: 0 0 6px 2px rgba(239, 68, 68, 0.5), 0 0 12px 4px rgba(239, 68, 68, 0.15);
}
.fx-led-blink:nth-child(4n)   { animation-delay: 0.3s, 2.1s; }
.fx-led-blink:nth-child(5n)   { animation-delay: 1.9s, 0.8s; }
.fx-led-blink:nth-child(7n)   { animation-delay: 2.7s, 3.2s; }

@keyframes led-blink {
  0%   { opacity: 1.0; }
  15%  { opacity: 1.0; }
  16%  { opacity: 0.05; }
  17%  { opacity: 1.0; }
  100% { opacity: 1.0; }
}

@keyframes led-pulse {
  0%   { opacity: 0.8; }
  50%  { opacity: 1.0; }
  100% { opacity: 0.8; }
}


/* ================================================================
   .fx-ticker — Défilement horizontal de données (Finance)
   Simule un ticker Bloomberg — wrap the text in .fx-ticker__inner
   Usage : <div class="fx-ticker"><span class="fx-ticker__inner">data...</span></div>
   ================================================================ */
.fx-ticker {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--fx-finance-amber);
  text-shadow: 0 0 6px rgba(245, 166, 35, 0.5);
}

.fx-ticker__inner {
  display: inline-block;
  will-change: transform;
  animation: ticker-scroll 28s linear infinite;
  padding-right: 80px; /* gap entre répétitions */
}

@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Variante terminal vert (R&D) */
.fx-ticker--terminal {
  color: var(--fx-rd-green);
  text-shadow: 0 0 8px var(--fx-rd-glow);
}
.fx-ticker--terminal .fx-ticker__inner {
  animation-duration: 22s;
}

/* Variante rapide — data flux ops */
.fx-ticker--fast .fx-ticker__inner {
  animation-duration: 14s;
  color: var(--fx-ops-blue);
  text-shadow: 0 0 6px var(--fx-ops-glow);
}


/* ================================================================
   .fx-glow-pulse — Halo pulsant générique (tous étages)
   Paramétrable via custom properties :
     --glow-color     : couleur rgba du halo
     --glow-intensity : facteur de taille (1 = standard, 2 = fort)
   ================================================================ */
.fx-glow-pulse {
  --glow-color:     var(--fx-rd-glow);
  --glow-intensity: 1;
  will-change: opacity;
  animation: glow-pulse-beat 3.5s ease-in-out infinite;
}

@keyframes glow-pulse-beat {
  0%   {
    box-shadow:
      0 0 calc(8px  * var(--glow-intensity)) calc(2px * var(--glow-intensity)) var(--glow-color),
      0 0 calc(16px * var(--glow-intensity)) calc(4px * var(--glow-intensity)) var(--glow-color);
    opacity: 0.70;
  }
  50%  {
    box-shadow:
      0 0 calc(18px * var(--glow-intensity)) calc(6px * var(--glow-intensity)) var(--glow-color),
      0 0 calc(36px * var(--glow-intensity)) calc(10px * var(--glow-intensity)) var(--glow-color);
    opacity: 1.0;
  }
  100% {
    box-shadow:
      0 0 calc(8px  * var(--glow-intensity)) calc(2px * var(--glow-intensity)) var(--glow-color),
      0 0 calc(16px * var(--glow-intensity)) calc(4px * var(--glow-intensity)) var(--glow-color);
    opacity: 0.70;
  }
}

/* Presets par étage — prêts à l'emploi */
.fx-glow-pulse--finance   { --glow-color: var(--fx-finance-glow);   }
.fx-glow-pulse--ops       { --glow-color: var(--fx-ops-glow);       }
.fx-glow-pulse--rd        { --glow-color: var(--fx-rd-glow);        }
.fx-glow-pulse--business  { --glow-color: var(--fx-business-glow);  }
.fx-glow-pulse--penthouse { --glow-color: var(--fx-penthouse-glow); }
.fx-glow-pulse--strong    { --glow-intensity: 2; }


/* ================================================================
   .fx-city-twinkle — Scintillement lumières de la ville
   Simule des fenêtres qui s'allument/éteignent dans la skyline
   Overlay via ::before/::after — pas d'éléments enfants requis
   ================================================================ */
.fx-city-twinkle {
  position: relative;
  overflow: hidden;
}

.fx-city-twinkle::before,
.fx-city-twinkle::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: opacity;
}

.fx-city-twinkle::before {
  background-image:
    radial-gradient(circle 1px at 12% 28%, rgba(255, 220, 150, 0.9) 0%, transparent 3px),
    radial-gradient(circle 1px at 27% 52%, rgba(200, 220, 255, 0.8) 0%, transparent 3px),
    radial-gradient(circle 1px at 41% 18%, rgba(255, 220, 150, 0.7) 0%, transparent 3px),
    radial-gradient(circle 1px at 58% 38%, rgba(200, 220, 255, 0.9) 0%, transparent 3px),
    radial-gradient(circle 1px at 72% 14%, rgba(255, 220, 150, 0.8) 0%, transparent 3px),
    radial-gradient(circle 1px at 86% 58%, rgba(200, 220, 255, 0.7) 0%, transparent 3px),
    radial-gradient(circle 1px at  6% 68%, rgba(255, 220, 150, 0.6) 0%, transparent 3px),
    radial-gradient(circle 1px at 50% 65%, rgba(200, 220, 255, 0.8) 0%, transparent 3px),
    radial-gradient(circle 1px at 33% 78%, rgba(255, 220, 150, 0.9) 0%, transparent 3px),
    radial-gradient(circle 1px at 91% 32%, rgba(200, 220, 255, 0.6) 0%, transparent 3px),
    radial-gradient(circle 1px at 65% 82%, rgba(255, 220, 150, 0.7) 0%, transparent 3px),
    radial-gradient(circle 1px at 80% 70%, rgba(200, 220, 255, 0.5) 0%, transparent 3px);
  animation: city-twinkle-a 4.7s ease-in-out infinite;
}

.fx-city-twinkle::after {
  background-image:
    radial-gradient(circle 1px at 19% 42%, rgba(255, 200, 100, 0.8) 0%, transparent 3px),
    radial-gradient(circle 1px at 45% 11%, rgba(180, 200, 255, 0.9) 0%, transparent 3px),
    radial-gradient(circle 1px at 68% 53%, rgba(255, 200, 100, 0.7) 0%, transparent 3px),
    radial-gradient(circle 1px at 82% 26%, rgba(180, 200, 255, 0.8) 0%, transparent 3px),
    radial-gradient(circle 1px at  9% 85%, rgba(255, 200, 100, 0.6) 0%, transparent 3px),
    radial-gradient(circle 1px at 57% 73%, rgba(180, 200, 255, 0.7) 0%, transparent 3px),
    radial-gradient(circle 1px at 29% 8%,  rgba(255, 200, 100, 0.9) 0%, transparent 3px),
    radial-gradient(circle 1px at 94% 76%, rgba(180, 200, 255, 0.8) 0%, transparent 3px),
    radial-gradient(circle 1px at 38% 60%, rgba(255, 200, 100, 0.5) 0%, transparent 3px),
    radial-gradient(circle 1px at 76% 90%, rgba(180, 200, 255, 0.6) 0%, transparent 3px);
  animation: city-twinkle-b 6.3s ease-in-out infinite 2.1s;
}

@keyframes city-twinkle-a {
  0%   { opacity: 0.6; }
  28%  { opacity: 1.0; }
  55%  { opacity: 0.3; }
  78%  { opacity: 0.9; }
  100% { opacity: 0.6; }
}

@keyframes city-twinkle-b {
  0%   { opacity: 0.8; }
  22%  { opacity: 0.2; }
  58%  { opacity: 1.0; }
  83%  { opacity: 0.4; }
  100% { opacity: 0.8; }
}


/* ================================================================
   .fx-neon-flicker — Néon qui clignote (Business)
   Keyframes irréguliers pour imiter un néon défaillant / usé
   ================================================================ */
.fx-neon-flicker {
  --neon-color: var(--fx-business-indigo);
  color: var(--neon-color);
  text-shadow:
    0 0  5px var(--neon-color),
    0 0 10px var(--neon-color),
    0 0 20px var(--neon-color),
    0 0 40px rgba(136, 136, 255, 0.35);
  will-change: opacity;
  animation: neon-flicker 5.1s linear infinite;
}

@keyframes neon-flicker {
  0%   { opacity: 1.0; }
  4%   { opacity: 0.0; }
  5%   { opacity: 1.0; }
  7%   { opacity: 0.75; }
  8%   { opacity: 0.0; }
  9%   { opacity: 1.0; }
  12%  { opacity: 0.55; }
  13%  { opacity: 1.0; }
  16%  { opacity: 0.0; }
  17%  { opacity: 1.0; }
  20%  { opacity: 0.85; }
  50%  { opacity: 1.0; }
  51%  { opacity: 0.0; }
  52%  { opacity: 1.0; }
  80%  { opacity: 1.0; }
  81%  { opacity: 0.5; }
  82%  { opacity: 1.0; }
  100% { opacity: 1.0; }
}

/* Variante verte — R&D (plus rapide, plus agressive) */
.fx-neon-flicker--rd {
  --neon-color: var(--fx-rd-green);
  text-shadow:
    0 0  5px var(--neon-color),
    0 0 10px var(--neon-color),
    0 0 20px var(--neon-color),
    0 0 40px var(--fx-rd-glow);
  animation-duration: 3.8s;
}

/* Variante ambrée — Finance (douce, rare) */
.fx-neon-flicker--finance {
  --neon-color: var(--fx-finance-amber);
  text-shadow:
    0 0  4px var(--neon-color),
    0 0  8px var(--neon-color),
    0 0 16px var(--fx-finance-glow);
  animation-duration: 8.2s;
}


/* ================================================================
   .fx-screen-glow — Lueur d'écran (Production)
   Radial gradient chaud qui pulse doucement — simule la lumière
   émise par un écran sur un mur/bureau derrière
   ================================================================ */
.fx-screen-glow {
  position: relative;
  overflow: hidden;
}

.fx-screen-glow::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 70% 55% at 50% 35%,
    rgba(255, 232, 176, 0.20) 0%,
    rgba(255, 200, 100, 0.09) 45%,
    transparent 72%
  );
  will-change: opacity;
  animation: screen-glow-pulse 4.2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes screen-glow-pulse {
  0%   { opacity: 0.55; }
  50%  { opacity: 1.0;  }
  100% { opacity: 0.55; }
}

/* Variante froide — Ops/R&D */
.fx-screen-glow--cold::before {
  background: radial-gradient(
    ellipse 70% 55% at 50% 35%,
    rgba(170, 204, 255, 0.15) 0%,
    rgba(42,  82,  152, 0.06) 45%,
    transparent 72%
  );
  animation-duration: 5.5s;
}

/* Variante verte — R&D */
.fx-screen-glow--rd::before {
  background: radial-gradient(
    ellipse 70% 55% at 50% 35%,
    rgba(0, 255, 65,  0.12) 0%,
    rgba(0, 200, 50,  0.05) 45%,
    transparent 72%
  );
  animation-duration: 3.1s;
}

/* Variante or — Penthouse */
.fx-screen-glow--penthouse::before {
  background: radial-gradient(
    ellipse 60% 50% at 50% 40%,
    rgba(201, 169, 110, 0.18) 0%,
    rgba(180, 140, 80,  0.07) 45%,
    transparent 70%
  );
  animation-duration: 6.0s;
}


/* ================================================================
   PRÉFÉRENCE ACCESSIBILITÉ — prefers-reduced-motion
   Désactive TOUTES les animations. Freeze en état visible stable.
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  .fx-hologram,
  .fx-led-blink,
  .fx-ticker__inner,
  .fx-glow-pulse,
  .fx-city-twinkle::before,
  .fx-city-twinkle::after,
  .fx-neon-flicker,
  .fx-screen-glow::before {
    animation: none !important;
    transition: none !important;
  }

  /* États stables visibles */
  .fx-hologram          { opacity: 0.7;  filter: brightness(1.3) saturate(2.0); }
  .fx-led-blink         { opacity: 1.0;  }
  .fx-ticker__inner     { transform: translateX(0); }
  .fx-glow-pulse        { opacity: 0.85; }
  .fx-city-twinkle::before { opacity: 0.7; }
  .fx-city-twinkle::after  { opacity: 0.7; }
  .fx-neon-flicker      { opacity: 1.0;  }
  .fx-screen-glow::before  { opacity: 0.8; }
}