/*
 * First-person explore table - front page entrance.
 *
 * Every selector is scoped under .tta-xp so nothing here can reach the shell, the
 * reading groups, or the older .tta-stage / .tta-btn / .tta-skip / .tta-title rules that
 * site.css and front-page.css still own for the rest of the site.
 *
 * CSS only carries layout, opacity and the movement of real raster layers. No shape is
 * drawn here: the door, the cups and the card are photographs with their own alpha.
 */

.tta-xp {
	--tta-xp-ink: #f7f5ef;
	--tta-xp-paper-ink: #241f19;
	--tta-xp-accent: #0d8359;
	--tta-xp-accent-ink: #ffffff;
	--tta-xp-focus: #7fd4b0;
	--tta-xp-deck: 7.25rem;
	--tta-xp-chrome: 4rem;
	--tta-xp-door-ms: 760ms;
	--tta-xp-flip-ms: 460ms;
	position: relative;
	color: var(--tta-xp-ink);
	line-height: 1.6;
}

.tta-xp *,
.tta-xp *::before,
.tta-xp *::after {
	box-sizing: border-box;
}

/* Hidden and inert must win over every scoped rule below, and neither may be reached. */
.tta-xp [hidden],
.tta-xp [hidden] * {
	display: none !important;
}

.tta-xp [inert],
.tta-xp [inert] * {
	pointer-events: none;
}

/* ---------- stage ---------- */

/*
 * The stage leaves the real page chrome alone: the header stays in flow above it and the
 * fixed small-screen quiz bar keeps its reserved strip, so --tta-xp-chrome is subtracted
 * from the viewport rather than covering either of them. The script replaces the value
 * with the measured one; this default is the fallback before it runs.
 */
.tta-xp-stage {
	position: relative;
	width: 100%;
	height: calc(100vh - var(--tta-xp-chrome));
	height: calc(100svh - var(--tta-xp-chrome));
	min-height: 26rem;
	overflow: hidden;
	overflow: clip;
	background: #0c0a08;
}

.tta-xp-world {
	position: absolute;
	inset: 0;
	z-index: 1;
	transform: translate3d(0, 0, 0);
	will-change: transform;
}

.tta-xp-scenery {
	position: absolute;
	inset: 0;
	transform-origin: 58% 62%;
}

.tta-xp-layer {
	position: absolute;
	inset: 0;
}

.tta-xp-layer picture,
.tta-xp-layer img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.tta-xp-layer--response {
	z-index: 1;
}

/* ---------- doorway ---------- */

.tta-xp-doorway {
	position: absolute;
	inset: 0;
	z-index: 5;
	perspective: 1600px;
	perspective-origin: 22% 50%;
	opacity: 1;
	transition: opacity 260ms linear;
}

.tta-xp-void {
	position: absolute;
	inset: 0;
	background: #06090a;
	transition: opacity var(--tta-xp-door-ms) ease-out;
}

.tta-xp-hinge {
	position: absolute;
	inset: 0;
	transform-origin: left center;
	transform: rotateY(0deg);
	transition: transform var(--tta-xp-door-ms) cubic-bezier(0.36, 0.66, 0.24, 1);
	backface-visibility: hidden;
}

.tta-xp-door {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: left center;
	filter: drop-shadow(24px 0 44px rgba(0, 0, 0, 0.65));
}

.tta-xp-stage:not([data-state="door-closed"]) .tta-xp-doorway {
	opacity: 0;
	pointer-events: none;
	transition-delay: var(--tta-xp-door-ms);
}

.tta-xp-stage:not([data-state="door-closed"]) .tta-xp-void {
	opacity: 0;
}

.tta-xp-stage:not([data-state="door-closed"]) .tta-xp-hinge {
	transform: rotateY(-104deg);
}

/* ---------- props: one element per object, moved between named places ---------- */

.tta-xp-props {
	position: absolute;
	inset: 0;
	z-index: 2;
}

.tta-xp-prop {
	position: absolute;
	transform-origin: 0 0;
	z-index: 2;
}

.tta-xp-prop-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.5));
}

.tta-xp-prop--cup .tta-xp-prop-img {
	position: absolute;
	inset: 0;
}

.tta-xp-hit {
	position: absolute;
	inset: -0.35rem;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 0.6rem;
	background: transparent;
	color: var(--tta-xp-ink);
	font: inherit;
	cursor: pointer;
	z-index: 2;
}

.tta-xp-hit[disabled] {
	cursor: default;
}

.tta-xp-tag {
	position: absolute;
	left: 50%;
	top: calc(100% + 0.3rem);
	transform: translateX(-50%);
	padding: 0.15rem 0.5rem;
	border-radius: 999px;
	background: rgba(6, 9, 10, 0.72);
	color: var(--tta-xp-ink);
	font-size: 0.75rem;
	white-space: nowrap;
	opacity: 0;
	transition: opacity 160ms linear;
	pointer-events: none;
}

.tta-xp-hit:hover .tta-xp-tag,
.tta-xp-hit:focus-visible .tta-xp-tag {
	opacity: 1;
}

.tta-xp-hit:focus-visible {
	border-color: var(--tta-xp-focus);
	outline: none;
}

.tta-xp-hit:not([disabled])::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 0.6rem;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
	opacity: 0;
	transition: opacity 160ms linear;
}

.tta-xp-hit:not([disabled]):hover::after,
.tta-xp-hit:not([disabled]):focus-visible::after {
	opacity: 1;
}

.tta-xp-prop[data-place="table"] { z-index: 2; }
.tta-xp-prop[data-place="rest"] { z-index: 4; }
.tta-xp-prop[data-place="hand"] { z-index: 4; }
.tta-xp-prop[data-place="pocket"] { z-index: 5; }
.tta-xp-prop[data-place="reading"] { z-index: 6; }

/* ---------- the card is a real paper surface; both faces use the same raster ---------- */

.tta-xp-prop--note {
	perspective: 1200px;
}

.tta-xp-flip {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	transform: rotateY(0deg);
	transition: transform var(--tta-xp-flip-ms) cubic-bezier(0.3, 0.7, 0.4, 1);
}

.tta-xp-prop--note.is-flipped .tta-xp-flip {
	transform: rotateY(180deg);
}

.tta-xp-face {
	position: absolute;
	inset: 0;
	backface-visibility: hidden;
	border-radius: 0.2rem;
	overflow: hidden;
}

.tta-xp-face--back {
	transform: rotateY(180deg);
}

.tta-xp-face .tta-xp-prop-img {
	position: absolute;
	inset: 0;
	object-fit: cover;
}

.tta-xp-copy {
	position: absolute;
	inset: 7% 8%;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.5rem;
	color: var(--tta-xp-paper-ink);
}

.tta-xp-prompt {
	margin: 0;
	font-size: clamp(0.9rem, 1.5vw, 1.05rem);
	font-weight: 600;
}

.tta-xp-choices {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.tta-xp-choice {
	min-height: 2.75rem;
	padding: 0.4rem 0.7rem;
	border: 0;
	border-radius: 0.35rem;
	background: var(--tta-xp-accent);
	color: var(--tta-xp-accent-ink);
	font: inherit;
	font-size: clamp(0.85rem, 1.4vw, 1rem);
	cursor: pointer;
}

.tta-xp-choice:focus-visible {
	outline: 3px solid #06382a;
	outline-offset: 2px;
}

.tta-xp-chosen {
	margin: 0;
	font-size: clamp(0.85rem, 1.4vw, 1rem);
}

/* ---------- top identity ---------- */

.tta-xp-topbar {
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 7;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 1rem;
	padding: 0.7rem 1rem 1.6rem;
	background: linear-gradient(to bottom, rgba(6, 9, 10, 0.72), rgba(6, 9, 10, 0));
	pointer-events: none;
}

.tta-xp-title {
	margin: 0;
	font-size: clamp(1rem, 1.9vw, 1.25rem);
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--tta-xp-ink);
}

.tta-xp-skip {
	font-size: 0.85rem;
	color: var(--tta-xp-focus);
	pointer-events: auto;
}

.tta-xp-skip:focus-visible {
	outline: 3px solid var(--tta-xp-focus);
	outline-offset: 2px;
}

/* ---------- bottom deck: subtitle plus action strip, always inside the stage ---------- */

.tta-xp-deck {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 7;
	min-height: var(--tta-xp-deck);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 0.6rem;
	padding: 2rem 1rem 1rem;
	background: linear-gradient(to top, rgba(6, 9, 10, 0.88) 55%, rgba(6, 9, 10, 0));
}

.tta-xp-line {
	margin: 0;
	max-width: 44rem;
	font-size: clamp(0.92rem, 1.7vw, 1.05rem);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
}

.tta-xp-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.tta-xp-act {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	min-width: 2.75rem;
	padding: 0.5rem 1rem;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 0.4rem;
	background: rgba(12, 18, 16, 0.7);
	color: var(--tta-xp-ink);
	font: inherit;
	font-size: 0.95rem;
	text-decoration: none;
	cursor: pointer;
}

.tta-xp-act--go {
	background: var(--tta-xp-accent);
	border-color: var(--tta-xp-accent);
	color: var(--tta-xp-accent-ink);
}

.tta-xp-act:focus-visible {
	outline: 3px solid var(--tta-xp-focus);
	outline-offset: 2px;
}

/* ---------- named object positions: desktop and tablet ---------- */

.tta-xp-prop--cup { aspect-ratio: 1 / 1; }
.tta-xp-prop--note { aspect-ratio: 7 / 5; }

.tta-xp-prop[data-object="tea"][data-place="table"] { left: 23%; top: 70%; width: 8.5%; }
.tta-xp-prop[data-object="water"][data-place="table"] { left: 37%; top: 71.5%; width: 7.5%; }
.tta-xp-prop[data-object="note"][data-place="table"] { left: 66%; top: 71%; width: 12%; }

.tta-xp-prop[data-place="hand"] { left: 8%; top: 62%; width: 12%; }
.tta-xp-prop[data-place="rest"] { left: 16%; top: 69%; width: 9.5%; }
.tta-xp-prop[data-place="reading"] { left: 35%; top: 40%; width: 30%; }
.tta-xp-prop[data-place="pocket"] { left: 88%; top: 66%; width: 6.5%; }

/* ---------- the takeaway, an ordinary reading block under the stage ---------- */

.tta-xp .tta-xp-takeaway {
	max-width: var(--tta-wide, 68rem);
	margin: 0 auto;
	padding: 1.5rem 1rem 0;
	color: #17231f;
}

.tta-xp .tta-xp-takeaway h2,
.tta-xp .tta-xp-takeaway p,
.tta-xp .tta-xp-takeaway dt,
.tta-xp .tta-xp-takeaway dd {
	color: #17231f;
}

.tta-xp .tta-xp-takeaway h2 {
	margin: 0 0 0.6rem;
}

.tta-xp .tta-xp-recap {
	margin: 0 0 0.75rem;
}

.tta-xp .tta-xp-summary {
	margin: 0 0 1rem;
}

.tta-xp .tta-xp-summary dt {
	margin-top: 0.6rem;
	font-weight: 600;
}

.tta-xp .tta-xp-summary dd {
	margin: 0.15rem 0 0;
}

.tta-xp .tta-xp-onward {
	margin: 0;
	padding-left: 1.25rem;
}

.tta-xp .tta-xp-onward li {
	margin: 0.4rem 0;
}

.tta-xp .tta-xp-onward a {
	color: #5b4033;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.tta-xp .tta-xp-onward a:hover,
.tta-xp .tta-xp-onward a:focus-visible {
	color: #14231f;
}

/* ---------- mobile ---------- */

@media (max-width: 767px) {
	.tta-xp {
		--tta-xp-deck: 8.75rem;
	}

	.tta-xp-scenery {
		transform-origin: 50% 58%;
	}

	.tta-xp-doorway {
		perspective-origin: 14% 50%;
	}

	.tta-xp-prop[data-object="tea"][data-place="table"] { left: 16%; top: 64%; width: 16%; }
	.tta-xp-prop[data-object="water"][data-place="table"] { left: 40%; top: 65%; width: 14%; }
	.tta-xp-prop[data-object="note"][data-place="table"] { left: 66%; top: 66%; width: 20%; }

	.tta-xp-prop[data-place="hand"] { left: 9%; top: 68%; width: 22%; }
	.tta-xp-prop[data-place="rest"] { left: 18%; top: 71%; width: 17%; }
	.tta-xp-prop[data-place="reading"] { left: 8%; top: 44%; width: 84%; }
	.tta-xp-prop[data-place="pocket"] { left: 82%; top: 70%; width: 14%; }

	.tta-xp-prop--note[data-place="reading"] { aspect-ratio: 5 / 4; }

	.tta-xp-copy {
		inset: 8% 9%;
		gap: 0.45rem;
	}

	.tta-xp-deck {
		padding-bottom: 1.15rem;
	}
}

@media (max-width: 360px) {
	.tta-xp-act {
		padding-inline: 0.7rem;
		font-size: 0.9rem;
	}

	.tta-xp-prop[data-place="reading"] { left: 6%; width: 88%; }
}

@media (min-width: 768px) and (max-width: 1023px) {
	.tta-xp-prop[data-object="tea"][data-place="table"] { left: 20%; top: 68%; width: 11%; }
	.tta-xp-prop[data-object="water"][data-place="table"] { left: 36%; top: 69%; width: 10%; }
	.tta-xp-prop[data-object="note"][data-place="table"] { left: 66%; top: 69%; width: 15%; }

	.tta-xp-prop[data-place="hand"] { left: 7%; top: 60%; width: 16%; }
	.tta-xp-prop[data-place="rest"] { left: 15%; top: 67%; width: 12%; }
	.tta-xp-prop[data-place="reading"] { left: 22%; top: 40%; width: 56%; }
	.tta-xp-prop[data-place="pocket"] { left: 85%; top: 66%; width: 9%; }
}

/* ---------- short viewports keep the subtitle and the action strip reachable ---------- */

@media (max-height: 620px) {
	.tta-xp {
		--tta-xp-deck: 6rem;
	}

	.tta-xp-deck {
		padding-top: 1.2rem;
	}

	.tta-xp-topbar {
		padding-bottom: 0.9rem;
	}

	/* Keep the flipped note and both choices above the action deck inside the clipped stage. */
	.tta-xp-prop[data-place="reading"] {
		top: 20%;
		left: 10%;
		width: 80%;
		aspect-ratio: auto;
		height: min(12.5rem, calc(100% - var(--tta-xp-deck) - 4.25rem));
		max-height: calc(100% - var(--tta-xp-deck) - 4.25rem);
	}

	.tta-xp-prop--note[data-place="reading"] {
		aspect-ratio: auto;
	}

	.tta-xp-prop[data-place="reading"] .tta-xp-copy {
		inset: 6% 7%;
		gap: 0.35rem;
		justify-content: flex-start;
	}

	.tta-xp-prop[data-place="reading"] .tta-xp-prompt {
		font-size: clamp(0.78rem, 2.8vw, 0.92rem);
		line-height: 1.35;
	}

	.tta-xp-prop[data-place="reading"] .tta-xp-choices {
		gap: 0.35rem;
	}
}

/* ---------- motion and pointer preferences ---------- */

@media (prefers-reduced-motion: reduce) {
	.tta-xp {
		--tta-xp-door-ms: 1ms;
		--tta-xp-flip-ms: 1ms;
	}

	.tta-xp-world,
	.tta-xp-doorway,
	.tta-xp-void,
	.tta-xp-hinge,
	.tta-xp-flip,
	.tta-xp-tag {
		transition: none;
	}

	.tta-xp-world {
		transform: none !important;
	}
}

.tta-xp-stage[data-pan-enabled="false"] .tta-xp-world {
	transform: none;
}

/* ---------- theme state overrides (polish-r23) ---------- */
/*
 * Astra ships an inline `button:focus` rule that sets an opaque global colour on
 * background and border. Its specificity (0,1,1) outranks the single-class hit
 * rules above, so a real pointer click on a scene object left a solid rectangle
 * covering the object. These rules are scoped to the interactive section only:
 * the hit target stays transparent in every state, and keyboard focus still gets
 * a visible ring instead of a filled box. No global theme setting is touched.
 */

.tta-xp .tta-xp-hit,
.tta-xp .tta-xp-hit:link,
.tta-xp .tta-xp-hit:visited,
.tta-xp .tta-xp-hit:hover,
.tta-xp .tta-xp-hit:focus,
.tta-xp .tta-xp-hit:focus-within,
.tta-xp .tta-xp-hit:active,
.tta-xp .tta-xp-hit[disabled],
.tta-xp .tta-xp-hit:focus:not(:focus-visible) {
	background: transparent;
	background-color: transparent;
	background-image: none;
	border-color: transparent;
	box-shadow: none;
	color: var(--tta-xp-ink);
	text-decoration: none;
	opacity: 1;
}

.tta-xp .tta-xp-hit:focus-visible {
	background-color: transparent;
	border-color: var(--tta-xp-focus);
	outline: 3px solid #ffffff;
	outline-offset: 3px;
	box-shadow: 0 0 0 6px rgba(6, 37, 27, 0.72);
}

/*
 * The skip-reading link inherited the theme link colour over a dark scene, which
 * root measured below the readable threshold. It becomes a light pill with dark
 * ink and a permanent underline, so it no longer depends on the theme palette.
 * A site-wide inline rule
 *   a:not(.wp-block-button__link):not(.elementor-button):not([role="button"]):not([class*="button"])
 * scores (0,4,1) and was still winning on the live page, so these selectors carry
 * the topbar and body.home to reach (0,4,2). Measured on the public page.
 */

body.home .tta-xp .tta-xp-topbar a.tta-xp-skip,
body.home .tta-xp .tta-xp-topbar a.tta-xp-skip:link,
body.home .tta-xp .tta-xp-topbar a.tta-xp-skip:visited,
body.home .tta-xp .tta-xp-topbar a.tta-xp-skip:hover,
body.home .tta-xp .tta-xp-topbar a.tta-xp-skip:focus,
body.home .tta-xp .tta-xp-topbar a.tta-xp-skip:active {
	color: #06251b;
	background-color: rgba(247, 245, 239, 0.95);
	border-radius: 0.45rem;
	padding: 0.2rem 0.55rem;
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

body.home .tta-xp .tta-xp-topbar a.tta-xp-skip:hover,
body.home .tta-xp .tta-xp-topbar a.tta-xp-skip:focus {
	background-color: #ffffff;
}

body.home .tta-xp .tta-xp-topbar a.tta-xp-skip:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 2px;
	box-shadow: 0 0 0 6px rgba(6, 37, 27, 0.72);
}

/*
 * The live footer is <footer class="tta-footer">, and its links are
 * a.menu-link inside .tta-footer-list. Lighthouse measured them at 2.91:1
 * (#0f766e on #1a2422), because a theme rule for
 * .menu-link wins over the footer list rule. These selectors are more specific
 * than either, and this file only loads on the front page, so nothing outside
 * the home page footer changes.
 * New ratio 13.31:1, with a permanent underline as a non-colour cue.
 */

body.home .tta-footer a,
body.home .tta-footer a.menu-link,
body.home .tta-footer .tta-footer-list a,
body.home .tta-footer .tta-footer-list a.menu-link {
	color: #dcefe8;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

body.home .tta-footer a:hover,
body.home .tta-footer a:focus,
body.home .tta-footer .tta-footer-list a:hover,
body.home .tta-footer .tta-footer-list a:focus,
body.home .tta-footer .tta-footer-list a.menu-link:hover,
body.home .tta-footer .tta-footer-list a.menu-link:focus {
	color: #ffffff;
}

body.home .tta-footer a:focus-visible,
body.home .tta-footer a.menu-link:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 2px;
}