/**
 * WinPaisa 4D Visual Effects & Physics Stylesheet
 *
 * Hardware-accelerated 3D transforms, specular light beams, ambient glows,
 * floating oscillations, and WCAG-compliant reduced-motion overrides.
 *
 * @package WinPaisa
 * @since 1.0.1
 */

/* ==========================================================================
   1. 4D LOGO CONTAINER & PERSPECTIVE STACK
   ========================================================================== */
.winpaisa-4d-logo-container {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	perspective: 600px;
	flex-shrink: 0;
	user-select: none;
	will-change: transform;
}

/* Layer 1: Ambient Radial Glow */
.winpaisa-4d-glow {
	position: absolute;
	inset: -6px;
	border-radius: var(--wp-radius-lg, 14px);
	background: radial-gradient(circle at center, var(--wp-4d-accent, var(--wp-brand-gold)) 0%, transparent 70%);
	opacity: 0.25;
	filter: blur(8px);
	pointer-events: none;
	transition: opacity var(--wp-transition-fast, 150ms ease), transform var(--wp-transition-fast, 150ms ease);
	z-index: 0;
	transform: translateZ(-10px);
}

.winpaisa-game-card:hover .winpaisa-4d-glow,
.winpaisa-4d-logo-container:hover .winpaisa-4d-glow {
	opacity: 0.55;
	filter: blur(12px);
	transform: scale(1.1) translateZ(-10px);
}

/* Layer 2: 3D Tiltable Card Substrate */
.winpaisa-4d-card-layer {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: var(--wp-radius-md, 10px);
	transform-style: preserve-3d;
	transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 180ms cubic-bezier(0.16, 1, 0.3, 1);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
	background: var(--wp-bg-surface-raised, #182030);
	overflow: hidden;
	z-index: 1;
}

/* Hover elevation */
.winpaisa-game-card:hover .winpaisa-4d-card-layer,
.winpaisa-4d-logo-container:hover .winpaisa-4d-card-layer {
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55), 0 0 16px var(--wp-brand-gold-glow, rgba(229, 184, 66, 0.2));
}

/* Link Wrapper */
.winpaisa-4d-link {
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
}

/* App Icon Image */
.winpaisa-4d-icon {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: inherit;
	transform: translateZ(2px);
}

/* Placeholder Icon */
.winpaisa-4d-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wp-bg-surface-raised, #182030);
	color: var(--wp-brand-gold, #E5B842);
	font-size: 24px;
	border-radius: inherit;
}

/* Layer 3: Specular Light Sheen Beam */
.winpaisa-4d-shine {
	position: absolute;
	top: 0;
	left: -100%;
	width: 60%;
	height: 100%;
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(255, 255, 255, 0.28) 50%,
		transparent 100%
	);
	transform: skewX(-25deg) translateZ(4px);
	pointer-events: none;
	opacity: 0;
	transition: opacity 200ms ease;
}

.winpaisa-game-card:hover .winpaisa-4d-shine,
.winpaisa-4d-logo-container:hover .winpaisa-4d-shine {
	opacity: 1;
	animation: winpaisaSheen 900ms ease-out forwards;
}

@keyframes winpaisaSheen {
	0% {
		left: -100%;
		opacity: 0.6;
	}
	100% {
		left: 200%;
		opacity: 0;
	}
}

/* Layer 4: Floating Earning Badge */
.winpaisa-4d-earning-badge {
	position: absolute;
	top: -3px;
	right: -3px;
	background: linear-gradient(135deg, #10B981 0%, #059669 100%);
	color: #FFFFFF;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.04em;
	padding: 2px 5px;
	border-radius: 4px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
	border: 1px solid rgba(255, 255, 255, 0.3);
	transform: translateZ(12px);
	pointer-events: none;
}

/* ==========================================================================
   2. FLOATING OSCILLATION PHYSICS
   ========================================================================== */
.winpaisa-4d-logo-container.is-floating {
	animation: winpaisaFloat 4.5s ease-in-out infinite;
}

@keyframes winpaisaFloat {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-3px);
	}
}

/* ==========================================================================
   3. INTENSITY PROFILES
   ========================================================================== */
.winpaisa-4d-logo-container.intensity-subtle {
	--wp-4d-max-tilt: 6deg;
}

.winpaisa-4d-logo-container.intensity-balanced {
	--wp-4d-max-tilt: 12deg;
}

.winpaisa-4d-logo-container.intensity-strong {
	--wp-4d-max-tilt: 18deg;
}

/* ==========================================================================
   4. ACCESSIBILITY: REDUCED MOTION SAFEGUARDS
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.winpaisa-4d-logo-container,
	.winpaisa-4d-card-layer,
	.winpaisa-4d-glow,
	.winpaisa-4d-shine {
		animation: none !important;
		transition: none !important;
		transform: none !important;
		perspective: none !important;
	}
	.winpaisa-4d-shine {
		display: none !important;
	}
	.winpaisa-4d-glow {
		opacity: 0.2 !important;
	}
}