/* ============================================================
   Fajr Predictions - Custom CSS
   Olive/army-green dark theme
   ============================================================ */

/* Hero radial background (olive-green glow from top) */
.bg-hero-radial {
  background-image:
    radial-gradient(1200px 600px at 50% -10%, rgba(134,154,62,0.2), transparent 60%),
    radial-gradient(800px 400px at 80% 10%, rgba(182,196,110,0.12), transparent 60%);
}

/* CTA gold/olive gradient */
.bg-cta-gold {
  background-image: linear-gradient(135deg, #3f4a18, #869a3e 50%, #b6c46e);
}

/* Text gradient (olive) */
.text-gradient-accent {
  background-image: linear-gradient(90deg, #b6c46e, #869a3e);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Subtle white ring border */
.ring-soft {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* Marquee */
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes marquee-reverse {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}
.animate-marquee        { animation: marquee 30s linear infinite; }
.animate-marquee-reverse { animation: marquee-reverse 30s linear infinite; }

/* Pulse dot */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}
.animate-pulse-dot { animation: pulse-dot 2s ease-in-out infinite; }

/* Slide up (replaces framer-motion) */
@keyframes slide-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-slide-up { animation: slide-up 0.5s ease-out forwards; }

/* Fade in */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.animate-fade-in { animation: fade-in 0.6s ease-out forwards; }

/* Rise in (target site style) */
@keyframes rise-in {
  0%   { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}
.animate-rise-in { animation: rise-in 0.7s cubic-bezier(.22,1,.36,1) both; }

/* Prediction scroll */
@keyframes prediction-scroll {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}
.animate-prediction-scroll { animation: prediction-scroll 12s linear infinite; }

/* ============================================================
   Scroll-triggered reveal (replaces framer-motion useInView)
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays */
.reveal-delay-1 { transition-delay: 100ms; }
.reveal-delay-2 { transition-delay: 200ms; }
.reveal-delay-3 { transition-delay: 300ms; }
.reveal-delay-4 { transition-delay: 400ms; }
.reveal-delay-5 { transition-delay: 500ms; }

/* Hero entrance (replaces Hero's useInView) */
.hero-content {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}
.hero-content.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   Hamburger animation
   ============================================================ */
.is-open .hamburger-line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.is-open .hamburger-line:nth-child(2) {
  opacity: 0;
}
.is-open .hamburger-line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ============================================================
   Trade Page
   ============================================================ */
@keyframes priceFlashUp {
  0% { background: rgba(34, 197, 94, 0.3); }
  100% { background: transparent; }
}
@keyframes priceFlashDown {
  0% { background: rgba(239, 68, 68, 0.3); }
  100% { background: transparent; }
}
.price-flash-up { animation: priceFlashUp 0.5s ease-out; }
.price-flash-down { animation: priceFlashDown 0.5s ease-out; }

@keyframes tradeWin {
  0% { transform: scale(1); }
  50% { transform: scale(1.02); box-shadow: 0 0 30px rgba(34, 197, 94, 0.4); }
  100% { transform: scale(1); }
}
@keyframes tradeLose {
  0% { transform: scale(1); }
  50% { transform: scale(0.98); box-shadow: 0 0 30px rgba(239, 68, 68, 0.4); }
  100% { transform: scale(1); }
}
.trade-win { animation: tradeWin 0.6s ease-out; }
.trade-lose { animation: tradeLose 0.6s ease-out; }

@keyframes countdownPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.countdown-urgent { animation: countdownPulse 0.5s ease-in-out infinite; color: #ef4444 !important; }