/* ==========================================================================
   ELNE REEL — PETIT MICRO STUDIO CURSOR SYSTEM
   Curseur Interactif d'Élite : Petit Micro Studio & Sillage Lumineux Fluide
   ========================================================================== */

/* Masquage absolu du curseur système natif sur tous les éléments cliquables */
@media (hover: hover) and (pointer: fine) {
  *, 
  *::before, 
  *::after,
  html,
  body, 
  a, 
  button, 
  input, 
  select, 
  textarea, 
  [role="button"], 
  .portal-monolith-col,
  .track-card,
  .book-card-item,
  .chapter-card,
  .btn-neon-gold,
  .quantum-btn-portal,
  .quantum-node-item,
  .sidebar-portal-tile {
    cursor: none !important;
  }
}

/* Conteneur Global du Curseur Custom (Z-index maximal au-dessus de tout) */
#quantum-cursor-root {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none !important;
  z-index: 9999999 !important;
  overflow: hidden;
  will-change: transform;
}

/* Anneau / Halo Magnétique Suiveur (Inertie Lerp Douce) */
.cursor-magnetic-aura {
  position: absolute;
  top: 0;
  left: 0;
  width: 26px;
  height: 26px;
  margin-top: -13px;
  margin-left: -13px;
  border-radius: 50%;
  border: 1px solid rgba(245, 158, 11, 0.4);
  background: radial-gradient(circle, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.02) 65%, transparent 100%);
  pointer-events: none;
  transform: translate3d(-100px, -100px, 0);
  transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              height 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              margin 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.2s ease,
              background 0.2s ease,
              box-shadow 0.2s ease;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.2);
  will-change: transform, width, height;
}

/* État Hover : L'aura s'agrandit doucement sur les éléments cliquables */
.cursor-hover .cursor-magnetic-aura {
  width: 44px;
  height: 44px;
  margin-top: -22px;
  margin-left: -22px;
  border-color: rgba(245, 158, 11, 0.85);
  background: radial-gradient(circle, rgba(245, 158, 11, 0.28) 0%, rgba(251, 191, 36, 0.06) 55%, transparent 100%);
  box-shadow: 0 0 22px rgba(245, 158, 11, 0.55), inset 0 0 12px rgba(245, 158, 11, 0.2);
}

/* L'Icône du Petit Micro Studio (NE DISPARAÎT JAMAIS) */
.cursor-main-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  pointer-events: none !important;
  transform: translate3d(-100px, -100px, 0);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 8px rgba(245, 158, 11, 0.6));
  transition: filter 0.2s ease;
  will-change: transform;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Au survol d'un élément cliquable : Le micro brille plus intensément SANS JAMAIS DISPARAÎTRE */
.cursor-hover .cursor-main-icon {
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 14px rgba(251, 191, 36, 0.9)) !important;
}

/* Micro-rebond élastique au clic */
.cursor-clicking .cursor-main-icon {
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 18px rgba(245, 158, 11, 1)) !important;
}

/* Canvas du Sillage (Golden Trail) */
.cursor-particle-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* Onde de Choc Circulaire au Clic */
.cursor-click-shockwave {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid var(--gold, #f59e0b);
  pointer-events: none;
  animation: clickWaveExpand 0.4s cubic-bezier(0.1, 0.8, 0.2, 1) forwards;
}

@keyframes clickWaveExpand {
  0% {
    width: 0;
    height: 0;
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.2);
    box-shadow: 0 0 10px var(--gold, #f59e0b);
  }
  100% {
    width: 70px;
    height: 70px;
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 0 0 25px rgba(245, 158, 11, 0);
  }
}

/* DÉSACTIVATION SUR APPAREILS PUREMENT TACTILES SANS SOURIS */
@media (hover: none) or (pointer: coarse) {
  #quantum-cursor-root {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }
  
  *, *::before, *::after, body, a, button, input, select, textarea, [role="button"] {
    cursor: auto !important;
  }
}