/* ============================================================
   animations.css : Keyframes, transitions, reveal au scroll
   Sublime Gestion Site Vitrine
   ============================================================ */

/* === KEYFRAMES === */

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes loaderPop {
  0%   { transform: scale(0.3); opacity: 0; }
  60%  { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1);   opacity: 1; }
}

@keyframes loaderOut {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes loaderLogoIn {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes loaderLineGrow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes loaderLogoFade {
  to { opacity: 0; }
}

@keyframes loaderCurtainUp {
  from { transform: translateY(0); }
  to   { transform: translateY(-100%); }
}

@keyframes navIn {
  to {
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes shimmer {
  from { background-position: -200% center; }
  to   { background-position:  200% center; }
}

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

@keyframes bounceY {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

/* === CLASSES UTILITAIRES D'ANIMATION === */

.animate-fadeUp {
  animation: fadeUp 0.6s var(--ease-spring) both;
}

.animate-fadeIn {
  animation: fadeIn 0.4s var(--ease-standard) both;
}

.animate-fadeDown {
  animation: fadeDown 0.4s var(--ease-spring) both;
}

.animate-scaleIn {
  animation: scaleIn 0.4s var(--ease-bounce) both;
}

.animate-slideInRight {
  animation: slideInRight 0.5s var(--ease-spring) both;
}

.animate-slideInLeft {
  animation: slideInLeft 0.5s var(--ease-spring) both;
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* Delays utilitaires */
.delay-0  { animation-delay: 0s; }
.delay-1  { animation-delay: 0.10s; }
.delay-2  { animation-delay: 0.20s; }
.delay-3  { animation-delay: 0.30s; }
.delay-4  { animation-delay: 0.40s; }
.delay-5  { animation-delay: 0.50s; }
.delay-6  { animation-delay: 0.60s; }
.delay-7  { animation-delay: 0.70s; }
.delay-8  { animation-delay: 0.80s; }

/* === REVEAL AU SCROLL === */

/*
  Utilisation :
  - Ajouter .reveal sur tout bloc à animer à l'entrée dans le viewport
  - Pour des delays progressifs dans une grille, encapsuler dans .reveal-group
  - Les delays JS complètent les nth-child CSS pour les grilles dynamiques
*/

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity var(--dur-reveal) var(--ease-spring),
    transform var(--dur-reveal) var(--ease-spring);
}

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

/* Variante : glisse depuis la gauche */
.reveal--left {
  transform: translateY(0) translateX(-30px);
}

.reveal--left.is-visible {
  transform: translateY(0) translateX(0);
}

/* Variante : glisse depuis la droite */
.reveal--right {
  transform: translateY(0) translateX(30px);
}

.reveal--right.is-visible {
  transform: translateY(0) translateX(0);
}

/* Variante : zoom léger */
.reveal--scale {
  opacity: 0;
  transform: scale(0.94);
  transition:
    opacity var(--dur-reveal) var(--ease-spring),
    transform var(--dur-reveal) var(--ease-bounce);
}

.reveal--scale.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* Variante : fondu simple sans translateY */
.reveal--fade {
  transform: none;
}

.reveal--fade.is-visible {
  transform: none;
}

/* Delays progressifs statiques pour les grilles */
.reveal-group .reveal:nth-child(1)  { transition-delay: 0s; }
.reveal-group .reveal:nth-child(2)  { transition-delay: 0.10s; }
.reveal-group .reveal:nth-child(3)  { transition-delay: 0.20s; }
.reveal-group .reveal:nth-child(4)  { transition-delay: 0.30s; }
.reveal-group .reveal:nth-child(5)  { transition-delay: 0.40s; }
.reveal-group .reveal:nth-child(6)  { transition-delay: 0.50s; }
.reveal-group .reveal:nth-child(7)  { transition-delay: 0.60s; }
.reveal-group .reveal:nth-child(8)  { transition-delay: 0.70s; }

/* === SHIMMER (skeleton loading) === */

.shimmer {
  background: linear-gradient(
    90deg,
    var(--border) 25%,
    rgba(232, 228, 219, 0.5) 50%,
    var(--border) 75%
  );
  background-size: 200% auto;
  animation: shimmer 1.5s linear infinite;
}

/* === TRANSITIONS GLOBALES DES COMPOSANTS === */

/* Toutes les transitions interactives passent par ces durées */
.transition-fast {
  transition-duration: var(--dur-fast);
  transition-timing-function: var(--ease-standard);
}

.transition-base {
  transition-duration: var(--dur-base);
  transition-timing-function: var(--ease-standard);
}

.transition-slow {
  transition-duration: var(--dur-slow);
  transition-timing-function: var(--ease-spring);
}

/* === HOVER EFFETS TEXTE === */

/* Underline animé */
.link-underline {
  position: relative;
  display: inline-block;
  text-decoration: none;
}

.link-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: currentColor;
  transition: width var(--dur-base) var(--ease-standard);
}

.link-underline:hover::after {
  width: 100%;
}

/* === LOADER SUBTITLE === */

.loader__subtitle {
  display: block;
  font: 500 11px Inter, sans-serif;
  color: #E75C1F;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0;
  margin-top: 10px;
  animation: fadeUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
}

/* === PREFERS-REDUCED-MOTION === */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal,
  .reveal--left,
  .reveal--right,
  .reveal--scale,
  .reveal--fade {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .loader {
    display: none !important;
  }

  .badge__dot {
    animation: none !important;
  }

  html {
    scroll-behavior: auto !important;
  }
}