/* ═══════════════════════════════════════════════════════════
   EkatraCore — Professional Micro-Animations
   Subtle, smooth, enterprise-grade motion design
   ═══════════════════════════════════════════════════════════ */

/* === PAGE LOAD — Staggered Fade-In === */
@keyframes ek-fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes ek-fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes ek-scaleIn {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}

/* Page header */
h1, .header, .top-bar {
  animation: ek-fadeIn 0.4s ease-out both;
}

/* Stats cards stagger */
.stat-card:nth-child(1) { animation: ek-fadeUp 0.4s ease-out 0.1s both; }
.stat-card:nth-child(2) { animation: ek-fadeUp 0.4s ease-out 0.15s both; }
.stat-card:nth-child(3) { animation: ek-fadeUp 0.4s ease-out 0.2s both; }

/* App cards stagger */
.app-card:nth-child(1) { animation: ek-fadeUp 0.45s ease-out 0.12s both; }
.app-card:nth-child(2) { animation: ek-fadeUp 0.45s ease-out 0.18s both; }
.app-card:nth-child(3) { animation: ek-fadeUp 0.45s ease-out 0.24s both; }
.app-card:nth-child(4) { animation: ek-fadeUp 0.45s ease-out 0.30s both; }
.app-card:nth-child(5) { animation: ek-fadeUp 0.45s ease-out 0.36s both; }

/* Content sections */
.card, .section, .contact-card, .service-chip, .address-section,
.cta-section, .usage-credits, .built-in-section, .quick-link,
.trade-card, .preview-card, .chart-trade-section {
  animation: ek-scaleIn 0.35s ease-out both;
}

/* Quick links stagger */
.quick-link:nth-child(1) { animation-delay: 0.15s; }
.quick-link:nth-child(2) { animation-delay: 0.2s; }
.quick-link:nth-child(3) { animation-delay: 0.25s; }
.quick-link:nth-child(4) { animation-delay: 0.3s; }
.quick-link:nth-child(5) { animation-delay: 0.35s; }

/* Contact cards stagger */
.contact-card:nth-child(1) { animation: ek-fadeUp 0.4s ease-out 0.1s both; }
.contact-card:nth-child(2) { animation: ek-fadeUp 0.4s ease-out 0.16s both; }
.contact-card:nth-child(3) { animation: ek-fadeUp 0.4s ease-out 0.22s both; }
.contact-card:nth-child(4) { animation: ek-fadeUp 0.4s ease-out 0.28s both; }

/* Service chips stagger */
.service-chip:nth-child(1) { animation-delay: 0.08s; }
.service-chip:nth-child(2) { animation-delay: 0.12s; }
.service-chip:nth-child(3) { animation-delay: 0.16s; }
.service-chip:nth-child(4) { animation-delay: 0.20s; }
.service-chip:nth-child(5) { animation-delay: 0.24s; }
.service-chip:nth-child(6) { animation-delay: 0.28s; }
.service-chip:nth-child(7) { animation-delay: 0.32s; }
.service-chip:nth-child(8) { animation-delay: 0.36s; }

/* === CARD HOVER — Smooth Elevation === */
.app-card, .contact-card, .service-chip, .quick-link,
.stat-card, .sample-card, .chart-sample {
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.2s ease !important;
}
.app-card:hover, .contact-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-lg) !important;
}
.quick-link:hover, .service-chip:hover, .stat-card:hover,
.sample-card:hover, .chart-sample:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-md) !important;
}

/* === BUTTON INTERACTIONS === */
.btn, .open-btn, .start-trial-btn, .cta-btn, .btn-primary,
.btn-success, .btn-danger, .btn-outline, .btn-orange,
button[type="submit"], .subscribe-btn, .locked-btn {
  transition: transform 0.15s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.2s ease,
              background-color 0.2s ease,
              border-color 0.2s ease,
              opacity 0.2s ease !important;
}
.btn:not(:disabled):hover, .open-btn:not(:disabled):hover,
.start-trial-btn:not(:disabled):hover, .cta-btn:hover,
.btn-primary:not(:disabled):hover, .btn-success:not(:disabled):hover,
.btn-danger:not(:disabled):hover, .btn-orange:not(:disabled):hover,
button[type="submit"]:not(:disabled):hover, .subscribe-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}
.btn:not(:disabled):active, .open-btn:not(:disabled):active,
.start-trial-btn:not(:disabled):active, .cta-btn:active,
button[type="submit"]:not(:disabled):active {
  transform: translateY(0) scale(0.98) !important;
  box-shadow: none !important;
  transition-duration: 0.05s !important;
}

/* === INPUT FOCUS — Smooth Glow === */
input, select, textarea {
  transition: border-color 0.2s ease,
              box-shadow 0.2s ease,
              background-color 0.2s ease !important;
}
input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 3px var(--accent-light) !important;
}

/* === STATUS BADGES — Subtle Pulse on Active === */
.status-active, .status-owner {
  animation: ek-badgePulse 3s ease-in-out infinite;
}
@keyframes ek-badgePulse {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  50% { box-shadow: 0 0 0 4px var(--success-bg); }
}
.status-owner {
  animation-name: ek-badgePulseP;
}
@keyframes ek-badgePulseP {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  50% { box-shadow: 0 0 0 4px var(--purple-bg); }
}

/* === PROGRESS BARS — Smooth Fill === */
.progress-bar-fill, .uc-bar-fill, .learning-progress-fill {
  transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* === TABS / STEPS — Smooth Switch === */
.step-badge, .tab, [class*="tab-btn"] {
  transition: background-color 0.2s ease,
              color 0.2s ease,
              border-color 0.2s ease,
              transform 0.15s ease !important;
}
.step-badge:hover, .tab:hover {
  transform: translateY(-1px);
}

/* === MODAL — Smooth Open === */
@keyframes ek-modalIn {
  from { opacity: 0; transform: scale(0.95) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes ek-overlayIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.correction-modal-overlay.active,
.cm-overlay[style*="display:flex"],
[class*="modal-overlay"].active {
  animation: ek-overlayIn 0.2s ease-out both;
}
.correction-modal,
.cm-box,
[class*="modal-overlay"].active > div,
.correction-modal-overlay.active > div {
  animation: ek-modalIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* === TOAST — Slide Up === */
@keyframes ek-toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(16px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
#selfLearnToast, #ekToast, .toast.success, .toast.error,
div[id*="Toast"] {
  animation: ek-toastIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

/* === UPLOAD ZONE — Breathing Border === */
.upload-zone {
  transition: border-color 0.3s ease, background-color 0.3s ease !important;
}
.upload-zone:hover, .upload-zone.dragover {
  border-color: var(--accent) !important;
  background: var(--accent-light) !important;
}

/* === TRADE CARDS — Dynamic Load === */
.trade-card:nth-child(1) { animation: ek-fadeUp 0.35s ease-out 0.05s both; }
.trade-card:nth-child(2) { animation: ek-fadeUp 0.35s ease-out 0.1s both; }
.trade-card:nth-child(3) { animation: ek-fadeUp 0.35s ease-out 0.15s both; }
.trade-card:nth-child(4) { animation: ek-fadeUp 0.35s ease-out 0.2s both; }
.trade-card:nth-child(5) { animation: ek-fadeUp 0.35s ease-out 0.25s both; }
.trade-card:nth-child(6) { animation: ek-fadeUp 0.35s ease-out 0.3s both; }
.trade-card:nth-child(n+7) { animation: ek-fadeUp 0.35s ease-out 0.35s both; }

/* === THEME TOGGLE — Smooth Rotate === */
.theme-toggle-btn {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.2s ease,
              border-color 0.2s ease !important;
}
.theme-toggle-btn:hover {
  transform: rotate(15deg) scale(1.05) !important;
}
.theme-toggle-btn:active {
  transform: rotate(0deg) scale(0.95) !important;
}

/* === LINKS — Underline Slide === */
a:not(.btn):not(.open-btn):not(.quick-link):not(.cta-btn):not(.back-link):not([class*="btn"]) {
  position: relative;
  text-decoration: none !important;
}

/* === COUNTDOWN — Number Emphasis === */
.countdown-days {
  transition: color 0.3s ease;
}

/* === SCROLLBAR — Smooth Appearance === */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
  transition: background 0.2s;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }

/* === LOADING STATE === */
@keyframes ek-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.loading {
  background: linear-gradient(90deg, transparent 25%, var(--accent-light) 50%, transparent 75%);
  background-size: 200% 100%;
  animation: ek-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
}

/* === VERIFY BUTTONS — Smooth State Change === */
.tv-correct, .tv-fix, .btn-verify-correct, .btn-verify-fix {
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.tv-correct.verified, .btn-verify-correct.verified {
  animation: ek-verifyPop 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes ek-verifyPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* === REDUCE MOTION — Accessibility === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}