/* Raayah Media Premium Animations CSS */

/* ========================================
   BASE ANIMATION SETUP
======================================== */
.raayah-animate-on-scroll {
	opacity: 0;
	visibility: hidden;
	will-change: transform, opacity;
	transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
	            transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.raayah-animate-on-scroll.raayah-animated {
	opacity: 1;
	visibility: visible;
	transform: translate(0, 0) scale(1) rotate(0deg);
}

/* ========================================
   ANIMATION TYPES
======================================== */
.raayah-fade-up    { transform: translateY(60px); }
.raayah-fade-down  { transform: translateY(-60px); }
.raayah-fade-in    { transform: translateY(0); opacity: 0; }
.raayah-slide-right { transform: translateX(80px); }
.raayah-slide-left  { transform: translateX(-80px); }
.raayah-zoom-in    { transform: scale(0.85); }
.raayah-zoom-out   { transform: scale(1.15); }
.raayah-flip-x     { transform: perspective(800px) rotateX(45deg); }
.raayah-flip-y     { transform: perspective(800px) rotateY(45deg); }
.raayah-rotate-in  { transform: rotate(-10deg) scale(0.9); }

/* ========================================
   ANIMATION DELAYS
======================================== */
.raayah-delay-50  { transition-delay: 50ms; }
.raayah-delay-100 { transition-delay: 100ms; }
.raayah-delay-150 { transition-delay: 150ms; }
.raayah-delay-200 { transition-delay: 200ms; }
.raayah-delay-300 { transition-delay: 300ms; }
.raayah-delay-400 { transition-delay: 400ms; }
.raayah-delay-500 { transition-delay: 500ms; }
.raayah-delay-600 { transition-delay: 600ms; }
.raayah-delay-700 { transition-delay: 700ms; }
.raayah-delay-800 { transition-delay: 800ms; }

/* ========================================
   HOVER MICRO-INTERACTIONS
======================================== */
.raayah-hover-lift {
	transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
	            box-shadow 0.35s ease;
}
.raayah-hover-lift:hover {
	transform: translateY(-8px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.raayah-hover-glow {
	transition: box-shadow 0.4s ease, border-color 0.4s ease;
}
.raayah-hover-glow:hover {
	box-shadow: 0 0 30px rgba(56, 189, 248, 0.35), 0 0 60px rgba(56, 189, 248, 0.1);
	border-color: rgba(56, 189, 248, 0.4);
}

.raayah-hover-scale {
	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.raayah-hover-scale:hover {
	transform: scale(1.05);
}

/* ========================================
   KEYFRAME ANIMATIONS (Always Running)
======================================== */
@keyframes raayah-float {
	0%, 100% { transform: translateY(0px); }
	50%       { transform: translateY(-15px); }
}
@keyframes raayah-pulse-glow {
	0%, 100% { box-shadow: 0 0 20px rgba(56, 189, 248, 0.2); }
	50%       { box-shadow: 0 0 40px rgba(56, 189, 248, 0.6), 0 0 80px rgba(56, 189, 248, 0.2); }
}
@keyframes raayah-shimmer {
	0%   { background-position: -1000px 0; }
	100% { background-position: 1000px 0; }
}
@keyframes raayah-spin-slow {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}
@keyframes raayah-bounce {
	0%, 100% { transform: translateY(0); }
	50%       { transform: translateY(-20px); }
}
@keyframes raayah-gradient-shift {
	0%   { background-position: 0% 50%; }
	50%  { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}
@keyframes raayah-typing-blink {
	0%, 100% { opacity: 1; }
	50%       { opacity: 0; }
}
@keyframes raayah-particle-float {
	0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
	10%  { opacity: 1; }
	90%  { opacity: 1; }
	100% { transform: translateY(-100vh) rotate(720deg); opacity: 0; }
}
@keyframes raayah-counter-up {
	from { transform: translateY(20px); opacity: 0; }
	to   { transform: translateY(0); opacity: 1; }
}
@keyframes raayah-border-dance {
	0%   { clip-path: polygon(0 0, 30% 0, 30% 4px, 0 4px); }
	25%  { clip-path: polygon(70% 0, 100% 0, 100% 4px, 70% 4px); }
	50%  { clip-path: polygon(96% 70%, 100% 70%, 100% 100%, 96% 100%); }
	75%  { clip-path: polygon(0 96%, 30% 96%, 30% 100%, 0 100%); }
	100% { clip-path: polygon(0 0, 30% 0, 30% 4px, 0 4px); }
}

/* ========================================
   UTILITY CLASSES
======================================== */
.raayah-float      { animation: raayah-float 4s ease-in-out infinite; }
.raayah-pulse-glow { animation: raayah-pulse-glow 2.5s ease-in-out infinite; }
.raayah-spin-slow  { animation: raayah-spin-slow 8s linear infinite; }
.raayah-bounce-anim { animation: raayah-bounce 3s ease-in-out infinite; }

/* Animated Gradient Text */
.raayah-gradient-text {
	background: linear-gradient(135deg, #38BDF8, #818CF8, #34D399, #38BDF8);
	background-size: 300% 300%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: raayah-gradient-shift 4s ease infinite;
}

/* Shimmer Card Effect */
.raayah-shimmer::after {
	content: '';
	position: absolute;
	top: 0; left: -100%;
	width: 60%; height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
	animation: raayah-shimmer 3s infinite;
}

/* Number Counter Animation */
.raayah-counter {
	animation: raayah-counter-up 0.6s ease forwards;
}

/* Staggered Children */
.raayah-stagger-children > * {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.raayah-stagger-children.raayah-animated > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 50ms; }
.raayah-stagger-children.raayah-animated > *:nth-child(2) { opacity: 1; transform: none; transition-delay: 150ms; }
.raayah-stagger-children.raayah-animated > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 250ms; }
.raayah-stagger-children.raayah-animated > *:nth-child(4) { opacity: 1; transform: none; transition-delay: 350ms; }
.raayah-stagger-children.raayah-animated > *:nth-child(5) { opacity: 1; transform: none; transition-delay: 450ms; }
.raayah-stagger-children.raayah-animated > *:nth-child(6) { opacity: 1; transform: none; transition-delay: 550ms; }

/* Particles */
.raayah-particle {
	position: absolute;
	width: 6px; height: 6px;
	border-radius: 50%;
	background: rgba(56, 189, 248, 0.6);
	animation: raayah-particle-float linear infinite;
	pointer-events: none;
}