/* ============================================================
   AGI DeFi Platform — Animations & Keyframes
   ============================================================ */

/* ── Fade In ── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Fade Up ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Fade Down ── */
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Slide Up (for Bottom Sheet) ── */
@keyframes slideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* ── Slide In Right (for Toast) ── */
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Slide In Top (for Toast mobile) ── */
@keyframes slideInTop {
  from { opacity: 0; transform: translateY(-80px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Scale In ── */
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Shimmer (Skeleton Loading) ── */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}

/* ── Pulse Glow (for Orange elements) ── */
@keyframes pulseGlow {
  0%, 100% { box-shadow: var(--shadow-glow-sm); }
  50%       { box-shadow: var(--shadow-glow-md); }
}

/* ── Progress Fill ── */
@keyframes progressFill {
  from { width: 0%; }
}

/* ── Spin (Loading indicator) ── */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Breathe (Logo on Loading page) ── */
@keyframes breathe {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%       { transform: scale(1.04); opacity: 0.88; }
}

/* ── Number Pop (CountUp finish) ── */
@keyframes numPop {
  0%   { transform: scale(1); }
  60%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* ── Ripple (Button click) ── */
@keyframes ripple {
  from { transform: scale(0); opacity: 0.5; }
  to   { transform: scale(4); opacity: 0; }
}

/* ── Float (subtle updown for hero elements) ── */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-6px); }
}

/* ============================================================
   Scroll Animation Classes (toggled by IntersectionObserver)
   ============================================================ */

.fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in {
  opacity: 0;
  transition: opacity 0.55s ease;
}
.fade-in.visible {
  opacity: 1;
}

/* Stagger delays for children */
.stagger > *:nth-child(1) { transition-delay: 0.00s; }
.stagger > *:nth-child(2) { transition-delay: 0.08s; }
.stagger > *:nth-child(3) { transition-delay: 0.16s; }
.stagger > *:nth-child(4) { transition-delay: 0.24s; }
.stagger > *:nth-child(5) { transition-delay: 0.32s; }
.stagger > *:nth-child(6) { transition-delay: 0.40s; }

/* ============================================================
   Skeleton Loading
   ============================================================ */

.skeleton {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.09) 40%,
    rgba(255, 255, 255, 0.04) 80%
  );
  background-size: 800px 100%;
  animation: shimmer 1.6s infinite linear;
  border-radius: var(--r-md);
  color: transparent !important;
  user-select: none;
}

.skeleton-text {
  height: 14px;
  border-radius: var(--r-full);
  margin-bottom: 8px;
}
.skeleton-text.w-3\/4 { width: 75%; }
.skeleton-text.w-1\/2  { width: 50%; }
.skeleton-text.w-1\/3  { width: 33%; }

.skeleton-num {
  height: 32px;
  width: 100px;
  border-radius: var(--r-sm);
}

/* ============================================================
   Loading Spinner
   ============================================================ */

.spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,107,43,0.25);
  border-top-color: var(--c-primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: middle;
}

.spinner-sm {
  width: 14px;
  height: 14px;
}

.spinner-lg {
  width: 28px;
  height: 28px;
  border-width: 3px;
}

/* ============================================================
   Ripple Button Effect
   ============================================================ */
.btn-ripple {
  position: relative;
  overflow: hidden;
}
.btn-ripple .ripple-effect {
  position: absolute;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.35);
  pointer-events: none;
  animation: ripple 0.55s ease-out forwards;
  transform-origin: center;
  margin-left: -4px;
  margin-top: -4px;
}