/* ==========================================================================
   The cinematic doors entrance.
   Direct port of v1 splash.css, retokenized for v3:
     --c-gold       → --gold
     lbv-on-splash  → lbv3-on-splash
     hides announce / header / footer / services strip / skip-link.
   ========================================================================== */

body.lbv3-on-splash { overflow: hidden; }
body.lbv3-on-splash .lbv-announce,
body.lbv3-on-splash .lbv-header,
body.lbv3-on-splash .lbv-footer,
body.lbv3-on-splash .lbv-services,
body.lbv3-on-splash .lbv-skip-link { display: none !important; }
body.lbv3-on-splash .lbv-main {
	padding: 0;
	margin: 0;
}

.lbv-splash {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	background: #fff;
	width: 100%;
	overflow: hidden;
	isolation: isolate;
}

.lbv-splash__poster,
.lbv-splash__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 0;
}
.lbv-splash__poster { transition: opacity .5s var(--ease); }
.lbv-splash__video {
	opacity: 0;
	pointer-events: none;
	transition: opacity .35s var(--ease);
}

/* When entering, swap poster → video. */
.lbv-splash.is-entering .lbv-splash__poster { opacity: 0; }
.lbv-splash.is-entering .lbv-splash__video  { opacity: 1; }

/* Smoke + vignette overlays for depth. */
.lbv-splash::before,
.lbv-splash::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
}
.lbv-splash::before {
	background: radial-gradient(ellipse at center, transparent 0%, transparent 55%, rgba(0,0,0,.18) 100%);
}
.lbv-splash::after {
	background: linear-gradient(to bottom, transparent 60%, rgba(0,0,0,.12) 100%);
}

/* Overlay — full-bleed like poster (door marks get pixel left/top from splash.js + object-fit:cover math). */
.lbv-splash__overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	color: var(--gold);
	transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.lbv-splash.is-entering .lbv-splash__overlay {
	opacity: 0;
	transform: translateY(-8px);
	pointer-events: none;
}

.lbv-splash__marks {
	position: absolute;
	inset: 0;
	pointer-events: none;
	box-sizing: border-box;
}

.lbv-splash__monogram--door {
	position: absolute;
	display: block;
	left: 0;
	top: 0;
	margin: 0;
	padding: 0;
	transform: translate(-50%, -50%);
	height: auto;
	will-change: left, top;
	/* Width set in px by JS from poster scale (≈ fraction of uncropped image width) */

	/*
	 * Engraved / carved look: sinks into grain + slight chisel shading.
	 * multiply + tonal filters lets door texture show through the mark.
	 */
	opacity: 0.82;
	mix-blend-mode: multiply;
	filter:
		brightness(0.88)
		contrast(1.08)
		drop-shadow(0 -1px 1px rgba(255, 255, 255, 0.2))
		drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55))
		drop-shadow(0 5px 10px rgba(0, 0, 0, 0.18));
}

/* Optional: hide marks until first layout (avoids flash at 0,0) */
.lbv-splash__marks:not(.is-laid-out) .lbv-splash__monogram--door {
	visibility: hidden;
}

.lbv-splash__monogram--mark {
	view-transition-name: hlbv-mark;
}

/* ENTER button — below the door handles */
.lbv-splash__enter {
	position: absolute;
	top: 80%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: inline-block;
	white-space: nowrap;
	padding: 14px 44px;
	border: 1px solid var(--gold);
	background: #0B0B0B;
	color: var(--gold);
	font-family: var(--font-display);
	letter-spacing: .32em;
	font-size: 13px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.lbv-splash__enter:hover,
.lbv-splash__enter:focus-visible {
	transform: translate(-50%, calc(-50% - 1px));
	background: #1a1a1a;
	box-shadow: 0 12px 36px -10px rgba(212,175,55,.45);
	outline: none;
}

/* Caption — bottom of door panel */
.lbv-splash__caption {
	position: absolute;
	top: 86%;
	left: 50%;
	transform: translate(-50%, -50%);
	white-space: nowrap;
	font-family: var(--font-display);
	color: var(--gold);
	font-size: clamp(20px, 1vw, 30px);
	letter-spacing: .28em;
	text-transform: uppercase;
	opacity: .9;
	text-shadow: 0 2px 12px rgba(0,0,0,.45);
}

@keyframes lbv-breathe {
	0%, 100% {
		transform: translate(-50%, -50%) scale(1);
		box-shadow: 0 0 0 0 rgba(212,175,55,0);
	}
	50% {
		transform: translate(-50%, -50%) scale(1.045);
		box-shadow: 0 0 22px 6px rgba(212,175,55,.22);
	}
}

.lbv-splash__enter {
	animation: lbv-breathe 3s cubic-bezier(.45, 0, .55, 1) infinite;
}
.lbv-splash__enter:hover,
.lbv-splash__enter:focus-visible {
	animation-play-state: paused;
}

/* Reduced motion: skip video, fade only. */
@media (prefers-reduced-motion: reduce) {
	.lbv-splash__video  { display: none !important; }
	.lbv-splash.is-entering .lbv-splash__poster { opacity: 1; }
	.lbv-splash__enter  { animation: none; }
}

@media (max-width: 480px) {
	/* Door mark size is mostly JS; soften engrave on small screens */
	.lbv-splash__monogram--door {
		opacity: 0.78;
		filter:
			brightness(0.9)
			contrast(1.05)
			drop-shadow(0 -1px 1px rgba(255, 255, 255, 0.16))
			drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5));
	}

	.lbv-splash__enter {
		padding: 6px 13px;
		font-size: 11px;
		letter-spacing: 0.26em;
		top: 80%;
	}
	.lbv-splash__caption {
		letter-spacing: 0.18em;
		white-space: normal;
		max-width: 80vw;
		text-align: center;
		top: 83%;
	}
}