/* Deferred non-critical CSS: decorative effects, motion, and utility classes */

.bg-gradient-radial {
  background: radial-gradient(var(--tw-gradient-stops));
}

@keyframes css-float-particle {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.3; }
  50% { transform: translate(10px, -20px) scale(1.2); opacity: 0.6; }
}

.css-particle {
  animation: css-float-particle var(--dur, 10s) var(--delay, 0s) ease-in-out infinite;
}

@keyframes css-orb-1 {
  0% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.2) rotate(180deg); }
  100% { transform: scale(1) rotate(360deg); }
}

@keyframes css-orb-2 {
  0% { transform: scale(1.2) rotate(360deg); }
  50% { transform: scale(1) rotate(180deg); }
  100% { transform: scale(1.2) rotate(0deg); }
}

@keyframes css-orb-3 {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.3; }
  50% { transform: translate(-50%, -50%) scale(1.3); opacity: 0.5; }
}

.css-orb-1 { animation: css-orb-1 30s linear infinite; }
.css-orb-2 { animation: css-orb-2 35s linear infinite; }
.css-orb-3 { animation: css-orb-3 20s ease-in-out infinite; }

@keyframes css-bismillah-glow {
  0%, 100% { text-shadow: 0 0 20px rgba(16,185,129,0); }
  50% { text-shadow: 0 0 40px rgba(16,185,129,0.2); }
}

.css-bismillah-glow { animation: css-bismillah-glow 3s ease-in-out infinite; }

@keyframes css-btn-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.css-btn-shimmer { animation: css-btn-shimmer 3s ease-in-out infinite; }

@keyframes css-scroll-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(10px); }
}

@keyframes css-scroll-dot {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(16px); opacity: 0.3; }
}

.css-scroll-bounce { animation: css-scroll-bounce 2s ease-in-out infinite; }
.css-scroll-dot { animation: css-scroll-dot 2s ease-in-out infinite; }

@keyframes css-badge-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

.css-badge-pulse { animation: css-badge-pulse 2s ease-in-out infinite; }

@keyframes css-cta-gradient {
  0% { background: radial-gradient(circle at 0% 0%, rgba(255,255,255,0.1) 0%, transparent 50%); }
  50% { background: radial-gradient(circle at 100% 100%, rgba(255,255,255,0.1) 0%, transparent 50%); }
  100% { background: radial-gradient(circle at 0% 0%, rgba(255,255,255,0.1) 0%, transparent 50%); }
}

.css-cta-gradient { animation: css-cta-gradient 10s ease-in-out infinite; }

@keyframes slide-up {
  from { opacity: 0; transform: translateY(100px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-slide-up { animation: slide-up 0.3s ease-out; }

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

.animate-fade-in { animation: fade-in 0.15s ease-out; }

.focus-visible-ring:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.5);
}