/* ============================================================
   Animations — keyframes et classes d'entrée.
   Les animations GSAP avancées sont gérées en JS (animations.js).
   ============================================================ */

/* ---------- Keyframes ---------- */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

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

/* Wizard réservation : entrée d’étape (réactivée côté JS) */
@keyframes bookingStepIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.992);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Options listes / puces (stagger) */
@keyframes cmOptIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Admin : changement de vue */
@keyframes adminViewHeaderIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateX(110%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes toastOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(110%);
  }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.06); opacity: 1; }
}

@keyframes shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

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

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

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

/* ---------- Classes utilitaires ---------- */
.anim-fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.8s var(--ease-out),
    transform 0.8s var(--ease-out);
}

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

.anim-fade-up.d-1 { transition-delay: 0.1s; }
.anim-fade-up.d-2 { transition-delay: 0.2s; }
.anim-fade-up.d-3 { transition-delay: 0.3s; }
.anim-fade-up.d-4 { transition-delay: 0.4s; }
.anim-fade-up.d-5 { transition-delay: 0.5s; }

/* Mobile : révélations un peu plus rapides (moins de distance perçue, meilleure fluidité). */
@media (max-width: 900px) {
  .anim-fade-up {
    transform: translateY(16px);
  }
  .anim-fade-up.is-visible {
    transform: translateY(0);
  }
  @media (prefers-reduced-motion: no-preference) {
    .anim-fade-up {
      transition:
        opacity 0.5s var(--ease-out),
        transform 0.5s var(--ease-out);
    }
    .anim-fade-up.d-1 { transition-delay: 0.08s; }
    .anim-fade-up.d-2 { transition-delay: 0.15s; }
    .anim-fade-up.d-3 { transition-delay: 0.22s; }
    .anim-fade-up.d-4 { transition-delay: 0.3s; }
    .anim-fade-up.d-5 { transition-delay: 0.38s; }
  }
}

.anim-float {
  animation: floatY 6s ease-in-out infinite;
}

.anim-pulse {
  animation: pulse 2.4s ease-in-out infinite;
}

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

.shimmer {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.03) 0%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.03) 100%
  );
  background-size: 800px 100%;
  animation: shimmer 2s linear infinite;
}

/* ---------- Gradient texte animé ---------- */
.gradient-text.animated {
  background-size: 200% auto;
  animation: gradientShift 6s ease-in-out infinite;
}

/* ---------- Curseur lumineux (hero) — désactivé ---------- */
.glow-cursor {
  display: none !important;
}

/* ---------- Spinner inline ---------- */
.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ---------- Progress bar scroll ---------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: var(--grad-accent);
  z-index: calc(var(--z-nav) + 1);
  width: 0;
  transition: width 0.1s linear;
  box-shadow: 0 0 12px var(--accent-glow);
}

/* ---------- Barre d'indicateurs (logos/stats) ---------- */
.marquee {
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}

.marquee__track {
  display: flex;
  gap: 4rem;
  animation: marqueeSlide 40s linear infinite;
  width: max-content;
}

.marquee__track span {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--text-3);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}

@media (max-width: 480px) {
  .marquee__track {
    gap: 2.5rem;
  }

  .marquee__track span {
    font-size: var(--fs-sm);
  }
}

.marquee__track span::after {
  content: '●';
  color: var(--accent);
  font-size: 0.5em;
}

@keyframes marqueeSlide {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Accessibilité : réduire le mouvement (réglage système) */
@media (prefers-reduced-motion: reduce) {
  .anim-fade-up,
  .anim-fade-up.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .glow-cursor {
    display: none !important;
  }

  .reviews-carousel__track,
  .marquee__track,
  .anim-float,
  .anim-pulse,
  .shimmer,
  .gradient-text.animated {
    animation: none !important;
  }

  .booking-step.is-active.booking-step--enter {
    animation: none !important;
  }

  .booking__form {
    transition: none !important;
  }

  .cm-custom-select .cm-custom-select__panel,
  .cm-custom-select__btn,
  .cm-custom-select__chev,
  .cm-custom-select__icon-faq {
    transition: none !important;
  }

  .cm-custom-select.is-open .cm-custom-select__panel,
  .cm-custom-select__opt,
  .cm-custom-select__chip {
    animation: none !important;
  }

  .cm-custom-select__panel {
    transform: none !important;
  }

  .admin-view.is-active .admin-view-header,
  .admin-view.is-active .admin-view-body,
  .admin-modal-backdrop,
  .admin-modal-card {
    animation: none !important;
  }

  .stepper__dot,
  .stepper__label,
  .admin-nav-item,
  .admin-rail-link {
    transition: none !important;
  }

  .account-kpi,
  .account-panel,
  .account-profile-pill {
    transition: none !important;
  }

  .account-kpi:hover,
  .account-panel:hover {
    transform: none !important;
    box-shadow: none !important;
  }
}