/**
 * Stellar Reviews - Animations CSS
 * Design inspiré iOS/Apple
 */

/* ==========================================================================
   Variables d'animation
   ========================================================================== */
:root {
  /* Courbes de bézier inspirées iOS */
  --stellar-ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --stellar-ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --stellar-ease-in-out-quint: cubic-bezier(0.83, 0, 0.17, 1);
  --stellar-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --stellar-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* Durées standard */
  --stellar-duration-fast: 150ms;
  --stellar-duration-normal: 300ms;
  --stellar-duration-slow: 500ms;
  --stellar-duration-slower: 800ms;

  /* Délais pour effets cascade */
  --stellar-stagger-delay: 50ms;
}

/* ==========================================================================
   Animation d'entrée des cartes
   ========================================================================== */

/* État initial */
.stellar-card {
  opacity: 0;
  transform: translateY(30px) scale(0.95);
}

/* État animé */
.stellar-card.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition:
    opacity var(--stellar-duration-slow) var(--stellar-ease-out-expo),
    transform var(--stellar-duration-slow) var(--stellar-ease-out-expo);
}

/* Effet cascade */
.stellar-card:nth-child(1) { transition-delay: calc(var(--stellar-stagger-delay) * 1); }
.stellar-card:nth-child(2) { transition-delay: calc(var(--stellar-stagger-delay) * 2); }
.stellar-card:nth-child(3) { transition-delay: calc(var(--stellar-stagger-delay) * 3); }
.stellar-card:nth-child(4) { transition-delay: calc(var(--stellar-stagger-delay) * 4); }
.stellar-card:nth-child(5) { transition-delay: calc(var(--stellar-stagger-delay) * 5); }
.stellar-card:nth-child(6) { transition-delay: calc(var(--stellar-stagger-delay) * 6); }
.stellar-card:nth-child(7) { transition-delay: calc(var(--stellar-stagger-delay) * 7); }
.stellar-card:nth-child(8) { transition-delay: calc(var(--stellar-stagger-delay) * 8); }

/* ==========================================================================
   Animations d'entrée alternatives
   ========================================================================== */

/* Fade Up */
.stellar-entrance-fade-up .stellar-card {
  opacity: 0;
  transform: translateY(40px);
}

.stellar-entrance-fade-up .stellar-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Fade Down */
.stellar-entrance-fade-down .stellar-card {
  opacity: 0;
  transform: translateY(-40px);
}

.stellar-entrance-fade-down .stellar-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Scale */
.stellar-entrance-scale .stellar-card {
  opacity: 0;
  transform: scale(0.8);
}

.stellar-entrance-scale .stellar-card.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* Slide Left */
.stellar-entrance-slide-left .stellar-card {
  opacity: 0;
  transform: translateX(60px);
}

.stellar-entrance-slide-left .stellar-card.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Slide Right */
.stellar-entrance-slide-right .stellar-card {
  opacity: 0;
  transform: translateX(-60px);
}

.stellar-entrance-slide-right .stellar-card.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* ==========================================================================
   Animation des étoiles
   ========================================================================== */
.stellar-star {
  opacity: 0;
  transform: scale(0) rotate(-180deg);
}

.stellar-card.is-visible .stellar-star {
  opacity: 1;
  transform: scale(1) rotate(0);
  transition:
    opacity var(--stellar-duration-fast) var(--stellar-ease-out-expo),
    transform var(--stellar-duration-normal) var(--stellar-spring);
}

.stellar-card.is-visible .stellar-star:nth-child(1) { transition-delay: 100ms; }
.stellar-card.is-visible .stellar-star:nth-child(2) { transition-delay: 150ms; }
.stellar-card.is-visible .stellar-star:nth-child(3) { transition-delay: 200ms; }
.stellar-card.is-visible .stellar-star:nth-child(4) { transition-delay: 250ms; }
.stellar-card.is-visible .stellar-star:nth-child(5) { transition-delay: 300ms; }

/* Effet pulse au hover */
.stellar-star:hover {
  animation: stellar-pulse 400ms var(--stellar-spring);
}

@keyframes stellar-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.3); }
}

/* ==========================================================================
   Carousel - Défilement continu
   ========================================================================== */
.stellar-carousel-continuous .stellar-carousel-track {
  animation: stellar-scroll var(--carousel-speed, 30s) linear infinite;
}

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

/* Pause au survol */
.stellar-carousel:hover .stellar-carousel-track.stellar-pause-on-hover {
  animation-play-state: paused;
}

/* ==========================================================================
   Transitions de carousel
   ========================================================================== */

/* Slide */
.stellar-transition-slide .stellar-carousel-track {
  transition: transform var(--stellar-duration-slow) var(--stellar-ease-out-expo);
}

/* Fade */
.stellar-transition-fade .stellar-card {
  transition: opacity var(--stellar-duration-normal) var(--stellar-ease-out-quint);
}

.stellar-transition-fade .stellar-card:not(.active) {
  opacity: 0.3;
}

/* Scale */
.stellar-transition-scale .stellar-card {
  transition:
    transform var(--stellar-duration-normal) var(--stellar-ease-out-expo),
    opacity var(--stellar-duration-normal) var(--stellar-ease-out-quint);
}

.stellar-transition-scale .stellar-card:not(.active) {
  transform: scale(0.9);
  opacity: 0.5;
}

/* ==========================================================================
   Animation du compteur
   ========================================================================== */
.stellar-counter-number {
  font-variant-numeric: tabular-nums;
  transition: transform var(--stellar-duration-fast) var(--stellar-ease-out-expo);
}

.stellar-counter-number.is-counting {
  animation: stellar-count-pulse 100ms var(--stellar-spring);
}

@keyframes stellar-count-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* ==========================================================================
   Effets de survol avancés
   ========================================================================== */

/* Effet 3D au hover */
.stellar-card.has-3d-effect {
  transform-style: preserve-3d;
  perspective: 1000px;
}

.stellar-card.has-3d-effect:hover {
  transform: rotateY(5deg) rotateX(5deg);
}

/* Effet de profondeur */
.stellar-depth-effect .stellar-card {
  transition:
    transform var(--stellar-duration-normal) var(--stellar-ease-out-expo),
    filter var(--stellar-duration-normal) var(--stellar-ease-out-quint);
}

.stellar-depth-effect .stellar-card:not(.active) {
  transform: scale(0.95);
  filter: blur(2px);
}

/* ==========================================================================
   Animation de navigation
   ========================================================================== */
.stellar-nav {
  transition:
    transform var(--stellar-duration-fast) var(--stellar-spring),
    background-color var(--stellar-duration-fast) ease,
    box-shadow var(--stellar-duration-fast) ease;
}

.stellar-nav:hover {
  transform: scale(1.1);
}

.stellar-nav:active {
  transform: scale(0.95);
}

/* Animation des dots */
.stellar-dot {
  transition:
    transform var(--stellar-duration-normal) var(--stellar-spring),
    background-color var(--stellar-duration-fast) ease;
}

.stellar-dot.active {
  animation: stellar-dot-pop 300ms var(--stellar-spring);
}

@keyframes stellar-dot-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.5); }
  100% { transform: scale(1.25); }
}

/* ==========================================================================
   Parallax au scroll
   ========================================================================== */
.stellar-parallax {
  will-change: transform;
}

.stellar-parallax .stellar-card {
  transition: transform 0.1s linear;
}

/* ==========================================================================
   Préférence de mouvement réduit
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .stellar-carousel-track {
    animation: none !important;
  }

  .stellar-card {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .stellar-star {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .stellar-nav,
  .stellar-dot {
    transition: none !important;
  }

  .stellar-counter-number {
    animation: none !important;
  }

  .stellar-card:hover {
    transform: none !important;
  }
}

/* ==========================================================================
   Animations utilitaires
   ========================================================================== */

/* Fade in */
.stellar-fade-in {
  animation: stellar-fade-in var(--stellar-duration-slow) var(--stellar-ease-out-expo) forwards;
}

@keyframes stellar-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Slide up */
.stellar-slide-up {
  animation: stellar-slide-up var(--stellar-duration-slow) var(--stellar-ease-out-expo) forwards;
}

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

/* Bounce */
.stellar-bounce {
  animation: stellar-bounce 600ms var(--stellar-spring);
}

@keyframes stellar-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Shake (pour erreurs) */
.stellar-shake {
  animation: stellar-shake 500ms ease;
}

@keyframes stellar-shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* Spin */
.stellar-spin {
  animation: stellar-spin 1s linear infinite;
}

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