/**
 * Aconite Thrill — 3D clock object.
 *
 * Six photographed faces assembled into a real CSS 3D box.
 * No libraries. Geometry lives in the custom properties below.
 *
 * @package aconitethrill
 */

/* ---------------------------------------------------------------
   1. Geometry and palette
   --------------------------------------------------------------- */

.at-clock {
	/* Box proportions, derived from Alex's orthographic face set.
	   --at-u is the height; width and depth are multiples of it.
	   Ratios measured from the source renders:
	     width  / height = 2.383  (front 2.458, back 2.308)
	     depth  / height = 1.240  (left 1.251, right 1.230)
	   Change --at-ratio-d alone to make the object shallower or deeper. */
	--at-ratio-w: 2.383;
	--at-ratio-d: 1.240;

	/* A hair of overlap between faces, so the moulded edges meet. */
	--at-fit: 1.012;

	--at-u: clamp(88px, min(35vw, 40vh), 460px);
	--at-w: calc(var(--at-u) * var(--at-ratio-w));
	--at-h: var(--at-u);
	--at-d: calc(var(--at-u) * var(--at-ratio-d));

	--at-paper: #efede8;
	--at-ink: #14100f;
	--at-lcd: #eeede7;

	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	min-height: 100svh;
	background: var(--at-paper);
	overflow: hidden;
	touch-action: none;
	perspective: 2400px;
	perspective-origin: 50% 46%;
}

/* ---------------------------------------------------------------
   2. The box
   --------------------------------------------------------------- */

.at-clock__stage {
	position: relative;
	width: var(--at-w);
	height: var(--at-h);
	transform-style: preserve-3d;
	cursor: grab;
}

.at-clock__stage:active {
	cursor: grabbing;
}

.at-clock__box {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	transform:
		rotateX(var(--at-pitch, 0deg))
		rotateY(var(--at-yaw, 0deg));
	will-change: transform;
}

.at-face {
	position: absolute;
	left: 50%;
	top: 50%;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	backface-visibility: hidden;
	transform-style: preserve-3d;
}

/* The faked directional light. JS drives --at-bright per face from the
   angle between that face's normal and a fixed light, so highlights shift
   as the object turns. Without it the box reads as flat card; with it, it
   reads as an object.

   A filter is used rather than a black overlay because it respects the
   image's alpha, so the rounded corners and the space around the object
   stay properly transparent. */
.at-face {
	filter: brightness(var(--at-bright, 1));
}

.at-face--front,
.at-face--back {
	width: var(--at-w);
	height: var(--at-h);
	margin-left: calc(var(--at-w) / -2);
	margin-top: calc(var(--at-h) / -2);
}

.at-face--left,
.at-face--right {
	width: var(--at-d);
	height: var(--at-h);
	margin-left: calc(var(--at-d) / -2);
	margin-top: calc(var(--at-h) / -2);
}

.at-face--top,
.at-face--bottom {
	width: var(--at-w);
	height: var(--at-d);
	margin-left: calc(var(--at-w) / -2);
	margin-top: calc(var(--at-d) / -2);
}

.at-face--front  { transform: translateZ(calc(var(--at-d) / 2)) scale(var(--at-fit)); }
.at-face--back   { transform: rotateY(180deg) translateZ(calc(var(--at-d) / 2)) scale(var(--at-fit)); }
.at-face--right  { transform: rotateY(90deg)  translateZ(calc(var(--at-w) / 2)) scale(var(--at-fit)); }
.at-face--left   { transform: rotateY(-90deg) translateZ(calc(var(--at-w) / 2)) scale(var(--at-fit)); }
.at-face--top    { transform: rotateX(90deg)  translateZ(calc(var(--at-h) / 2)) scale(var(--at-fit)); }
.at-face--bottom { transform: rotateX(-90deg) translateZ(calc(var(--at-h) / 2)) scale(var(--at-fit)); }

/* ---------------------------------------------------------------
   3. Contact shadow
   --------------------------------------------------------------- */

.at-clock__shadow {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 0;
	width: calc(var(--at-w) * 0.98);
	height: calc(var(--at-d) * 0.40);
	margin-left: calc(var(--at-w) * -0.49);
	margin-top: calc(var(--at-h) * 0.40);
	border-radius: 50%;
	background: radial-gradient(ellipse at center, rgba(20, 16, 15, 0.38), rgba(20, 16, 15, 0) 70%);
	filter: blur(16px);
	transform:
		translate3d(var(--at-shadow-x, 0px), var(--at-shadow-y, 0px), 0)
		scale(var(--at-shadow-sx, 1), var(--at-shadow-sy, 1));
	opacity: var(--at-shadow-o, 0.9);
	pointer-events: none;
}

/* ---------------------------------------------------------------
   4. Live display, sitting on the front face
   --------------------------------------------------------------- */

.at-screen {
	position: absolute;
	/* LCD window, measured from the front render (1200 x 488). */
	left: 8.75%;
	top: 19.26%;
	width: 70.17%;
	height: 46.93%;
	pointer-events: none;
	transform: translateZ(0.4px);
	container-type: size;
}

.at-screen__group {
	position: absolute;
	display: flex;
	align-items: stretch;
	filter: drop-shadow(0 0 calc(var(--at-u) * 0.006) rgba(238, 237, 231, 0.28));
}

.at-screen__group--hours {
	left: 12.0%;
	top: 20.1%;
	width: 56.2%;
	height: 58.1%;
	gap: 1.5%;
}

.at-screen__group--sub {
	left: 70.3%;
	top: 38.9%;
	width: 19.5%;
	height: 30.1%;
	gap: 3%;
}

.at-screen__label {
	position: absolute;
	color: var(--at-lcd);
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: max(4px, 6cqh);
	line-height: 1;
	letter-spacing: 0.01em;
	transform: scaleX(0.92);
	transform-origin: left center;
	white-space: nowrap;
	opacity: 0.92;
}

.at-screen__label--hours   { left: 71.4%; top: 20.5%; }
.at-screen__label--minutes { left: 70.4%; top: 72.5%; }
.at-screen__label--seconds { left: 83.2%; top: 72.5%; }

/* Seven segment digits */
.at-digit {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	height: 100%;
}

.at-seg {
	position: absolute;
	display: block;
	background: var(--at-lcd);
	opacity: 0.035;
	transition: opacity 60ms linear;
}

.at-seg.is-on { opacity: 1; }

.at-seg--a,
.at-seg--g,
.at-seg--d {
	left: 17%;
	width: 66%;
	height: 9%;
	clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%);
}

.at-seg--a { top: 0; }
.at-seg--g { top: 45.5%; }
.at-seg--d { bottom: 0; }

.at-seg--b,
.at-seg--c,
.at-seg--e,
.at-seg--f {
	width: 13%;
	height: 43%;
	clip-path: polygon(50% 0, 100% 10%, 100% 90%, 50% 100%, 0 90%, 0 10%);
}

.at-seg--b { right: 3%; top: 4%; }
.at-seg--c { right: 3%; bottom: 4%; }
.at-seg--f { left: 3%; top: 4%; }
.at-seg--e { left: 3%; bottom: 4%; }

.at-colon {
	flex: 0 0 8%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 34%;
	height: 78%;
	align-self: center;
}

.at-colon i {
	width: 62%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--at-lcd);
}

/* A brief wash across the glass when the button is pressed. */
.at-screen__flash {
	position: absolute;
	inset: 0;
	background: rgba(238, 237, 231, 0.16);
	opacity: 0;
	pointer-events: none;
}

.at-screen__flash.is-lit {
	animation: at-flash 260ms ease-out;
}

@keyframes at-flash {
	0%   { opacity: 1; }
	100% { opacity: 0; }
}

/* ---------------------------------------------------------------
   5. Hotspots over the real controls
   --------------------------------------------------------------- */

.at-hotspot {
	position: absolute;
	appearance: none;
	border: 0;
	padding: 0;
	background: transparent;
	cursor: pointer;
	transform: translateZ(0.6px);
	border-radius: 4px;
}

.at-hotspot:focus-visible {
	outline: 2px solid rgba(238, 237, 231, 0.9);
	outline-offset: 3px;
}

/* The push button, right of the display. */
.at-hotspot--button {
	left: 83.67%;
	top: 43.65%;
	width: 10.0%;
	height: 11.07%;
}

/* The little triangle beneath it. Padded out to stay tappable. */
.at-hotspot--mark {
	left: 90.5%;
	top: 57.5%;
	width: 5.5%;
	height: 10.0%;
}

/* The starburst dial on the brand plate. Doubles as the sound switch. */
.at-hotspot--dial {
	left: 89.5%;
	top: 76.0%;
	width: 6.5%;
	height: 14.0%;
	border-radius: 50%;
}

/* Presses nudge the whole box back a touch, like the case takes the load. */
.at-clock__box.is-pressed {
	--at-press: 1;
}

.at-hotspot.is-pressed {
	transform: translateZ(-1.4px) scale(0.97);
}

.at-hotspot__ring {
	position: absolute;
	inset: -14%;
	border-radius: inherit;
	border: 1px solid rgba(238, 237, 231, 0.55);
	opacity: 0;
	pointer-events: none;
}

.at-hotspot.is-pressed .at-hotspot__ring {
	animation: at-ring 420ms ease-out;
}

@keyframes at-ring {
	0%   { opacity: 0.8; transform: scale(0.7); }
	100% { opacity: 0;   transform: scale(1.45); }
}

/* ---------------------------------------------------------------
   6. Page furniture around the object
   --------------------------------------------------------------- */

.at-clock__caption {
	position: absolute;
	left: 50%;
	bottom: 12%;
	transform: translateX(-50%);
	text-align: center;
	color: var(--at-ink);
	font-family: "Courier New", Courier, monospace;
	pointer-events: none;
}

.at-clock__wordmark {
	margin: 0;
	font-size: clamp(10px, 1.05vw, 15px);
	font-weight: 400;
	letter-spacing: 0.42em;
	text-indent: 0.42em;
}

.at-clock__since {
	margin: 0.9em 0 0;
	font-size: clamp(8px, 0.78vw, 11px);
	letter-spacing: 0.34em;
	text-indent: 0.34em;
	opacity: 0.72;
}

.at-clock__rule {
	display: block;
	width: 22px;
	height: 1px;
	margin: 1.6em auto 0;
	background: currentColor;
	opacity: 0.45;
}

.at-clock__bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 1.1rem 1rem;
	background: var(--at-ink);
	text-align: center;
}

.at-clock__mail {
	color: #ddd;
	font-family: "Courier New", Courier, monospace;
	font-size: clamp(8px, 0.72vw, 12px);
	letter-spacing: 0.28em;
	text-indent: 0.28em;
	text-decoration: none;
	border-bottom: 1px solid #8a8a8a;
	padding-bottom: 0.35em;
	transition: color 180ms, border-color 180ms;
}

.at-clock__mail:hover,
.at-clock__mail:focus-visible {
	color: #fff;
	border-color: #fff;
}

/* Sound switch and the drag hint */
.at-clock__sound {
	position: absolute;
	top: 1.4rem;
	right: 1.6rem;
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	appearance: none;
	border: 1px solid rgba(20, 16, 15, 0.25);
	border-radius: 999px;
	background: transparent;
	padding: 0.5em 0.95em;
	color: var(--at-ink);
	font-family: "Courier New", Courier, monospace;
	font-size: clamp(8px, 0.68vw, 11px);
	letter-spacing: 0.2em;
	cursor: pointer;
	transition: background 180ms, border-color 180ms;
}

.at-clock__sound:hover {
	border-color: rgba(20, 16, 15, 0.55);
}

.at-clock__sound[aria-pressed="true"] {
	background: var(--at-ink);
	border-color: var(--at-ink);
	color: var(--at-paper);
}

.at-clock__hint {
	position: absolute;
	left: 50%;
	top: 1.6rem;
	transform: translateX(-50%);
	margin: 0;
	color: var(--at-ink);
	font-family: "Courier New", Courier, monospace;
	font-size: clamp(8px, 0.68vw, 11px);
	letter-spacing: 0.24em;
	opacity: 0.45;
	pointer-events: none;
	transition: opacity 500ms ease;
}

.at-clock__hint.is-hidden { opacity: 0; }

/* ---------------------------------------------------------------
   7. Sections below the hero. Empty today, ready for later.
   --------------------------------------------------------------- */

.at-sections:empty { display: none; }

.at-section {
	padding: clamp(3rem, 9vw, 8rem) clamp(1.2rem, 6vw, 6rem);
	background: var(--at-paper);
	color: var(--at-ink);
}

/* ---------------------------------------------------------------
   8. Accessibility
   --------------------------------------------------------------- */

.at-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.at-clock__box,
	.at-clock__shadow {
		transition: none !important;
	}

	.at-seg {
		transition: none;
	}

	.at-screen__flash.is-lit,
	.at-hotspot.is-pressed .at-hotspot__ring {
		animation: none;
	}
}

/* ---------------------------------------------------------------
   9. Clock page chrome
   The clock is the whole page today, so the scaffold header and footer
   step aside. Remove this block the moment real navigation arrives.
   --------------------------------------------------------------- */

body.at-clock-page .site-header,
body.at-clock-page .site-footer {
	display: none;
}

body.at-clock-page .site-main {
	margin: 0;
	padding: 0;
}

body.at-clock-page {
	background: var(--at-paper, #efede8);
}