/* ════════════════════════════════════════════════════════════════════
   HOLOGRAPHIC OVERLAY — EXETAT FIVE SARL
   Ajout d'effets holographiques sans toucher au JS existant
   Strategie : surcouche CSS qui complete les styles existants
   ════════════════════════════════════════════════════════════════════ */

/* ─── ANIMATIONS HOLOGRAPHIQUES ─── */
@keyframes holo-shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes holo-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}
@keyframes holo-glow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(226, 75, 74, 0.3),
                0 0 40px rgba(255, 150, 100, 0.15);
  }
  50% {
    box-shadow: 0 0 30px rgba(226, 75, 74, 0.5),
                0 0 60px rgba(255, 150, 100, 0.25);
  }
}
@keyframes holo-scan {
  0% { transform: translateY(-100%); opacity: 0; }
  50% { opacity: 0.4; }
  100% { transform: translateY(100%); opacity: 0; }
}
@keyframes holo-prism {
  0%, 100% { filter: hue-rotate(0deg); }
  50% { filter: hue-rotate(15deg); }
}
@keyframes holo-float {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-20px, -20px); }
}
@keyframes holo-flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}
@keyframes holo-orbit-fast {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ─── PARTICULES AMBIENT (bulles flottantes en arriere-plan) ─── */
body::before {
  content: '';
  position: fixed;
  top: 0; right: 0;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(255, 100, 100, 0.12) 0%, transparent 70%);
  pointer-events: none;
  animation: holo-float 8s ease-in-out infinite;
  z-index: 0;
}
body::after {
  content: '';
  position: fixed;
  bottom: 0; left: 200px;
  width: 350px; height: 350px;
  background: radial-gradient(circle, rgba(255, 200, 180, 0.15) 0%, transparent 70%);
  pointer-events: none;
  animation: holo-float 10s ease-in-out infinite reverse;
  z-index: 0;
}

/* ─── EFFET SHIMMER sur les CARDS principales ─── */
.stat-card,
.module-card,
.banque-card,
.qcm-card,
.score-card,
.matiere-card,
.section-card,
[class*="card"] {
  position: relative;
  overflow: hidden;
}
.stat-card::after,
.module-card::after,
.banque-card::after,
.qcm-card::after,
.score-card::after,
.matiere-card::after,
.section-card::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg,
              transparent 0%,
              rgba(255, 255, 255, 0.45) 50%,
              transparent 100%);
  animation: holo-shimmer 5s infinite;
  pointer-events: none;
  z-index: 1;
}

/* ─── GLOW PULSE sur les BOUTONS PRIMARY ─── */
.btn-primary,
.btn-cta,
button[type="submit"],
button.primary,
.button-primary {
  animation: holo-glow 3s ease-in-out infinite;
}

/* ─── TEXTE HOLOGRAPHIQUE (titres principaux) ─── */
h1, .holo-title, .hero-title {
  background: linear-gradient(135deg,
              #E24B4A 0%,
              #FF8B7C 25%,
              #E24B4A 50%,
              #A32D2D 75%,
              #E24B4A 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: holo-shimmer 6s linear infinite,
             holo-prism 8s ease-in-out infinite;
}

/* ─── DOT GREEN qui PULSE (status online) ─── */
.status-dot,
.online-dot,
.live-indicator,
[class*="status"] [class*="dot"] {
  animation: holo-pulse 2s infinite;
}

/* ─── SCAN LINE sur les CTA principaux ─── */
.cta-card,
.mission-card,
.hero-cta,
[class*="hero"] {
  position: relative;
  overflow: hidden;
}
.cta-card::before,
.mission-card::before,
.hero-cta::before,
[class*="hero"]::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 60px;
  background: linear-gradient(180deg,
              transparent,
              rgba(226, 75, 74, 0.18),
              transparent);
  animation: holo-scan 4s linear infinite;
  pointer-events: none;
  z-index: 1;
}

/* ─── ORB 3D effect sur logo brand ─── */
.brand-orb,
.logo-orb,
[class*="logo"][class*="orb"] {
  position: relative;
  background: linear-gradient(135deg,
              #FF6B6B 0%,
              #E24B4A 50%,
              #A32D2D 100%);
  box-shadow: inset 0 1px 3px rgba(255,255,255,0.6),
              0 4px 12px rgba(226, 75, 74, 0.4);
}
.brand-orb::before,
.logo-orb::before {
  content: '';
  position: absolute;
  top: 3px; left: 6px; right: 12px;
  height: 8px;
  background: linear-gradient(180deg,
              rgba(255,255,255,0.6),
              transparent);
  border-radius: 4px 4px 0 0;
  pointer-events: none;
}

/* ─── PRISM BORDER sur cards specifiques ─── */
.prism,
.holo-card-special {
  border: 1px solid transparent;
  background: linear-gradient(#FFFFFF, #FFFFFF) padding-box,
              linear-gradient(135deg,
                  #FF6B6B 0%,
                  #FFA500 25%,
                  #E24B4A 50%,
                  #A32D2D 75%,
                  #FF6B6B 100%) border-box;
  background-size: 100%, 300% 300%;
  animation: holo-prism 6s ease-in-out infinite;
}

/* ─── BACKGROUND SUBTIL (sur le body ou app container) ─── */
.app, .main, body {
  position: relative;
}

/* ─── FLICKER pour overlay tags HUD style ─── */
.overlay-tag,
.holo-badge,
.hud-tag {
  animation: holo-flicker 3s ease-in-out infinite;
}

/* ─── PROGRESS BAR avec shimmer rouge ─── */
.progress-fill,
.bar-fill,
[class*="progress"] [class*="fill"] {
  background: linear-gradient(90deg, #FF8B7C, #E24B4A, #FF6B6B) !important;
  background-size: 200% 100% !important;
  animation: holo-shimmer 2s linear infinite !important;
  box-shadow: 0 0 12px rgba(226, 75, 74, 0.5);
}

/* ─── SOFT GLOW sur sidebar active item ─── */
.nav-item.active,
.sidebar-item.active,
[class*="nav"][class*="active"] {
  position: relative;
  overflow: hidden;
}
.nav-item.active::before,
.sidebar-item.active::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg,
              transparent,
              rgba(255, 255, 255, 0.3),
              transparent);
  animation: holo-shimmer 3s infinite;
  pointer-events: none;
}

/* ─── MOBILE : reduire l'intensite des effets pour perf ─── */
@media (max-width: 600px) {
  body::before, body::after { display: none; }
  .stat-card::after,
  .module-card::after,
  .banque-card::after { animation-duration: 8s; }
}

/* ─── REDUCED MOTION : respecter accessibility ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}