/*
 * Perfume Luxury - 3D Viewer & Scroll Animation styles
 * Styling for the Three.js powered product viewer and GSAP ScrollTrigger
 * driven reveal animations. Includes a CSS-only fallback for devices
 * without WebGL support.
 */

.perfume-3d-viewer {
	position: relative;
	width: 100%;
	border-radius: var(--pl-radius-lg);
	overflow: hidden;
	background: radial-gradient(circle at 50% 30%, #1a1a1a, #050505);
}

.perfume-3d-viewer__canvas-wrap {
	position: relative;
	aspect-ratio: 1 / 1;
}

.perfume-3d-viewer__canvas {
	width: 100%;
	height: 100%;
	display: block;
	touch-action: none;
	cursor: grab;
}

.perfume-3d-viewer__canvas:active {
	cursor: grabbing;
}

.perfume-3d-viewer__fallback {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.perfume-3d-viewer.is-css-fallback .perfume-3d-viewer__canvas {
	display: none;
}

.perfume-3d-viewer.is-css-fallback .perfume-3d-viewer__fallback {
	display: block;
}

.perfume-3d-viewer__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 14px;
	color: var(--pl-color-neutral);
	font-size: 0.75rem;
}

.perfume-3d-viewer__rotate {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: var(--pl-color-secondary);
	width: 34px;
	height: 34px;
	border-radius: 50%;
}

/* CSS 3D fallback transform ring (used for low-power / no-WebGL devices) */
.perfume-3d-viewer.is-css-fallback .perfume-3d-viewer__canvas-wrap {
	perspective: 1200px;
}

.perfume-3d-viewer.is-css-fallback .perfume-3d-viewer__fallback {
	transition: transform 400ms ease;
	transform-style: preserve-3d;
}

/* Scroll reveal utility classes toggled by GSAP ScrollTrigger */
.gsap-reveal {
	opacity: 0;
	transform: translateY(40px);
}

.gsap-reveal.is-revealed {
	opacity: 1;
	transform: translateY(0);
}

.gsap-pin-section {
	will-change: transform;
}

.hero-3d-stage {
	position: relative;
	min-height: 70vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: var(--pl-color-primary);
}

.hero-3d-stage__canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.hero-3d-stage__content {
	position: relative;
	z-index: 2;
	text-align: center;
	color: var(--pl-color-white);
}