/* ═══════════════════════════════════════════════════════
   MAGIC UI — Shared Animation Components
   Nexus Sites — deployed across all revenue pages
   ═══════════════════════════════════════════════════════ */

/* ═══ Shiny Text — animated gradient sweep across text ═══ */
.shiny-text {
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 40%,
    var(--shiny-color, rgba(255,0,8,0.5)) 50%,
    rgba(255,255,255,0) 60%
  ) var(--t1, #fafafa);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shiny-text 4s ease-in-out infinite;
}
@keyframes shiny-text {
  0% { background-position: 100% 50%; }
  100% { background-position: -100% 50%; }
}

/* ═══ Aurora Background — drifting gradient orbs ═══ */
.aurora {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0;
}
.aurora::before, .aurora::after {
  content: '';
  position: absolute;
  width: 60vw; height: 60vw;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.12;
  animation: aurora-drift 12s ease-in-out infinite alternate;
}
.aurora::before {
  background: var(--aurora-1, #ff0008);
  top: -30%; left: -10%;
}
.aurora::after {
  background: var(--aurora-2, #ff6b6b);
  bottom: -30%; right: -10%;
  animation-delay: -6s;
  animation-direction: alternate-reverse;
}
@keyframes aurora-drift {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(40px, -30px) scale(1.15); }
  100% { transform: translate(-20px, 20px) scale(0.9); }
}

/* ═══ Shimmer Button — sliding light sweep ═══ */
.btn-shimmer {
  position: relative; overflow: hidden;
}
.btn-shimmer::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    110deg,
    transparent 25%,
    rgba(255,255,255,0.18) 50%,
    transparent 75%
  );
  background-size: 250% 100%;
  animation: shimmer-slide 3s linear infinite;
}
@keyframes shimmer-slide {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ═══ Meteor Shower — falling light streaks ═══ */
.meteor-shower { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.meteor {
  position: absolute;
  width: 2px; height: 80px;
  background: linear-gradient(to bottom, var(--meteor-color, rgba(255,0,8,0.6)), transparent);
  border-radius: 50%;
  animation: meteor-fall linear infinite;
  opacity: 0;
}
@keyframes meteor-fall {
  0% { transform: translateY(-120px) translateX(0) rotate(-45deg); opacity: 0; }
  5% { opacity: 1; }
  60% { opacity: 1; }
  100% { transform: translateY(100vh) translateX(-200px) rotate(-45deg); opacity: 0; }
}

/* ═══ 3D Card Tilt — perspective transform on hover ═══ */
.tilt-card {
  transform-style: preserve-3d;
  transition: transform 0.15s ease-out;
}
.tilt-shine {
  position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; opacity: 0;
  background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255,255,255,0.08), transparent 60%);
  transition: opacity 0.3s;
}
.tilt-card:hover .tilt-shine { opacity: 1; }

/* ═══ Ripple Background — expanding rings ═══ */
.ripple-bg {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0;
}
.ripple-ring {
  position: absolute;
  border: 1px solid var(--ripple-color, rgba(255,0,8,0.08));
  border-radius: 50%;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  animation: ripple-expand 4s linear infinite;
}
@keyframes ripple-expand {
  0% { width: 0; height: 0; opacity: 1; }
  100% { width: 600px; height: 600px; opacity: 0; }
}

/* ═══ Spotlight — cursor-following radial glow ═══ */
.spotlight {
  position: relative;
}
.spotlight::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity 0.3s;
  background: radial-gradient(
    300px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    var(--spotlight-color, rgba(255,0,8,0.06)),
    transparent 70%
  );
}
.spotlight:hover::after { opacity: 1; }

/* ═══ Glow Border — animated border gradient ═══ */
.glow-border {
  position: relative;
  background: var(--bg-1, #0f0f12);
  border-radius: 16px;
}
.glow-border::before {
  content: '';
  position: absolute; inset: -1px;
  border-radius: inherit; z-index: -1;
  background: conic-gradient(
    from var(--glow-angle, 0deg),
    transparent 0%,
    var(--glow-color, #ff0008) 10%,
    transparent 20%
  );
  animation: glow-spin 4s linear infinite;
}
@keyframes glow-spin {
  0% { --glow-angle: 0deg; }
  100% { --glow-angle: 360deg; }
}
/* Fallback for browsers without @property */
@supports not (background: conic-gradient(from 0deg, red, blue)) {
  .glow-border::before {
    background: linear-gradient(135deg, var(--glow-color, #ff0008), transparent, var(--glow-color, #ff0008));
    animation: none;
  }
}

/* ═══ Marquee — infinite horizontal scroll ═══ */
.marquee { overflow: hidden; }
.marquee-track {
  display: flex; gap: 48px;
  animation: marquee-scroll 30s linear infinite;
  width: max-content;
}
@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ═══ Text Generate — words fade in with blur ═══ */
.text-generate span {
  opacity: 0;
  filter: blur(4px);
  display: inline-block;
}
.text-generate.active span {
  animation: text-reveal 0.4s ease forwards;
}
@keyframes text-reveal {
  to { opacity: 1; filter: blur(0); }
}

/* ═══ Floating Badge — gentle hover animation ═══ */
.float-badge {
  animation: float-gentle 3s ease-in-out infinite;
}
@keyframes float-gentle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* ═══ Pulse Ring — expanding ring behind CTAs ═══ */
.pulse-ring {
  position: relative;
}
.pulse-ring::before {
  content: '';
  position: absolute; inset: -4px;
  border-radius: inherit;
  border: 2px solid var(--pulse-color, rgba(255,0,8,0.4));
  animation: pulse-expand 2s ease-out infinite;
}
@keyframes pulse-expand {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.15); opacity: 0; }
}