/**
 * ExploreXR Morphing Add-On — Frontend Styles
 *
 * z-index ladder (must stay above overlay groups at 1000):
 *   .explorexr-morph-btn  → 1050
 */

/* ── Morph Buttons ─────────────────────────────────────────────── */

.explorexr-morph-btn {
	position: absolute;
	z-index: 1050; /* above .explorexr-overlay-group (z-index: 1000) */
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	border: none;
	cursor: pointer;
	white-space: nowrap;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
	/* border-radius applied inline by JS from the global buttonStyle setting */
	/* Note: NO transition here — JS manages transitions during model swap */
}

.explorexr-morph-btn:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.32);
	filter: brightness(1.08);
}

.explorexr-morph-btn:active {
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	filter: brightness(0.96);
}

.explorexr-morph-btn:focus-visible {
	outline: 3px solid rgba(42, 172, 226, 0.7);
	outline-offset: 2px;
}

.explorexr-morph-btn.is-active {
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.75), 0 0 0 4px rgba(42, 172, 226, 0.75);
	filter: saturate(1.08);
}

/* Poster / icon modes — remove text padding */
.explorexr-morph-btn.has-poster,
.explorexr-morph-btn.has-icon {
	padding: 0;
	overflow: hidden;
}

/* Minimal (outline) style — CSS class added by JS when buttonStyle = "minimal" */
.explorexr-morph-btn.style-minimal {
	background: transparent !important;
	border: 2px solid currentColor !important;
	box-shadow: none;
}
.explorexr-morph-btn.style-minimal:hover {
	filter: none;
	box-shadow: none;
	background: rgba(255, 255, 255, 0.12) !important;
}

/* ── Model-viewer transition states ────────────────────────────── */
/*
 * Exit classes: applied to model-viewer BEFORE the src swap.
 * JS sets inline `transition` on the element so duration is dynamic.
 * !important overrides any inline styles set by model-viewer internals.
 *
 * Enter start-states are set via inline JS so we can force a reflow
 * and then animate back to the natural (no class) state.
 */

/* Fade */
.xr-morph-exit-fade {
	opacity: 0.02 !important;
}

/* Zoom (shrink out) */
.xr-morph-exit-zoom {
	opacity: 0.02 !important;
	transform: scale(0.88) !important;
}

/* Slide left (exit left) */
.xr-morph-exit-slide-left {
	opacity: 0.02 !important;
	transform: translateX(-22%) !important;
}

/* Slide right (exit right) */
.xr-morph-exit-slide-right {
	opacity: 0.02 !important;
	transform: translateX(22%) !important;
}

/* Blur fade */
.xr-morph-exit-blur {
	opacity: 0.02 !important;
	filter: blur(12px) !important;
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 600px) {
	.explorexr-morph-btn {
		padding: 8px 14px;
		font-size: 13px;
	}
}

/* ── Print ────────────────────────────────────────────────────── */
@media print {
	.explorexr-morph-btn {
		display: none !important;
	}
}