/**
 * ite-animations.css — Icaro Template Engine
 * Keyframes, transizioni, animazioni utility
 * Versione: 1.0.0
 */

/* ═══════════════════════════════════════════════════════
   KEYFRAMES
   ═══════════════════════════════════════════════════════ */

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

@keyframes ite-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

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

@keyframes ite-slide-down {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

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

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

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

@keyframes ite-ping {
  75%,100% { transform: scale(2); opacity: 0; }
}

@keyframes ite-wiggle {
  0%,100% { transform: rotate(0deg); }
  25%      { transform: rotate(-5deg); }
  75%      { transform: rotate(5deg); }
}

@keyframes ite-bounce-in {
  0%   { transform: scale(0.6); opacity: 0; }
  60%  { transform: scale(1.05); opacity: 1; }
  80%  { transform: scale(0.97); }
  100% { transform: scale(1); }
}

@keyframes ite-shake {
  0%,100% { transform: translateX(0); }
  15%,45%,75% { transform: translateX(-6px); }
  30%,60%,90% { transform: translateX(6px); }
}

/* ═══════════════════════════════════════════════════════
   CLASSI ANIMAZIONE UTILITY
   ═══════════════════════════════════════════════════════ */
.ite-animate-fade-in    { animation: ite-fade-in .2s ease both; }
.ite-animate-slide-up   { animation: ite-slide-up .25s ease both; }
.ite-animate-slide-down { animation: ite-slide-down .25s ease both; }
.ite-animate-slide-left { animation: ite-slide-left .25s ease both; }
.ite-animate-scale-in   { animation: ite-scale-in .2s ease both; }
.ite-animate-pulse      { animation: ite-pulse 2s ease-in-out infinite; }
.ite-animate-spin       { animation: ite-spin .6s linear infinite; }
.ite-animate-wiggle     { animation: ite-wiggle .4s ease; }
.ite-animate-shake      { animation: ite-shake .4s ease; }
.ite-animate-bounce-in  { animation: ite-bounce-in .35s cubic-bezier(.36,.07,.19,.97) both; }

/* Delay utility */
.ite-delay-100 { animation-delay: 0.1s; }
.ite-delay-200 { animation-delay: 0.2s; }
.ite-delay-300 { animation-delay: 0.3s; }
.ite-delay-500 { animation-delay: 0.5s; }

/* ═══════════════════════════════════════════════════════
   TRANSIZIONI UTILITY
   ═══════════════════════════════════════════════════════ */
.ite-transition        { transition: all var(--ite-transition); }
.ite-transition-colors { transition: color var(--ite-transition), background-color var(--ite-transition), border-color var(--ite-transition); }
.ite-transition-shadow { transition: box-shadow var(--ite-transition); }
.ite-transition-slow   { transition: all var(--ite-transition-slow); }
.ite-transition-none   { transition: none !important; }

/* ═══════════════════════════════════════════════════════
   HOVER EFFECTS
   ═══════════════════════════════════════════════════════ */
.ite-hover-lift {
  transition: transform var(--ite-transition), box-shadow var(--ite-transition);
}
.ite-hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--ite-shadow);
}

.ite-hover-accent:hover {
  color: var(--ite-accent);
  transition: color var(--ite-transition);
}

/* ═══════════════════════════════════════════════════════
   NOTIFICATION DOT (badge ping)
   ═══════════════════════════════════════════════════════ */
.ite-badge-ping {
  position: relative;
  display: inline-flex;
}
.ite-badge-ping::after {
  content: '';
  position: absolute;
  top: -2px; right: -2px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ite-accent);
  animation: ite-ping 1.5s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}