/* ==========================================================================
   Optional 3D view of the home page.

   Loaded on the front page only. Everything below the switch styles applies
   only while <html> has .dp-view-3d, so the classic view is the theme exactly
   as it was. In 3D the blocks move into a left column of faceplates over a
   fixed three.js stage; on phones each block sits under a window onto it.
   ========================================================================== */

/* ---------- the switch in the header */
.dp-view-key {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	flex: 0 0 auto;
	margin-left: auto;
	white-space: nowrap;
}
.dp-view-key[hidden] { display: none !important; }
.dp-view-key + .sh-book { margin-left: 0 !important; }
.dp-view-key .led { width: 9px; height: 9px; flex-basis: 9px; }
.dp-view-key .led--off {
	--led: #8b8577;
	background: radial-gradient(circle at 35% 30%, #d9d4c8 0 14%, #8b8577 55%, #4c4a42 100%);
	box-shadow: 0 0 0 2px rgba(31, 32, 28, 0.25);
}
/* amber blink while the 3D scene downloads */
.dp-view-key.is-loading .led {
	--led: var(--cp-led-amber);
	background: radial-gradient(circle at 35% 30%, #fff 0 12%, var(--led) 45%, color-mix(in srgb, var(--led) 70%, var(--cp-bezel-lo)) 100%);
	animation: dp-led-blink 0.8s steps(2, jump-none) infinite;
}
@keyframes dp-led-blink { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .dp-view-key.is-loading .led { animation: none; } }
.dp-view-key[aria-pressed="true"] {
	transform: translateY(2px);
	box-shadow: inset 0 2px 4px rgba(31, 32, 28, 0.22), 0 1px 0 var(--cp-key-edge);
}
.dp-view-short { display: none; }
@media (max-width: 560px) {
	.dp-view-long { display: none; }
	.dp-view-short { display: inline; }
}

/* ---------- 3D view */
.dp-view-3d {
	--dp-edge: max(var(--cp-gutter), calc((100vw - var(--cp-max)) / 2));
	--dp-col: min(500px, 41vw);
	--dp-gap: 26vh;
}

.dp-stage { display: none; }
.dp-view-3d .dp-stage { display: block; position: fixed; inset: 0; z-index: 0; }
.dp-stage-canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 900ms var(--cp-ease); }
.dp-stage-ready .dp-stage-canvas { opacity: 1; }
.dp-view-3d.dp-stage-hover { cursor: pointer; }

.dp-zone-tags { position: fixed; inset: 0; pointer-events: none; opacity: 0; }
.dp-zone-tags .ztag {
	position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 0.4rem;
	padding: 0.3rem 0.55rem 0.28rem; border-radius: 6px; white-space: nowrap;
	font: 700 0.72rem/1 var(--cp-sans); font-stretch: 118%; letter-spacing: 0.08em; color: var(--cp-ink);
	background: linear-gradient(var(--cp-face-hi), var(--cp-face));
	box-shadow: 0 0 0 1px var(--cp-seam-strong), 0 6px 14px -6px rgba(31, 32, 28, 0.45);
	transition: background 200ms, color 200ms;
}
.dp-zone-tags .ztag b { font-weight: 850; }
.dp-zone-tags .ztag .led { width: 7px; height: 7px; flex-basis: 7px; }
.dp-zone-tags .ztag.on { background: var(--cp-bezel); color: #f3efe4; box-shadow: 0 0 0 1px var(--cp-bezel-lo), 0 8px 18px -6px rgba(31, 32, 28, 0.6); }

/* the page floats over the stage */
.dp-view-3d .wp-site-blocks { position: relative; z-index: 1; }
.dp-view-3d main,
.dp-view-3d .wp-block-post-content { background: transparent !important; }

/* a faceplate, for headers and blocks that have no card of their own */
.dp-view-3d :is(.sg-section-header, .fp-section-header, .dp-plain-block) {
	padding: 1.5rem 1.6rem 1.3rem;
	border-radius: var(--cp-radius);
	background: linear-gradient(var(--cp-face-hi), var(--cp-face) 40%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 0 0 1px var(--cp-seam),
		0 2px 4px rgba(31, 32, 28, 0.08), 0 24px 48px -24px rgba(31, 32, 28, 0.45);
}
.dp-view-3d :is(.service-card, .project-card, .lp-list, .cta-card) {
	box-shadow: inset 0 1px 0 var(--cp-shine), 0 0 0 1px var(--cp-seam),
		0 2px 4px rgba(31, 32, 28, 0.08), 0 24px 48px -24px rgba(31, 32, 28, 0.5) !important;
}
.dp-view-3d [data-dp-zone] { transition: transform 220ms var(--cp-ease); }
.dp-view-3d [data-dp-zone]:is(:hover, :focus-within) { transform: translateY(-2px); }

/* hero: the offer on the panel, the keypad on the right */
.dp-view-3d .hero-background {
	min-height: min(100svh, 980px) !important;
	display: grid;
	align-content: center;
}
.dp-view-3d .hero-inner {
	max-width: min(620px, 47vw);
	margin-left: calc(var(--dp-edge) - var(--cp-gutter));
}
.dp-view-3d .hero-bezel { padding: 0; border-radius: 0; background: none; box-shadow: none; }
.dp-view-3d .hero-lcd { display: block; min-height: 0; overflow: visible; background: none !important; box-shadow: none !important; }
.dp-view-3d .hero-lcd::before,
.dp-view-3d .hero-lcd::after { display: none !important; }
.dp-view-3d :is(.hero-rain, .hero-motion-toggle, .hero-hold-indicator, .hero-role) { display: none !important; }
.dp-view-3d .hero-lcd-content { padding: 0; }
.dp-view-3d .hero-title {
	font-family: var(--cp-sans) !important;
	font-size: clamp(2.7rem, 5.9vw, 5.3rem);
	font-weight: 820;
	font-stretch: 112%;
	line-height: 0.96;
	letter-spacing: -0.02em;
	text-transform: none;
	color: var(--cp-ink);
	max-width: 11ch;
}
.dp-view-3d .hero-signature { color: var(--cp-ink); }
.dp-view-3d .hero-console { grid-template-columns: minmax(0, 1fr); }
.dp-view-3d .hero-buttons { justify-content: flex-start; }
.dp-hint { display: none; }
.dp-view-3d .dp-hint { display: flex; align-items: center; gap: 0.6rem; margin: 0; color: var(--cp-ink-2); font-size: 0.875rem; }
.dp-kbd {
	display: inline-grid; place-items: center; min-width: 2.6rem; height: 1.7rem; padding: 0 0.4rem; border-radius: 6px;
	font: 750 0.7rem/1 var(--cp-sans); font-stretch: 118%; letter-spacing: 0.06em; color: var(--cp-ink);
	background: linear-gradient(var(--cp-key-face), var(--cp-key-face-lo)); box-shadow: 0 0 0 1px var(--cp-key-edge), 0 2px 0 var(--cp-key-edge);
}

/* sections: one column on the left, a scroll moment per card */
.dp-view-3d :is(.services-grid-section, .featured-projects-section, .latest-posts-section, .cta-section) {
	padding: 12vh var(--cp-gutter) 12vh var(--dp-edge) !important;
	background: transparent !important;
	box-shadow: none !important;
}
.dp-view-3d :is(.sg-inner, .fp-inner, .lp-inner) { max-width: var(--dp-col); margin-left: 0; }
.dp-view-3d :is(.sg-section-header, .fp-section-header) { margin-bottom: var(--dp-gap); }
.dp-view-3d :is(.sg-grid, .fp-grid) { display: flex !important; flex-direction: column; gap: var(--dp-gap) !important; }
.dp-view-3d .cta-section { justify-content: flex-start; }
.dp-view-3d .cta-section .cta-card {
	max-width: var(--dp-col);
	display: flex !important;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem !important;
	text-align: left;
}
.dp-view-3d .cta-card > * { grid-column: auto !important; grid-row: auto !important; max-width: 100%; }
.dp-view-3d .cta-card :is(.cta-heading, .cta-description) { text-align: left !important; }
.dp-view-3d .cta-card .cta-heading { font-size: clamp(1.9rem, 3.2vw, 2.6rem); line-height: 1.05; }
.dp-view-3d .dp-plain-block { width: var(--dp-col); max-width: calc(100% - var(--dp-edge)); margin: 12vh 0 12vh var(--dp-edge) !important; }

/* phones and small tablets: a window onto the stage above each block */
@media (max-width: 899px) {
	.dp-view-3d { --dp-col: 100%; --dp-edge: var(--cp-gutter); --dp-gap: 46svh; }
	.dp-view-3d .hero-background { min-height: 0 !important; padding-top: calc(var(--cp-header-h) + 50svh) !important; padding-bottom: 0 !important; align-content: start; }
	.dp-view-3d .hero-inner {
		max-width: none; margin: 0; padding: 1.4rem; border-radius: var(--cp-radius);
		background: linear-gradient(var(--cp-face-hi), var(--cp-face) 40%);
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 0 0 1px var(--cp-seam), 0 24px 48px -24px rgba(31, 32, 28, 0.45);
	}
	.dp-view-3d .hero-title { font-size: clamp(2.3rem, 10.5vw, 3.4rem); }
	.dp-view-3d .dp-hint { display: none; }
	.dp-view-3d :is(.services-grid-section, .featured-projects-section, .latest-posts-section, .cta-section) { padding: 46svh var(--cp-gutter) 0 !important; }
	.dp-view-3d .dp-plain-block { width: auto; max-width: none; margin: 46svh var(--cp-gutter) 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
	.dp-stage-canvas, .dp-zone-tags .ztag, .dp-view-3d [data-dp-zone] { transition: none; }
}