/* ========================================================================== */
/* STYLES POUR L'AURA ORGANIQUE 3D VIVANTE - VERSION HAUTE PERFORMANCE         */
/* ========================================================================== */

.coaching-aura-container {
  position: relative;
  width: 260px;
  height: 260px;
  margin: 2.25rem 0 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  transform-style: preserve-3d;
  perspective: 1200px;
  z-index: 2;
  border-radius: 50%;
  contain: layout style;
  will-change: transform;
}

/* Ombre douce projetée sous la bulle (restaurée et renforcée) */
.coaching-aura-container::before {
  content: '';
  position: absolute;
  inset: 8% 14% 6% 14%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 72%, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.18) 36%, rgba(0, 0, 0, 0.10) 58%, rgba(0, 0, 0, 0.0) 75%);
  filter: blur(30px);
  z-index: -1;
  transform: translateY(16px) scale(1.05, 1.18);
}

/* Lueur colorée synchronisée avec la bulle (ombre colorée) */
.coaching-aura-container::after {
  content: '';
  position: absolute;
  inset: -6px;
  /* encore plus proche de la bulle */
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  /* derrière les couches de la bulle (z=2,3) mais au-dessus du fond de la carte */
  mix-blend-mode: normal;
  /* plus visible sur fond sombre */

  /* même palette et animation que la bulle pour une couleur liée */
  background-image:
    radial-gradient(circle at 15% 15%, rgba(255, 122, 0, 0.7) 0%, transparent 40%),
    radial-gradient(circle at 35% 85%, rgba(255, 45, 85, 0.8) 0%, transparent 40%),
    radial-gradient(circle at 85% 25%, rgba(191, 90, 242, 0.7) 0%, transparent 40%),
    radial-gradient(circle at 65% 75%, rgba(10, 132, 255, 0.8) 0%, transparent 40%),
    radial-gradient(circle at 85% 95%, rgba(100, 210, 255, 0.7) 0%, transparent 40%),
    radial-gradient(circle at 5% 55%, rgba(255, 0, 153, 0.8) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(94, 92, 230, 0.4), rgba(100, 210, 255, 0.3));
  background-size: 250% 250%;
  animation: organic-drift 25s ease-in-out infinite;

  filter: blur(24px) brightness(0.95) saturate(0.98);
  opacity: 0.88;
}

/* Conteneur principal de la bulle de couleur */
.inner-circle-bubble {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  z-index: 2;
  isolation: isolate;
  overflow: hidden;
  /* Crucial pour masquer le "sprite" de dégradés qui dépasse */
}

/* Pseudo-élément contenant le "sprite" de dégradés animés */
.inner-circle-bubble::before {
  content: '';
  position: absolute;
  inset: 0;

  /* 1. Palette de couleurs sous forme de dégradés multiples */
  background-image:
    radial-gradient(circle at 15% 15%, rgba(255, 122, 0, 0.7) 0%, transparent 40%),
    radial-gradient(circle at 35% 85%, rgba(255, 45, 85, 0.8) 0%, transparent 40%),
    radial-gradient(circle at 85% 25%, rgba(191, 90, 242, 0.7) 0%, transparent 40%),
    radial-gradient(circle at 65% 75%, rgba(10, 132, 255, 0.8) 0%, transparent 40%),
    radial-gradient(circle at 85% 95%, rgba(100, 210, 255, 0.7) 0%, transparent 40%),
    radial-gradient(circle at 5% 55%, rgba(255, 0, 153, 0.8) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(94, 92, 230, 0.4), rgba(100, 210, 255, 0.3));

  /* 2. On agrandit le fond pour pouvoir le déplacer */
  background-size: 250% 250%;

  mix-blend-mode: screen;
  filter: brightness(0.82) saturate(0.92);

  /* 3. Animation de la position du fond (très performant) */
  animation: organic-drift 25s ease-in-out infinite;
  will-change: background-position;
}

/* Pseudo-élément créant la lueur colorée derrière la bulle */
.inner-circle-bubble::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -50px;
  /* Plus grand pour que le flou soit visible */
  border-radius: 50%;

  /* On utilise le même fond et la même animation que la bulle */
  background-image:
    radial-gradient(circle at 15% 15%, rgba(255, 122, 0, 0.7) 0%, transparent 40%),
    radial-gradient(circle at 35% 85%, rgba(255, 45, 85, 0.8) 0%, transparent 40%),
    radial-gradient(circle at 85% 25%, rgba(191, 90, 242, 0.7) 0%, transparent 40%),
    radial-gradient(circle at 65% 75%, rgba(10, 132, 255, 0.8) 0%, transparent 40%),
    radial-gradient(circle at 85% 95%, rgba(100, 210, 255, 0.7) 0%, transparent 40%),
    radial-gradient(circle at 5% 55%, rgba(255, 0, 153, 0.8) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(94, 92, 230, 0.4), rgba(100, 210, 255, 0.3));
  background-size: 250% 250%;
  animation: organic-drift 25s ease-in-out infinite;

  /* La seule différence : un gros flou pour simuler la lueur */
  filter: blur(60px) brightness(0.9) saturate(0.95);
  opacity: 0.6;
}

/* Surcouche de verre 3D avec reflets */
.ai-bubble {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
  will-change: transform;
  contain: layout style paint;

  /* Reflets statiques pour l'effet de verre */
  background:
    radial-gradient(120% 120% at 28% 26%, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.35) 12%, rgba(255, 255, 255, 0.15) 26%, rgba(255, 255, 255, 0.0) 44%),
    radial-gradient(110% 110% at 66% 76%, rgba(167, 139, 250, 0.05) 0%, rgba(0, 0, 0, 0.14) 50%, rgba(0, 0, 0, 0.0) 60%);

  /* Ombres internes pour la profondeur */
  box-shadow:
    inset 0 4px 20px rgba(255, 255, 255, 0.3),
    inset 0 -15px 30px rgba(0, 0, 0, 0.25);

}

/* Reflet spéculaire principal (la tache blanche brillante) */
.ai-bubble::before {
  content: '';
  position: absolute;
  inset: 6% 10% 52% 8%;
  border-radius: 50%;
  background: radial-gradient(60% 60% at 22% 32%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.42) 18%, rgba(255, 255, 255, 0.12) 36%, rgba(255, 255, 255, 0.0) 58%);
  filter: blur(2px);
  opacity: 0.9;
  mix-blend-mode: screen;
  animation: specular-drift 20s ease-in-out infinite alternate;
  will-change: transform, opacity;
  contain: layout style paint;
}

/* Léger halo lumineux tournant sur les bords */
.ai-bubble::after {
  content: '';
  position: absolute;
  inset: -2%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255, 255, 255, 0.12) 0deg 18deg, transparent 18deg 150deg, rgba(255, 255, 255, 0.18) 150deg 174deg, transparent 174deg 360deg);
  filter: blur(4px) saturate(110%);
  opacity: 0.28;
  mix-blend-mode: screen;
  animation: ring-rotate 30s linear infinite;
  will-change: transform;
  contain: layout style paint;
}

/* --- KEYFRAMES (ANIMATIONS) --- */

/* Animation principale qui déplace le fond coloré */
@keyframes organic-drift {
  0% {
    background-position: 0% 50%;
  }

  25% {
    background-position: 100% 25%;
  }

  50% {
    background-position: 100% 100%;
  }

  75% {
    background-position: 25% 100%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* Légère animation 3D de la surcouche de verre */
@keyframes bubble-3d-optimized {

  0%,
  100% {
    transform: translateZ(0) scale(1.0);
  }

  50% {
    transform: translateZ(5px) scale(1.02);
  }
}

/* Mouvement lent du reflet spéculaire */
@keyframes specular-drift {
  0% {
    transform: rotate(-10deg) translateX(-5%);
    opacity: 0.85;
  }

  50% {
    transform: rotate(2deg) translateX(0%);
    opacity: 0.92;
  }

  100% {
    transform: rotate(-10deg) translateX(-5%);
    opacity: 0.85;
  }
}

/* Rotation du halo lumineux sur les bords */
@keyframes ring-rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Support pour mouvements réduits */
@media (prefers-reduced-motion: reduce) {

  .inner-circle-bubble::before,
  .inner-circle-bubble::after,
  .coaching-aura-container::after,
  .ai-bubble,
  .ai-bubble::before,
  .ai-bubble::after {
    animation: none !important;
  }

  /* Position statique pour le mode sans mouvement */
  .inner-circle-bubble::before,
  .inner-circle-bubble::after,
  .coaching-aura-container::after {
    background-position: center;
  }
}

@media (max-width: 768px) {
  .coaching-aura-container {
    width: 200px;
    height: 200px;
    margin: 1.5rem 0 1rem;
    transform-style: flat;
    /* Fix mobile clipping artifact */
    perspective: none;
  }

  .inner-circle-bubble {
    /* Force hardware clipping on Mobile/Safari to remove square background artifact */
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    mask-image: radial-gradient(white, black);
    border-radius: 50%;
  }

  /* Figer toutes les animations sur mobile pour économiser les ressources */
  .inner-circle-bubble::before,
  .inner-circle-bubble::after,
  .coaching-aura-container::after,
  .ai-bubble::before,
  .ai-bubble::after {
    animation: none;
    background-position: center;
  }

  /* Position statique pour les éléments animés */
  .ai-bubble::before {
    transform: none;
    opacity: 0.9;
  }

  .ai-bubble::after {
    transform: none;
  }
}