/* Animations spécifiques pour le bloc Thème astral & Prévision lunaire */

/* Bouton déployable : polychromie or ↔ bleu, plus vibrant */
#toggle-astro-panel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-image:
    radial-gradient(circle at 0% 0%, rgba(255,215,0,0.22), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(70,130,255,0.25), transparent 60%);
  box-shadow:
    0 0 0 1px rgba(255,215,0,0.45),
    0 0 22px rgba(70,130,255,0.55);
  animation: astroPulse 4.2s ease-in-out infinite;
}

#toggle-astro-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  background:
    radial-gradient(circle, rgba(255,215,0,0.55), transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(70,130,255,0.5), transparent 65%);
  animation: astroHighlight 5.4s ease-in-out infinite;
}

#toggle-astro-panel:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 2px rgba(255,215,0,0.9),
    0 0 36px rgba(70,130,255,0.95);
}

/* Bouton plein écran natif : halo or, rotation ~30 % plus rapide */
#btnAstroNativeFS {
  position: relative;
  z-index: 1;
}

#btnAstroNativeFS::before {
  content: "";
  position: absolute;
  inset: -0.45rem;
  border-radius: 999px;
  background:
    conic-gradient(
      from 0deg,
      rgba(255,215,0,0.7) 0deg,
      rgba(255,215,0,0.25) 60deg,
      transparent 150deg,
      transparent 360deg
    );
  -webkit-mask: radial-gradient(circle, transparent 55%, #000 58%, #000 100%);
  mask: radial-gradient(circle, transparent 55%, #000 58%, #000 100%);
  opacity: 0.9;
  pointer-events: none;
  animation: haloOrbit 4.9s linear infinite;
}

/* Keyframes dédiées */
@keyframes astroPulse {
  0% {
    box-shadow:
      0 0 0 1px rgba(255,215,0,0.4),
      0 0 18px rgba(70,130,255,0.45);
  }
  50% {
    box-shadow:
      0 0 0 2px rgba(255,215,0,0.95),
      0 0 40px rgba(70,130,255,1);
  }
  100% {
    box-shadow:
      0 0 0 1px rgba(255,215,0,0.4),
      0 0 18px rgba(70,130,255,0.45);
  }
}

@keyframes astroHighlight {
  0%, 25% {
    opacity: 0;
    transform: translate3d(-8%, -6%, 0);
  }
  45% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  70%, 100% {
    opacity: 0;
    transform: translate3d(10%, 8%, 0);
  }
}

@keyframes haloOrbit {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}