/*
 * Taiwan Beauty Insider - first-person consultation-preparation desk.
 *
 * Every selector is scoped under .tbi-xp so nothing here can reach the site header, the
 * footer, the reading chapters, or the .tbi-btn / .tbi-actions / .tbi-details rules that
 * tbi-home.css still owns for the rest of the page and 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 mirror, the folder, the note and the notebook are all
 * photographs with their own alpha.
 */

.tbi-xp {
	--tbi-xp-ink: #f7f2ea;
	--tbi-xp-paper-ink: #26201b;
	--tbi-xp-accent: #b0523a;
	--tbi-xp-accent-ink: #ffffff;
	--tbi-xp-focus: #f0b8a4;
	--tbi-xp-deck: 7.25rem;
	--tbi-xp-chrome: 4rem;
	--tbi-xp-door-ms: 760ms;
	--tbi-xp-flip-ms: 460ms;
	position: relative;
	color: var(--tbi-xp-ink);
	line-height: 1.6;
}

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

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

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

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

/*
 * The stage leaves the real page chrome alone: the site header stays in flow above it,
 * so --tbi-xp-chrome is subtracted from the viewport rather than covering it. The script
 * replaces the value with the measured one; this default is the fallback before it runs.
 */
.tbi-xp-stage {
	position: relative;
	width: 100%;
	height: calc(100vh - var(--tbi-xp-chrome));
	height: calc(100svh - var(--tbi-xp-chrome));
	min-height: 26rem;
	overflow: hidden;
	overflow: clip;
	background: #100c0a;
}

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

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

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

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

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

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

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

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

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

.tbi-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.6));
}

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

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

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

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

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

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

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

.tbi-xp-prop--mirror .tbi-xp-prop-img,
.tbi-xp-prop--folder .tbi-xp-prop-img,
.tbi-xp-prop--book .tbi-xp-prop-img {
	position: absolute;
	inset: 0;
}

.tbi-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(--tbi-xp-ink);
	font: inherit;
	cursor: pointer;
	z-index: 2;
}

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

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

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

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

.tbi-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.24);
	opacity: 0;
	transition: opacity 160ms linear;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.tbi-xp-choice:focus-visible {
	outline: 3px solid #4a1c10;
	outline-offset: 2px;
}

.tbi-xp-chosen {
	margin: 0;
	font-size: clamp(0.82rem, 1.35vw, 0.98rem);
}

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

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

.tbi-xp-brand {
	margin: 0;
	flex: 0 0 100%;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	color: var(--tbi-xp-focus);
}

.tbi-xp-title {
	margin: 0;
	font-size: clamp(1.05rem, 2vw, 1.35rem);
	font-weight: 700;
	letter-spacing: 0.01em;
	color: var(--tbi-xp-ink);
}

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

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

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

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

.tbi-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);
}

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

.tbi-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(24, 16, 12, 0.72);
	color: var(--tbi-xp-ink);
	font: inherit;
	font-size: 0.95rem;
	text-decoration: none;
	cursor: pointer;
}

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

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

/* ---------- named object positions: desktop and tablet ----------
 *
 * The room places the companion's face near 58% / 29% and the writing desk begins about
 * 75% of the frame height, so the two objects sit on the desk below her and above the
 * action strip. These are this room's own anchors, not the tea-table values.
 */

.tbi-xp-prop--mirror { aspect-ratio: 1 / 1; }
.tbi-xp-prop--folder { aspect-ratio: 1 / 1; }
.tbi-xp-prop--note { aspect-ratio: 7 / 5; }
.tbi-xp-prop--book { aspect-ratio: 3 / 2; }

.tbi-xp-prop[data-object="mirror"][data-place="table"] { left: 25%; top: 72%; width: 8%; }
.tbi-xp-prop[data-object="folder"][data-place="table"] { left: 38.5%; top: 73%; width: 9%; }
.tbi-xp-prop[data-object="note"][data-place="table"] { left: 65%; top: 73%; width: 11.5%; }

.tbi-xp-prop[data-place="hand"] { left: 7%; top: 64%; width: 12%; }
.tbi-xp-prop[data-place="rest"] { left: 17%; top: 71%; width: 9%; }
.tbi-xp-prop[data-place="reading"] { left: 34%; top: 36%; width: 31%; }

.tbi-xp-prop--book[data-place="near"] { left: 60%; top: 66%; width: 21%; }
/* The same note lands on the notebook's open page, inside the book's own footprint. */
.tbi-xp-prop[data-object="note"][data-place="book"] { left: 62%; top: 69%; width: 13%; }

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

.tbi-xp .tbi-xp-takeaway {
	max-width: 68rem;
	margin: 0 auto;
	padding: 1.5rem 1rem 0;
	color: #2b211c;
}

.tbi-xp .tbi-xp-takeaway h2,
.tbi-xp .tbi-xp-takeaway p,
.tbi-xp .tbi-xp-takeaway dt,
.tbi-xp .tbi-xp-takeaway dd {
	color: #2b211c;
}

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

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

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

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

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

.tbi-xp .tbi-xp-caveat {
	margin: 0 0 1rem;
	font-size: 0.9rem;
}

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

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

.tbi-xp .tbi-xp-onward a {
	color: #a04834;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.tbi-xp .tbi-xp-onward a:hover,
.tbi-xp .tbi-xp-onward a:focus-visible {
	color: #2b211c;
}

/* ---------- mobile ----------
 *
 * The portrait room puts the face near 50% / 30% and her hands near 60%, and the desk
 * runs from 60% to the bottom edge. The props therefore stay in the 62%-78% band, clear
 * of both the face above and the action strip below, and every hit box stays 44px.
 */

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

	.tbi-xp-scenery {
		transform-origin: 50% 56%;
	}

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

	.tbi-xp-prop[data-object="mirror"][data-place="table"] { left: 13%; top: 63%; width: 17%; }
	.tbi-xp-prop[data-object="folder"][data-place="table"] { left: 38%; top: 64%; width: 18%; }
	.tbi-xp-prop[data-object="note"][data-place="table"] { left: 66%; top: 64.5%; width: 21%; }

	.tbi-xp-prop[data-place="hand"] { left: 8%; top: 70%; width: 23%; }
	.tbi-xp-prop[data-place="rest"] { left: 17%; top: 73%; width: 17%; }
	.tbi-xp-prop[data-place="reading"] { left: 8%; top: 40%; width: 84%; }

	.tbi-xp-prop--book[data-place="near"] { left: 52%; top: 68%; width: 40%; }
	.tbi-xp-prop[data-object="note"][data-place="book"] { left: 56%; top: 72%; width: 26%; }

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

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

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

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

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

@media (min-width: 768px) and (max-width: 1023px) {
	.tbi-xp-prop[data-object="mirror"][data-place="table"] { left: 22%; top: 70%; width: 10.5%; }
	.tbi-xp-prop[data-object="folder"][data-place="table"] { left: 37%; top: 71%; width: 11.5%; }
	.tbi-xp-prop[data-object="note"][data-place="table"] { left: 65%; top: 71%; width: 14.5%; }

	.tbi-xp-prop[data-place="hand"] { left: 6%; top: 62%; width: 16%; }
	.tbi-xp-prop[data-place="rest"] { left: 16%; top: 69%; width: 12%; }
	.tbi-xp-prop[data-place="reading"] { left: 21%; top: 36%; width: 58%; }

	.tbi-xp-prop--book[data-place="near"] { left: 58%; top: 64%; width: 27%; }
	.tbi-xp-prop[data-object="note"][data-place="book"] { left: 61%; top: 67.5%; width: 17%; }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.tbi-xp-stage[data-pan-enabled="false"] .tbi-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.
 */

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

.tbi-xp .tbi-xp-hit:focus-visible {
	background-color: transparent;
	border-color: var(--tbi-xp-focus);
	outline: 3px solid #ffffff;
	outline-offset: 3px;
	box-shadow: 0 0 0 6px rgba(43, 17, 9, 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 .tbi-xp .tbi-xp-topbar a.tbi-xp-skip,
body.home .tbi-xp .tbi-xp-topbar a.tbi-xp-skip:link,
body.home .tbi-xp .tbi-xp-topbar a.tbi-xp-skip:visited,
body.home .tbi-xp .tbi-xp-topbar a.tbi-xp-skip:hover,
body.home .tbi-xp .tbi-xp-topbar a.tbi-xp-skip:focus,
body.home .tbi-xp .tbi-xp-topbar a.tbi-xp-skip:active {
	color: #2b1109;
	background-color: rgba(247, 242, 234, 0.95);
	border-radius: 0.45rem;
	padding: 0.2rem 0.55rem;
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

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

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