/**
 * Maklern Utility CSS Classes
 * Reusable utility classes for common styling patterns
 */

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

/**
 * White Glow Hover Effect
 * Perfect for dark backgrounds - adds a subtle white glow on hover
 * Usage: Add class "hover-glow" to image/video container
 */
.hover-glow {
	position: relative;
	transition: all 0.3s ease;
	cursor: pointer;
}

.hover-glow::before {
	content: '';
	position: absolute;
	top: -2px;
	left: -2px;
	right: -2px;
	bottom: -2px;
	border-radius: inherit;
	background: transparent;
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
	z-index: -1;
}

.hover-glow:hover {
	transform: translateY(-2px);
}

.hover-glow:hover::before {
	opacity: 1;
	box-shadow: 
		0 0 20px rgba(255, 255, 255, 0.4),
		0 0 40px rgba(255, 255, 255, 0.3),
		0 0 60px rgba(255, 255, 255, 0.2),
		0 0 80px rgba(255, 255, 255, 0.1);
}

/**
 * Stronger White Glow Hover Effect
 * For even darker backgrounds - more intense glow
 * Usage: Add class "hover-glow-strong" to image/video container
 */
.hover-glow-strong {
	position: relative;
	transition: all 0.3s ease;
	cursor: pointer;
}

.hover-glow-strong::before {
	content: '';
	position: absolute;
	top: -3px;
	left: -3px;
	right: -3px;
	bottom: -3px;
	border-radius: inherit;
	background: transparent;
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
	z-index: -1;
}

.hover-glow-strong:hover {
	transform: translateY(-3px);
}

.hover-glow-strong:hover::before {
	opacity: 1;
	box-shadow: 
		0 0 30px rgba(255, 255, 255, 0.6),
		0 0 60px rgba(255, 255, 255, 0.4),
		0 0 90px rgba(255, 255, 255, 0.3),
		0 0 120px rgba(255, 255, 255, 0.2);
}

/**
 * Subtle White Glow (No transform)
 * Adds glow effect without the lift animation
 * Usage: Add class "hover-glow-subtle" to image/video container
 */
.hover-glow-subtle {
	position: relative;
	transition: box-shadow 0.3s ease;
	cursor: pointer;
}

.hover-glow-subtle:hover {
	box-shadow: 
		0 0 25px rgba(255, 255, 255, 0.5),
		0 0 50px rgba(255, 255, 255, 0.3),
		0 0 75px rgba(255, 255, 255, 0.2);
}

/* ============================================
   VIDEO PLAYER UTILITIES
   ============================================ */

/**
 * Video Container with Play Button
 * Adds smooth hover effects for video thumbnails
 */
.video-thumbnail {
	position: relative;
	overflow: hidden;
	border-radius: 8px;
}

.video-thumbnail img,
.video-thumbnail video {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.3s ease;
}

.video-thumbnail:hover img,
.video-thumbnail:hover video {
	transform: scale(1.02);
}

/**
 * Play Button Hover Enhancement
 * Adds scale effect to play buttons
 */
.play-button-hover {
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.play-button-hover:hover {
	transform: scale(1.1);
	opacity: 0.9;
}

/* ============================================
   CLICK ANIMATIONS (Play Button Effects)
   ============================================ */

/**
 * Ripple Click Effect
 * Creates a satisfying ripple wave from the click point
 * Usage: Add class "click-ripple" to play button
 */
.click-ripple {
	position: relative;
	overflow: hidden;
}

.click-ripple::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.6);
	transform: translate(-50%, -50%);
	transition: width 0.6s ease-out, height 0.6s ease-out, opacity 0.6s ease-out;
	opacity: 0;
	pointer-events: none;
}

.click-ripple:active::after {
	width: 300%;
	height: 300%;
	opacity: 0;
	transition: width 0s, height 0s, opacity 0.6s ease-out;
}

/**
 * Scale Burst Click Effect - SEHR SATISFYING!
 * Button grows then shrinks with a burst effect
 * Usage: Add class "click-burst" to play button
 */
@keyframes scaleBurst {
	0% {
		transform: scale(1);
		opacity: 1;
	}
	50% {
		transform: scale(1.2);
		opacity: 0.8;
	}
	100% {
		transform: scale(0.8);
		opacity: 1;
	}
}

.click-burst:active {
	animation: scaleBurst 0.4s ease-out;
}

/**
 * Pulse Shrink Effect
 * Satisfying pulse that shrinks the button momentarily
 * Usage: Add class "click-pulse-shrink" to play button
 */
@keyframes pulseShrink {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(0.85);
		box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3);
	}
	100% {
		transform: scale(1);
		box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
	}
}

.click-pulse-shrink {
	transition: transform 0.1s ease;
}

.click-pulse-shrink:active {
	animation: pulseShrink 0.5s ease-out;
}

/**
 * Bounce Click Effect
 * Fun bouncy feedback on click
 * Usage: Add class "click-bounce" to play button
 */
@keyframes bounceClick {
	0% {
		transform: scale(1);
	}
	25% {
		transform: scale(0.9);
	}
	50% {
		transform: scale(1.15);
	}
	75% {
		transform: scale(0.95);
	}
	100% {
		transform: scale(1);
	}
}

.click-bounce:active {
	animation: bounceClick 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/**
 * Rotation Scale Click Effect
 * Rotates and scales on click - smooth and satisfying
 * Usage: Add class "click-rotate-scale" to play button
 */
@keyframes rotateScale {
	0% {
		transform: rotate(0deg) scale(1);
	}
	50% {
		transform: rotate(10deg) scale(1.1);
	}
	100% {
		transform: rotate(0deg) scale(1);
	}
}

.click-rotate-scale:active {
	animation: rotateScale 0.4s ease-in-out;
}

/**
 * Fade Shrink Click Effect
 * Button fades and shrinks when clicked - perfect for "disappearing" play buttons
 * Usage: Add class "click-fade-shrink" to play button
 */
@keyframes fadeShrink {
	0% {
		transform: scale(1);
		opacity: 1;
	}
	50% {
		transform: scale(1.2) rotate(5deg);
		opacity: 0.7;
	}
	100% {
		transform: scale(0);
		opacity: 0;
	}
}

.click-fade-shrink.clicked {
	animation: fadeShrink 0.5s ease-out forwards;
}

/**
 * Combo Effect: Ripple + Scale
 * Combines ripple with scale for maximum satisfaction
 * Usage: Add class "click-combo" to play button
 */
.click-combo {
	position: relative;
	overflow: hidden;
	transition: transform 0.1s ease;
}

.click-combo::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	transform: translate(-50%, -50%);
	transition: width 0.6s ease-out, height 0.6s ease-out, opacity 0.6s ease-out;
	opacity: 0;
	pointer-events: none;
}

.click-combo:active {
	transform: scale(0.95);
}

.click-combo:active::after {
	width: 300%;
	height: 300%;
	opacity: 0;
	transition: width 0s, height 0s, opacity 0.6s ease-out;
}

/* ============================================
   TOUCH DEVICE OPTIMIZATIONS
   ============================================ */

/**
 * Disable sticky hover states on touch devices
 * Prevents hover effects from persisting after tap
 */
@media (hover: none) and (pointer: coarse) {
	/* Remove transform on hover for touch devices */
	.hover-glow-strong:hover {
		transform: none !important;
	}
	
	/* Keep the glow effect but no movement */
	.hover-glow-strong:hover::before {
		opacity: 0 !important;
	}
	
	/* Remove all hover transforms */
	.hover-glow:hover,
	.hover-glow-subtle:hover,
	.video-thumbnail:hover {
		transform: none !important;
	}
	
	/* Active states only for immediate feedback */
	.hover-glow-strong:active {
		transform: translateY(-2px) !important;
	}
}