/*
 * TradeZone Animation Library
 * Entrance animations, micro-interactions, skeleton loaders.
 * Uses Intersection Observer for scroll-triggered entrances.
 */

/* ── Keyframes ──────────────────────────────────── */

@keyframes tz-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

@keyframes tz-slide-down {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes tz-slide-left {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes tz-slide-right {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes tz-scale-in {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes tz-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.45; }
}

@keyframes tz-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

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

@keyframes tz-bounce-in {
  0%   { opacity: 0; transform: scale(0.3); }
  50%  { opacity: 1; transform: scale(1.05); }
  70%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}

@keyframes tz-count-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Animation utility classes ──────────────────── */

.tz-anim-fade-in   { animation: tz-fade-in   0.3s ease forwards; }
.tz-anim-slide-up  { animation: tz-slide-up  0.4s ease forwards; }
.tz-anim-slide-down{ animation: tz-slide-down 0.35s ease forwards; }
.tz-anim-slide-left{ animation: tz-slide-left 0.35s ease forwards; }
.tz-anim-slide-right{ animation: tz-slide-right 0.35s ease forwards; }
.tz-anim-scale-in  { animation: tz-scale-in  0.3s cubic-bezier(.34,1.56,.64,1) forwards; }
.tz-anim-bounce-in { animation: tz-bounce-in 0.5s ease forwards; }

/* ── Delay helpers ───────────────────────────────── */
.tz-delay-1 { animation-delay: 0.05s; }
.tz-delay-2 { animation-delay: 0.10s; }
.tz-delay-3 { animation-delay: 0.15s; }
.tz-delay-4 { animation-delay: 0.20s; }
.tz-delay-5 { animation-delay: 0.25s; }
.tz-delay-6 { animation-delay: 0.30s; }

/* ── Scroll-triggered entrance (JS adds .tz-visible) ── */
.tz-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.tz-reveal.tz-visible {
  opacity: 1;
  transform: translateY(0);
}
.tz-reveal.tz-delay-1 { transition-delay: 0.05s; }
.tz-reveal.tz-delay-2 { transition-delay: 0.10s; }
.tz-reveal.tz-delay-3 { transition-delay: 0.15s; }
.tz-reveal.tz-delay-4 { transition-delay: 0.20s; }

/* ── Micro-interactions ─────────────────────────── */
.tz-hover-lift {
  transition: transform var(--tz-transition, 0.15s ease), box-shadow var(--tz-transition, 0.15s ease);
}
.tz-hover-lift:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,.4);
}

.tz-hover-glow {
  transition: box-shadow var(--tz-transition, 0.15s ease);
}
.tz-hover-glow:hover {
  box-shadow: 0 0 0 2px var(--tz-purple, #6c5ce7);
}

.tz-press-scale {
  transition: transform 0.1s ease;
}
.tz-press-scale:active {
  transform: scale(0.96);
}

/* ── Skeleton loader ────────────────────────────── */
.tz-skeleton {
  background: linear-gradient(90deg, #252b3b 25%, #2d3447 50%, #252b3b 75%);
  background-size: 800px 100%;
  animation: tz-shimmer 1.4s infinite linear;
  border-radius: 4px;
}
.tz-skeleton-text  { height: 14px; margin-bottom: 8px; border-radius: 3px; }
.tz-skeleton-text.sm { height: 10px; width: 60%; }
.tz-skeleton-title { height: 20px; width: 45%; margin-bottom: 12px; border-radius: 3px; }
.tz-skeleton-circle{ border-radius: 50%; }
.tz-skeleton-btn   { height: 34px; width: 90px; border-radius: 4px; }
body#light .tz-skeleton {
  background: linear-gradient(90deg, #e8ecf3 25%, #d8e0ea 50%, #e8ecf3 75%);
  background-size: 800px 100%;
}

/* ── Spinner ────────────────────────────────────── */
.tz-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,.2);
  border-top-color: #fff;
  border-radius: 50%;
  animation: tz-spin 0.7s linear infinite;
  vertical-align: middle;
}
.tz-spinner.sm { width: 13px; height: 13px; }
.tz-spinner.lg { width: 28px; height: 28px; border-width: 3px; }
.tz-spinner.accent { border-top-color: var(--tz-accent, #f39c12); border-color: rgba(243,156,18,.2); }

/* ── Number counter animation ───────────────────── */
.tz-count { display: inline-block; animation: tz-count-up 0.4s ease forwards; }

/* ── Toast notification ─────────────────────────── */
.tz-toast-wrap {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.tz-toast {
  background: var(--tz-bg-card, #1e2330);
  border: 1px solid var(--tz-border, #2d3447);
  border-radius: 8px;
  padding: 12px 18px;
  font-size: 13px;
  color: var(--tz-text-body, #ccc);
  box-shadow: 0 6px 20px rgba(0,0,0,.5);
  pointer-events: all;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 240px;
  max-width: 360px;
  animation: tz-slide-left 0.3s ease forwards;
}
.tz-toast.success { border-left: 4px solid var(--tz-success, #5cb85c); }
.tz-toast.error   { border-left: 4px solid var(--tz-danger, #e74c3c); }
.tz-toast.warning { border-left: 4px solid var(--tz-warning, #f39c12); }
.tz-toast.info    { border-left: 4px solid var(--tz-blue, #5bc0de); }
.tz-toast-icon { font-size: 16px; flex-shrink: 0; }
.tz-toast-exit {
  animation: tz-fade-in 0.2s ease reverse forwards;
}