/* ===== UNIFIED MICRO-ANIMATIONS SYSTEM - ROVI 2025 ===== */

/* ===== STANDARD EASING CURVES ===== */
:root {
  /* Primary easing - uso generale per micro-interazioni */
  --ease-primary: cubic-bezier(0.2, 0.8, 0.3, 1);

  /* Smooth easing - transizioni fluide */
  --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* Bounce easing - effetti playful */
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* Timing unificato */
  --timing-instant: 150ms;
  --timing-fast: 300ms;
  --timing-normal: 400ms;
  --timing-slow: 600ms;
  --timing-slower: 800ms;
}

/* ===== KEYFRAME ANIMATIONS ===== */

/* Gradient shift - per backgrounds animati */
@keyframes gradientShift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* Float - movimento verticale soft */
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Pulse - effetto pulsazione */
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

/* Fade in up - entrata dal basso */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Slide down - per dropdown/modals */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scale in - ingrandimento dall'origine */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Shimmer - effetto luccichio */
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

/* ===== UNIFIED CARD HOVER EFFECTS ===== */

/* Base card style - applicato a tutte le card */
/* NOTE: .stat-card and .value-item have custom implementations in territorio.css */
.feature-card,
.service-card,
.event-card {
  /* Performance optimization */
  will-change: transform, box-shadow;
  transform: translateZ(0);
  backface-visibility: hidden;

  /* Unified transition */
  transition:
    transform var(--timing-normal) var(--ease-primary),
    box-shadow var(--timing-normal) var(--ease-primary),
    border-color var(--timing-fast) var(--ease-primary);
}

/* Unified hover lift effect */
.feature-card:hover,
.service-card:hover,
.event-card:hover {
  transform: translateY(-8px) translateZ(0);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(234, 95, 71, 0.08);
}

/* ===== BUTTON MICRO-ANIMATIONS ===== */

.btn,
.btn-primary,
.btn-secondary,
.nav-cta,
.carousel-btn {
  position: relative;
  overflow: hidden;
  transition:
    transform var(--timing-fast) var(--ease-primary),
    box-shadow var(--timing-fast) var(--ease-primary),
    background-color var(--timing-fast) var(--ease-primary);
}

/* Ripple effect on hover */
.btn::before,
.btn-primary::before,
.btn-secondary::before,
.nav-cta::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width var(--timing-slow) var(--ease-primary),
              height var(--timing-slow) var(--ease-primary);
}

.btn:hover::before,
.btn-primary:hover::before,
.btn-secondary:hover::before,
.nav-cta:hover::before {
  width: 300px;
  height: 300px;
}

/* Button lift on hover */
.btn:hover,
.btn-primary:hover,
.btn-secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(234, 95, 71, 0.3);
}

/* Button press effect */
.btn:active,
.btn-primary:active,
.btn-secondary:active {
  transform: translateY(0);
  transition-duration: var(--timing-instant);
}

/* ===== ICON ANIMATIONS ===== */
/* NOTE: .stat-icon animation is handled in territorio.css */

.feature-icon,
.service-icon {
  transition:
    transform var(--timing-normal) var(--ease-smooth),
    background var(--timing-normal) var(--ease-smooth),
    color var(--timing-normal) var(--ease-smooth);
}

/* Icon rotation + scale on parent hover */
.feature-card:hover .feature-icon,
.service-card:hover .service-icon {
  transform: rotate(5deg) scale(1.1);
}

/* ===== LINK MICRO-ANIMATIONS ===== */

.nav-link,
a[href]:not(.btn):not(.btn-primary):not(.btn-secondary) {
  position: relative;
  transition: color var(--timing-fast) var(--ease-primary);
}

/* Underline animation */
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-secondary);
  transition: width var(--timing-normal) var(--ease-primary);
}

.nav-link:hover::after {
  width: 100%;
}

/* ===== BORDER GRADIENT REVEALS ===== */
/* NOTE: .stat-card and .value-item pseudo-elements are defined in territorio.css */
/* Avoid conflicts by keeping section-specific implementations separate */

/* ===== PROGRESSIVE ENHANCEMENT ===== */

/* Default: no animations (accessibility first) */
.feature-card,
.service-card,
.event-card {
  opacity: 1;
  transform: none;
}

/* Enhanced with JavaScript */
.js .feature-card,
.js .service-card,
.js .event-card {
  opacity: 0;
  transform: translateY(32px) scale(0.98);
}

.js .feature-card.in-view,
.js .service-card.in-view,
.js .event-card.in-view {
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: fadeInUp var(--timing-slow) var(--ease-primary);
}

/* NOTE: .stat-card and .value-item animations handled separately in territorio.css */

/* Stagger delay for sequential animations */
.js .feature-card.in-view:nth-child(1),
.js .service-card.in-view:nth-child(1) {
  animation-delay: 0ms;
}

.js .feature-card.in-view:nth-child(2),
.js .service-card.in-view:nth-child(2) {
  animation-delay: 100ms;
}

.js .feature-card.in-view:nth-child(3),
.js .service-card.in-view:nth-child(3) {
  animation-delay: 200ms;
}

.js .feature-card.in-view:nth-child(4),
.js .service-card.in-view:nth-child(4) {
  animation-delay: 300ms;
}

/* ===== REDUCED MOTION ===== */
@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;
  }
}

/* ===== FALLBACK MODE ===== */
.fallback-mode * {
  animation: none !important;
  transition: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* ===== SMOOTH SCROLLING ===== */
.js {
  scroll-behavior: smooth;
}

html {
  scroll-padding-top: 8rem; /* Account for fixed navbar */
}

/* ===== LOADING STATES ===== */

.loading {
  position: relative;
  pointer-events: none;
  opacity: 0.6;
}

.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border: 3px solid var(--color-secondary);
  border-top-color: transparent;
  border-radius: 50%;
  animation: rotate 0.8s linear infinite;
}

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