/* Animworks rig 3D previews (pilot). The course trailer pop-up's look, which is the login pop-up's: the page dims and
 * blurs behind a frosted glass panel. Brand colours and fonts only. */

.aw3d-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; margin: 0;
	font-family: 'LM Pro', sans-serif; font-weight: 700; letter-spacing: .01em; text-transform: none; line-height: 1;
	border-radius: 999px; box-shadow: none; transition: background-color 140ms, color 140ms, border-color 140ms;
}
.aw3d-btn svg { flex: none; }
/* Product page: a full outline button under the price. */
/* ⚠️ WoodMart restyles every button in the summary (square, Title Case, 13px): matched on specificity, not !important. */
body.single-product .summary button.aw3d-btn.aw3d-btn--product, body.single-product button.aw3d-btn.aw3d-btn--product {
	width: 100%; height: 46px; min-height: 0; padding: 0 22px; margin: 6px 0 18px; font-size: 14px; border-radius: 999px;
	text-transform: none; letter-spacing: .01em; background: transparent; color: #F2F0EA; border: 1.5px solid #E4AC01;
}
body.single-product button.aw3d-btn.aw3d-btn--product:hover { background: #E4AC01; color: #141414; }
/* Homepage rig card: the product page's "3D model" tab (pdp.css .pdp-tab--mint + .pdp-spin), in the site teal of the homepage "Find out more", centred on the picture
 * just above the product's own title art, over the card's stretched link. (Harvey, 15 Sep: "the same animated button
 * that we have in the rigs product page".) */
button.aw3d-btn--card {
	position: absolute; left: 50%; bottom: 24%; top: auto; right: auto; z-index: 2; transform: translateX(-50%);
	height: 34px; min-height: 0; padding: 0 14px; gap: 0; border-radius: 6px; white-space: nowrap;
	font-weight: 700; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
	background: #167A7A; color: #FFFFFF; border: 1px solid #167A7A;
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
button.aw3d-btn--card:hover { background: #1B8A8A; color: #FFFFFF; border-color: #1B8A8A; }
/* Folded to the cube and "3D"; the rest of the word opens out on hover or keyboard focus. The button has no fixed
 * width: the hidden part grows its max-width, so the pill widens from its centre by exactly what the word needs.
 * ⚠️ max-width, not a 0fr to 1fr grid track: the track measured the word without its letter-spacing and clipped the L. */
.aw3d-label { display: inline-flex; align-items: center; }
.aw3d-more { display: inline-block; max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width 320ms cubic-bezier(.23, 1, .32, 1), opacity 160ms ease-out; }
.aw3d-more > span { display: inline-block; padding-right: .1em; }
button.aw3d-btn--card:hover .aw3d-more, button.aw3d-btn--card:focus-visible .aw3d-more { max-width: 7em; opacity: 1; transition: max-width 320ms cubic-bezier(.23, 1, .32, 1), opacity 200ms ease-out 80ms; }
button.aw3d-btn--card:active { background: #12625F; border-color: #12625F; color: #FFFFFF; }
button.aw3d-btn--card:focus-visible { outline: 2px solid #6FC2C0; outline-offset: 2px; }
/* The turning cube (AW_Rig_3D::cube()): a wireframe cube, a plus on each face, tumbling slowly on two axes.
 * Harvey's pick from 21st.dev (the Prism Flux loader), rebuilt without React and slowed to a quarter of its speed. */
.aw-cube { --c: 13px; display: inline-block; flex: none; width: var(--c); height: var(--c); perspective: 110px; vertical-align: middle; }
.aw-cube__in { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateX(-24deg) rotateY(36deg); animation: aw-cube 9s linear infinite; }
.aw-cube__in i { position: absolute; inset: 0; border: 1.5px solid currentColor; border-radius: 1.5px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.aw-cube__in i::before, .aw-cube__in i::after { content: ""; position: absolute; left: 50%; top: 50%; background: currentColor; transform: translate(-50%, -50%); }
.aw-cube__in i::before { width: 48%; height: 1.2px; }
.aw-cube__in i::after { width: 1.2px; height: 48%; }
.aw-cube__in i:nth-child(1) { transform: rotateY(0deg) translateZ(calc(var(--c) / 2)); }
.aw-cube__in i:nth-child(2) { transform: rotateY(180deg) translateZ(calc(var(--c) / 2)); }
.aw-cube__in i:nth-child(3) { transform: rotateY(90deg) translateZ(calc(var(--c) / 2)); }
.aw-cube__in i:nth-child(4) { transform: rotateY(-90deg) translateZ(calc(var(--c) / 2)); }
.aw-cube__in i:nth-child(5) { transform: rotateX(90deg) translateZ(calc(var(--c) / 2)); }
.aw-cube__in i:nth-child(6) { transform: rotateX(-90deg) translateZ(calc(var(--c) / 2)); }
@keyframes aw-cube { from { transform: rotateX(-24deg) rotateY(36deg); } to { transform: rotateX(336deg) rotateY(396deg); } }
button.aw3d-btn--card .aw-cube { margin-right: 9px; }
@media (prefers-reduced-motion: reduce) { .aw-cube__in { animation: none; } .aw3d-more, button.aw3d-btn--card:hover .aw3d-more { transition: none; } }
/* Shop, category, search and related-product cards: the same place on the picture as the homepage cards. */
.wd-product-thumb button.aw3d-btn--card, .pdp-card__img button.aw3d-btn--card { z-index: 3; }
@media (pointer: coarse) { button.aw3d-btn--card { height: 38px; } }
@media (max-width: 600px) { button.aw3d-btn--card { padding: 0 11px; font-size: 10px; letter-spacing: .08em; } button.aw3d-btn--card .aw-cube { margin-right: 7px; } }

.aw3d {
	width: min(980px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 0; margin: auto;
	border: 0; background: transparent; color: #F2F0EA; overflow: visible;
}
.aw3d::backdrop { background: rgba(6, 6, 8, .55); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }
.aw3d[open] .aw3d__panel { animation: aw3dIn 320ms cubic-bezier(.2, 1, .3, 1) both; }
@keyframes aw3dIn { from { opacity: 0; transform: scale(.94) translateY(10px); } to { opacity: 1; transform: none; } }
.aw3d__panel {
	position: relative; max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; border-radius: 18px;
	background: rgba(14, 14, 16, .72); -webkit-backdrop-filter: blur(26px) saturate(1.1); backdrop-filter: blur(26px) saturate(1.1);
	border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); font-family: 'LM Pro', sans-serif;
}
.aw3d__stage {
	position: relative; height: min(62dvh, 600px); min-height: 320px; background: #121212; border-radius: 18px 18px 0 0; overflow: hidden;
	touch-action: none; cursor: grab;
}
.aw3d__stage:active { cursor: grabbing; }
.aw3d__stage canvas { display: block; width: 100% !important; height: 100% !important; }
button.aw3d__x {
	position: absolute; top: 12px; right: 12px; z-index: 4; width: 40px; height: 40px; min-height: 0; padding: 0; margin: 0;
	display: grid; place-items: center; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .25);
	background: rgba(12, 12, 12, .72); color: #F2F0EA; box-shadow: none; cursor: pointer;
}
button.aw3d__x:hover { border-color: #E4AC01; color: #E4AC01; background: rgba(12, 12, 12, .9); }
.aw3d__loading {
	position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
	font-size: 13px; color: #C9C7C1; background: #121212; pointer-events: none;
}
.aw3d__loading[hidden] { display: none; }
.aw3d__bar { width: min(260px, 60%); height: 4px; border-radius: 999px; background: #2A2A2A; overflow: hidden; }
.aw3d__bar span { display: block; height: 100%; background: #E4AC01; transform-origin: left center; transform: scaleX(.04); transition: transform 200ms ease; }
.aw3d__loading.is-error .aw3d__bar { display: none; }
.aw3d__tools { position: absolute; left: 12px; top: 12px; z-index: 2; display: flex; gap: 8px; }
button.aw3d__tool {
	height: 32px; min-height: 0; padding: 0 12px; margin: 0; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22);
	background: rgba(12, 12, 12, .72); color: #F2F0EA; font-family: 'LM Pro', sans-serif; font-size: 12px; font-weight: 600;
	text-transform: none; letter-spacing: 0; box-shadow: none; cursor: pointer;
}
button.aw3d__tool:hover { border-color: #E4AC01; color: #E4AC01; background: rgba(12, 12, 12, .9); }
button.aw3d__tool[aria-pressed="true"] { border-color: #E4AC01; color: #E4AC01; }
.aw3d__hint { position: absolute; left: 0; right: 0; top: 20px; z-index: 2; margin: 0; text-align: center; font-size: 12px; color: rgba(242, 240, 234, .55); pointer-events: none; }
.aw3d__hint--touch { display: none; }
@media (pointer: coarse) { .aw3d__hint--mouse { display: none; } .aw3d__hint--touch { display: inline; } }
/* A right-drag pans: the browser's own context menu must not open over the viewer. */
.aw3d__mark { position: absolute; right: 14px; bottom: 12px; z-index: 2; font-size: 11px; font-weight: 600; letter-spacing: .04em; color: rgba(242, 240, 234, .35); pointer-events: none; }
.aw3d__body { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 18px 32px; padding: 22px 28px 24px; }
.aw3d__info { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.aw3d__kicker { font-family: 'LEMON MILK', sans-serif; font-weight: 700; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #E4AC01; }
.aw3d .aw3d__title { margin: 0; font-family: 'LEMON MILK', sans-serif; font-weight: 700; font-size: 22px; line-height: 1.2; letter-spacing: .02em; text-transform: uppercase; color: #F2F0EA; }
.aw3d p.aw3d__by { margin: 0; font-size: 13px; color: #9A9893; }
.aw3d p.aw3d__note { margin: 4px 0 0; font-size: 13px; line-height: 1.55; color: #C9C7C1; max-width: 520px; }
.aw3d__buy { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.aw3d__price { font-family: 'LEMON MILK', sans-serif; font-weight: 700; font-size: 26px; color: #E4AC01; }
.aw3d__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.aw3d__actions a[hidden] { display: none; }
a.aw3d__cta {
	display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border-radius: 999px; font-size: 14px; font-weight: 600;
	text-decoration: none; color: #F2F0EA; border: 1.5px solid #5A5A5A; transition: border-color 140ms, color 140ms, background-color 140ms;
}
a.aw3d__cta:hover { border-color: #E4AC01; color: #E4AC01; }
a.aw3d__cta--gold { background: #E4AC01; border-color: #E4AC01; color: #141414; }
a.aw3d__cta--gold:hover { background: #F0BC1A; color: #141414; }
html:has(.aw3d[open]) { overflow: hidden; }
@media (max-width: 600px) {
	.aw3d__stage { height: min(56dvh, 460px); }
	.aw3d__body { padding: 16px 18px 18px; }
	.aw3d .aw3d__title { font-size: 18px; }
	.aw3d__buy, .aw3d__actions, .aw3d__actions a { width: 100%; }
	a.aw3d__cta { justify-content: center; flex: 1 1 auto; }
	.aw3d__hint { top: auto; bottom: 34px; } /* phones: the top row holds the tools and the close button */
}
@media (prefers-reduced-motion: reduce) { .aw3d[open] .aw3d__panel { animation: none; } }