/* hero-home-fx.css — Effets locaux hero accueil J.art V7
   Calibrés sur la zone de l'image bg-home-hero.webp (cascade a droite, couple
   centre-droite). Seulement charge sur index.html. */

.hero-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

/* Drift de poussiere doree concentree pres de la robe */
.hero-fx-dust {
  position: absolute;
  top: 40%;
  right: 16%;
  width: 26%;
  height: 50%;
  background:
    radial-gradient(circle at 30% 60%, rgba(232,196,108,.18), transparent 18%),
    radial-gradient(circle at 60% 40%, rgba(255,240,200,.14), transparent 14%),
    radial-gradient(circle at 45% 75%, rgba(212,175,55,.16),  transparent 16%);
  filter: blur(6px);
  mix-blend-mode: screen;
  animation: heroDustDrift 14s ease-in-out infinite;
  opacity: .9;
}
@keyframes heroDustDrift {
  0%, 100% { transform: translate(0,    0)    scale(1); opacity: .65; }
  50%      { transform: translate(-3%, -2%) scale(1.06); opacity: .95; }
}

/* === HALO LUMINEUX RESPIRANT centre couple === */
.hero-fx-glow {
  position: absolute;
  top: 28%;
  left: 38%;
  width: 32%;
  height: 44%;
  background: radial-gradient(circle, rgba(232,196,108,.22), rgba(212,175,55,.08) 50%, transparent 70%);
  filter: blur(34px);
  mix-blend-mode: screen;
  animation: heroGlowBreathe 7s ease-in-out infinite;
}
@keyframes heroGlowBreathe {
  0%, 100% { opacity: .60; transform: scale(1);    }
  50%      { opacity: .95; transform: scale(1.10); }
}

/* === MOBILE === recadre les effets sur la nouvelle position image (--bg-pos: 72% center) */
@media (max-width: 768px) {
  .hero-fx-dust { right: 10%; width: 32%; height: 44%; top: 44%; }
  .hero-fx-glow { left: 30%; width: 40%; height: 40%; top: 32%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-fx-dust,
  .hero-fx-glow { animation: none !important; }
}