/**
 * Hero Banner Component Styles
 * Enhanced styling for homepage hero section with platform logos
 */

/* ====================================
   HERO BANNER BASE STYLES
   ==================================== */

.hero-banner {
	background: linear-gradient(135deg, 
		#eff6ff 0%,      /* Blue-50 */
		#dbeafe 50%,     /* Blue-100 */
		#e0f2fe 100%     /* Sky-100 */
	);
	padding: 5rem 0;
	position: relative;
	overflow: hidden;
}

/* Decorative background circles */
.hero-banner::before {
	content: '';
	position: absolute;
	right: -5%;
	top: -5%;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(37, 99, 235, 0.15) 0%, rgba(255, 255, 255, 0) 70%);
	animation: pulseCircle 4s ease-in-out infinite;
}

.hero-banner::after {
	content: '';
	position: absolute;
	left: -5%;
	bottom: -5%;
	width: 250px;
	height: 250px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(245, 158, 11, 0.15) 0%, rgba(255, 255, 255, 0) 70%);
	animation: pulseCircle 5s ease-in-out infinite reverse;
}

@keyframes pulseCircle {
	0%, 100% {
		transform: scale(1);
		opacity: 1;
	}
	50% {
		transform: scale(1.1);
		opacity: 0.8;
	}
}

/* ====================================
   COURSE PLATFORMS CONTAINER
   ==================================== */

.course-platforms {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* ====================================
   PLATFORM LOGO STYLING
   ==================================== */

.platform-logo {
	width: 80px;
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: white;
	border-radius: 50%;
	box-shadow: 
		0 10px 25px rgba(0, 0, 0, 0.1),
		0 4px 10px rgba(0, 0, 0, 0.06);
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	pointer-events: auto;
	cursor: pointer;
	border: 3px solid rgba(37, 99, 235, 0.1);
	position: relative;
	overflow: visible;
}

/* Floating animation */
.platform-logo {
	animation: floatAnimation 3s ease-in-out infinite;
}

@keyframes floatAnimation {
	0%, 100% {
		transform: translateY(0px) rotate(0deg);
	}
	25% {
		transform: translateY(-10px) rotate(2deg);
	}
	50% {
		transform: translateY(-5px) rotate(-1deg);
	}
	75% {
		transform: translateY(-12px) rotate(1deg);
	}
}

/* Stagger animation delays */
.platform-logo:nth-child(1) { animation-delay: 0s; }
.platform-logo:nth-child(2) { animation-delay: 0.5s; }
.platform-logo:nth-child(3) { animation-delay: 1s; }
.platform-logo:nth-child(4) { animation-delay: 1.5s; }
.platform-logo:nth-child(5) { animation-delay: 2s; }

/* ====================================
   HOVER EFFECTS
   ==================================== */

.platform-logo:hover {
	transform: translateY(-8px) scale(1.15) rotate(5deg);
	box-shadow: 
		0 20px 40px rgba(37, 99, 235, 0.25),
		0 10px 20px rgba(37, 99, 235, 0.15),
		0 0 0 8px rgba(37, 99, 235, 0.05);
	border-color: #2563eb;
	animation-play-state: paused;
	z-index: 10;
}

/* Glow effect */
.platform-logo::before {
	content: '';
	position: absolute;
	inset: -8px;
	border-radius: 50%;
	background: linear-gradient(135deg, 
		#2563eb 0%, 
		#10b981 50%,
		#f59e0b 100%
	);
	opacity: 0;
	transition: opacity 0.4s ease;
	z-index: -1;
	filter: blur(15px);
}

.platform-logo:hover::before {
	opacity: 0.6;
}

/* Shine effect */
.platform-logo::after {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: linear-gradient(
		45deg,
		transparent 30%,
		rgba(255, 255, 255, 0.4) 50%,
		transparent 70%
	);
	transform: rotate(45deg);
	transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	opacity: 0;
	pointer-events: none;
}

.platform-logo:hover::after {
	left: 100%;
	opacity: 1;
}

/* ====================================
   PLATFORM LOGO IMAGES
   ==================================== */

.platform-logo img {
	width: 50px;
	height: 50px;
	object-fit: contain;
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	filter: grayscale(0.2) brightness(0.95);
	position: relative;
	z-index: 1;
}

.platform-logo:hover img {
	filter: grayscale(0) brightness(1);
	transform: scale(1.1) rotate(-5deg);
}

/* ====================================
   PLATFORM LOGO LABELS
   ==================================== */

.platform-logo-label {
	position: absolute;
	bottom: -28px;
	left: 50%;
	transform: translateX(-50%) translateY(5px);
	background: linear-gradient(135deg, #2563eb, #1d4ed8);
	color: white;
	padding: 0.35rem 0.9rem;
	border-radius: 20px;
	font-size: 0.75rem;
	font-weight: 600;
	white-space: nowrap;
	opacity: 0;
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	pointer-events: none;
	box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
	letter-spacing: 0.3px;
}

.platform-logo-label::before {
	content: '';
	position: absolute;
	top: -4px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 5px solid #2563eb;
}

.platform-logo:hover .platform-logo-label {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* ====================================
   RIPPLE EFFECT
   ==================================== */

.ripple-effect {
	position: absolute;
	border-radius: 50%;
	background: rgba(37, 99, 235, 0.5);
	transform: scale(0);
	animation: rippleAnimation 0.6s ease-out;
	pointer-events: none;
}

@keyframes rippleAnimation {
	to {
		transform: scale(4);
		opacity: 0;
	}
}

/* ====================================
   PULSE GLOW EFFECT
   ==================================== */

@keyframes pulseGlow {
	0%, 100% {
		box-shadow: 
			0 10px 25px rgba(0, 0, 0, 0.1),
			0 4px 10px rgba(0, 0, 0, 0.06);
	}
	50% {
		box-shadow: 
			0 10px 30px rgba(37, 99, 235, 0.3),
			0 4px 15px rgba(37, 99, 235, 0.2),
			0 0 0 4px rgba(37, 99, 235, 0.1);
	}
}

/* Apply pulse to specific logos */
.platform-logo:nth-child(2) {
	animation: floatAnimation 3s ease-in-out infinite, 
			   pulseGlow 2.5s ease-in-out infinite;
	animation-delay: 0.5s, 1s;
}

/* ====================================
   FADE IN ANIMATION ON PAGE LOAD
   ==================================== */

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

.platform-logo {
	animation: fadeInUp 0.6s ease-out backwards, 
			   floatAnimation 3s ease-in-out infinite;
}

.platform-logo:nth-child(1) { animation-delay: 0.1s, 0.1s; }
.platform-logo:nth-child(2) { animation-delay: 0.2s, 0.6s; }
.platform-logo:nth-child(3) { animation-delay: 0.3s, 1.1s; }
.platform-logo:nth-child(4) { animation-delay: 0.4s, 1.6s; }
.platform-logo:nth-child(5) { animation-delay: 0.5s, 2.1s; }

/* ====================================
   RESPONSIVE DESIGN
   ==================================== */

@media (max-width: 1399px) {
	.platform-logo {
		width: 75px;
		height: 75px;
	}
	
	.platform-logo img {
		width: 48px;
		height: 48px;
	}
}

@media (max-width: 1199px) {
	.platform-logo {
		width: 70px;
		height: 70px;
	}
	
	.platform-logo img {
		width: 45px;
		height: 45px;
	}
	
	.platform-logo-label {
		font-size: 0.7rem;
		padding: 0.3rem 0.8rem;
	}
}

@media (max-width: 991px) {
	/* Hide platform logos on tablets and mobile */
	.course-platforms {
		display: none;
	}
	
	.hero-banner {
		padding: 3rem 0;
	}
}

/* ====================================
   ACCESSIBILITY
   ==================================== */

.platform-logo:focus {
	outline: 3px solid #2563eb;
	outline-offset: 4px;
}

.platform-logo:focus-visible {
	outline: 3px solid #2563eb;
	outline-offset: 4px;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
	.platform-logo,
	.platform-logo::before,
	.platform-logo::after,
	.hero-banner::before,
	.hero-banner::after {
		animation: none !important;
		transition: none !important;
	}
}

/* ====================================
   ALTERNATIVE: GRID LAYOUT
   ==================================== */

.course-platforms-grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
	gap: 2rem;
	padding: 2rem 0;
	max-width: 500px;
	margin: 0 auto;
}

.course-platforms-grid .platform-logo {
	position: relative;
	margin: 0 auto;
}

/* ====================================
   PRINT STYLES
   ==================================== */

@media print {
	.platform-logo {
		animation: none;
		box-shadow: none;
		border: 1px solid #ccc;
	}
	
	.platform-logo::before,
	.platform-logo::after,
	.platform-logo-label {
		display: none;
	}
}