.hero-scene {
	width: 100%;
	max-width: 680px;
	margin-inline: auto;
}

.scene-viewport {
	position: relative;
	aspect-ratio: 1;
}

.scene-fallback,
.scene-renderer {
	position: absolute;
	inset: 0;
}

.scene-fallback {
	transition: opacity 0.55s;
}

.hero-scene .scene-fallback img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: none;
	object-fit: contain;
}

.scene-renderer {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.65s;
}

[data-scene-state='ready'] .scene-renderer {
	opacity: 1;
	pointer-events: auto;
}

[data-scene-state='ready'] .scene-fallback {
	opacity: 0;
	visibility: hidden;
}

.scene-canvas {
	display: block;
	width: 100%;
	height: 100%;
	cursor: pointer;
	touch-action: pan-y;
	user-select: none;
}

.scene-canvas[data-dragging] {
	cursor: grabbing;
}

.scene-canvas:focus,
.scene-canvas:focus-visible {
	outline: 0;
}

.scene-announcement {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (width <= 767px) {
	.hero-scene {
		max-width: 370px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.scene-renderer,
	.scene-fallback {
		transition: none;
	}
}