/* ═══════════════════════════════════════════
   ANIMATIONS — Floating crypto, glows, particles
   ═══════════════════════════════════════════ */

/* ─── Keyframes ─── */
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(5deg); }
}

@keyframes float-reverse {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(20px) rotate(-5deg); }
}

@keyframes float-slow {
  0%, 100% { transform: translateY(0) translateX(0); }
  25% { transform: translateY(-15px) translateX(10px); }
  75% { transform: translateY(10px) translateX(-5px); }
}

@keyframes pulse-glow {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.1); }
}

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes dash {
  to { stroke-dashoffset: 0; }
}

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes card-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes price-flash-up {
  0% { color: var(--color-success); }
  100% { color: var(--color-text); }
}

@keyframes price-flash-down {
  0% { color: var(--color-error); }
  100% { color: var(--color-text); }
}

/* ─── Floating coin helpers ─── */
.floating { animation: float 6s ease-in-out infinite; }
.floating--reverse { animation: float-reverse 7s ease-in-out infinite; }
.floating--slow { animation: float-slow 10s ease-in-out infinite; }
.floating--delay-1 { animation-delay: 1s; }
.floating--delay-2 { animation-delay: 2s; }
.floating--delay-3 { animation-delay: 3s; }

.pulse { animation: pulse-glow 4s ease-in-out infinite; }
.spin-slow { animation: spin-slow 30s linear infinite; }

/* ─── Scroll reveal ─── */
[data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s var(--ease-default), transform 0.6s var(--ease-default);
}
[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal="delay-1"] { transition-delay: 0.1s; }
[data-reveal="delay-2"] { transition-delay: 0.2s; }
[data-reveal="delay-3"] { transition-delay: 0.3s; }
[data-reveal="delay-4"] { transition-delay: 0.4s; }

/* ─── Hero animated background ─── */
.bg-hero {
  position: relative;
  overflow: hidden;
}

.bg-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 600px 400px at 20% 50%, rgba(59, 130, 246, 0.08), transparent),
    radial-gradient(ellipse 500px 300px at 80% 30%, rgba(247, 147, 26, 0.05), transparent),
    radial-gradient(ellipse 400px 400px at 60% 80%, rgba(98, 126, 234, 0.05), transparent);
  z-index: 0;
  pointer-events: none;
}

.bg-hero > .container { z-index: 1; }

/* ─── Animated gradient mesh background ─── */
.bg-mesh {
  position: relative;
  overflow: hidden;
}

.bg-mesh::before {
  content: '';
  position: absolute;
  inset: -50%;
  background: 
    conic-gradient(from 0deg at 30% 40%, transparent, rgba(59, 130, 246, 0.06), transparent 120deg),
    conic-gradient(from 180deg at 70% 60%, transparent, rgba(247, 147, 26, 0.04), transparent 120deg),
    conic-gradient(from 90deg at 50% 80%, transparent, rgba(59, 130, 246, 0.04), transparent 120deg);
  animation: spin-slow 60s linear infinite;
  z-index: 0;
  pointer-events: none;
}

.bg-mesh > * { position: relative; z-index: 1; }

/* ─── Grid lines background ─── */
.bg-grid {
  position: relative;
}

.bg-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(59, 130, 246, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59, 130, 246, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  z-index: 0;
  pointer-events: none;
}

.bg-grid > * { position: relative; z-index: 1; }

/* ─── Candlestick pattern background ─── */
.bg-candles {
  position: relative;
  overflow: hidden;
}

.bg-candles::before {
  content: '';
  position: absolute;
  right: -5%;
  top: 10%;
  width: 40%;
  height: 80%;
  opacity: 0.03;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 20px,
    #3b82f6 20px,
    #3b82f6 24px,
    transparent 24px,
    transparent 30px,
    #ef4444 30px,
    #ef4444 34px,
    transparent 34px,
    transparent 50px
  );
  z-index: 0;
  pointer-events: none;
}

.bg-candles > * { position: relative; z-index: 1; }

/* ─── Glow orb decoration ─── */
.glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}

.glow-orb--blue {
  background: rgba(59, 130, 246, 0.15);
}

.glow-orb--orange {
  background: rgba(247, 147, 26, 0.1);
}

.glow-orb--green {
  background: rgba(59, 130, 246, 0.1);
}

.glow-orb--purple {
  background: rgba(139, 92, 246, 0.1);
}

/* ─── CTA gradient animated background ─── */
.bg-cta-gradient {
  background: linear-gradient(135deg,
    rgba(59, 130, 246, 0.1) 0%,
    rgba(59, 130, 246, 0.08) 25%,
    rgba(247, 147, 26, 0.06) 50%,
    rgba(59, 130, 246, 0.1) 75%,
    rgba(139, 92, 246, 0.08) 100%
  );
  background-size: 400% 400%;
  animation: gradient-shift 15s ease infinite;
}

/* ─── Image size system (S/M/L/XL) ─── */
.img-s  { width: 120px; height: 120px; object-fit: contain; }
.img-m  { width: 200px; height: 200px; object-fit: contain; }
.img-l  { width: 320px; height: 320px; object-fit: contain; }
.img-xl { width: 480px; height: 480px; object-fit: contain; }

/* Icon sizes */
.icon-s  { width: 24px; height: 24px; }
.icon-m  { width: 36px; height: 36px; }
.icon-l  { width: 48px; height: 48px; }
.icon-xl { width: 64px; height: 64px; }

/* ─── Floating crypto coins container ─── */
.crypto-floats {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.crypto-floats img,
.crypto-floats svg {
  position: absolute;
  opacity: 0.06;
}

.crypto-floats img:nth-child(1) { top: 15%; left: 8%; }
.crypto-floats img:nth-child(2) { top: 55%; right: 12%; }
.crypto-floats img:nth-child(3) { bottom: 20%; left: 25%; }
.crypto-floats img:nth-child(4) { top: 25%; right: 30%; }

/* ─── Ticker scroll animation ─── */
.ticker {
  overflow: hidden;
  white-space: nowrap;
}

.ticker__inner {
  display: inline-flex;
  gap: var(--space-12);
  animation: ticker-scroll 30s linear infinite;
}

.flash-up {
  animation: price-flash-up 1.2s ease-out forwards;
}

.flash-down {
  animation: price-flash-down 1.2s ease-out forwards;
}

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

@media (max-width: 768px) {
  .glow-orb { display: none; }
  .crypto-floats { display: none; }
  .bg-mesh::before { display: none; }
  .bg-candles::before { display: none; }
}