/* ==========================================================
   Le Vignoble — couche immersive 3D (immersive.css)
   Particules WebGL, parallaxe, cartes 3D, apparitions en profondeur.
   Tout est désactivé si l'utilisateur préfère réduire les animations.
   ========================================================== */

.imm-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.imm-canvas.imm-on { opacity: 1; }

/* En-têtes clairs (carte, banquets) : le contenu passe devant les particules */
header.header.imm-host > :not(.imm-canvas) { position: relative; z-index: 2; }

/* Profondeur du contenu de l'en-tête */
.imm-host { perspective: 1200px; }
.imm-depth { will-change: transform; transform-style: preserve-3d; }

/* ---------- Cartes en 3D ---------- */
.imm-tilt {
  transform-style: preserve-3d;
  will-change: transform;
}
.imm-tilt.imm-tilting { transition: transform 0.12s ease-out, box-shadow 0.3s ease !important; }
.imm-tilt.imm-leaving { transition: transform 0.6s cubic-bezier(.2,.8,.2,1), box-shadow 0.4s ease !important; }
.imm-tilt .imm-pop { transform: translateZ(0); transition: transform 0.6s cubic-bezier(.2,.8,.2,1); }
.imm-tilt.imm-tilting .imm-pop { transform: translateZ(42px); transition: transform 0.25s ease-out; }
.imm-glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 240, 210, 0.38), rgba(255, 240, 210, 0) 55%);
  mix-blend-mode: soft-light;
  z-index: 3;
}
.imm-tilt.imm-tilting .imm-glare { opacity: 1; }

/* ---------- Apparition en profondeur au défilement ---------- */
.imm-reveal {
  opacity: 0;
  transform: perspective(900px) translate3d(0, 46px, -60px) rotateX(16deg);
  transform-origin: 50% 100%;
}
.imm-reveal.imm-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s ease, transform 1.1s cubic-bezier(.16,.84,.24,1);
  transition-delay: var(--imm-delay, 0s);
}

@media (prefers-reduced-motion: reduce) {
  .imm-canvas { display: none !important; }
  .imm-reveal { opacity: 1 !important; transform: none !important; }
}