/**
 * WebSpeed Analyzer - Micro-interazioni Premium
 * File CSS per le 3 micro-interazioni proposte nel design UI/UX
 */

/* ============================================
   1. PROGRESS BAR ANIMATA CON FEEDBACK VISIVO
   ============================================ */

/* Progress Bar Animata - VERSIONE COMPATIBILE */
/* NON sovrascrive transition esistente, aggiunge solo animazioni */
#webspeed-wow-progress-bar,
#webspeed-wow-bar-inner {
  /* NON sovrascrivere background esistente, aggiungere solo shimmer come overlay */
  position: relative;
  overflow: hidden;
  /* NON sovrascrivere transition width esistente */
  /* La transition viene gestita da frontend.css o webspeed-frontend.css */
  /* Rimuovere: transition: width 0.3s ease-out; */
}

/* Shimmer effect come overlay separato (non sovrascrive gradient esistente) */
#webspeed-wow-progress-bar::before,
#webspeed-wow-bar-inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(255,255,255,0.3), 
    transparent
  );
  animation: webspeed-shimmer-slide 2s infinite;
  pointer-events: none;
  z-index: 1;
}

/* Usa ::after esistente solo se non già presente, altrimenti usa ::before */
#webspeed-wow-bar-inner::after {
  /* Mantieni animazione pulse-glow esistente se presente */
  /* Se non presente, aggiungi slide effect */
}

/* Animazione shimmer con nome unico per evitare conflitti */
@keyframes webspeed-shimmer-slide {
  0% { 
    left: -100%; 
  }
  100% { 
    left: 100%; 
  }
}

/* Pulse effect su milestone - usa nome unico */
#webspeed-wow-progress-bar.milestone-pulse,
#webspeed-wow-bar-inner.milestone-pulse {
  animation: webspeed-pulse-milestone 0.6s ease;
}

@keyframes webspeed-pulse-milestone {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(37, 99, 235, 0.5);
  }
}

/* Icone animate per ogni fase */
.webspeed-progress-icon {
  display: inline-block;
  transition: transform 0.3s ease;
}

.webspeed-progress-icon.active {
  animation: webspeed-icon-bounce 0.5s ease;
}

@keyframes webspeed-icon-bounce {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-8px) scale(1.1);
  }
}

/* ============================================
   2. INPUT CODICE OTP CON AUTO-FOCUS E FEEDBACK
   ============================================ */

.webspeed-modal-step2-input {
  transition: all 0.3s ease;
  border: 2px solid #326eb1;
  text-align: center;
  font-size: 1.2em;
  letter-spacing: 6px;
}

.webspeed-modal-step2-input:focus {
  border-color: var(--ws-primary, #2563eb);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
  transform: scale(1.02);
  outline: none;
}

.webspeed-modal-step2-input.code-complete {
  border-color: var(--ws-success, #10b981);
  background: #f0fdf4;
  animation: webspeed-pulse-success 0.5s ease;
}

@keyframes webspeed-pulse-success {
  0%, 100% { 
    transform: scale(1); 
  }
  50% { 
    transform: scale(1.05); 
  }
}

/* Variante: 6 input separati (digit-by-digit) */
.webspeed-otp-digits {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.webspeed-otp-digit {
  width: 48px;
  height: 56px;
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  transition: all 0.2s ease;
  background: white;
}

.webspeed-otp-digit:focus {
  border-color: var(--ws-primary, #2563eb);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
  outline: none;
  transform: scale(1.05);
}

.webspeed-otp-digit.filled {
  border-color: var(--ws-success, #10b981);
  background: #f0fdf4;
  animation: webspeed-digit-fill 0.2s ease;
}

@keyframes webspeed-digit-fill {
  0% {
    transform: scale(0.9);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/* Mobile: input più grande */
@media (max-width: 640px) {
  .webspeed-modal-step2-input {
    font-size: 24px !important;
    letter-spacing: 8px !important;
    max-width: 100% !important;
  }
  
  .webspeed-otp-digit {
    width: 44px;
    height: 52px;
    font-size: 20px;
  }
}

/* ============================================
   3. SUCCESS STATE ANIMATO CON CONFETTI
   ============================================ */

/* Messaggio successo con slide-in */
.webspeed-step2-message.success-animated {
  animation: webspeed-slide-in-up 0.5s ease;
}

@keyframes webspeed-slide-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Pulsante "Avanti" sbloccato con animazione */
.webspeed-btn-unlocked {
  background: linear-gradient(135deg, var(--ws-success, #10b981) 0%, #059669 100%) !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4) !important;
  position: relative;
  overflow: hidden;
  animation: webspeed-bounce-in 0.6s ease;
}

.webspeed-btn-unlocked::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(255,255,255,0.3), 
    transparent
  );
  animation: webspeed-shine 2s infinite;
}

@keyframes webspeed-bounce-in {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes webspeed-shine {
  0% { 
    left: -100%; 
  }
  100% { 
    left: 100%; 
  }
}

/* Confetti CSS-only */
.webspeed-confetti {
  position: absolute;
  pointer-events: none;
  z-index: 1000001;
}

@keyframes webspeed-confetti-fall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(400px) rotate(720deg);
    opacity: 0;
  }
}

/* Variante confetti più elaborata (opzionale) */
.webspeed-confetti.shape-square {
  border-radius: 0;
}

.webspeed-confetti.shape-circle {
  border-radius: 50%;
}

.webspeed-confetti.shape-triangle {
  width: 0;
  height: 0;
  background: transparent;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 8px solid currentColor;
}

/* ============================================
   UTILITY: Transizioni Smooth Globali
   ============================================ */

.webspeed-smooth-transition {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover effects per pulsanti */
.webspeed-button-hover {
  transition: all 0.2s ease;
}

.webspeed-button-hover:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

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

/* Loading spinner per stati di caricamento */
.webspeed-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(37, 99, 235, 0.2);
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: webspeed-spinner-spin 0.8s linear infinite;
}

@keyframes webspeed-spinner-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Fade in/out per messaggi */
.webspeed-fade-in {
  animation: webspeed-fade-in 0.3s ease;
}

.webspeed-fade-out {
  animation: webspeed-fade-out 0.3s ease;
}

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

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