/* =========================================================================
   VuePod — living-window.css
   Phase 4 brand-experience module: an interactive glass "tank window" rendered
   to a <canvas> (procedural deep-sea scene, or a configured video) that the
   visitor can snapshot and share. Loads only on the front page.
   ========================================================================= */

.vp-lw__inner { max-width: 960px; margin-inline: auto; }
.vp-lw__head { text-align: center; margin-bottom: clamp( 28px, 4vw, 44px ); }
.vp-lw__head .vp-eyebrow { justify-content: center; }
.vp-lw__sub { color: var( --vp-text-dim ); margin: 14px auto 0; max-width: 52ch; }

/* ---- The window ---- */
.vp-lw__window {
	position: relative;
	margin: 0;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var( --vp-radius-lg, 28px );
	overflow: hidden;
	background: #04132c;
	border: 1px solid rgba( 125, 211, 252, 0.22 );
	box-shadow:
		0 40px 90px -36px rgba( 2, 6, 23, 0.95 ),
		inset 0 0 0 1px rgba( 255, 255, 255, 0.05 );
}
.vp-lw__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Native video background: hardware-composited (no JS per-frame work), so it
   animates on every device incl. mobile without ever pinning the main thread.
   Sits below the glass/badge/bar overlays. */
.vp-lw__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #04132c; }

/* Glass reflections / curvature over the canvas. */
.vp-lw__glass {
	position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
	background:
		linear-gradient( 120deg, rgba( 255, 255, 255, 0.12 ) 0%, rgba( 255, 255, 255, 0 ) 22% ),
		radial-gradient( 120% 80% at 50% -10%, rgba( 125, 211, 252, 0.14 ), transparent 60% );
	box-shadow: inset 0 0 70px rgba( 2, 6, 23, 0.55 );
}
.vp-lw__badge {
	position: absolute; top: 16px; left: 16px; z-index: 3;
	display: inline-flex; align-items: center; gap: 7px;
	font-family: var( --vp-font-display ); font-weight: 700; font-size: 0.78rem;
	letter-spacing: 0.02em; color: #fff;
	background: rgba( 2, 6, 23, 0.4 ); backdrop-filter: blur( 6px );
	border: 1px solid rgba( 255, 255, 255, 0.16 ); border-radius: 999px; padding: 6px 12px;
}
.vp-lw__badge i { width: 7px; height: 7px; border-radius: 50%; background: #ff5a5a; box-shadow: 0 0 8px #ff5a5a; animation: vp-lw-blink 1.6s infinite; }
@keyframes vp-lw-blink { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Capture bar. */
.vp-lw__bar {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
	display: flex; justify-content: center;
	padding: 20px; pointer-events: none;
	background: linear-gradient( 0deg, rgba( 2, 6, 23, 0.55 ), transparent );
}
.vp-lw__bar .vp-btn { pointer-events: auto; }
.vp-lw__capture { box-shadow: 0 16px 40px -14px rgba( 56, 189, 248, 0.7 ); }
.vp-lw__cam {
	display: inline-block; width: 16px; height: 13px; border-radius: 3px;
	border: 2px solid currentColor; position: relative;
}
.vp-lw__cam::before { content: ''; position: absolute; inset: 2px; margin: auto; width: 5px; height: 5px; border: 2px solid currentColor; border-radius: 50%; }

/* ---- Captured result overlay ---- */
.vp-lw__result {
	position: absolute; inset: 0; z-index: 5;
	display: grid; place-items: center; padding: 18px;
	background: rgba( 4, 12, 30, 0.62 ); backdrop-filter: blur( 8px );
}
.vp-lw__result[hidden] { display: none; }
.vp-lw__result-card {
	width: 100%; max-width: 460px; text-align: center;
	background: var( --vp-surface-2 ); border: 1px solid var( --vp-border-soft );
	border-radius: var( --vp-radius ); padding: 22px;
	box-shadow: var( --vp-shadow );
}
.vp-lw__result-title { font-family: var( --vp-font-display ); font-weight: 700; color: #fff; font-size: 1.15rem; margin: 0 0 14px; }
.vp-lw__shot { width: 100%; border-radius: var( --vp-radius-sm ); border: 1px solid var( --vp-border-soft ); display: block; }
.vp-lw__actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }
.vp-lw__hint { color: var( --vp-text-mut ); font-size: 0.85rem; margin: 12px 0 0; }

.vp-btn--sm { padding: 10px 18px; font-size: 0.9rem; }

.vp-lw__note { text-align: center; color: var( --vp-text-mut ); font-size: 0.85rem; margin: 16px 0 0; }

@media ( max-width: 560px ) {
	.vp-lw__window { aspect-ratio: 4 / 3; }
	.vp-lw__capture { width: 100%; }
	/* After capture the result card (title + image + 4 buttons + hint) is taller
	   than the short 4:3 window, so the bottom buttons were clipped by the
	   window's overflow:hidden and couldn't be tapped. Let the window grow to fit
	   the card: the result goes in-flow (position:relative) to give the window its
	   height, and gets an opaque background so the (now stretched) video behind it
	   doesn't show through. Retake removes .is-captured and restores the 4:3 view. */
	.vp-lw__window.is-captured { aspect-ratio: auto; }
	.vp-lw__window.is-captured .vp-lw__result {
		position: relative;
		background: #060e21;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}