/* Keyframe animations and transitions */

@keyframes highlightBox {
  0% { box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.25); }
  100% { box-shadow: var(--shadow-sm); }
}

@keyframes successHighlight {
  0% { box-shadow: 0 0 0 4px rgba(0, 153, 153, 0.3); }
  100% { box-shadow: none; }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

@keyframes fadeInSlide {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Section highlight animation (scrollToAndHighlight) */
.section.highlight,
.billing-box.highlight {
  animation: highlightBox 0.7s var(--ease-out);
}

/* Hero result show animation */
.hero-result.show {
  animation: fadeInUp 0.4s var(--ease-out);
}

/* Result box animation (old class) */
.result-box.show {
  animation: successHighlight 0.7s var(--ease-out);
}

/* Summary box animation */
#summaryBox {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.4s var(--ease-out),
              transform 0.4s var(--ease-out);
}

#summaryBox.show {
  opacity: 1;
  transform: translateY(0);
  animation: fadeInUp 0.4s var(--ease-out);
}

/* kWh field row staggered animation */
.kwh-field-row {
  opacity: 0;
  transform: translateX(-8px);
  animation: fadeInSlide 0.25s var(--ease-out) forwards;
}

.kwh-field-row:nth-child(1) { animation-delay: 0.03s; }
.kwh-field-row:nth-child(2) { animation-delay: 0.06s; }
.kwh-field-row:nth-child(3) { animation-delay: 0.09s; }
.kwh-field-row:nth-child(4) { animation-delay: 0.12s; }
.kwh-field-row:nth-child(5) { animation-delay: 0.15s; }
.kwh-field-row:nth-child(6) { animation-delay: 0.18s; }
.kwh-field-row:nth-child(7) { animation-delay: 0.21s; }
.kwh-field-row:nth-child(8) { animation-delay: 0.24s; }
.kwh-field-row:nth-child(9) { animation-delay: 0.27s; }
.kwh-field-row:nth-child(10) { animation-delay: 0.30s; }
.kwh-field-row:nth-child(n+11) { animation-delay: 0.33s; }

/* Collapsible body transition */
.collapsible-body {
  animation: fadeInUp 0.3s var(--ease-out);
}

/* Smooth transitions for theme switching */
.section,
.app-header,
.app-footer,
.profile-select,
.field-input,
.btn-icon-sm,
.btn-export,
.stat-chip,
.history-item {
  transition: background var(--duration-normal) var(--ease-out),
              color var(--duration-normal) var(--ease-out),
              border-color var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out);
}