/* ══════════════════════════════════════════════════════════════════════════
   THE THRESHOLD — enter through the eye
   A first-arrival gate (homepage, once per session). The Becoming mark BLOOMS —
   petals unfurl, the eye at the heart wakes and blinks, the room's sound-note
   shimmers into the lower-right — then the pupil opens and you pass through into
   the house.

   The mark reuses the veil's .bh-mark__* classes (styled by the-becoming.css);
   this file replicates the veil's dark colour treatment and drives the ceremony.
   Motion is transform/opacity ONLY (60fps, no layout). Progressive enhancement:
   the markup ships [hidden]; threshold.js reveals it only on first session visit.
   Reduced-motion → the mark is simply open, no bloom/blink/vibration.
   ═══════════════════════════════════════════════════════════════════════════ */

/* THE click-eater lesson (v3.14.6): a full-viewport fixed overlay MUST vanish
   from layout when dismissed, or it eats every click behind it. */
.bh-threshold[hidden] { display: none !important; }

/* While the gate is up, hold the page still beneath it. */
html.bh-threshold-lock, html.bh-threshold-lock body { overflow: hidden; }

.bh-threshold {
	position: fixed;
	inset: 0;
	z-index: 900;
	display: grid;
	place-items: center;
	/* Opaque from the FIRST painted frame (the veil-bleed lesson, v3.15.1). */
	background: radial-gradient(circle at 50% 46%, #17120c 0%, #0c0805 60%, #050302 100%);
	opacity: 1;
	overflow: hidden;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

/* ── The mark stage ───────────────────────────────────────────────────────*/
.bh-threshold__void {
	display: grid;
	place-items: center;
	width: min(72vmin, 460px);
	aspect-ratio: 1 / 1;
	pointer-events: none;
}
.bh-threshold__mark { width: 100%; height: 100%; display: grid; place-items: center; }
.bh-threshold__mark .bh-mark { width: 100%; height: 100%; overflow: visible; }

/* Dark colour treatment — identical to the veil map: luminous parchment lotus,
   gold moiré shimmer, a watchful gold-rimmed eye. (Mirrors petal.css §.bh-petal-nav.) */
.bh-threshold .bh-mark {
	--bh-mark-field:        transparent;
	--bh-mark-moire:        #d8c398;
	--bh-mark-stroke:       #F4ECD8;
	--bh-mark-eye-fill:     rgba(11, 9, 7, 0.62);
	--bh-mark-iris:         #d8c398;
	--bh-mark-pupil-fill:   #0b0907;
	--bh-mark-pupil-stroke: #d8c398;
	--bh-mark-gleam:        #fff5d8;
}
.bh-threshold .bh-mark__moire  { opacity: 0.6; }
.bh-threshold .bh-mark__vesica { stroke: #d8c398; }
.bh-threshold .bh-mark__gleam  { opacity: 0.95; }

/* ── The bloom — petals unfurl from a bud ──────────────────────────────────
   CSS carries the translate so scale/rotate compose about the flower's centre. */
.bh-threshold .bh-mark__primary,
.bh-threshold .bh-mark__moire {
	opacity: 0;
	transform: translate(160px, 160px) rotate(-16deg) scale(0.30);
	transition: transform 1250ms cubic-bezier(0.16, 1, 0.3, 1), opacity 900ms ease;
}
.bh-threshold .bh-mark__moire { transition-delay: 90ms; }   /* halo trails the lotus a breath */
.bh-threshold.is-awake .bh-mark__primary,
.bh-threshold.is-awake .bh-mark__moire {
	opacity: 1;
	transform: translate(160px, 160px) rotate(0deg) scale(1);
}

/* The eye wakes a moment after the petals part — opacity only, so threshold.js
   owns its transform for the blink (the SAME animator as the veil map). */
.bh-threshold .bh-mark__eye {
	opacity: 0;
	transition: opacity 760ms ease 560ms;
}
.bh-threshold.is-awake .bh-mark__eye { opacity: 1; }

/* Moiré breath, pupil cursor-follow and blink are driven by threshold.js on a
   phase-offset sine (identical to petal.js's veil animator) — no CSS animation
   here, so the two marks are true twins. Under reduced motion the JS never runs
   and the layers rest at their inline ±3° (matching the veil at rest). */

/* ── Passing through: the pupil dilates and we cross into the house ────────*/
.bh-threshold .bh-mark__pupil { transform-box: fill-box; transform-origin: center; transition: transform 780ms cubic-bezier(0.66, 0, 0.34, 1), r 220ms ease; }
.bh-threshold.is-passing { cursor: default; opacity: 0; transition: opacity 620ms ease 360ms; }
.bh-threshold.is-passing .bh-mark__pupil { transform: scale(42); }
.bh-threshold.is-passing .bh-mark__primary,
.bh-threshold.is-passing .bh-mark__moire,
.bh-threshold.is-passing .bh-mark__vesica,
.bh-threshold.is-passing .bh-mark__iris,
.bh-threshold.is-passing .bh-mark__gleam,
.bh-threshold.is-passing .bh-threshold__door { opacity: 0; }

/* ── The door: the semantic, operable heart ───────────────────────────────*/
.bh-threshold__door {
	position: absolute;
	left: 50%;
	bottom: clamp(9vh, 13vh, 18vh);
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.35rem;
	text-align: center;
	pointer-events: auto;
}
.bh-threshold__line {
	margin: 0;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: clamp(1.15rem, 3.4vw, 1.6rem);
	font-style: italic;
	letter-spacing: .01em;
	color: #e9ddc8;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 900ms ease 1050ms, transform 900ms ease 1050ms;
}
.bh-threshold.is-awake .bh-threshold__line { opacity: .92; transform: translateY(0); }

.bh-threshold__enter {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: .6em;
	padding: .72em 1.5em;
	font-family: 'Space Grotesk', system-ui, sans-serif;
	font-size: .82rem;
	font-weight: 500;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #f4e9d4;
	background: transparent;
	border: 1px solid rgba(200, 168, 130, 0.55);
	border-radius: 2px;
	cursor: pointer;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 900ms ease 1250ms, transform 900ms ease 1250ms,
	            border-color 240ms ease, background-color 240ms ease, color 240ms ease;
}
.bh-threshold.is-awake .bh-threshold__enter { opacity: 1; transform: translateY(0); }
.bh-threshold__enter:hover,
.bh-threshold__enter:focus-visible { border-color: #C8A882; background: rgba(200, 168, 130, 0.12); color: #fff; }
.bh-threshold__enter:focus-visible { outline: 2px solid #C8A882; outline-offset: 3px; }
.bh-threshold__enter-glyph { transition: transform 240ms ease; }
.bh-threshold__enter:hover .bh-threshold__enter-glyph { transform: translateX(3px); }

/* ── The room's voice — the house's OWN frequency toggle IS the note ───────
   While the gate is up we hold the site's .bh-sound-toggle hidden, then let it
   shimmer into the lower-right at the reveal beat. When the gate lifts, the lock
   class is gone and the toggle returns to its normal house state — still there,
   still playing if she started it. One control, introduced at the door. */
html.bh-threshold-lock .bh-sound-toggle {
	opacity: 0;
	pointer-events: none;
	transition: none;
}
html.bh-threshold-lock .bh-sound-toggle.bh-threshold-revealed {
	opacity: 1;
	pointer-events: auto;
	animation: bh-thr-vibein 950ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes bh-thr-vibein {
	0%   { opacity: 0; transform: translateY(10px) scale(0.5) rotate(-10deg); }
	55%  { opacity: 1; transform: translateY(0)    scale(1.16) rotate(6deg); }
	72%  { transform: scale(0.94) rotate(-4deg); }
	86%  { transform: scale(1.05) rotate(2deg); }
	100% { opacity: 1; transform: none; }
}

/* ── The second true door: reduced motion ─────────────────────────────────
   No bloom, no blink, no shimmer, no vibration, no dilation. The mark is simply
   open; the visitor chooses to enter. */
@media (prefers-reduced-motion: reduce) {
	.bh-threshold .bh-mark__primary,
	.bh-threshold .bh-mark__moire {
		opacity: 1; transform: translate(160px, 160px); transition: none;
	}
	.bh-threshold .bh-mark__eye { opacity: 1; transform: none; transition: none; }
	.bh-threshold.is-awake .bh-mark__moire-layer--fore,
	.bh-threshold.is-awake .bh-mark__moire-layer--back { animation: none; }
	.bh-threshold.is-blink .bh-mark__eye { transform: none; }
	.bh-threshold__line, .bh-threshold__enter { opacity: 1; transform: none; transition: none; }
	html.bh-threshold-lock .bh-sound-toggle.bh-threshold-revealed { animation: none; opacity: 1; }
	.bh-threshold.is-passing .bh-mark__pupil { transform: none; }
	.bh-threshold.is-passing { transition: opacity 200ms linear; }
}

/* Visually-hidden helper (matches theme .bh-vh; safe to duplicate). */
.bh-threshold .bh-vh {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}