/* NANO Trading — Micro-Animations
   ================================
   Lightweight animation system for the trading platform.
   Only animates transform and opacity for GPU-composited performance. */

/* ─── Button Hover / Active / Focus ──────────────────────────────── */

.btn,
button,
[role="button"] {
  transition: transform 200ms ease-out, opacity 200ms ease-out, box-shadow 200ms ease-out, filter 200ms ease-out;
}

.btn:hover,
button:hover,
[role="button"]:hover {
  transform: scale(1.02);
  filter: brightness(1.08);
}

.btn:active,
button:active,
[role="button"]:active {
  transform: scale(0.97);
  transition-duration: 100ms;
}

.btn:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(29, 204, 237, 0.3);
}

/* ─── Card Hover (interactive only) ──────────────────────────────── */

.card-interactive,
.card[data-clickable],
a.card {
  transition: transform 250ms ease-out, opacity 250ms ease-out, box-shadow 250ms ease-out;
}

.card-interactive:hover,
.card[data-clickable]:hover,
a.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(29, 204, 237, 0.08), 0 0 0 1px rgba(29, 204, 237, 0.15);
}

/* ─── Page Load Fade-In ──────────────────────────────────────────── */

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

.animate-in {
  animation: fadeSlideIn 400ms ease-out both;
}

.animate-in:nth-child(1) { animation-delay: 0ms; }
.animate-in:nth-child(2) { animation-delay: 80ms; }
.animate-in:nth-child(3) { animation-delay: 160ms; }
.animate-in:nth-child(4) { animation-delay: 240ms; }
.animate-in:nth-child(5) { animation-delay: 320ms; }
.animate-in:nth-child(6) { animation-delay: 400ms; }
.animate-in:nth-child(7) { animation-delay: 480ms; }
.animate-in:nth-child(8) { animation-delay: 560ms; }

/* ─── Progress Bar Fill ──────────────────────────────────────────── */

@keyframes progressFill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.progress-bar-fill {
  transform-origin: left center;
  animation: progressFill 600ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* ─── Form Input Focus ───────────────────────────────────────────── */

input,
textarea,
select {
  transition: border-color 200ms ease-out, box-shadow 200ms ease-out;
}

input:focus,
textarea:focus,
select:focus {
  border-color: rgba(29, 204, 237, 0.6);
  box-shadow: 0 0 0 2px rgba(29, 204, 237, 0.15);
}

/* ─── Validation Error Shake ─────────────────────────────────────── */

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  12.5%    { transform: translateX(-4px); }
  37.5%    { transform: translateX(4px); }
  62.5%    { transform: translateX(-4px); }
  87.5%    { transform: translateX(4px); }
}

.shake,
.error-shake {
  animation: shake 300ms ease-in-out;
}

/* ─── Toast Notifications ────────────────────────────────────────── */

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateX(100%) translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(0) translateY(0);
  }
}

@keyframes toastOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

.toast {
  animation: toastIn 300ms ease-out both;
}

.toast.toast-dismiss,
.toast.is-exiting {
  animation: toastOut 250ms ease-in both;
}

/* ─── Modal Transitions ──────────────────────────────────────────── */

@keyframes backdropFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes modalContentIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.modal-backdrop {
  animation: backdropFadeIn 200ms ease-out both;
}

.modal-content {
  animation: modalContentIn 250ms ease-out both;
}

.modal-backdrop.is-closing {
  animation: backdropFadeIn 200ms ease-in reverse both;
}

.modal-content.is-closing {
  animation: modalContentIn 250ms ease-in reverse both;
}

/* ─── Nav Active Link Underline ──────────────────────────────────── */

.nav-link {
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: rgba(29, 204, 237, 0.8);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 250ms ease-out;
}

.nav-link:hover::after,
.nav-link.active::after {
  transform: scaleX(1);
}

/* ─── Mobile Menu Slide ──────────────────────────────────────────── */

@keyframes slideFromRight {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

.mobile-menu {
  animation: slideFromRight 250ms ease-out both;
}

.mobile-menu.is-closing {
  animation: slideFromRight 250ms ease-in reverse both;
}

/* ─── Page Transitions ──────────────────────────────────────────── */

body {
  animation: fadeSlideIn 350ms ease-out both;
}

/* Smooth tier-card and section entry */
.tier-card,
.tier-fade-up {
  animation: fadeSlideIn 500ms ease-out both;
}

.tier-fade-up:nth-child(1) { animation-delay: 60ms; }
.tier-fade-up:nth-child(2) { animation-delay: 120ms; }
.tier-fade-up:nth-child(3) { animation-delay: 180ms; }
.tier-fade-up:nth-child(4) { animation-delay: 240ms; }
.tier-fade-up:nth-child(5) { animation-delay: 300ms; }
.tier-fade-up:nth-child(6) { animation-delay: 360ms; }

/* Smooth link transitions */
a {
  transition: color 200ms ease-out, opacity 200ms ease-out;
}

/* Tier badge pulse on appear */
.tier-badge {
  animation: fadeSlideIn 400ms ease-out both;
  animation-delay: 200ms;
}

/* Status badge smooth entry */
.status-badge {
  transition: transform 200ms ease-out, opacity 200ms ease-out;
}

/* Locked overlay smooth entry */
.locked-overlay__content {
  animation: fadeSlideIn 600ms ease-out both;
  animation-delay: 100ms;
}

/* Section padding areas — smooth content entry */
.section-pad > div,
.tier-section-pad > div {
  animation: fadeSlideIn 400ms ease-out both;
  animation-delay: 80ms;
}

/* Dashboard layout stagger */
.dash-main { animation: fadeSlideIn 450ms ease-out both; animation-delay: 100ms; }
.dash-sidebar { animation: fadeSlideIn 450ms ease-out both; animation-delay: 200ms; }

/* Submission table rows — stagger */
.submissions-table tbody tr {
  animation: fadeSlideIn 300ms ease-out both;
}
.submissions-table tbody tr:nth-child(1) { animation-delay: 50ms; }
.submissions-table tbody tr:nth-child(2) { animation-delay: 100ms; }
.submissions-table tbody tr:nth-child(3) { animation-delay: 150ms; }
.submissions-table tbody tr:nth-child(4) { animation-delay: 200ms; }
.submissions-table tbody tr:nth-child(5) { animation-delay: 250ms; }

/* Hover glow for tier unlock cards */
.tier-unlock-card {
  transition: transform 250ms ease-out, box-shadow 250ms ease-out, border-color 250ms ease-out;
}
.tier-unlock-card:hover {
  transform: translateY(-3px);
}

/* Quick action links */
.quick-actions a {
  transition: color 200ms ease-out, padding-left 200ms ease-out;
}
.quick-actions a:hover {
  padding-left: 4px;
  color: #1dcced;
}

/* Utility: will-change hints ─────────────────────────────────── */

.will-animate {
  will-change: transform, opacity;
}

/* ─── Reduced Motion ─────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    animation-delay: 0ms !important;
  }
}