/* ==========================================================
   ANIMATION UTILITIES
   Utility CSS per animazioni e transizioni

   Esempi:

   class="animate-fade-in"
   class="animate-fade-up animation-slow"
   class="animate-zoom-in animation-delay-2"

   ========================================================== */


/* ==========================================================
   ANIMATION TOKENS
   ========================================================== */

:root {

  /* Durata */
  --animation-fast: 300ms;
  --animation-normal: 600ms;
  --animation-slow: 900ms;
  --animation-slower: 1200ms;

  /* Easing */
  --ease-standard: ease;
  --ease-in: ease-in;
  --ease-out: ease-out;
  --ease-in-out: ease-in-out;

  /* Custom easing più morbido */
  --ease-smooth: cubic-bezier(.22, 1, .36, 1);

}


/* ==========================================================
   FADE
   ========================================================== */

.animate-fade-in {
  animation:
    fade-in
    var(--animation-normal)
    var(--ease-smooth)
    both;
}

@keyframes fade-in {

  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }

}


/* ==========================================================
   FADE UP
   ========================================================== */

.animate-fade-up {
  animation:
    fade-up
    var(--animation-normal)
    var(--ease-smooth)
    both;
}

@keyframes fade-up {

  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }

}


/* ==========================================================
   FADE DOWN
   ========================================================== */

.animate-fade-down {
  animation:
    fade-down
    var(--animation-normal)
    var(--ease-smooth)
    both;
}

@keyframes fade-down {

  from {
    opacity: 0;
    transform: translateY(-30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }

}


/* ==========================================================
   FADE LEFT
   L'elemento entra da destra verso sinistra
   ========================================================== */

.animate-fade-left {
  animation:
    fade-left
    var(--animation-normal)
    var(--ease-smooth)
    both;
}

@keyframes fade-left {

  from {
    opacity: 0;
    transform: translateX(30px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }

}


/* ==========================================================
   FADE RIGHT
   L'elemento entra da sinistra verso destra
   ========================================================== */

.animate-fade-right {
  animation:
    fade-right
    var(--animation-normal)
    var(--ease-smooth)
    both;
}

@keyframes fade-right {

  from {
    opacity: 0;
    transform: translateX(-30px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }

}


/* ==========================================================
   ZOOM IN
   ========================================================== */

.animate-zoom-in {
  animation:
    zoom-in
    var(--animation-normal)
    var(--ease-smooth)
    both;
}

@keyframes zoom-in {

  from {
    opacity: 0;
    transform: scale(.92);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }

}


/* ==========================================================
   ZOOM OUT
   ========================================================== */

.animate-zoom-out {
  animation:
    zoom-out
    var(--animation-normal)
    var(--ease-smooth)
    both;
}

@keyframes zoom-out {

  from {
    opacity: 0;
    transform: scale(1.08);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }

}


/* ==========================================================
   SCALE
   Solo trasformazione, senza fade
   ========================================================== */

.animate-scale {
  animation:
    scale-in
    var(--animation-normal)
    var(--ease-smooth)
    both;
}

@keyframes scale-in {

  from {
    transform: scale(.9);
  }

  to {
    transform: scale(1);
  }

}


/* ==========================================================
   SLIDE UP
   ========================================================== */

.animate-slide-up {
  animation:
    slide-up
    var(--animation-normal)
    var(--ease-smooth)
    both;
}

@keyframes slide-up {

  from {
    transform: translateY(50px);
  }

  to {
    transform: translateY(0);
  }

}


/* ==========================================================
   SLIDE DOWN
   ========================================================== */

.animate-slide-down {
  animation:
    slide-down
    var(--animation-normal)
    var(--ease-smooth)
    both;
}

@keyframes slide-down {

  from {
    transform: translateY(-50px);
  }

  to {
    transform: translateY(0);
  }

}


/* ==========================================================
   SLIDE LEFT
   ========================================================== */

.animate-slide-left {
  animation:
    slide-left
    var(--animation-normal)
    var(--ease-smooth)
    both;
}

@keyframes slide-left {

  from {
    transform: translateX(50px);
  }

  to {
    transform: translateX(0);
  }

}


/* ==========================================================
   SLIDE RIGHT
   ========================================================== */

.animate-slide-right {
  animation:
    slide-right
    var(--animation-normal)
    var(--ease-smooth)
    both;
}

@keyframes slide-right {

  from {
    transform: translateX(-50px);
  }

  to {
    transform: translateX(0);
  }

}


/* ==========================================================
   BLUR IN
   Utile per hero, titoli e immagini
   ========================================================== */

.animate-blur-in {
  animation:
    blur-in
    var(--animation-slow)
    var(--ease-smooth)
    both;
}

@keyframes blur-in {

  from {
    opacity: 0;
    filter: blur(12px);
    transform: scale(.98);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
  }

}


/* ==========================================================
   ROTATE IN
   ========================================================== */

.animate-rotate-in {
  animation:
    rotate-in
    var(--animation-normal)
    var(--ease-smooth)
    both;
}

@keyframes rotate-in {

  from {
    opacity: 0;
    transform: rotate(-5deg) scale(.95);
  }

  to {
    opacity: 1;
    transform: rotate(0) scale(1);
  }

}


/* ==========================================================
   PULSE
   Animazione continua
   ========================================================== */

.animate-pulse {
  animation:
    pulse 2s
    ease-in-out
    infinite;
}

@keyframes pulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }

}


/* ==========================================================
   FLOAT
   Animazione continua
   ========================================================== */

.animate-float {
  animation:
    float 3s
    ease-in-out
    infinite;
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }

}


/* ==========================================================
   ANIMATION SPEED
   ========================================================== */

.animation-fast {
  animation-duration: var(--animation-fast) !important;
}

.animation-normal {
  animation-duration: var(--animation-normal) !important;
}

.animation-slow {
  animation-duration: var(--animation-slow) !important;
}

.animation-slower {
  animation-duration: var(--animation-slower) !important;
}


/* ==========================================================
   ANIMATION DELAY
   ========================================================== */

.animation-delay-1 {
  animation-delay: 100ms !important;
}

.animation-delay-2 {
  animation-delay: 200ms !important;
}

.animation-delay-3 {
  animation-delay: 300ms !important;
}

.animation-delay-4 {
  animation-delay: 400ms !important;
}

.animation-delay-5 {
  animation-delay: 500ms !important;
}

.animation-delay-6 {
  animation-delay: 600ms !important;
}

.animation-delay-7 {
  animation-delay: 700ms !important;
}

.animation-delay-8 {
  animation-delay: 800ms !important;
}

.animation-delay-9 {
  animation-delay: 900ms !important;
}

.animation-delay-10 {
  animation-delay: 1000ms !important;
}

.animation-delay-11 {
  animation-delay: 1100ms !important;
}

.animation-delay-12 {
  animation-delay: 1200ms !important;
}

.animation-delay-13 {
  animation-delay: 1300ms !important;
}

.animation-delay-14 {
  animation-delay: 1400ms !important;
}

.animation-delay-15 {
  animation-delay: 1500ms !important;
}

.animation-delay-16 {
  animation-delay: 1600ms !important;
}

.animation-delay-17 {
  animation-delay: 1700ms !important;
}

.animation-delay-18 {
  animation-delay: 1800ms !important;
}

.animation-delay-19 {
  animation-delay: 1900ms !important;
}

.animation-delay-20 {
  animation-delay: 2000ms !important;
}

.animation-delay-21 {
  animation-delay: 2100ms !important;
}

.animation-delay-22 {
  animation-delay: 2200ms !important;
}

.animation-delay-23 {
  animation-delay: 2300ms !important;
}

.animation-delay-24 {
  animation-delay: 2400ms !important;
}

.animation-delay-25 {
  animation-delay: 2500ms !important;
}

.animation-delay-26 {
  animation-delay: 2600ms !important;
}

.animation-delay-27 {
  animation-delay: 2700ms !important;
}

.animation-delay-28 {
  animation-delay: 2800ms !important;
}

.animation-delay-29 {
  animation-delay: 2900ms !important;
}

.animation-delay-30 {
  animation-delay: 3000ms !important;
}


/* ==========================================================
   EASING
   ========================================================== */

.animation-ease {
  animation-timing-function: var(--ease-standard) !important;
}

.animation-ease-in {
  animation-timing-function: var(--ease-in) !important;
}

.animation-ease-out {
  animation-timing-function: var(--ease-out) !important;
}

.animation-ease-in-out {
  animation-timing-function: var(--ease-in-out) !important;
}

.animation-smooth {
  animation-timing-function: var(--ease-smooth) !important;
}


/* ==========================================================
   TRANSITION UTILITIES
   Per hover e interazioni
   ========================================================== */

.transition {
  transition:
    all 300ms
    var(--ease-smooth);
}

.transition-fast {
  transition:
    all 150ms
    var(--ease-smooth);
}

.transition-slow {
  transition:
    all 600ms
    var(--ease-smooth);
}

.transition-transform {
  transition:
    transform 300ms
    var(--ease-smooth);
}

.transition-opacity {
  transition:
    opacity 300ms
    var(--ease-smooth);
}


/* ==========================================================
   HOVER UTILITIES
   ========================================================== */

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

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

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

.hover-up:hover {
  transform: translateY(-5px);
}

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


/* ==========================================================
   ACCESSIBILITY
   Reduced Motion

   Rispetta la preferenza dell'utente di ridurre
   o eliminare le animazioni.
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

}