/* ===== MICRO-INTERACTIONS - Animations UX subtiles ===== */

/* Smooth transitions globales */
*,
*::before,
*::after {
  transition-property: none;
  transition-duration: 0s;
  transition-timing-function: ease;
}

/* Hover effects sur les liens */
a {
  position: relative;
  transition: color 0.2s ease;
}

a:hover {
  transition-duration: 0.1s;
}

/* Hover underline animation */
.nav > a,
.mobile-nav > a {
  position: relative;
}

.nav > a::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 14px;
  right: 14px;
  height: 2px;
  background: var(--brand-blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
  border-radius: 2px;
}

.nav > a:hover::after {
  transform: scaleX(1);
}

/* Button press effect */
.btn,
button {
  transition: all 0.2s ease;
  transform: translateY(0);
}

.btn:active,
button:active {
  transform: translateY(2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.btn:hover,
button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* Card hover effects */
.pro-card,
.widget,
.weather-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pro-card:hover,
.widget:hover {
  transform: translateY(-4px);
}

.weather-card:hover {
  transform: translateY(-6px) scale(1.02);
}

/* Input focus glow */
.input,
.select,
.textarea {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 0 0 0 transparent;
}

.input:focus,
.select:focus,
.textarea:focus {
  box-shadow: 0 0 0 3px rgba(30, 144, 255, 0.1);
  outline: none;
}

/* Checkbox/Radio smooth animation */
input[type="checkbox"],
input[type="radio"] {
  transition: all 0.2s ease;
  cursor: pointer;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
  animation: checkbox-pop 0.3s ease;
}

@keyframes checkbox-pop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

/* Ripple effect on click */
.ripple {
  position: relative;
  overflow: hidden;
}

.ripple::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
}

.ripple:active::before {
  width: 300px;
  height: 300px;
}

/* Skeleton pulse refined */
.skeleton {
  animation: skeleton-shimmer 2s ease-in-out infinite;
}

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

/* Loading state pulse */
.loading-spinner {
  animation: spin 0.8s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

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

/* Toast notification slide-in */
.toast {
  animation: toast-slide-in 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes toast-slide-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.toast.toast-exit {
  animation: toast-slide-out 0.3s ease-in forwards;
}

@keyframes toast-slide-out {
  to {
    transform: translateX(120%);
    opacity: 0;
  }
}

/* Modal fade-in */
.modal {
  animation: modal-fade-in 0.3s ease;
}

@keyframes modal-fade-in {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

#alertModalBackdrop.show {
  animation: backdrop-fade-in 0.3s ease;
}

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

/* Badge bounce on update */
.badge-update {
  animation: badge-bounce 0.5s ease;
}

@keyframes badge-bounce {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
}

/* Icon spin on interaction */
.icon-spin {
  transition: transform 0.3s ease;
}

.icon-spin:hover {
  transform: rotate(180deg);
}

/* Smooth page transitions */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Focus visible (keyboard navigation) */
*:focus-visible {
  outline: 3px solid var(--brand-blue);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Remove focus for mouse clicks */
*:focus:not(:focus-visible) {
  outline: none;
}

/* Dropdown menu slide */
.nav-dropdown-menu {
  animation: dropdown-slide-down 0.2s ease;
}

@keyframes dropdown-slide-down {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* Mobile menu slide */
.mobile-nav.open {
  animation: mobile-menu-slide 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Weather card loading shimmer */
.weather-card.loading {
  position: relative;
  overflow: hidden;
}

.weather-card.loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  animation: card-shimmer 2s infinite;
}

@keyframes card-shimmer {
  to {
    left: 100%;
  }
}

/* Success checkmark animation */
.success-icon {
  animation: success-scale 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes success-scale {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Error shake animation */
.error-shake {
  animation: error-shake 0.5s ease;
}

@keyframes error-shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-10px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(10px);
  }
}

/* Pulse notification */
.pulse-notification {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(30, 144, 255, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(30, 144, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(30, 144, 255, 0);
  }
}

/* Gradient animation pour CTA */
.btn-gradient {
  background: linear-gradient(135deg, #1E90FF 0%, #0066cc 100%);
  background-size: 200% 200%;
  animation: gradient-shift 3s ease infinite;
}

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

/* Responsive - Réduire animations sur mobile */
@media (max-width: 640px) {
  .pro-card:hover,
  .widget:hover {
    transform: translateY(-2px);
  }
  
  .weather-card:hover {
    transform: translateY(-3px) scale(1.01);
  }
}

/* Respecter préférence utilisateur */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}