/* ===============================================
   ANIMACIONES - Calculadora de Tensión
   =============================================== */

/* ---------- Animaciones de entrada ---------- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    transform: translateY(0);
  }
  40%, 43% {
    transform: translateY(-10px);
  }
  70% {
    transform: translateY(-5px);
  }
}

/* ---------- Animación de vibración para errores ---------- */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* ---------- Animación de pulso para advertencias ---------- */
@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
  }
  50% {
    transform: scale(1.02);
    box-shadow: 0 4px 16px rgba(156, 87, 0, 0.3);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
  }
}

/* ---------- Animación de brillo para resultado ---------- */
@keyframes shine {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes glow {
  from {
    box-shadow: 
      0 8px 25px rgba(0,0,0,.15),
      0 4px 12px rgba(247, 171, 8, 0.3),
      inset 0 1px 0 rgba(255,255,255,0.2);
  }
  to {
    box-shadow: 
      0 12px 35px rgba(0,0,0,.2),
      0 8px 20px rgba(247, 171, 8, 0.6),
      inset 0 1px 0 rgba(255,255,255,0.3);
  }
}

/* ---------- Animación de aparición de texto ---------- */
@keyframes textReveal {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Animación de brillo para texto actualizado ---------- */
@keyframes textShine {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* ---------- Animación de aparición de letras ---------- */
@keyframes letterPop {
  0% {
    opacity: 0;
    transform: scale(0.3) rotate(30deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.2) rotate(0deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

/* ---------- Animación de rotación para loading ---------- */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ---------- Animación específica para cambio de diagrama ---------- */
@keyframes diagramChange {
  0% {
    opacity: 0.7;
    transform: scale(0.95);
  }
  50% {
    opacity: 1;
    transform: scale(1.02);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ---------- Animación de escalado suave ---------- */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ---------- Aplicación de animaciones a elementos ---------- */

/* Animación para mensajes de error */
.message-container.error {
  animation: shake 0.6s ease-in-out, fadeInUp 0.3s ease-out;
}

/* Animación para mensajes de advertencia */
.message-container.warning {
  animation: pulse 1s ease-in-out 2, fadeInUp 0.4s ease-out;
}

/* Animación para resultado actualizado */
.result-updated {
  animation: textReveal 0.8s ease-out;
}

/* Animación de brillo activa para resultado */
.animate-shine::after {
  animation: textShine 1.2s ease-in-out !important;
  left: 100% !important;
}

/* Animación para letras individuales */
.letter-animation {
  display: inline-block;
  animation: letterPop 0.4s ease-out;
}

/* Retraso escalonado para las letras */
.letter-animation:nth-child(1) { animation-delay: 0.0s; }
.letter-animation:nth-child(2) { animation-delay: 0.05s; }
.letter-animation:nth-child(3) { animation-delay: 0.1s; }
.letter-animation:nth-child(4) { animation-delay: 0.15s; }
.letter-animation:nth-child(5) { animation-delay: 0.2s; }
.letter-animation:nth-child(6) { animation-delay: 0.25s; }
.letter-animation:nth-child(7) { animation-delay: 0.3s; }
.letter-animation:nth-child(8) { animation-delay: 0.35s; }
.letter-animation:nth-child(9) { animation-delay: 0.4s; }
.letter-animation:nth-child(10) { animation-delay: 0.45s; }
.letter-animation:nth-child(11) { animation-delay: 0.5s; }
.letter-animation:nth-child(12) { animation-delay: 0.55s; }

/* Animación para el brillo del resultado en hover */
#result::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s;
}

#result:not(:empty):hover::after {
  left: 100%;
}

/* Animación para botón de cálculo */
#calcular:active {
  animation: bounce 0.3s ease-in-out;
}

/* Animación de entrada para la tarjeta principal */
.card {
  animation: fadeInUp 0.8s ease-out;
}

/* Animación para pestañas */
.tabs li {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.tabs li:hover {
  transform: translateY(-2px);
}

.tabs li.active {
  animation: scaleIn 0.3s ease-out;
}

/* Animación para inputs en focus */
input:focus {
  animation: scaleIn 0.2s ease-out;
}

/* Animación para el botón de tema */
#theme-toggle {
  transition: all 0.3s ease;
}

#theme-toggle:hover {
  animation: pulse 0.6s ease-in-out infinite;
}

/* Animación para mostrar/ocultar grupos de método */
.method-group {
  transition: all 0.3s ease-in-out;
}

.method-group:not([hidden]) {
  animation: slideIn 0.4s ease-out;
}

/* Animación para campos permanentes (carga y eslingas) */
.permanent-field {
  animation: slideIn 0.4s ease-out;
}

/* Animación para el diagrama */
.diagram img {
  transition: all 0.3s ease;
}

/* Animación cuando cambia el diagrama */
.diagram-change {
  animation: diagramChange 0.5s ease-out;
}

/* ---------- Clases auxiliares para JavaScript ---------- */

/* Para activar animación de actualización de resultado */
.animate-update {
  animation: textReveal 0.8s ease-out !important;
}

/* Para activar el brillo de actualización */
.animate-shine::after {
  animation: textShine 1.2s ease-in-out !important;
  left: 100% !important;
}

/* Para animación de carga */
.loading {
  position: relative;
  pointer-events: none;
}

.loading::before {
  content: "⚙️";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5rem;
  animation: spin 1s linear infinite;
  z-index: 10;
}

/* Para resaltar elementos */
.highlight {
  animation: glow 1s ease-in-out 2;
}

/* ---------- Responsividad para animaciones ---------- */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Animaciones más suaves en dispositivos móviles */
@media (max-width: 768px) {
  .message-container.error {
    animation: shake 0.4s ease-in-out, fadeInUp 0.2s ease-out;
  }
  
  .message-container.warning {
    animation: pulse 0.8s ease-in-out 1, fadeInUp 0.3s ease-out;
  }
  
  .animate-update {
    animation: textReveal 0.6s ease-out !important;
  }
  
  .letter-animation {
    animation: letterPop 0.3s ease-out;
  }
}