/* =====================================================================
   LE CLAN DES GOURMANDS — Animations & micro-interactions
   ===================================================================== */

/* --- Apparition douce au scroll (pilotée en JS via IntersectionObserver) --- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease-default), transform 0.8s var(--ease-default);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal="stagger"] > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--ease-default), transform 0.6s var(--ease-default);
}

[data-reveal="stagger"].is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal="stagger"].is-visible > *:nth-child(1) { transition-delay: 0.05s; }
[data-reveal="stagger"].is-visible > *:nth-child(2) { transition-delay: 0.15s; }
[data-reveal="stagger"].is-visible > *:nth-child(3) { transition-delay: 0.25s; }
[data-reveal="stagger"].is-visible > *:nth-child(4) { transition-delay: 0.35s; }
[data-reveal="stagger"].is-visible > *:nth-child(5) { transition-delay: 0.45s; }
[data-reveal="stagger"].is-visible > *:nth-child(6) { transition-delay: 0.55s; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal="stagger"] > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --- Apparition des panneaux de la carte --- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Indicateur de scroll du hero --- */
@keyframes scrollIndicator {
  0%   { transform: translateY(0);    opacity: 1; }
  60%  { transform: translateY(14px); opacity: 0.2; }
  100% { transform: translateY(0);    opacity: 1; }
}

/* --- Scintillement doré (clin d'œil aux particules du logo) --- */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.hero__title {
  background-size: 200% auto;
  animation: shimmer 7s linear infinite;
}

/* --- Halo discret sur les cartes au survol --- */
@keyframes pulseGold {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.0); }
  50%      { box-shadow: 0 0 0 6px rgba(212, 175, 55, 0.08); }
}

.btn--gold:focus-visible {
  animation: pulseGold 1.6s var(--ease-default) infinite;
}

/* --- Fondu d'entrée des panneaux d'onglets --- */
.carte__panel[hidden] {
  display: none;
}

/* --- Effet "particules" subtil sur le hero (pseudo-élément) --- */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at 12% 22%, rgba(212,175,55,0.55), transparent 60%),
    radial-gradient(1.5px 1.5px at 78% 38%, rgba(212,175,55,0.4), transparent 60%),
    radial-gradient(2px 2px at 35% 68%, rgba(232,217,168,0.35), transparent 60%),
    radial-gradient(1.5px 1.5px at 88% 78%, rgba(212,175,55,0.45), transparent 60%),
    radial-gradient(1.5px 1.5px at 58% 14%, rgba(232,217,168,0.3), transparent 60%);
  opacity: 0.8;
  animation: twinkle 6s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes twinkle {
  0%   { opacity: 0.35; }
  100% { opacity: 0.85; }
}

/* --- Burger : transition fluide du menu mobile --- */
.navbar__menu {
  transition: max-height var(--transition-base), opacity var(--transition-base);
}

/* --- Liens du footer --- */
.footer__contact a,
.footer__bottom a {
  transition: color var(--transition-fast);
}

.footer__contact a:hover,
.footer__contact a:focus-visible {
  color: var(--color-accent);
}