/* =============================================================
   Fond de héros animé — remplace l'image statique hero-bg.webp.

   Palette reprise du webp : magenta → rose → corail → pêche
   concentrés en haut, dégradé vers le blanc pur en bas, grain
   léger, et un faisceau blanc diagonal qui balaye l'écran.

   Aucune image, aucune dépendance, aucun <canvas> : uniquement
   des dégradés et des keyframes. Voir le composant Blade
   resources/views/components/animated-hero-background.blade.php,
   qui porte la structure des calques.
   ============================================================= */

/* --- déplacement des taches de couleur ------------------------ */
@keyframes hb-slideA { 0%{transform:translate3d(-22%,-6%,0) scale(1)} 33%{transform:translate3d(34%,10%,0) scale(1.3)} 66%{transform:translate3d(12%,-12%,0) scale(.86)} 100%{transform:translate3d(-22%,-6%,0) scale(1)} }
@keyframes hb-slideB { 0%{transform:translate3d(30%,6%,0) scale(1.14)} 40%{transform:translate3d(-30%,-10%,0) scale(.84)} 75%{transform:translate3d(-8%,14%,0) scale(1.28)} 100%{transform:translate3d(30%,6%,0) scale(1.14)} }
@keyframes hb-slideC { 0%{transform:translate3d(16%,0,0) scale(.9)} 50%{transform:translate3d(-34%,12%,0) scale(1.36)} 100%{transform:translate3d(16%,0,0) scale(.9)} }
@keyframes hb-slideD { 0%{transform:translate3d(14%,-8%,0) scale(1.02)} 45%{transform:translate3d(-28%,10%,0) scale(1.36)} 100%{transform:translate3d(14%,-8%,0) scale(1.02)} }

/* --- respiration et dérive chromatique ------------------------ */
@keyframes hb-breathe { 0%,100%{opacity:.25} 50%{opacity:1} }
@keyframes hb-breatheAlt { 0%,100%{opacity:1} 50%{opacity:.2} }
@keyframes hb-hue { 0%,100%{filter:hue-rotate(-16deg) saturate(1)} 50%{filter:hue-rotate(24deg) saturate(1.18)} }

/* --- faisceau de lumière -------------------------------------
   Les translations sont en vw, jamais en % : un pourcentage se
   calcule sur la largeur de l'élément (9 % à 26 % de l'écran ici),
   la traînée ne traverserait donc jamais la page. */
@keyframes hb-sweep { 0%{transform:translateX(-20vw);opacity:0} 12%,88%{opacity:1} 100%{transform:translateX(180vw);opacity:0} }
@keyframes hb-sweepSlow { 0%{transform:translateX(-32vw);opacity:0} 18%,82%{opacity:.9} 100%{transform:translateX(178vw);opacity:0} }

/* --- grain ----------------------------------------------------
   Le SVG est encodé en pourcentage — pas de `;utf8,`, pas de `<`
   bruts : l'URI serait tronquée au premier `;` et le grain
   disparaîtrait. Défini ici plutôt qu'en style inline, où les
   apostrophes du SVG entreraient en conflit avec les guillemets
   de l'attribut HTML. */
.hb-noise {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.34'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* --- reprise du rendu des anciens conteneurs ------------------
   `.ft-hero-bg img` et `.tp-hero-bg img` portaient un arrondi
   hérité et un fondu vers le bas. L'image partie, ces deux traits
   passent sur la racine du composant pour que le héros garde
   exactement la même découpe. */
.ft-hero-bg > .hb-root,
.tp-hero-bg > .hb-root {
  border-radius: inherit;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
}

/* Le héros du tableau de bord n'établissait aucun contexte
   d'empilement : `position: relative` seul n'en crée pas. Un enfant
   en z-index négatif serait alors passé DERRIÈRE le fond du héros,
   donc invisible. `isolation` en crée un sans rien changer à la
   mise en page. */
.hero {
  isolation: isolate;
}

@media (prefers-reduced-motion: reduce) {
  .hb-root * { animation: none !important; }
}