/* animations.css — Premium Micro-interactions */

/* ===== BUTTON STATES ===== */
.btn,
.logout-btn,
.logout-btn-mobile,
.theme-toggle,
.mobile-menu-toggle,
.scenario-tab,
.filter-select,
.filter-input,
.login-btn,
button {
  transition: transform 0.15s ease, box-shadow 0.15s ease, 
              background-color 0.15s ease, border-color 0.15s ease, 
              color 0.15s ease, opacity 0.15s ease !important;
}

.btn:hover,
.logout-btn:hover,
.logout-btn-mobile:hover,
.theme-toggle:hover,
.scenario-tab:hover:not(.active),
.login-btn:hover:not(:disabled) {
  transform: scale(1.02);
}

.btn:active,
.logout-btn:active,
.logout-btn-mobile:active,
.theme-toggle:active,
.scenario-tab:active,
.login-btn:active:not(:disabled) {
  transform: scale(0.98);
}

/* ===== CARD HOVER EFFECTS ===== */
.stat-card,
.compare-card,
.chart-card,
.scenario-card,
.breakdown-item,
.result-card,
.metrics-card,
.settings-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.stat-card:hover,
.compare-card:hover,
.chart-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.15);
  border-color: rgba(139, 92, 246, 0.3);
}

.scenario-card:hover,
.breakdown-item:hover,
.result-card:hover {
  background: var(--bg-hover);
}

.settings-card:hover {
  border-color: rgba(139, 92, 246, 0.2);
}

/* Deal cards in table rows */
.deals-table tr {
  transition: background-color 0.15s ease;
}

.deals-table tr:hover td {
  background: var(--bg-hover) !important;
}

/* ===== LOADING & SKELETON SHIMMER ===== */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--bg) 25%,
    var(--bg-hover) 50%,
    var(--bg) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 2s ease-in-out infinite;
  border-radius: 4px;
}

/* Pulse animation for "Loading..." text */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.loading {
  animation: pulse 1.5s ease-in-out infinite;
}

.spinner {
  animation: spin 0.8s linear infinite !important;
}

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

/* ===== PAGE TRANSITIONS & STAGGER ===== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Main content fade-in */
.main {
  animation: fadeInUp 0.4s ease-out;
}

/* Stagger animation for deal cards (table rows) */
.deals-table tbody tr {
  animation: fadeInUp 0.3s ease-out backwards;
}

.deals-table tbody tr:nth-child(1) { animation-delay: 0.05s; }
.deals-table tbody tr:nth-child(2) { animation-delay: 0.1s; }
.deals-table tbody tr:nth-child(3) { animation-delay: 0.15s; }
.deals-table tbody tr:nth-child(4) { animation-delay: 0.2s; }
.deals-table tbody tr:nth-child(5) { animation-delay: 0.25s; }

/* Compare grid cards stagger */
.compare-card {
  animation: fadeInUp 0.4s ease-out backwards;
}

.compare-card:nth-child(1) { animation-delay: 0.1s; }
.compare-card:nth-child(2) { animation-delay: 0.2s; }
.compare-card:nth-child(3) { animation-delay: 0.3s; }
.compare-card:nth-child(4) { animation-delay: 0.4s; }

/* Stats row stagger */
.stat-card {
  animation: fadeInUp 0.3s ease-out backwards;
}

.stat-card:nth-child(1) { animation-delay: 0.05s; }
.stat-card:nth-child(2) { animation-delay: 0.1s; }
.stat-card:nth-child(3) { animation-delay: 0.15s; }
.stat-card:nth-child(4) { animation-delay: 0.2s; }

/* ===== COLLAPSE/EXPAND (CHEVRON ROTATION) ===== */
.collapsible-chevron {
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.collapsible-section.collapsed .collapsible-chevron {
  transform: rotate(-90deg);
}

.collapsible-content {
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.2s ease;
  overflow: hidden;
  opacity: 1;
}

.collapsible-section.collapsed .collapsible-content {
  max-height: 0 !important;
  opacity: 0;
}

/* ===== TOAST NOTIFICATIONS ===== */
@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

.toast {
  position: fixed;
  top: 80px;
  right: 32px;
  padding: 16px 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  z-index: 1000;
  animation: slideInDown 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  align-items: center;
  gap: 12px;
}

.toast.removing {
  animation: slideOutUp 0.25s ease-out forwards;
}

.toast.success {
  border-color: var(--green);
}

.toast.error {
  border-color: var(--red);
}

.toast-icon {
  font-size: 20px;
}

.toast-message {
  font-size: 14px;
  font-weight: 500;
}

/* ===== SUCCESS/FEEDBACK STATES ===== */
@keyframes successFlash {
  0% {
    background-color: transparent;
  }
  50% {
    background-color: rgba(0, 200, 83, 0.2);
  }
  100% {
    background-color: transparent;
  }
}

.success-flash {
  animation: successFlash 0.6s ease-out;
}

/* Checkmark animation */
@keyframes checkmarkPop {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.checkmark {
  animation: checkmarkPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Compare indicator pulse */
@keyframes pulse-ring {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.3);
    opacity: 0;
  }
}

.compare-indicator::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  animation: pulse-ring 1.5s ease-out infinite;
}

/* ===== FOCUS STATES (ACCESSIBILITY) ===== */
.btn:focus-visible,
.logout-btn:focus-visible,
.theme-toggle:focus-visible,
.filter-input:focus-visible,
.filter-select:focus-visible,
.login-input:focus-visible,
button:focus-visible,
a:focus-visible,
.compare-checkbox:focus-visible,
input[type="checkbox"]:focus-visible,
input[type="range"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Remove default focus styles */
*:focus {
  outline: none;
}

/* Only show custom focus on keyboard navigation */
*:focus:not(:focus-visible) {
  outline: none;
}

/* ===== MODAL ANIMATIONS ===== */
@keyframes modalFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modal {
  animation: modalFadeIn 0.2s ease-out;
}

.modal.active .modal-content {
  animation: modalSlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ===== LINK HOVER EFFECTS ===== */
.nav-link,
.mobile-nav-link,
.back-link,
a {
  transition: color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.back-link:hover {
  transform: translateX(-3px);
}

/* ===== COMPARE BAR SLIDE IN ===== */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.compare-bar.visible {
  animation: slideInUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ===== CHECKBOX INTERACTIONS ===== */
.compare-checkbox,
input[type="checkbox"] {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
}

.compare-checkbox:hover,
input[type="checkbox"]:hover {
  transform: scale(1.1);
}

.compare-checkbox:active,
input[type="checkbox"]:active {
  transform: scale(0.95);
}

/* ===== BADGE ANIMATIONS ===== */
.deal-badge,
.deal-verdict,
.deal-type,
.card-type,
.card-verdict,
.winner-badge,
.ai-badge,
.pro-badge,
.zoning-badge,
.neighborhood-badge {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* ===== INPUT FOCUS GLOW ===== */
.filter-input:focus,
.login-input:focus,
.share-link-input-group input:focus {
  box-shadow: 0 0 0 3px var(--accent-dim);
  border-color: var(--accent) !important;
}

/* ===== SMOOTH SCROLL ===== */
html {
  scroll-behavior: smooth;
}

/* ===== MOBILE MENU SLIDE ===== */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.mobile-nav.open {
  animation: slideInRight 0.25s ease-out;
}

.mobile-nav-link {
  animation: fadeInUp 0.2s ease-out backwards;
}

.mobile-nav-link:nth-child(1) { animation-delay: 0.05s; }
.mobile-nav-link:nth-child(2) { animation-delay: 0.1s; }
.mobile-nav-link:nth-child(3) { animation-delay: 0.15s; }

/* ===== SETTINGS ROW HOVER ===== */
.settings-row {
  transition: background-color 0.15s ease;
}

.settings-row:hover {
  background: rgba(139, 92, 246, 0.03);
}

/* ===== METRIC ROW HOVER ===== */
.metric-row {
  transition: background-color 0.15s ease;
}

.metric-row:hover {
  background: rgba(255, 255, 255, 0.02);
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
/* Use GPU acceleration for transforms */
.btn,
.stat-card,
.compare-card,
.chart-card,
.collapsible-chevron,
.toast,
.modal-content {
  will-change: transform;
}

/* Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .btn:hover,
  .stat-card:hover,
  .compare-card:hover,
  .chart-card:hover {
    transform: none;
  }
}

/* ===== EMPTY STATE FADE IN ===== */
.empty-state {
  animation: fadeInUp 0.5s ease-out;
}

/* ===== LOGIN SCREEN FADE IN ===== */
.login-card {
  animation: modalSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ===== SCORE CIRCLE ANIMATION ===== */
@keyframes scoreCircleFill {
  from {
    --score: 0;
  }
}

.score-circle {
  animation: scoreCircleFill 1s ease-out;
}

/* ===== CHART FADE IN ===== */
.chart-container canvas {
  animation: fadeInUp 0.6s ease-out;
}

/* ===== DEAL HEADER ANIMATION ===== */
.deal-header {
  animation: fadeInUp 0.4s ease-out;
}

.deal-title {
  animation: fadeInUp 0.5s ease-out;
}

.deal-meta {
  animation: fadeInUp 0.6s ease-out;
}

/* ===== AI SUMMARY & ZONING GLOW EFFECT ===== */
.ai-summary,
.zoning-section,
.neighborhood-section {
  transition: box-shadow 0.3s ease;
}

.ai-summary:hover {
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.2);
}

.zoning-section:hover {
  box-shadow: 0 0 20px rgba(0, 200, 83, 0.15);
}

.neighborhood-section:hover {
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.15);
}