/* ============================================
   ANIMATIONS — Vagues, particules, effets
   ============================================ */

/* ---- Vagues SVG footer ---- */
.waves-container {
  position: relative;
  overflow: hidden;
  height: 80px;
}
.wave {
  position: absolute;
  bottom: 0;
  width: 200%;
  height: 80px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80'%3E%3Cpath fill='%23D4A017' fill-opacity='0.08' d='M0,40 C360,80 720,0 1080,40 C1260,60 1380,30 1440,40 L1440,80 L0,80 Z'/%3E%3C/svg%3E") repeat-x;
  background-size: 50% 80px;
}
.wave-1 { animation: wave 8s linear infinite; opacity: 1; }
.wave-2 { animation: wave 12s linear infinite reverse; opacity: 0.5; bottom: 10px; }
.wave-3 { animation: wave 6s linear infinite; opacity: 0.3; bottom: 20px; }

@keyframes wave {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ---- Particules flottantes (étoiles) ---- */
.particles-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.particle {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0;
  animation: floatParticle var(--duration, 8s) var(--delay, 0s) ease-in-out infinite;
}

@keyframes floatParticle {
  0%   { transform: translateY(100vh) scale(0); opacity: 0; }
  10%  { opacity: 0.6; }
  90%  { opacity: 0.2; }
  100% { transform: translateY(-20px) scale(1); opacity: 0; }
}

/* ---- Effet parchemin sur les cartes ---- */
.card-parchment {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  overflow: hidden;
}
.card-parchment::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  opacity: 0.5;
}

/* ---- Glow doré au hover ---- */
.glow-hover {
  transition: box-shadow var(--transition), border-color var(--transition);
}
.glow-hover:hover {
  border-color: var(--border-hover) !important;
  box-shadow: 0 0 20px rgba(212, 160, 23, 0.15), 0 0 40px rgba(212, 160, 23, 0.05);
}

/* ---- Background vagues hero ---- */
.hero-waves {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(to top, rgba(26, 95, 140, 0.15), transparent);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200'%3E%3Cpath d='M0,100 C240,160 480,40 720,100 C960,160 1200,40 1440,100 L1440,200 L0,200 Z'/%3E%3C/svg%3E");
  mask-size: 100% 100%;
  animation: heroWave 10s ease-in-out infinite alternate;
}

@keyframes heroWave {
  0%   { mask-position: 0 0; }
  100% { mask-position: 100px 0; }
}

/* ---- Float animation ---- */
.float { animation: float 4s ease-in-out infinite; }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}

/* ---- Fade in on scroll ---- */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Gold shimmer text ---- */
.text-shimmer {
  background: linear-gradient(90deg, var(--gold), var(--gold-light), var(--gold));
  background-size: 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 3s linear infinite;
}
@keyframes shimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* ---- Anchor decoration ---- */
.anchor-deco::after {
  content: ' ⚓';
  font-size: 0.7em;
  opacity: 0.5;
}