/**
 * EddyTools 3D Viewer — mobile-first, responsive container styles.
 *
 * The wrapper is fluid (width:100%) and sizes itself by aspect-ratio so it
 * scales on any screen. A fixed height can be forced with the `height` attr.
 */

.e3d {
	/* Tokens (overridden inline by the shortcode). */
	--e3d-ratio: 1 / 1;
	--e3d-min-h: 300px;
	--e3d-max-w: 100%;
	--e3d-radius: 1.25rem;
	--e3d-bg: transparent;
	--e3d-glow: rgba(124, 92, 255, 0.38);
	--e3d-glow-2: rgba(56, 189, 248, 0.22);

	position: relative;
	width: 100%;
	max-width: var(--e3d-max-w);
	margin-inline: auto;
	aspect-ratio: var(--e3d-ratio);
	min-height: var(--e3d-min-h);
	border-radius: var(--e3d-radius);
	overflow: hidden;
	background: var(--e3d-bg);
	-webkit-tap-highlight-color: transparent;
	isolation: isolate;
}

/* Fixed-height variant (when the `height` attr is used). */
.e3d--fixed {
	aspect-ratio: auto;
	height: var(--e3d-h, 480px);
	min-height: 0;
}

/* Soft premium glow behind the model. */
.e3d__glow {
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		radial-gradient(58% 55% at 50% 46%, var(--e3d-glow), transparent 70%),
		radial-gradient(45% 40% at 72% 30%, var(--e3d-glow-2), transparent 70%);
	filter: blur(14px);
	pointer-events: none;
}
.e3d--no-glow .e3d__glow {
	display: none;
}

/* WebGL stage — the canvas is injected here by viewer.js. */
.e3d__stage {
	position: absolute;
	inset: 0;
	z-index: 1;
	/* Let vertical page scroll pass through on touch; JS switches to 'none'
	   when zoom/pan is enabled so gestures aren't hijacked. */
	touch-action: pan-y;
}
.e3d__stage canvas {
	display: block;
	width: 100% !important;
	height: 100% !important;
	outline: none;
}

/* Poster / fallback image. */
.e3d__poster {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: 1;
	transition: opacity 0.4s ease;
	pointer-events: none;
}
.e3d.is-loaded .e3d__poster {
	opacity: 0;
}

/* Loading spinner. */
.e3d__loader {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: grid;
	place-items: center;
	transition: opacity 0.3s ease;
	pointer-events: none;
}
.e3d.is-loaded .e3d__loader,
.e3d.has-error .e3d__loader {
	opacity: 0;
}
.e3d__spinner {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 3px solid rgba(255, 255, 255, 0.18);
	border-top-color: #a78bfa;
	border-right-color: #38bdf8;
	animation: e3d-spin 0.8s linear infinite;
}
@keyframes e3d-spin {
	to { transform: rotate(360deg); }
}

/* Error state. */
.e3d__error {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 3;
	margin: 0.75rem;
	padding: 0.6rem 0.9rem;
	border-radius: 0.6rem;
	background: rgba(190, 30, 45, 0.85);
	color: #fff;
	font: 500 13px/1.4 system-ui, sans-serif;
	text-align: center;
}

/* "Drag to rotate" hint pill — fades out after first interaction. */
.e3d__hint {
	position: absolute;
	left: 50%;
	bottom: 0.85rem;
	z-index: 3;
	transform: translateX(-50%);
	padding: 0.35rem 0.8rem;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(10, 12, 22, 0.55);
	backdrop-filter: blur(8px);
	color: #e2e8f0;
	font: 500 11px/1 system-ui, sans-serif;
	letter-spacing: 0.02em;
	opacity: 0;
	transition: opacity 0.4s ease;
	pointer-events: none;
	white-space: nowrap;
}
.e3d.is-loaded .e3d__hint {
	opacity: 0.85;
}
.e3d.is-interacting .e3d__hint,
.e3d.hint-dismissed .e3d__hint {
	opacity: 0;
}

/* Grabbing cursor when draggable. */
.e3d.is-draggable .e3d__stage {
	cursor: grab;
}
.e3d.is-draggable.is-interacting .e3d__stage {
	cursor: grabbing;
}

/* Larger screens: a touch more breathing room for the hint. */
@media (min-width: 768px) {
	.e3d__hint {
		bottom: 1.1rem;
		font-size: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.e3d__spinner {
		animation-duration: 1.6s;
	}
}