/* ═══════════════════════════════════════════════════════════
   FCUTZ — Bubble / Ripple effect (effet visuel global)
   Aucune logique métier modifiée : style + animations uniquement.
   Override couleur : --ripple-color sur l'élément cible.
   Opt-out : attribut [data-no-ripple] sur l'élément.
   ═══════════════════════════════════════════════════════════ */

/* Conteneur de positionnement appliqué dynamiquement par ripple.js
   uniquement si l'élément est en position:static. N'ajoute PAS overflow:hidden
   pour préserver les box-shadow/glows extérieurs. */
.ripple-host { position: relative; }

/* Calque de clipping interne — recopie le border-radius de l'hôte
   (border-radius:inherit) et clip uniquement le ripple, pas l'hôte. */
.ripple-clip {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* Cercle qui s'expand depuis le point de clic */
.ripple-wave {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  background: var(--ripple-color, rgba(255, 255, 255, 0.42));
  will-change: transform, opacity;
  animation: rippleExpand 520ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes rippleExpand {
  0%   { transform: translate(-50%, -50%) scale(0);   opacity: 0.55; }
  60%  { opacity: 0.28; }
  100% { transform: translate(-50%, -50%) scale(1);   opacity: 0; }
}

/* Bubble plein-écran déclenché à l'ouverture d'un modal (.modal-bg.open).
   z-index 299 = juste sous .modal-bg (300) pour rester derrière le modal
   tout en restant visible à travers le backdrop semi-transparent. */
.modal-bubble {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 299;
  transform: translate(-50%, -50%) scale(0);
  background: radial-gradient(
    circle,
    rgba(167, 139, 250, 0.42) 0%,
    rgba(167, 139, 250, 0.18) 38%,
    rgba(167, 139, 250, 0.00) 72%
  );
  will-change: transform, opacity;
  animation: modalBubbleBurst 620ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes modalBubbleBurst {
  0%   { transform: translate(-50%, -50%) scale(0);    opacity: 0.85; }
  35%  { opacity: 0.55; }
  100% { transform: translate(-50%, -50%) scale(1);    opacity: 0; }
}

/* Respect des préférences d'animation réduite */
@media (prefers-reduced-motion: reduce) {
  .ripple-wave,
  .modal-bubble { animation: none !important; display: none; }
}