/* ============================================================
   animations.css — Tuxii · Keyframes & animation classes
   ============================================================ */

/* Scroll suave global */
html { scroll-behavior: smooth; }

/* --- LED pulsante (logo) ----------------------------------- */
@keyframes led-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.15; }
}
.led-pulse {
  animation: led-pulse 1.8s ease-in-out infinite;
}

/* --- Entrada de elementos ---------------------------------- */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fade-up 0.5s ease forwards; }

/* --- Typing indicator (3 puntos) -------------------------- */
@keyframes typing-dot {
  0%, 80%, 100% { opacity: 0.2; transform: scale(0.8); }
  40%           { opacity: 1;   transform: scale(1); }
}
.typing-dot:nth-child(1) { animation: typing-dot 1.2s infinite 0s; }
.typing-dot:nth-child(2) { animation: typing-dot 1.2s infinite 0.2s; }
.typing-dot:nth-child(3) { animation: typing-dot 1.2s infinite 0.4s; }

/* --- Señal inalámbrica (decorativo) ----------------------- */
@keyframes signal-flow {
  0%   { stroke-dashoffset: 120; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { stroke-dashoffset: 0;   opacity: 0; }
}
.signal {
  stroke-dasharray: 6 4;
  animation: signal-flow 2.4s ease-in-out infinite;
}

/* --- Intersection Observer — reveal on scroll ------------- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Delay helpers para stagger */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

/* --- Modal fade + scale ------------------------------------ */
@keyframes modal-in {
  from { opacity: 0; transform: scale(0.95) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-panel {
  animation: modal-in 0.25s ease forwards;
}

/* --- Burbuja de chat entrada ------------------------------- */
@keyframes bubble-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.chat-bubble {
  animation: bubble-in 0.3s ease forwards;
}

/* --- Check de éxito en modal ------------------------------ */
@keyframes check-draw {
  from { stroke-dashoffset: 50; }
  to   { stroke-dashoffset: 0; }
}
.check-path {
  stroke-dasharray: 50;
  animation: check-draw 0.4s ease 0.2s forwards;
  stroke-dashoffset: 50;
}

/* --- Contador numérico en hero stats ---------------------- */
@keyframes count-up {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.stat-number.counting {
  animation: count-up 0.4s ease forwards;
}

/* --- Flujo de señal: puntos viajando por una línea -------- */
@keyframes dot-travel {
  0%   { offset-distance: 0%;   opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

@keyframes signal-dash {
  to { stroke-dashoffset: -30; }
}
.flow-signal-line {
  stroke-dasharray: 4 4;
  animation: signal-dash 1.2s linear infinite;
}

/* --- Pulso suave de íconos del sistema -------------------- */
@keyframes soft-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}
.soft-pulse {
  animation: soft-pulse 3s ease-in-out infinite;
  transform-origin: center;
}

/* --- Etiqueta ESL "cambiando" de precio ------------------- */
@keyframes price-flip {
  0%, 45%  { opacity: 1; transform: translateY(0); }
  50%      { opacity: 0; transform: translateY(-4px); }
  55%      { opacity: 0; transform: translateY(4px); }
  60%, 100% { opacity: 1; transform: translateY(0); }
}
.price-old {
  animation: price-flip 4s ease-in-out infinite;
}
.price-new {
  animation: price-flip 4s ease-in-out infinite;
  animation-delay: -2s;
}

/* --- FAQ accordion: expansión suave ----------------------- */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
}
.faq-item.is-open .faq-answer {
  max-height: 400px;
}
.faq-toggle-icon {
  transition: transform 0.25s ease;
}
.faq-item.is-open .faq-toggle-icon {
  transform: rotate(45deg);
}

/* --- Burbuja flotante junto al character Tuxii ------------ */
@keyframes float-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.bob { animation: float-bob 4s ease-in-out infinite; }

/* --- Línea de dinero/ahorro contador calculadora ---------- */
@keyframes money-pop {
  0%   { transform: scale(0.85); opacity: 0.7; }
  100% { transform: scale(1);    opacity: 1; }
}
.calc-result.pop {
  animation: money-pop 0.35s ease forwards;
}