/* ============================================================
   ANIMATIONS.CSS — Les Demented Brothers
   Keyframes, Transitions, Effets d'entrée
   ============================================================ */

/* ============================================================
   KEYFRAMES
   ============================================================ */

/* Pulsation rouge (pour boutons CTA) */
@keyframes pulse-rouge {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 20, 48, 0); }
  50%       { box-shadow: 0 0 0 8px rgba(212, 20, 48, 0); }
}

/* Flottement doux */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-7px); }
}

/* Entrée depuis le bas */
@keyframes slide-up {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Apparition fondue */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Zoom depuis le centre */
@keyframes zoom-in {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

/* Glitch — rouge/blanc */
@keyframes glitch {
  0%, 94%, 100% {
    text-shadow: var(--ombre-texte);
    transform: translateX(0);
  }
  95% {
    text-shadow: -2px 0 var(--rouge), 2px 0 rgba(255,255,255,0.5);
    transform: translateX(-2px);
  }
  97% {
    text-shadow: 2px 0 var(--rouge), -2px 0 rgba(255,255,255,0.5);
    transform: translateX(2px);
  }
}

/* Bounce d'entrée */
@keyframes bounce-in {
  0%   { opacity: 0; transform: scale(0.5); }
  60%  { opacity: 1; transform: scale(1.04); }
  80%  { transform: scale(0.96); }
  100% { transform: scale(1); }
}

/* Confetti */
@keyframes confetti-fall {
  0%   { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* Soulignement qui se dessine */
@keyframes draw-line {
  from { width: 0; }
  to   { width: 100%; }
}

/* Shimmer blanc (pour titres hero) */
@keyframes shimmer-blanc {
  0%, 100% { text-shadow: var(--ombre-texte); }
  50% {
    text-shadow:
      var(--ombre-texte),
      0 0 30px rgba(255, 255, 255, 0.12),
      0 0 60px rgba(212, 20, 48, 0.08);
  }
}

/* ============================================================
   CLASSES D'ANIMATION
   ============================================================ */
.animate-shimmer  { animation: shimmer-blanc 4s ease-in-out infinite; }
.animate-glitch   { animation: glitch 9s linear infinite; }
.animate-float    { animation: float 3.5s ease-in-out infinite; }

/* ============================================================
   REVEAL AU SCROLL
   ============================================================ */
.reveal {
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal.from-bottom { transform: translateY(28px); }
.reveal.from-left   { transform: translateX(-28px); }
.reveal.from-right  { transform: translateX(28px); }
.reveal.zoom        { transform: scale(0.92); }

.reveal.visible {
  opacity: 1;
  transform: none;
}

.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }
.reveal-delay-5 { transition-delay: 0.4s; }
.reveal-delay-6 { transition-delay: 0.48s; }

/* ============================================================
   HERO — entrées
   ============================================================ */

/* Matérialisation dramatique du titre */
@keyframes materialize {
  0%   { opacity: 0; transform: translateY(18px) scale(0.97); filter: blur(6px); }
  55%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

.hero-title   { animation: materialize 1s cubic-bezier(0.16, 1.2, 0.4, 1) 0.25s both; }
.hero-tagline { animation: slide-up 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s both; }
.hero-actions { animation: slide-up 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.75s both; }
.hero-social  { animation: fade-in 0.8s ease 1s both; }

/* ============================================================
   BOUTON PULSE
   ============================================================ */
.btn--pulse { animation: pulse-rouge 2.5s ease-in-out infinite; }

/* ============================================================
   MARQUE DU LOGO
   ============================================================ */
.nav-logo .logo-mark {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================================================
   TRANSITION DE PAGE
   ============================================================ */
.page-transition { animation: fade-in 0.35s ease both; }

/* ============================================================
   ÉTOILES
   ============================================================ */
.star-particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #ffffff;
  border-radius: 50%;
  pointer-events: none;
}

/* ============================================================
   CONFETTI
   ============================================================ */
.confetti-piece {
  position: fixed;
  top: -20px;
  pointer-events: none;
  z-index: 9999;
  animation: confetti-fall linear forwards;
  border-radius: 2px;
}

/* ============================================================
   CONSTELLATION — étoiles autour du titre hero
   ============================================================ */

/* Le wrapper hérite de la taille du titre pour que em = taille h1 */
.title-constellation {
  position: relative;
  display: inline-block;
  font-size: clamp(3rem, 9vw, 7rem);
  max-width: 100%;
}

/* Base étoile */
.title-star {
  position: absolute;
  opacity: 0;
  line-height: 1;
  pointer-events: none;
  animation:
    star-spin-in 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) var(--star-delay) both,
    star-pulse   3.4s ease-in-out calc(var(--star-delay) + 0.7s) infinite;
}

/* Gauche — 3 étoiles décalées */
.title-star--1 { --star-delay: 0.85s; font-size: 0.36em; color: var(--rouge);            top: -0.08em; left:  -1.55em; }
.title-star--2 { --star-delay: 1.05s; font-size: 0.22em; color: rgba(255,255,255,0.65);  top:  0.68em; left:  -1.2em;  }
.title-star--3 { --star-delay: 0.95s; font-size: 0.16em; color: rgba(255,255,255,0.4);   top:  0.28em; left:  -2.1em;  }

/* Droite — symétrique */
.title-star--4 { --star-delay: 0.88s; font-size: 0.36em; color: var(--rouge);            top: -0.08em; right: -1.55em; }
.title-star--5 { --star-delay: 1.08s; font-size: 0.22em; color: rgba(255,255,255,0.65);  top:  0.68em; right: -1.2em;  }
.title-star--6 { --star-delay: 0.98s; font-size: 0.16em; color: rgba(255,255,255,0.4);   top:  0.28em; right: -2.1em;  }

@keyframes star-spin-in {
  0%   { opacity: 0; transform: scale(0) rotate(-300deg); }
  65%  { opacity: 1; transform: scale(1.3) rotate(22deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes star-pulse {
  0%, 100% { opacity: 1;    transform: scale(1); }
  50%       { opacity: 0.35; transform: scale(0.72); }
}

/* Mobile : masquer les étoiles les plus éloignées */
@media (max-width: 600px) {
  .title-star--3, .title-star--6 { display: none; }
  .title-star--1 { left:  -1.25em; }
  .title-star--2 { left:  -1.0em; }
  .title-star--4 { right: -1.25em; }
  .title-star--5 { right: -1.0em; }
}

/* ============================================================
   FLÈCHE DE SCROLL
   ============================================================ */
@keyframes arrow-bounce {
  0%, 100% { transform: translateY(0);   opacity: 0.45; }
  55%       { transform: translateY(8px); opacity: 0.9; }
}

.scroll-arrow {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  margin-top: 2.8rem;
  color: var(--gris-texte);
  font-family: var(--font-corps);
  font-size: 0.70rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  animation: arrow-bounce 2.2s ease-in-out infinite;
  transition: color var(--transition);
}

.scroll-arrow:hover   { color: var(--blanc); opacity: 1; }
.scroll-arrow-icon    { font-size: 1.3rem; line-height: 1; }
.scroll-arrow-label   { display: block; }

/* ============================================================
   MAGIE DU CHARGEMENT — pièces symboliques
   ============================================================ */
.magic-piece {
  position: fixed;
  top: -30px;
  pointer-events: none;
  z-index: 9998;
  animation: confetti-fall linear forwards;
  user-select: none;
  line-height: 1;
}

/* ============================================================
   MOUVEMENT RÉDUIT
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.from-bottom,
  .reveal.from-left,
  .reveal.from-right,
  .reveal.zoom {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .hero-title, .hero-tagline, .hero-actions, .hero-social,
  .animate-shimmer, .animate-glitch, .animate-float, .btn--pulse,
  .scroll-arrow, .title-star {
    animation: none !important;
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ============================================================
   DÉRIVE DU FOND DE HERO
   Léger zoom pendant que la photo est affichée (effet Ken Burns).
   Durée calée sur l'intervalle de rotation dans js/effects.js.
   ============================================================ */
@keyframes hero-drift {
  from { transform: scale(1.04); }
  to   { transform: scale(1.13); }
}