/* Model Viewer element — sizing + poster + progress bar for <model-viewer>. */

.fw-model {
	position: relative;
	width: 100%;
	height: var(--model-h, 520px);
	max-width: 100%;
}

.fw-model model-viewer {
	width: 100%;
	height: 100%;
	display: block;
	/* transparent by default; a solid background is set inline when chosen */
	--poster-color: transparent;
	background-color: var(--model-bg, transparent);
	border-radius: inherit;
}

/* The poster image model-viewer shows before the model is revealed. */
.fw-model model-viewer::part(default-poster) {
	background-size: cover;
	background-position: center;
	border-radius: inherit;
}

/* Slim progress bar while the model streams in. */
.fw-model .fw-model__bar {
	position: absolute;
	inset: auto 0 0 0;
	height: 3px;
	background: rgba(0, 0, 0, .08);
	overflow: hidden;
	opacity: 1;
	transition: opacity .3s ease;
}
.fw-model .fw-model__bar > i {
	display: block;
	height: 100%;
	width: 0;
	background: var(--model-accent, #4f46e5);
	transition: width .2s ease;
}
.fw-model.is-loaded .fw-model__bar { opacity: 0; }

/* No-JS / unsupported fallback: show the poster image if one was provided. */
.fw-model__fallback {
	display: none;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}
.fw-model.is-unsupported model-viewer { display: none; }
.fw-model.is-unsupported .fw-model__fallback { display: block; }

/* ---- Hotspots (slotted <button> markers <model-viewer> pins on the model) ---- */
.fw-model__hotspot {
	width: 20px;
	height: 20px;
	padding: 0;
	border: 2px solid #fff;
	border-radius: 50%;
	background: var(--model-accent, #4f46e5);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
	cursor: pointer;
	transition: transform .15s ease;
}
.fw-model__hotspot:hover,
.fw-model__hotspot:focus-visible {
	transform: scale(1.18);
	outline: none;
}
.fw-model__hotspot-annotation {
	position: absolute;
	left: 50%;
	bottom: 28px;
	transform: translateX(-50%);
	display: block;
	min-width: 110px;
	max-width: 220px;
	padding: 8px 11px;
	border-radius: 7px;
	background: #1d2327;
	color: #fff;
	font-size: 12px;
	line-height: 1.45;
	text-align: left;
	text-decoration: none;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s ease;
}
.fw-model__hotspot:hover .fw-model__hotspot-annotation,
.fw-model__hotspot:focus-within .fw-model__hotspot-annotation {
	opacity: 1;
	pointer-events: auto;
}
.fw-model__hotspot-annotation.is-link:hover { text-decoration: underline; }
.fw-model__hotspot-title { display: block; font-weight: 600; }
.fw-model__hotspot-detail { display: block; margin-top: 2px; opacity: .8; }

/* ---- Material / color variant switcher (JS fills it from availableVariants) ---- */
.fw-model__variants {
	position: absolute;
	left: 50%;
	bottom: 12px;
	transform: translateX(-50%);
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	max-width: 90%;
}
.fw-model__variants:empty { display: none; }
.fw-model__variant-btn {
	padding: 5px 12px;
	border: 1px solid rgba(0, 0, 0, .15);
	border-radius: 999px;
	background: rgba(255, 255, 255, .9);
	color: #1d2327;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.fw-model__variant-btn:hover { border-color: var(--model-accent, #4f46e5); }
.fw-model__variant-btn.is-active {
	background: var(--model-accent, #4f46e5);
	border-color: var(--model-accent, #4f46e5);
	color: #fff;
}

/* ---- Scroll Choreography -------------------------------------------------
   The wrapper collapses to a zero-height anchor (the runtime measures scroll
   travel from its document position). The visible model is a FIXED, transparent,
   z-indexed layer with pointer-events off, so page sections scroll over / under
   it and buttons beneath stay clickable. The runtime sets the model's transform
   (translate in vw/vh + scale), opacity and camera-orbit from scroll. */
.fw-model--choreo {
	height: 0;
	min-height: 0;
	overflow: visible;
}
.fw-model--choreo .fw-model__fixed {
	position: fixed;
	inset: 0;
	z-index: var(--choreo-z, 2);
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;   /* clicks pass through to the page underneath */
}
.fw-model--choreo .fw-model__fixed model-viewer {
	width: calc(var(--choreo-size, 60) * 1vmin);
	height: calc(var(--choreo-size, 60) * 1vmin);
	max-width: 96vw;
	max-height: 96vh;
	will-change: transform, opacity;
	transform-origin: center center;
	background: transparent;
}
/* The load bar / variant swatches don't belong on a transparent floating layer. */
.fw-model--choreo .fw-model__bar { display: none; }

/* ---- Choreography Guide (opt-in authoring overlay) -----------------------
   Markers are absolutely positioned in the document (they scroll with the page,
   sitting at each keyframe's scroll depth); the HUD is fixed. Both are inert
   (pointer-events:none) and sit above everything. Only rendered when the option
   is on — the author turns it off before publishing. */
.fw-model__guide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 0;
	z-index: 2147483000;
	pointer-events: none;
}
.fw-model__guide-mark {
	position: absolute;
	left: 0;
	width: 100%;
	height: 0;
	border-top: 1px dashed rgba(88, 120, 255, .75);
}
.fw-model__guide-badge {
	position: absolute;
	left: 12px;
	top: -11px;
	padding: 2px 9px;
	border-radius: 999px;
	background: #3858e9;
	color: #fff;
	font: 600 11px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	white-space: nowrap;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}
.fw-model__guide-mark.is-active { border-top-color: #f5a623; }
.fw-model__guide-mark.is-active .fw-model__guide-badge { background: #f5a623; color: #1d1300; }

.fw-model__guide-hud {
	position: fixed;
	right: 14px;
	bottom: 14px;
	z-index: 2147483000;
	min-width: 184px;
	padding: 10px 12px;
	border-radius: 10px;
	background: rgba(15, 17, 22, .92);
	color: #e8ecf5;
	font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	box-shadow: 0 12px 34px rgba(0, 0, 0, .45);
	pointer-events: none;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.fw-model__guide-row { margin-bottom: 3px; }
.fw-model__guide-span { color: #aab3c7; }
.fw-model__guide-pct b { color: #7b90ff; font-size: 14px; }
.fw-model__guide-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px 14px;
	margin-top: 6px;
	padding-top: 6px;
	border-top: 1px solid rgba(255, 255, 255, .12);
}
.fw-model__guide-cell { display: flex; justify-content: space-between; gap: 10px; }
.fw-model__guide-cell i { color: #8b93a7; font-style: normal; }

@media (prefers-reduced-motion: reduce) {
	/* auto-rotate is stripped in JS; nothing else to animate here. */
	.fw-model .fw-model__bar > i { transition: none; }
	.fw-model__hotspot { transition: none; }
}