/* ================================================================
   AFFILIATEBOT — ANIMATIONS  animations.css
   Keyframes · Stagger · Shimmer · Transitions · Reduced-motion
   ================================================================ */

/* ── KEYFRAMES ──────────────────────────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: 300% 0 }
  100% { background-position: -300% 0 }
}

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

@keyframes fadeIn {
  from { opacity: 0 }
  to   { opacity: 1 }
}

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

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

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

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

@keyframes slideLeft {
  from { opacity: 0; transform: translateX(16px) }
  to   { opacity: 1; transform: translateX(0) }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(.92) }
  to   { opacity: 1; transform: scale(1) }
}

@keyframes scaleInBounce {
  0%   { opacity: 0; transform: scale(.8) }
  60%  { transform: scale(1.05) }
  100% { opacity: 1; transform: scale(1) }
}

@keyframes pulse {
  0%,100% { opacity: 1 }
  50%     { opacity: .5 }
}

@keyframes progressFill {
  from { width: 0 }
}

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

@keyframes countUp {
  from { opacity: 0; transform: translateY(6px) scale(.96) }
  to   { opacity: 1; transform: translateY(0) scale(1) }
}

@keyframes ripple {
  from { transform: scale(0); opacity: .6 }
  to   { transform: scale(4); opacity: 0 }
}

@keyframes checkmark {
  0%   { stroke-dashoffset: 40 }
  100% { stroke-dashoffset: 0 }
}

@keyframes shake {
  0%,100% { transform: translateX(0) }
  20%,60% { transform: translateX(-5px) }
  40%,80% { transform: translateX(5px) }
}

@keyframes swipeHint {
  0%,100% { transform: translateX(0) }
  30%     { transform: translateX(-8px) }
  60%     { transform: translateX(0) }
}

@keyframes bounceIn {
  0%   { transform: scale(0); opacity: 0 }
  55%  { transform: scale(1.1); opacity: 1 }
  75%  { transform: scale(.95) }
  100% { transform: scale(1) }
}

/* ── ANIMATION CLASSES ──────────────────────────────────────────── */
.anim-fade-in {
  animation: fadeIn var(--dur-base) var(--ease-out) both;
}

.anim-fade-in-up {
  animation: fadeInUp var(--dur-slow) var(--ease-spring) both;
}

.anim-slide-up {
  animation: slideUp var(--dur-slow) var(--ease-spring) both;
}

.anim-slide-down {
  animation: slideDown var(--dur-base) var(--ease-spring) both;
}

.anim-scale-in {
  animation: scaleIn var(--dur-base) var(--ease-spring) both;
}

.anim-bounce-in {
  animation: bounceIn var(--dur-slow) var(--ease-spring) both;
}

.anim-shake {
  animation: shake .35s var(--ease-inout);
}

.anim-pulse {
  animation: pulse 2s ease-in-out infinite;
}

/* ── STAGGER (apply to container, children animate in sequence) ─── */
[data-stagger] > * {
  animation: slideUp var(--dur-slow) var(--ease-spring) both;
}

[data-stagger] > *:nth-child(1)  { animation-delay: 0ms }
[data-stagger] > *:nth-child(2)  { animation-delay: 40ms }
[data-stagger] > *:nth-child(3)  { animation-delay: 80ms }
[data-stagger] > *:nth-child(4)  { animation-delay: 120ms }
[data-stagger] > *:nth-child(5)  { animation-delay: 160ms }
[data-stagger] > *:nth-child(6)  { animation-delay: 200ms }
[data-stagger] > *:nth-child(7)  { animation-delay: 240ms }
[data-stagger] > *:nth-child(8)  { animation-delay: 280ms }
[data-stagger] > *:nth-child(9)  { animation-delay: 320ms }
[data-stagger] > *:nth-child(10) { animation-delay: 360ms }
[data-stagger] > *:nth-child(n+11) { animation-delay: 400ms }

/* Fast stagger for table rows */
[data-stagger="fast"] > *:nth-child(1)  { animation-delay: 0ms }
[data-stagger="fast"] > *:nth-child(2)  { animation-delay: 25ms }
[data-stagger="fast"] > *:nth-child(3)  { animation-delay: 50ms }
[data-stagger="fast"] > *:nth-child(4)  { animation-delay: 75ms }
[data-stagger="fast"] > *:nth-child(5)  { animation-delay: 100ms }
[data-stagger="fast"] > *:nth-child(6)  { animation-delay: 125ms }
[data-stagger="fast"] > *:nth-child(7)  { animation-delay: 150ms }
[data-stagger="fast"] > *:nth-child(8)  { animation-delay: 175ms }
[data-stagger="fast"] > *:nth-child(9)  { animation-delay: 200ms }
[data-stagger="fast"] > *:nth-child(10) { animation-delay: 225ms }
[data-stagger="fast"] > *:nth-child(n+11) { animation-delay: 250ms }

/* ── PROGRESS FILL ANIMATION ────────────────────────────────────── */
.progress-bar-animated {
  animation: progressFill .9s var(--ease-spring) both;
}

/* ── TRANSITION UTILITIES ───────────────────────────────────────── */
.transition-all {
  transition: all var(--dur-base) var(--ease-inout);
}

.transition-colors {
  transition: background var(--dur-fast), color var(--dur-fast),
              border-color var(--dur-fast);
}

.transition-transform {
  transition: transform var(--dur-base) var(--ease-spring);
}

.transition-opacity {
  transition: opacity var(--dur-base);
}

/* ── PAGE TRANSITION ────────────────────────────────────────────── */
.page-enter {
  animation: fadeInUp var(--dur-slow) var(--ease-spring) both;
}

.content-section {
  animation: fadeInUp var(--dur-slow) var(--ease-spring) both;
}

/* ── COUNT-UP REVEAL ────────────────────────────────────────────── */
[data-count-up] {
  animation: countUp var(--dur-slow) var(--ease-spring) both;
}

/* ── RIPPLE EFFECT ──────────────────────────────────────────────── */
.ripple-container { position: relative; overflow: hidden; }

.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.3);
  animation: ripple .5s linear;
  pointer-events: none;
}

/* ── VIDEO PLAYER CONTROLS ──────────────────────────────────────── */
.player-controls {
  animation: fadeIn .2s ease both;
}

/* ── OPTIMISTIC UPDATE ──────────────────────────────────────────── */
.optimistic-success {
  animation: scaleInBounce .3s var(--ease-spring);
}

.optimistic-error {
  animation: shake .35s var(--ease-inout);
}

/* ── SKELETON PULSE (alternative to shimmer) ────────────────────── */
.skeleton-pulse {
  animation: pulse 1.8s ease-in-out infinite;
  background: var(--c-border);
  border-radius: var(--r-sm);
}

/* ── MOBILE SWIPE REVEAL ────────────────────────────────────────── */
.swipe-actions {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  display: flex;
  align-items: center;
  gap: 1px;
  transform: translateX(100%);
  transition: transform var(--dur-base) var(--ease-spring);
}

.swipe-item.swiped .swipe-actions {
  transform: translateX(0);
}

/* ── CHART ENTRANCE ─────────────────────────────────────────────── */
.chart-enter {
  animation: fadeIn .5s var(--ease-out) .15s both;
}

/* ── ROTATE ─────────────────────────────────────────────────────── */
.rotate-180 { transform: rotate(180deg); }
.rotate-90  { transform: rotate(90deg); }
.transition-rotate { transition: transform var(--dur-base) var(--ease-spring); }

/* ── HOVER LIFT ─────────────────────────────────────────────────── */
.hover-lift {
  transition: transform var(--dur-fast) var(--ease-spring),
              box-shadow var(--dur-fast);
}
.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-raised);
}

/* ── FOCUS RING ─────────────────────────────────────────────────── */
.focus-ring {
  transition: box-shadow var(--dur-fast);
}
.focus-ring:focus-visible {
  box-shadow: var(--sh-focus);
  outline: none;
}

/* ── PULL TO REFRESH (mobile) ───────────────────────────────────── */
.ptr-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  color: var(--c-text-3);
  font-size: 13px;
  gap: var(--sp-2);
  transition: opacity .2s;
}

/* ── NOTIF BADGE ANIMATION ──────────────────────────────────────── */
@keyframes badge-bounce {
  0%,100% { transform: scale(1) }
  25%     { transform: scale(1.3) }
}
.badge-new { animation: badge-bounce .4s var(--ease-spring); }

/* ── TOOLTIP ────────────────────────────────────────────────────── */
[data-tooltip] {
  position: relative;
}
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) scale(.9);
  background: var(--c-text);
  color: #fff;
  font-size: 11.5px;
  font-weight: var(--fw-medium);
  padding: 4px 8px;
  border-radius: var(--r-sm);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-fast), transform var(--dur-fast);
  z-index: 100;
}
[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* ── REDUCED MOTION ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .skeleton {
    animation: none;
    background: var(--c-border);
  }
  [data-stagger] > * {
    animation: none;
    opacity: 1;
  }
}