/* ========================================
   NVRMIND — Animations System
   Animations discrètes et élégantes
   ======================================== */

/* ========================================
   1. Global animation settings
   ======================================== */

/* Durées et timing par défaut */
:root {
  --animation-duration-slow: 0.8s;
  --animation-duration-medium: 0.5s;
  --animation-duration-fast: 0.3s;
  --animation-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --animation-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --animation-ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
}

/* ========================================
   2. Fade animations
   ======================================== */

.fade-in {
  opacity: 0;
  animation: fadeIn var(--animation-duration-medium) var(--animation-ease-out) forwards;
}

.fade-up {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp var(--animation-duration-medium) var(--animation-ease-out) forwards;
}

.fade-down {
  opacity: 0;
  transform: translateY(-20px);
  animation: fadeDown var(--animation-duration-medium) var(--animation-ease-out) forwards;
}

.fade-left {
  opacity: 0;
  transform: translateX(20px);
  animation: fadeLeft var(--animation-duration-medium) var(--animation-ease-out) forwards;
}

.fade-right {
  opacity: 0;
  transform: translateX(-20px);
  animation: fadeRight var(--animation-duration-medium) var(--animation-ease-out) forwards;
}

/* --- Keyframes --- */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

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

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

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

/* --- Délais d'exécution --- */
.fade-in-delay-1,
.fade-up-delay-1,
.fade-down-delay-1,
.fade-left-delay-1,
.fade-right-delay-1 {
  animation-delay: 0.1s;
}

.fade-in-delay-2,
.fade-up-delay-2,
.fade-down-delay-2,
.fade-left-delay-2,
.fade-right-delay-2 {
  animation-delay: 0.2s;
}

.fade-in-delay-3,
.fade-up-delay-3,
.fade-down-delay-3,
.fade-left-delay-3,
.fade-right-delay-3 {
  animation-delay: 0.3s;
}

.fade-in-delay-4,
.fade-up-delay-4,
.fade-down-delay-4,
.fade-left-delay-4,
.fade-right-delay-4 {
  animation-delay: 0.4s;
}

.fade-in-delay-5,
.fade-up-delay-5,
.fade-down-delay-5,
.fade-left-delay-5,
.fade-right-delay-5 {
  animation-delay: 0.5s;
}

/* ========================================
   3. Reveal animations
   ======================================== */

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--animation-duration-slow) var(--animation-ease-out),
              transform var(--animation-duration-slow) var(--animation-ease-out);
}

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

/* --- Variantes de reveal --- */
.reveal-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity var(--animation-duration-slow) var(--animation-ease-out),
              transform var(--animation-duration-slow) var(--animation-ease-out);
}

.reveal-left.reveal-visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity var(--animation-duration-slow) var(--animation-ease-out),
              transform var(--animation-duration-slow) var(--animation-ease-out);
}

.reveal-right.reveal-visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.98);
  transition: opacity var(--animation-duration-slow) var(--animation-ease-out),
              transform var(--animation-duration-slow) var(--animation-ease-out);
}

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

/* ========================================
   4. Logo animations
   ======================================== */

.logo-animation {
  opacity: 0;
  animation: logoReveal 1.2s var(--animation-ease-out) forwards;
}

@keyframes logoReveal {
  0% {
    opacity: 0;
    transform: scale(0.98) translateY(4px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* --- Variante subtile pour hover logo --- */
.logo-animation-hover {
  transition: opacity 0.3s var(--animation-ease), transform 0.3s var(--animation-ease);
}

.logo-animation-hover:hover {
  opacity: 0.8;
  transform: scale(0.98);
}

/* ========================================
   5. Hover effects
   ======================================== */

/* --- Légère élévation --- */
.hover-lift {
  transition: transform var(--animation-duration-fast) var(--animation-ease),
              box-shadow var(--animation-duration-fast) var(--animation-ease);
}

.hover-lift:hover {
  transform: translateY(-4px);
}

.hover-lift-lg:hover {
  transform: translateY(-8px);
}

/* --- Échelle subtile --- */
.hover-scale {
  transition: transform var(--animation-duration-fast) var(--animation-ease);
}

.hover-scale:hover {
  transform: scale(1.02);
}

.hover-scale-lg:hover {
  transform: scale(1.05);
}

/* --- Opacité --- */
.hover-opacity {
  transition: opacity var(--animation-duration-fast) var(--animation-ease);
}

.hover-opacity:hover {
  opacity: 0.7;
}

.hover-opacity-light:hover {
  opacity: 0.85;
}

/* --- Effet combiné --- */
.hover-elegant {
  transition: transform var(--animation-duration-fast) var(--animation-ease),
              opacity var(--animation-duration-fast) var(--animation-ease),
              border-color var(--animation-duration-fast) var(--animation-ease);
}

.hover-elegant:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

/* ========================================
   6. Loader
   ======================================== */

.loader {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-lg);
}

.loader-spinner {
  width: 2rem;
  height: 2rem;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-black);
  border-radius: 50%;
  animation: spinnerRotate 0.8s linear infinite;
}

@keyframes spinnerRotate {
  to {
    transform: rotate(360deg);
  }
}

/* --- Tailles de loader --- */
.loader-sm .loader-spinner {
  width: 1.25rem;
  height: 1.25rem;
  border-width: 1.5px;
}

.loader-lg .loader-spinner {
  width: 3rem;
  height: 3rem;
  border-width: 3px;
}

/* --- Loader minimal (points) --- */
.loader-dots {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  justify-content: center;
}

.loader-dot {
  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--color-gray-400);
  border-radius: 50%;
  animation: dotPulse 1.4s var(--animation-ease-in-out) infinite;
}

.loader-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.loader-dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes dotPulse {
  0%,
  80%,
  100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  40% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ========================================
   7. Accessibility
   ======================================== */

/* --- Réduction des mouvements --- */
@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;
  }

  .fade-in,
  .fade-up,
  .fade-down,
  .fade-left,
  .fade-right,
  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale,
  .logo-animation {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .hover-lift:hover,
  .hover-lift-lg:hover,
  .hover-scale:hover,
  .hover-scale-lg:hover,
  .hover-elegant:hover {
    transform: none;
  }

  .loader-spinner {
    animation-duration: 0.01ms !important;
  }

  .loader-dot {
    animation: none;
  }
}

/* ========================================
   8. Responsive adjustments
   ======================================== */

/* --- Mobile : réduire les déplacements --- */
@media (max-width: 768px) {
  .fade-up {
    transform: translateY(15px);
  }

  .fade-down {
    transform: translateY(-15px);
  }

  .fade-left {
    transform: translateX(15px);
  }

  .fade-right {
    transform: translateX(-15px);
  }

  .reveal {
    transform: translateY(20px);
  }

  .reveal-left {
    transform: translateX(-20px);
  }

  .reveal-right {
    transform: translateX(20px);
  }
}

/* --- Grands écrans : animations plus amples --- */
@media (min-width: 1440px) {
  .fade-up {
    transform: translateY(30px);
  }

  .fade-down {
    transform: translateY(-30px);
  }

  .fade-left {
    transform: translateX(30px);
  }

  .fade-right {
    transform: translateX(-30px);
  }

  .reveal {
    transform: translateY(40px);
  }

  .reveal-left {
    transform: translateX(-40px);
  }

  .reveal-right {
    transform: translateX(40px);
  }
}