/* ============================================
   UltraSmartAgent.Market - Animations & Effects
   HEAVY EDITION — Maximum visual impact
   ============================================ */

/* ===================
   KEYFRAME ANIMATIONS
   =================== */

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

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

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

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.6); }
}

@keyframes orbFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(40px, -50px) scale(1.08); }
  50% { transform: translate(-10px, 30px) scale(0.96); }
  75% { transform: translate(20px, -20px) scale(1.04); }
}

@keyframes orbFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(-50px, 40px) scale(1.1); }
  50% { transform: translate(30px, -20px) scale(0.9); }
  75% { transform: translate(-20px, 10px) scale(1.05); }
}

@keyframes orbFloat3 {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.25; }
  50% { transform: translate(-50%, -50%) scale(1.3); opacity: 0.5; }
}

@keyframes floatCard1 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-10px) rotate(-0.5deg); }
  50% { transform: translateY(-18px) rotate(0.5deg); }
  75% { transform: translateY(-6px) rotate(-0.3deg); }
}

@keyframes floatCard2 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33% { transform: translateY(-14px) rotate(1deg); }
  66% { transform: translateY(-6px) rotate(-0.5deg); }
}

@keyframes diagramPulse {
  0%, 100% { box-shadow: 0 0 40px rgba(108, 58, 237, 0.4), 0 0 80px rgba(6, 182, 212, 0.15); }
  50% { box-shadow: 0 0 70px rgba(108, 58, 237, 0.7), 0 0 140px rgba(6, 182, 212, 0.3); }
}

@keyframes orbitSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

@keyframes borderGlow {
  0%, 100% { border-color: rgba(108, 58, 237, 0.2); }
  50% { border-color: rgba(6, 182, 212, 0.5); }
}

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

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

@keyframes slideInLeft {
  from { transform: translateX(-60px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes typeWriter {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@keyframes rotateGlow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes morphBlob {
  0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  25% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
  50% { border-radius: 50% 60% 30% 60% / 40% 70% 60% 50%; }
  75% { border-radius: 60% 30% 60% 40% / 70% 50% 40% 60%; }
}

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

/* === NEW: Aurora gradient shift === */
@keyframes auroraShift {
  0% { background-position: 0% 50%; }
  25% { background-position: 50% 100%; }
  50% { background-position: 100% 50%; }
  75% { background-position: 50% 0%; }
  100% { background-position: 0% 50%; }
}

/* === NEW: Ripple expand === */
@keyframes ripple {
  0% { transform: scale(0); opacity: 0.6; }
  100% { transform: scale(4); opacity: 0; }
}

/* === NEW: Glitch text === */
@keyframes glitch1 {
  0%, 100% { clip-path: inset(0 0 95% 0); transform: translate(0); }
  10% { clip-path: inset(40% 0 30% 0); transform: translate(-3px, 2px); }
  20% { clip-path: inset(80% 0 5% 0); transform: translate(3px, -1px); }
  30% { clip-path: inset(10% 0 60% 0); transform: translate(-2px, 1px); }
  40% { clip-path: inset(0 0 95% 0); transform: translate(0); }
}

@keyframes glitch2 {
  0%, 100% { clip-path: inset(95% 0 0 0); transform: translate(0); }
  10% { clip-path: inset(20% 0 50% 0); transform: translate(3px, -2px); }
  20% { clip-path: inset(5% 0 70% 0); transform: translate(-3px, 1px); }
  30% { clip-path: inset(50% 0 20% 0); transform: translate(2px, -1px); }
  40% { clip-path: inset(95% 0 0 0); transform: translate(0); }
}

/* === NEW: Floating up particles === */
@keyframes floatUp {
  0% { transform: translateY(0) scale(1); opacity: 0.8; }
  50% { opacity: 1; }
  100% { transform: translateY(-120px) scale(0.3); opacity: 0; }
}

/* === NEW: Neon flicker === */
@keyframes neonFlicker {
  0%, 100% { opacity: 1; }
  3% { opacity: 0.4; }
  6% { opacity: 1; }
  7% { opacity: 0.5; }
  8% { opacity: 1; }
  50% { opacity: 1; }
  52% { opacity: 0.6; }
  53% { opacity: 1; }
}

/* === NEW: Wave motion === */
@keyframes wave {
  0% { transform: translateX(0) translateZ(0) scaleY(1); }
  50% { transform: translateX(-25%) translateZ(0) scaleY(0.55); }
  100% { transform: translateX(-50%) translateZ(0) scaleY(1); }
}

/* === NEW: 3D tilt return === */
@keyframes tiltReturn {
  from { transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
  to { transform: perspective(800px) rotateX(0deg) rotateY(0deg); }
}

/* === NEW: Bounce gentle === */
@keyframes bounceGentle {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-8px); }
  60% { transform: translateY(-4px); }
}

/* === NEW: Scan line === */
@keyframes scanLine {
  0% { top: -5%; }
  100% { top: 105%; }
}

/* === NEW: Gradient border spin === */
@keyframes borderSpin {
  0% { --angle: 0deg; }
  100% { --angle: 360deg; }
}

/* === NEW: Zoom pulse for icons === */
@keyframes zoomPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* === NEW: Slide shine across surface === */
@keyframes slideShine {
  0% { left: -100%; }
  100% { left: 200%; }
}

/* === NEW: Electric crackle on borders === */
@keyframes electricBorder {
  0%, 100% { box-shadow: 0 0 5px rgba(6,182,212,0.2), inset 0 0 5px rgba(6,182,212,0.05); }
  25% { box-shadow: 0 0 15px rgba(108,58,237,0.4), inset 0 0 10px rgba(108,58,237,0.1); }
  50% { box-shadow: 0 0 25px rgba(6,182,212,0.5), inset 0 0 15px rgba(6,182,212,0.1); }
  75% { box-shadow: 0 0 10px rgba(16,185,129,0.3), inset 0 0 8px rgba(16,185,129,0.08); }
}

/* === NEW: Modal dramatic entrance === */
@keyframes modalSlideUp {
  0% { transform: translateY(60px) scale(0.92); opacity: 0; }
  60% { transform: translateY(-8px) scale(1.01); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes modalBgFade {
  from { opacity: 0; backdrop-filter: blur(0px); }
  to { opacity: 1; backdrop-filter: blur(12px); }
}

/* === NEW: Text split reveal === */
@keyframes splitRevealLeft {
  from { transform: translateX(-30px) skewX(5deg); opacity: 0; }
  to { transform: translateX(0) skewX(0deg); opacity: 1; }
}

@keyframes splitRevealRight {
  from { transform: translateX(30px) skewX(-5deg); opacity: 0; }
  to { transform: translateX(0) skewX(0deg); opacity: 1; }
}

/* === NEW: Counter flip === */
@keyframes counterFlip {
  0% { transform: rotateX(-90deg); opacity: 0; }
  60% { transform: rotateX(10deg); opacity: 1; }
  80% { transform: rotateX(-5deg); }
  100% { transform: rotateX(0deg); opacity: 1; }
}

/* === NEW: Floating sparkle === */
@keyframes sparkleFloat {
  0% { transform: translateY(0) rotate(0deg) scale(0.5); opacity: 0; }
  20% { opacity: 1; transform: translateY(-20px) rotate(90deg) scale(1); }
  80% { opacity: 0.8; }
  100% { transform: translateY(-80px) rotate(360deg) scale(0); opacity: 0; }
}


/* ==========================
   EFFECT CLASSES
   ========================== */

/* --- Animated Gradient Text --- */
.animated-gradient-text {
  background: linear-gradient(
    90deg,
    var(--primary-light),
    var(--accent),
    var(--emerald),
    var(--primary-light),
    var(--accent)
  );
  background-size: 400% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 4s ease-in-out infinite;
}

/* --- Glitch Text Effect --- */
.glitch-text {
  position: relative;
}

.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.glitch-text::before {
  color: var(--accent);
  animation: glitch1 5s infinite;
  opacity: 0.7;
}

.glitch-text::after {
  color: var(--rose);
  animation: glitch2 5s infinite;
  opacity: 0.5;
}

/* --- Aurora Background --- */
.aurora-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    -45deg,
    rgba(108, 58, 237, 0.15),
    rgba(6, 182, 212, 0.1),
    rgba(16, 185, 129, 0.12),
    rgba(108, 58, 237, 0.08),
    rgba(6, 182, 212, 0.15)
  );
  background-size: 400% 400%;
  animation: auroraShift 15s ease infinite;
  pointer-events: none;
}

/* --- Scan Line Overlay --- */
.scan-line::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.3), transparent);
  animation: scanLine 4s linear infinite;
  pointer-events: none;
  z-index: 3;
}

/* --- Neon Glow Text --- */
.neon-text {
  text-shadow:
    0 0 10px rgba(6, 182, 212, 0.5),
    0 0 20px rgba(6, 182, 212, 0.3),
    0 0 40px rgba(108, 58, 237, 0.2);
  animation: neonFlicker 6s infinite;
}

/* --- Button Ripple Effect --- */
.btn-ripple {
  position: relative;
  overflow: hidden;
}

.btn-ripple .ripple-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  width: 20px;
  height: 20px;
  pointer-events: none;
  animation: ripple 0.6s ease-out forwards;
}

/* --- Glow Line Separator --- */
.glow-line {
  width: 80px;
  height: 3px;
  background: var(--gradient-primary);
  border-radius: 3px;
  margin: 0 auto 24px;
  position: relative;
}

.glow-line::after {
  content: '';
  position: absolute;
  inset: -6px;
  background: var(--gradient-primary);
  filter: blur(12px);
  opacity: 0.6;
  border-radius: 3px;
  animation: glowPulse 3s ease-in-out infinite;
}

/* --- Morphing Background Blob --- */
.morph-blob {
  position: absolute;
  width: 400px;
  height: 400px;
  background: var(--gradient-hero);
  opacity: 0.1;
  filter: blur(60px);
  animation: morphBlob 12s ease-in-out infinite;
}

/* --- Card Shine / Mouse Follow --- */
.card-shine {
  position: relative;
  overflow: hidden;
}

.card-shine::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(108, 58, 237, 0.1) 0%,
    transparent 50%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}

.card-shine:hover::before { opacity: 1; }

/* --- Slide Shine (sweeping light) --- */
.slide-shine {
  position: relative;
  overflow: hidden;
}

.slide-shine::after {
  content: '';
  position: absolute;
  top: -10%;
  left: -100%;
  width: 50%;
  height: 120%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0.08),
    rgba(255, 255, 255, 0.05),
    transparent
  );
  transform: skewX(-20deg);
  pointer-events: none;
  transition: none;
}

.slide-shine:hover::after {
  animation: slideShine 0.8s ease-out forwards;
}

/* --- Electric Border Glow --- */
.electric-border {
  animation: electricBorder 4s ease-in-out infinite;
}

/* --- 3D Tilt on Hover --- */
.tilt-card {
  transition: transform 0.15s ease-out;
  transform-style: preserve-3d;
  will-change: transform;
}

/* --- Counter Animation (number counting) --- */
.count-up {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  perspective: 400px;
}

.count-up.flip {
  animation: counterFlip 0.6s ease-out;
}

/* --- Stagger animations for grid children --- */
.stagger-children > *:nth-child(1) { transition-delay: 0.06s; }
.stagger-children > *:nth-child(2) { transition-delay: 0.12s; }
.stagger-children > *:nth-child(3) { transition-delay: 0.18s; }
.stagger-children > *:nth-child(4) { transition-delay: 0.24s; }
.stagger-children > *:nth-child(5) { transition-delay: 0.30s; }
.stagger-children > *:nth-child(6) { transition-delay: 0.36s; }
.stagger-children > *:nth-child(7) { transition-delay: 0.42s; }
.stagger-children > *:nth-child(8) { transition-delay: 0.48s; }

/* --- Rotating border glow (for featured card) --- */
.rotating-border {
  position: relative;
}

.rotating-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--radius-lg) + 2px);
  background: conic-gradient(
    from 0deg,
    var(--primary),
    var(--accent),
    var(--emerald),
    var(--amber),
    var(--primary),
    var(--accent),
    var(--primary)
  );
  z-index: -1;
  animation: rotateGlow 3s linear infinite;
  opacity: 0.7;
  filter: blur(1px);
}

.rotating-border::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  z-index: -1;
}

/* --- Animated underline for links --- */
.animated-underline {
  position: relative;
  display: inline-block;
}

.animated-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--gradient-primary);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--transition-fast);
}

.animated-underline:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* --- Noise texture overlay --- */
.noise-overlay {
  position: relative;
}

.noise-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.025;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

/* --- Smooth entrance for page load --- */
.page-enter {
  animation: fadeIn 0.8s ease-out;
}

/* --- Hover lift for interactive elements --- */
.hover-lift {
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.25), 0 0 30px rgba(108, 58, 237, 0.1);
}

/* --- Loading spinner --- */
.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  display: inline-block;
}

/* --- Scroll Reveal (enhanced with variety) --- */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: all 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(50px);
  transition: all 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.88);
  transition: all 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* NEW: Reveal with rotation */
.reveal-rotate {
  opacity: 0;
  transform: translateY(30px) rotate(3deg);
  transition: all 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-rotate.visible {
  opacity: 1;
  transform: translateY(0) rotate(0deg);
}

/* --- Sparkle container --- */
.sparkle-container {
  position: relative;
}

.sparkle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  pointer-events: none;
  animation: sparkleFloat 2s ease-out forwards;
}

/* --- Scroll Progress Bar --- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--gradient-hero);
  z-index: 9999;
  transition: width 0.1s linear;
  box-shadow: 0 0 10px rgba(108, 58, 237, 0.5), 0 0 20px rgba(6, 182, 212, 0.3);
}

/* --- Cursor Spotlight Glow --- */
.cursor-glow {
  position: fixed;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(108, 58, 237, 0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s;
  will-change: left, top;
}

/* --- Floating particles (CSS-only decorative) --- */
.css-particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  animation: floatUp 4s ease-out infinite;
}

.css-particle:nth-child(1) { width: 4px; height: 4px; background: var(--accent); left: 10%; animation-delay: 0s; animation-duration: 3s; }
.css-particle:nth-child(2) { width: 3px; height: 3px; background: var(--primary-light); left: 25%; animation-delay: 0.8s; animation-duration: 4s; }
.css-particle:nth-child(3) { width: 5px; height: 5px; background: var(--emerald); left: 50%; animation-delay: 1.5s; animation-duration: 3.5s; }
.css-particle:nth-child(4) { width: 3px; height: 3px; background: var(--accent-light); left: 70%; animation-delay: 0.3s; animation-duration: 4.5s; }
.css-particle:nth-child(5) { width: 4px; height: 4px; background: var(--primary); left: 85%; animation-delay: 2s; animation-duration: 3.2s; }
.css-particle:nth-child(6) { width: 2px; height: 2px; background: var(--amber); left: 40%; animation-delay: 1s; animation-duration: 5s; }

/* --- Wave divider --- */
.wave-divider {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 200%;
  height: 60px;
  background: var(--bg-dark);
  opacity: 0.5;
  animation: wave 8s linear infinite;
}

.wave-divider svg {
  width: 100%;
  height: 100%;
}

/* --- Typing cursor --- */
.typing-cursor::after {
  content: '|';
  display: inline-block;
  margin-left: 2px;
  animation: blink 0.8s infinite;
  color: var(--accent);
  font-weight: 300;
}

/* --- Icon bounce on hover --- */
.icon-bounce:hover {
  animation: bounceGentle 0.5s ease;
}

/* --- Zoom pulse for feature icons --- */
.icon-zoom-pulse {
  animation: zoomPulse 3s ease-in-out infinite;
}

/* --- Magnetic hover (class toggled via JS) --- */
.magnetic {
  transition: transform 0.2s ease-out;
}