/* ════════════════════════════════════════════════════════════
   HERO IMMERSIF — feuille de style isolée (voir hero-immersive.js)
   Ajoute uniquement : le canvas de scène (WebGL/Canvas2D), le halo
   statique de secours, la révélation progressive du contenu du hero
   au chargement, et l'inclinaison 3D légère des cartes au survol.
   Ne modifie aucune règle existante de index.html.
════════════════════════════════════════════════════════════ */

/* Canvas de la scène immersive : toujours en dessous du contenu,
   jamais interactif (pointer-events:none), apparaît en fondu une
   fois prêt pour éviter tout flash. */
.hero-immersive-canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease-out;
}
.hero-immersive-canvas.is-ready { opacity: 1; }

/* Halo statique de secours : toujours présent, sert de fond quand
   prefers-reduced-motion est actif ou si le canvas ne peut pas
   démarrer. Reste visible sous le canvas dans tous les cas. */
.hero-static-glow {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 18% 28%, rgba(0, 180, 255, .16), transparent 70%),
    radial-gradient(50% 45% at 85% 72%, rgba(139, 92, 246, .14), transparent 70%),
    radial-gradient(40% 40% at 55% 100%, rgba(34, 211, 238, .10), transparent 70%);
}

/* Le contenu du hero doit repasser au-dessus du nouveau canvas
   (valeurs précédentes : hero-inner=2, hero-dots=3) */
.hero-inner { z-index: 3; }
.hero-dots { z-index: 4; }

/* ── Révélation progressive et décalée au chargement ──
   Désactivée entièrement si l'utilisateur préfère moins d'animation :
   le contenu apparaît alors directement dans son état final. */
@media (prefers-reduced-motion: no-preference) {
  .hero-reveal {
    opacity: 0;
    transform: translateY(18px);
    animation: heroRevealIn .9s cubic-bezier(.22, 1, .36, 1) forwards;
  }
  .hero-reveal-1 { animation-delay: .05s; }
  .hero-reveal-2 { animation-delay: .18s; }
  .hero-reveal-3 { animation-delay: .31s; }
  .hero-reveal-4 { animation-delay: .44s; }
  .hero-reveal-5 { animation-delay: .58s; }
  .hero-reveal-6 { animation-delay: .74s; }
}
@keyframes heroRevealIn {
  to { opacity: 1; transform: translateY(0); }
}

/* ── Inclinaison 3D légère des cartes au survol ──
   Uniquement sur les pointeurs précis avec vrai survol (souris) :
   jamais sur tactile, donc jamais de coût sur mobile. */
@media (hover: hover) and (pointer: fine) {
  .hero-grid-right { perspective: 900px; }
  .hcard {
    transition: transform .25s ease-out, box-shadow .25s ease-out;
    transform-style: preserve-3d;
    will-change: transform;
  }
  .hcard:hover { box-shadow: 0 10px 30px rgba(0, 112, 209, .25); }
}

@media (prefers-reduced-motion: reduce) {
  .hcard { transition: none !important; }
}