/* ==========================================================================
   Material: clear acrylic, edge light, standoff bolts, mounted pieces.
   The illusion comes from highlight, edge, gap and shadow, not simulation.
   ========================================================================== */

/* ---------- Clear sheet laid over anything ---------- */

.qc-glass {
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: inherit;
	pointer-events: none;
	/* A long soft highlight across the face, and the cut edge catching light. */
	background: linear-gradient(118deg,
		rgba(255, 255, 255, 0.2) 0%,
		rgba(255, 255, 255, 0.06) 22%,
		rgba(255, 255, 255, 0) 42%,
		rgba(255, 255, 255, 0) 70%,
		rgba(255, 255, 255, 0.08) 100%);
	background-size: 220% 220%;
	background-position: 100% 100%;
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.34),
		inset 1px 1px 0 1px rgba(255, 255, 255, 0.1),
		inset -2px -2px 0 0 rgba(235, 202, 180, 0.3);
	transition: background-position 1100ms var(--ease-out);
}

/* ---------- Standoff bolts ---------- */

.qc-bolts {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	--b: 11px;
	--o: calc(3cqi - var(--b) / 2);
}
.qc-bolts i {
	position: absolute;
	width: var(--b);
	height: var(--b);
	border-radius: 50%;
	background: radial-gradient(circle at 34% 30%, #fff 0 9%, #ece8e3 17%, #b6ada5 46%, #7c736b 76%, #514943 100%);
	box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.55), 1.5px 2.5px 4px rgba(0, 0, 0, 0.35);
}
.qc-bolts i:nth-child(1) { top: var(--o); left: var(--o); }
.qc-bolts i:nth-child(2) { top: var(--o); right: var(--o); }
.qc-bolts i:nth-child(3) { bottom: var(--o); left: var(--o); }
.qc-bolts i:nth-child(4) { bottom: var(--o); right: var(--o); }

/* ---------- A mounted piece: real photo behind clear acrylic ---------- */

.qc-piece { position: relative; min-width: 0; }
.qc-piece[hidden] { display: none; }
.qc-piece__link { display: block; color: inherit; text-decoration: none; }
.qc-piece__link:focus-visible { outline: none; }

.qc-piece__mount {
	--lift: 0px;
	position: relative;
	display: block;
	container-type: inline-size;
	padding: 6%;
	border-radius: 3px;
	/* The clear margin: you see the wall through it. */
	background: rgba(255, 255, 255, 0.035);
	/* The gap between panel and wall. */
	box-shadow:
		calc(10px + var(--lift)) calc(16px + var(--lift) * 1.6) calc(30px + var(--lift) * 2) -14px rgba(0, 0, 0, 0.62),
		2px 3px 6px -3px rgba(0, 0, 0, 0.45);
	transform: translate(calc(var(--lift) * -0.5), calc(var(--lift) * -0.9)) rotate(var(--tilt, 0deg));
	transition: transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid) var(--ease-out);
}
[data-surface="paper"] .qc-piece__mount {
	background: rgba(255, 255, 255, 0.4);
	box-shadow:
		calc(10px + var(--lift)) calc(16px + var(--lift) * 1.6) calc(30px + var(--lift) * 2) -16px rgba(51, 32, 27, 0.4),
		2px 3px 6px -3px rgba(51, 32, 27, 0.3);
}
.qc-piece__photo {
	position: relative;
	display: block;
	aspect-ratio: 1587 / 1789;
	overflow: hidden;
	background: #3a2520;
}
.qc-piece__photo .qc-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 900ms var(--ease-out);
}
[data-surface="paper"] .qc-piece__photo,
[data-surface="sand"] .qc-piece__photo { background: var(--sand); }
.qc-piece__mount--free .qc-piece__photo { aspect-ratio: auto; }
.qc-piece__mount--free .qc-img { height: auto; }

/* Hover and focus: the panel stands further off the wall and light slides across it. */
.qc-piece__link:hover .qc-piece__mount,
.qc-piece__link:focus-visible .qc-piece__mount { --lift: 8px; }
.qc-piece__link:hover .qc-glass,
.qc-piece__link:focus-visible .qc-glass { background-position: 0 0; }
.qc-piece__link:hover .qc-piece__photo .qc-img { transform: scale(1.025); }
.qc-piece__link:focus-visible .qc-piece__mount { outline: 2px solid var(--edge); outline-offset: 6px; }

.qc-piece__tag {
	display: grid;
	gap: 0.1rem;
	margin-top: 0.95rem;
	padding-right: 5.5rem;
	min-height: 40px;
}
.qc-piece__name {
	font: 600 1rem/1.3 var(--f-text);
	font-stretch: 96%;
	text-wrap: balance;
}
.qc-piece__link:hover .qc-piece__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.qc-piece__cat { font-size: 0.8rem; color: var(--fg-2, currentColor); }

/* Small mounted thumbnail */
.qc-mini {
	position: relative;
	display: block;
	width: 68px;
	container-type: inline-size;
	padding: 4px;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.05);
	box-shadow: 5px 8px 14px -8px rgba(0, 0, 0, 0.6);
}
.qc-mini .qc-img { aspect-ratio: 1587 / 1789; width: 100%; object-fit: cover; }
.qc-mini .qc-bolts { --b: 5px; }

/* ---------- Add to quote ---------- */

.qc-add {
	position: absolute;
	right: 0;
	bottom: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	min-height: 40px;
	padding: 0 0.8rem 0 0.6rem;
	border: 0;
	border-radius: 999px;
	background: transparent;
	box-shadow: inset 0 0 0 1px currentColor;
	color: inherit;
	font: 600 0.82rem/1 var(--f-text);
	font-stretch: 92%;
	cursor: pointer;
	opacity: 0.9;
	transition: background-color var(--t-mid) var(--ease-out), color var(--t-mid), transform var(--t-fast) var(--ease-mount), opacity var(--t-fast);
}
.qc-add:hover { opacity: 1; transform: translateY(-2px); }
.qc-add:active { transform: scale(0.94); }
.qc-add__icon { position: relative; width: 16px; height: 16px; }
.qc-add__icon .qc-icon { position: absolute; inset: 0; width: 16px; height: 16px; transition: transform var(--t-mid) var(--ease-cut), opacity var(--t-fast); }
.qc-add__icon .qc-icon--check { opacity: 0; stroke-dasharray: 20; stroke-dashoffset: 20; }
.qc-add[aria-pressed="true"] { background: var(--edge); color: var(--ink); box-shadow: none; opacity: 1; }
.qc-add[aria-pressed="true"] .qc-icon--plus { opacity: 0; transform: rotate(90deg) scale(0.5); }
.qc-add[aria-pressed="true"] .qc-icon--check { opacity: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 420ms var(--ease-out) 80ms, opacity var(--t-fast); }
.qc-add--full {
	position: static;
	min-height: 52px;
	padding: 0 1.3rem 0 1.05rem;
	border-radius: 3px;
	font-size: 1rem;
}

/* The ghost that drops into the quote ticket */
.qc-fly {
	position: fixed;
	z-index: 300;
	pointer-events: none;
	object-fit: cover;
	border-radius: 2px;
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.35), 0 18px 30px -12px rgba(0, 0, 0, 0.6);
}

/* ---------- Annotations: pins and leader lines ---------- */

.qc-pin {
	position: absolute;
	left: var(--x);
	top: var(--y);
	z-index: 4;
	display: flex;
	align-items: center;
	color: var(--white);
	text-decoration: none;
	transform: translate(-7px, -7px);
}
.qc-pin__dot {
	flex: none;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--white) 0 3px, transparent 3.5px);
	box-shadow: inset 0 0 0 1.5px var(--white), 0 0 12px 2px rgba(235, 202, 180, 0.7);
}
.qc-pin__line { width: clamp(40px, 6vw, 90px); height: 1px; background: var(--white); transform-origin: left; }
.qc-pin__label {
	padding: 0.45rem 0.75rem;
	border-radius: 999px;
	background: rgba(51, 32, 27, 0.62);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
	font: 600 0.85rem/1.1 var(--f-text);
	white-space: nowrap;
}
.qc-pin:hover .qc-pin__label { background: var(--white); color: var(--ink); }

.qc-note { display: flex; align-items: center; gap: 0.6rem; font: 600 0.85rem/1.2 var(--f-text); }
.qc-note__line { width: 56px; height: 1px; background: currentColor; transform-origin: right; }
.qc-note a { text-decoration: none; }
.qc-note a:hover { text-decoration: underline; }

/* ---------- Rails ---------- */

.qc-rail {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: clamp(220px, 20vw, 300px);
	gap: clamp(1.5rem, 3vw, 2.75rem);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--gutter);
	padding: 1.5rem var(--gutter) 2rem;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}
.qc-rail > * { scroll-snap-align: start; }
.qc-rail:focus-visible { outline-offset: -4px; }
@media (max-width: 700px) { .qc-rail { grid-auto-columns: 62vw; } }

/* ==========================================================================
   Motion primitives
   ========================================================================== */

/* CUT on images: a diagonal laser line (the slash through the logo's Q) uncovers the photo. */
.qc-motion [data-cut].is-cutting > .qc-img,
.qc-motion [data-cut].is-cutting > .qc-piece__photo,
.qc-motion [data-reveal="cut"]:not(.is-done) > .qc-piece__photo {
	clip-path: polygon(0 0, var(--cut) 0, calc(var(--cut) - 30%) 100%, 0 100%);
}
.qc-motion [data-reveal="cut"]:not(.is-in):not(.is-done) { --cut: 0%; }
.qc-motion [data-reveal="cut"]:not(.is-in):not(.is-done) > .qc-glass,
.qc-motion [data-reveal="cut"]:not(.is-in):not(.is-done) > .qc-bolts { opacity: 0; }
.qc-motion [data-cut].is-cutting,
.qc-motion [data-reveal="cut"].is-in { animation: qc-cut var(--t-slow) var(--ease-cut) var(--d, 0ms) both; }
.qc-motion [data-cut].is-cutting::after,
.qc-motion [data-reveal="cut"].is-in:not(.is-done)::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 5;
	pointer-events: none;
	background: linear-gradient(180deg, #fff, var(--edge));
	clip-path: polygon(calc(var(--cut) - 0.8%) 0, var(--cut) 0, calc(var(--cut) - 30%) 100%, calc(var(--cut) - 30.8%) 100%);
	filter: drop-shadow(0 0 6px var(--edge));
	animation: qc-cut-line var(--t-slow) var(--ease-cut) var(--d, 0ms) both;
}
@keyframes qc-cut { from { --cut: 0%; } to { --cut: 130%; } }
@keyframes qc-cut-line {
	0% { --cut: 0%; opacity: 1; }
	85% { opacity: 1; }
	100% { --cut: 130%; opacity: 0; }
}

/* MOUNT: a panel drops onto its bolts, overshoots a hair, and seats; the bolts twist home. */
.qc-motion .is-mounting .qc-piece__mount,
.qc-motion .qc-piece.is-mounting .qc-piece__mount {
	animation: qc-mount 760ms var(--ease-mount) calc(var(--j, 0) * 70ms) both;
}
.qc-motion .is-mounting .qc-bolts i,
.qc-motion .qc-piece.is-mounting .qc-bolts i {
	animation: qc-bolt 520ms var(--ease-out) calc(var(--j, 0) * 70ms + 380ms) both;
}
.qc-motion .is-mounting .qc-piece__tag,
.qc-motion .qc-piece.is-mounting .qc-piece__tag,
.qc-motion .qc-piece.is-mounting .qc-add { animation: qc-fade 400ms var(--ease-out) calc(var(--j, 0) * 70ms + 300ms) both; }
.qc-motion .qc-piece.is-unmounting { animation: qc-unmount 260ms var(--ease-cut) both; }

@keyframes qc-mount {
	0% { opacity: 0; transform: translate(0, -26px) rotate(-1.4deg) scale(1.02); box-shadow: 30px 50px 60px -20px rgba(0, 0, 0, 0.3); }
	60% { opacity: 1; }
	100% { opacity: 1; }
}
@keyframes qc-bolt {
	from { opacity: 0; transform: rotate(-150deg) scale(1.7); }
	to { opacity: 1; transform: none; }
}
@keyframes qc-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes qc-unmount {
	to { opacity: 0; transform: translateY(-14px) scale(0.98); }
}

/* ETCH: fresh marks glow hot, then cool into frost. */
.qc-ch { transition: color 800ms var(--ease-out), text-shadow 800ms var(--ease-out); }
.qc-ch.is-hot {
	color: #fff !important;
	text-shadow: 0 0 3px #fff, 0 0 12px var(--edge), 0 0 26px var(--edge) !important;
	transition: none;
}

/* Pieces further down the wall wait, then MOUNT as they arrive. */
.qc-motion .qc-piece.qc-await .qc-piece__mount,
.qc-motion .qc-piece.qc-await .qc-piece__tag,
.qc-motion .qc-piece.qc-await .qc-add { opacity: 0; }

/* On light surfaces the focus ring is espresso; champagne would vanish against cream. */
[data-surface="paper"] .qc-piece__link:focus-visible .qc-piece__mount,
[data-surface="sand"] .qc-piece__link:focus-visible .qc-piece__mount { outline-color: var(--espresso); }