/* ==========================================================================
   LuxBeautyV — Cabinet of Curiosities
   Single-viewport immersive page with four hand-curated experiences.
   ========================================================================== */

/* ---------- Hide global chrome on this route ---------- */
body.lbv3-on-cabinet {
  margin: 0;
  background: #1c1814;
  color: #f5ecd9;
  overflow: hidden;
  /* Use dynamic viewport on mobile to dodge iOS Safari's URL-bar resize. */
  height: 100vh;
  height: 100dvh;
}
body.lbv3-on-cabinet .lbv-announce,
body.lbv3-on-cabinet .lbv-header,
body.lbv3-on-cabinet .lbv-services,
body.lbv3-on-cabinet .lbv-footer {
  display: none !important;
}
body.lbv3-on-cabinet .lbv-main,
body.lbv3-on-cabinet #site-main {
  margin: 0;
  padding: 0;
}

/* Body-scroll lock when any modal is open. */
body.lbv3-on-cabinet.lbv-cabinet-locked {
  overflow: hidden;
}

/* ---------- Page shell ---------- */
.lbv-cabinet {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 55%, #2a221a 0%, #14110d 75%);
  isolation: isolate;
}

/* ---------- Page entrance — soft landing ---------- */
/* Body background (#1c1814) is already dark, so the visitor sees
   pure darkness while .lbv-cabinet fades up from it. */
@keyframes lbv-page-enter {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes lbv-stage-enter {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes lbv-chrome-enter {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 1. Shell background materialises first */
body.lbv3-on-cabinet .lbv-cabinet {
  animation: lbv-page-enter 1800ms ease-out both;
}
/* 2. Cabinet image rises up from the dark */
body.lbv3-on-cabinet .lbv-cabinet-stage {
  animation: lbv-stage-enter 2200ms ease-out 600ms both;
}
/* 3. Back link and brand mark settle in quietly */
body.lbv3-on-cabinet .lbv-cabinet-back,
body.lbv3-on-cabinet .lbv-cabinet-mark {
  animation: lbv-chrome-enter 1200ms ease-out 1600ms both;
}
/* 4. Hotspots appear last so they don't distract from the reveal */
body.lbv3-on-cabinet .lbv-cabinet-hotspot {
  animation: lbv-chrome-enter 1000ms ease-out 2400ms both;
}

@media (prefers-reduced-motion: reduce) {
  body.lbv3-on-cabinet .lbv-cabinet,
  body.lbv3-on-cabinet .lbv-cabinet-stage,
  body.lbv3-on-cabinet .lbv-cabinet-back,
  body.lbv3-on-cabinet .lbv-cabinet-mark,
  body.lbv3-on-cabinet .lbv-cabinet-hotspot {
    animation: none;
  }
}

/* ---------- Mother entry loader ---------- */
.lbv-cabinet-loader {
  position: fixed;
  inset: 0;
  z-index: 180;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0b0906;
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms ease;
}
.lbv-cabinet-loader[data-active] {
  opacity: 1;
  pointer-events: auto;
}
.lbv-cabinet-loader__ring {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid rgba(212, 175, 55, 0.18);
  border-top-color: rgba(212, 175, 55, 0.85);
  animation: lbv-loader-spin 1s linear infinite;
}
@keyframes lbv-loader-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .lbv-cabinet-loader__ring { animation: none; opacity: 0.7; }
}

/* ---------- Top-corner chrome (back link + brand mark) ---------- */
.lbv-cabinet-back {
  position: absolute;
  top: clamp(14px, 2.5vh, 28px);
  left: clamp(14px, 2.5vw, 32px);
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.5em 0.9em;
  color: #e8d9a8;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border: 1px solid rgba(212, 175, 55, 0.35);
  background: rgba(20, 16, 12, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: color 240ms var(--ease), border-color 240ms var(--ease), background 240ms var(--ease);
}
.lbv-cabinet-back:hover,
.lbv-cabinet-back:focus-visible {
  color: #fff5d6;
  border-color: rgba(212, 175, 55, 0.75);
  background: rgba(20, 16, 12, 0.6);
  outline: none;
}
.lbv-cabinet-back__chev {
  font-size: 0.95rem;
  line-height: 1;
  transition: transform 240ms var(--ease);
}
.lbv-cabinet-back:hover .lbv-cabinet-back__chev,
.lbv-cabinet-back:focus-visible .lbv-cabinet-back__chev {
  transform: translateX(-3px);
}

.lbv-cabinet-mark {
  position: absolute;
  top: clamp(10px, 2vh, 22px);
  right: clamp(10px, 2.5vw, 28px);
  z-index: 10;
  opacity: 0.85;
  pointer-events: none;
}
.lbv-cabinet-mark .lbv-mark img {
  width: clamp(36px, 5vw, 56px);
  height: auto;
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.5));
}

@media (max-width: 600px) {
  .lbv-cabinet-back {
    font-size: 0.7rem;
    padding: 0.45em 0.75em;
    letter-spacing: 0.18em;
  }
  .lbv-cabinet-back__label {
    display: none;
  }
}

/* ---------- Cabinet stage (aspect-locked) ---------- */
/* Stage size = whichever is smaller: the viewport, or the viewport scaled to the
   cabinet image's intrinsic 1402/1122 aspect ratio. Keeps the image whole and
   keeps hotspots % accurate. */
.lbv-cabinet-stage {
  position: relative;
  /* Progressive enhancement: vh fallback first, dvh overrides for modern. */
  width: min(100vw, calc(100vh * 1402 / 1122));
  width: min(100vw, calc(100dvh * 1402 / 1122));
  height: min(100vh, calc(100vw * 1122 / 1402));
  height: min(100dvh, calc(100vw * 1122 / 1402));
  display: block;
  /* Subtle gold inner glow framing the cabinet. */
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.5),
    0 0 120px rgba(212, 175, 55, 0.07);
}

.lbv-cabinet-stage__media {
  position: absolute;
  inset: 0;
}

.lbv-cabinet-stage__video,
.lbv-cabinet-stage__fallback,
.lbv-cabinet-stage__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.lbv-cabinet-stage__fallback {
  display: block;
  z-index: 1;
  transition: opacity 450ms ease, visibility 450ms ease;
}

.lbv-cabinet-stage__video {
  z-index: 2;
  opacity: 0;
  transition: opacity 450ms ease;
}

.lbv-cabinet-stage.is-video-ready .lbv-cabinet-stage__video {
  opacity: 1;
}

.lbv-cabinet-stage.is-video-ready .lbv-cabinet-stage__fallback {
  opacity: 0;
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .lbv-cabinet-stage__video {
    display: none;
  }

  .lbv-cabinet-stage.is-video-ready .lbv-cabinet-stage__fallback {
    opacity: 1;
    visibility: visible;
  }
}

/* ---------- Hotspots ---------- */
.lbv-cabinet-hotspot {
  position: absolute;
  /* Center the dot on the target point. */
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: inherit;
  z-index: 5;
}
.lbv-cabinet-hotspot:focus { outline: none; }
.lbv-cabinet-hotspot:focus-visible .lbv-cabinet-hotspot__dot {
  box-shadow:
    0 0 0 2px rgba(20, 16, 12, 0.6),
    0 0 0 4px var(--gold);
}

.lbv-cabinet-hotspot__dot {
  position: relative;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fdecb3 0%, #d4af37 60%, #8a6a1a 100%);
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.55);
}
.lbv-cabinet-hotspot__dot::before,
.lbv-cabinet-hotspot__dot::after {
  content: "";
  position: absolute;
  inset: 50% 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, 0.55);
  animation: lbv-cab-breath 2.8s ease-out infinite;
  pointer-events: none;
}
.lbv-cabinet-hotspot__dot::after {
  animation-delay: 1.4s;
}

@keyframes lbv-cab-breath {
  0%   { transform: scale(1);    opacity: 0.65; }
  70%  { transform: scale(3.25); opacity: 0; }
  100% { transform: scale(3.25); opacity: 0; }
}

/* Sketch + porcelain sit on light ground — use a deeper bronze so dot + rings read clearly. */
.lbv-cabinet-hotspot--sketch .lbv-cabinet-hotspot__dot,
.lbv-cabinet-hotspot--porcelain .lbv-cabinet-hotspot__dot {
  background: radial-gradient(circle at 35% 30%, #8a7040 0%, #4a3818 55%, #1a1408 100%);
  box-shadow: 0 0 10px rgba(26, 20, 8, 0.5);
}
.lbv-cabinet-hotspot--sketch .lbv-cabinet-hotspot__dot::before,
.lbv-cabinet-hotspot--sketch .lbv-cabinet-hotspot__dot::after,
.lbv-cabinet-hotspot--porcelain .lbv-cabinet-hotspot__dot::before,
.lbv-cabinet-hotspot--porcelain .lbv-cabinet-hotspot__dot::after {
  border-color: rgba(26, 20, 8, 0.65);
}
.lbv-cabinet-hotspot--sketch:focus-visible .lbv-cabinet-hotspot__dot,
.lbv-cabinet-hotspot--porcelain:focus-visible .lbv-cabinet-hotspot__dot {
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.35),
    0 0 0 4px rgba(26, 20, 8, 0.85),
    0 0 10px rgba(26, 20, 8, 0.5);
}

.lbv-cabinet-hotspot__tip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translate(-50%, 4px);
  white-space: nowrap;
  padding: 0.45em 0.8em;
  background: rgba(20, 16, 12, 0.85);
  color: #f0e4c6;
  border: 1px solid rgba(212, 175, 55, 0.4);
  font-family: var(--font-display);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms var(--ease), transform 240ms var(--ease);
}
.lbv-cabinet-hotspot__tip::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  background: rgba(20, 16, 12, 0.85);
  border-right: 1px solid rgba(212, 175, 55, 0.4);
  border-bottom: 1px solid rgba(212, 175, 55, 0.4);
}
.lbv-cabinet-hotspot:hover .lbv-cabinet-hotspot__tip,
.lbv-cabinet-hotspot:focus-visible .lbv-cabinet-hotspot__tip {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Hotspot positions — % relative to the cabinet image (814 x 668). */
.lbv-cabinet-hotspot--sketch    { top: 32%; left: 60.5%; }
.lbv-cabinet-hotspot--mother    { top: 62%; left: 58.5%; }
.lbv-cabinet-hotspot--porcelain { top: 63%; left: 72.5%; }
.lbv-cabinet-hotspot--beetle    { top: 83%; left: 30.5%; }

/* Beetle wrapper hosts the absolute-positioned hotspot + its whisper. */
.lbv-cabinet-beetle {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.lbv-cabinet-beetle .lbv-cabinet-hotspot {
  pointer-events: auto;
}

/* ---------- Beetle whisper ---------- */
.lbv-cabinet-beetle-tip {
  position: absolute;
  /* Sit just above the beetle hotspot. */
  bottom: 22%;
  left: 30.5%;
  transform: translate(-50%, 8px);
  width: min(360px, 70vw);
  padding: clamp(16px, 2vh, 22px) clamp(18px, 2.4vw, 28px);
  background: rgba(18, 14, 10, 0.92);
  color: #f0e4c6;
  border: 1px solid rgba(212, 175, 55, 0.45);
  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.1vw + 0.4rem, 1.15rem);
  font-style: italic;
  line-height: 1.5;
  text-align: center;
  letter-spacing: 0.01em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 420ms var(--ease), transform 420ms var(--ease);
  z-index: 6;
}
.lbv-cabinet-beetle-tip::after {
  content: "";
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: rgba(18, 14, 10, 0.92);
  border-right: 1px solid rgba(212, 175, 55, 0.45);
  border-bottom: 1px solid rgba(212, 175, 55, 0.45);
}
.lbv-cabinet-beetle-tip__text { margin: 0; }

/* Desktop hover-reveal (CSS-only). */
@media (hover: hover) and (pointer: fine) {
  .lbv-cabinet-hotspot--beetle:hover ~ .lbv-cabinet-beetle-tip,
  .lbv-cabinet-hotspot--beetle:focus-visible ~ .lbv-cabinet-beetle-tip {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
/* Touch / JS-driven reveal. */
.lbv-cabinet-beetle[data-open] .lbv-cabinet-beetle-tip {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ============================================================
   MODALS — shared
   ============================================================ */
.lbv-cabinet-modal {
  /* Reset native dialog defaults so we can size full-bleed.
     Use inset + % sizing — 100vw extends past the viewport and clips content. */
  width: 100%;
  height: 100%;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  overflow: hidden;
  position: fixed;
  inset: 0;
  z-index: 200;
}
.lbv-cabinet-modal::backdrop {
  background: rgba(8, 6, 4, 0.85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.lbv-cabinet-modal:not([open]) {
  display: none;
}
/* Smooth fade-in for the modal contents (independent of backdrop).
   Sketch and porcelain open slowly to match the rhythm of the experience.
   Mother journey has its own rule below. */
.lbv-cabinet-modal--sketch[open] .lbv-cabinet-modal__inner {
  animation: lbv-cab-fade-up 1400ms ease-out both;
}
.lbv-cabinet-modal--porcelain[open] .lbv-cabinet-modal__inner {
  animation: lbv-cab-fade-up 1600ms ease-out both;
}
/* Opacity-only on the scroller — transform breaks overflow scroll / snap. */
.lbv-cabinet-modal[open] .lbv-mother-journey {
  animation: lbv-cab-fade-in 1200ms ease-out both;
}
@keyframes lbv-cab-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes lbv-cab-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.lbv-cabinet-modal__inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(48px, 6vh, 80px) clamp(16px, 4vw, 64px);
  box-sizing: border-box;
}

.lbv-cabinet-modal__close {
  position: fixed;
  top: clamp(14px, 2.5vh, 28px);
  right: clamp(14px, 2.5vw, 32px);
  z-index: 210;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 16, 12, 0.55);
  color: #f0e4c6;
  border: 1px solid rgba(212, 175, 55, 0.55);
  border-radius: 50%;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 240ms var(--ease), color 240ms var(--ease), transform 240ms var(--ease);
}
/* Hide the decorative × glyph; the X is drawn with pseudo-elements
   so the hover rotation pivots on a true geometric center. */
.lbv-cabinet-modal__close > span {
  display: none;
}
.lbv-cabinet-modal__close::before,
.lbv-cabinet-modal__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
}
.lbv-cabinet-modal__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.lbv-cabinet-modal__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.lbv-cabinet-modal__close:hover,
.lbv-cabinet-modal__close:focus-visible {
  background: rgba(20, 16, 12, 0.85);
  color: #fff5d6;
  outline: none;
  transform: rotate(90deg);
}
.lbv-cabinet-modal__close--light {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}
.lbv-cabinet-modal__close--light:hover,
.lbv-cabinet-modal__close--light:focus-visible {
  background: rgba(0, 0, 0, 0.55);
  color: #fff5d6;
}

/* ---------- Sketch modal ---------- */
.lbv-cabinet-modal--sketch::backdrop {
  background: radial-gradient(ellipse at center, rgba(40, 30, 18, 0.92) 0%, rgba(6, 4, 2, 0.96) 75%);
}
.lbv-cabinet-sketch {
  margin: 0;
  max-width: min(720px, 92vw);
  max-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lbv-cabinet-sketch__media {
  position: relative;
  display: block;
  max-width: min(720px, 92vw);
  max-height: 92vh;
  filter: drop-shadow(0 20px 60px rgba(0, 0, 0, 0.6));
}
.lbv-cabinet-sketch__video,
.lbv-cabinet-sketch__img {
  max-width: 100%;
  max-height: 92vh;
  height: auto;
  width: auto;
  display: block;
}
.lbv-cabinet-sketch__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 2;
  opacity: 0;
  transition: opacity 450ms ease;
}
.lbv-cabinet-sketch__img {
  transition: opacity 450ms ease, visibility 450ms ease;
}
.lbv-cabinet-sketch__media.is-video-ready .lbv-cabinet-sketch__video {
  opacity: 1;
}
.lbv-cabinet-sketch__media.is-video-ready .lbv-cabinet-sketch__img {
  opacity: 0;
  visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .lbv-cabinet-sketch__video {
    display: none;
  }

  .lbv-cabinet-sketch__media.is-video-ready .lbv-cabinet-sketch__img {
    opacity: 1;
    visibility: visible;
  }
}

/* ---------- Porcelain modal ---------- */
.lbv-cabinet-modal--porcelain::backdrop {
  background: linear-gradient(180deg, rgba(8, 6, 4, 0.85) 0%, rgba(20, 14, 28, 0.88) 100%);
}
.lbv-cabinet-porcelain {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 0;
  padding: 0;
}
.lbv-cabinet-porcelain__media {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
.lbv-cabinet-porcelain__video,
.lbv-cabinet-porcelain__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  filter: drop-shadow(0 20px 60px rgba(0, 0, 0, 0.5));
}
.lbv-cabinet-porcelain__video {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  transition: opacity 450ms ease;
}
.lbv-cabinet-porcelain__img {
  display: block;
  transition: opacity 450ms ease, visibility 450ms ease;
}
.lbv-cabinet-porcelain__media.is-video-ready .lbv-cabinet-porcelain__video {
  opacity: 1;
}
.lbv-cabinet-porcelain__media.is-video-ready .lbv-cabinet-porcelain__img {
  opacity: 0;
  visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .lbv-cabinet-porcelain__video {
    display: none;
  }

  .lbv-cabinet-porcelain__media.is-video-ready .lbv-cabinet-porcelain__img {
    opacity: 1;
    visibility: visible;
  }
}
.lbv-cabinet-porcelain__quote {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(40px, 8vw, 96px);
  background: linear-gradient(180deg, rgba(14, 10, 22, 0.85) 0%, rgba(8, 6, 14, 0.9) 100%);
  color: #f3e7c6;
}
.lbv-cabinet-porcelain__rule {
  display: block;
  width: 64px;
  height: 1px;
  background: var(--gold);
  margin-bottom: clamp(20px, 3vh, 36px);
  opacity: 0.8;
}
.lbv-cabinet-porcelain__line {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.55rem, 4.6vw + 0.5rem, 4rem);
  line-height: 1.55;
  letter-spacing: 0.015em;
  color: #f7ecc9;
  display: flex;
  flex-direction: column;
  gap: 0.1em;
}

/* Each row sits on its own line; phrases within a row are inline. */
.lbv-cabinet-porcelain__row {
  display: block;
}

/* Phrases are inline-block so they sit side by side and reserve their
   layout space even while invisible — no reflow as they fade in. */
.lbv-cabinet-porcelain__phrase {
  display: inline-block;
  opacity: 0;
  animation: lbv-phrase-in 2000ms var(--ease) both;
  animation-play-state: paused;
}
.lbv-cabinet-modal--porcelain[open] .lbv-cabinet-porcelain__phrase {
  animation-play-state: running;
}
/* Delays start after the 1600ms image fade-in completes. */
.lbv-cabinet-porcelain__phrase--1 { animation-delay: 1800ms; }
.lbv-cabinet-porcelain__phrase--2 { animation-delay: 3400ms; }
.lbv-cabinet-porcelain__phrase--3 { animation-delay: 5400ms; }
.lbv-cabinet-porcelain__phrase--4 { animation-delay: 7000ms; }

@keyframes lbv-phrase-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Gold rule slides in just before the first phrase. */
.lbv-cabinet-porcelain__rule {
  /* Slide in just as the image finishes fading, before the first phrase. */
  animation: lbv-rule-in 1000ms var(--ease) 1600ms both;
  animation-play-state: paused;
}
.lbv-cabinet-modal--porcelain[open] .lbv-cabinet-porcelain__rule {
  animation-play-state: running;
}
@keyframes lbv-rule-in {
  from { opacity: 0; transform: scaleX(0); transform-origin: left; }
  to   { opacity: 0.8; transform: scaleX(1); transform-origin: left; }
}

@media (max-width: 820px) {
  .lbv-cabinet-porcelain {
    grid-template-columns: 1fr;
    grid-template-rows: 72% 28%;
  }
  .lbv-cabinet-porcelain__media {
    height: 100%;
  }
  .lbv-cabinet-porcelain__quote {
    padding: clamp(24px, 6vw, 40px);
    text-align: center;
    align-items: center;
  }
}

/* ============================================================
   MOTHER — three-act journey
   ============================================================ */
.lbv-cabinet-modal--mother::backdrop {
  background: #000;
}

.lbv-mother-journey {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  background: #000;
  /* Never animate transform on this element — it is the scroll container. */
  transform: none;
}
.lbv-mother-journey::-webkit-scrollbar { display: none; }
.lbv-mother-journey { scrollbar-width: none; }

.lbv-mother-panel {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100dvh;
  flex-shrink: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.lbv-mother-panel > picture {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
}

.lbv-mother-panel__bg,
.lbv-mother-panel__video {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
}

.lbv-mother-panel__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.0) 38%, rgba(0,0,0,0.0) 60%, rgba(0,0,0,0.7) 100%);
  pointer-events: none;
}
.lbv-mother-panel__veil--thin {
  background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.0) 35%, rgba(0,0,0,0.4) 100%);
}

.lbv-mother-panel__copy {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 clamp(16px, 6vw, 64px) clamp(120px, 18vh, 200px);
  text-align: center;
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
  transition-delay: 200ms;
}
.lbv-mother-panel[data-in-view] .lbv-mother-panel__copy {
  opacity: 1;
  transform: translateY(0);
}

/* First Mother panel: copy fades in as a shell; phrases stagger like porcelain. */
.lbv-mother-panel--shipwreck .lbv-mother-panel__copy {
  transform: none;
  /* Wait for the journey fade-in (1200ms) before revealing the copy wrapper. */
  transition: opacity 1000ms var(--ease) 1200ms;
}
.lbv-mother-panel--shipwreck[data-in-view] .lbv-mother-panel__copy {
  transform: none;
}

.lbv-mother-panel__line {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.8rem, 3.4vw + 0.5rem, 3.4rem);
  line-height: 1.25;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.65);
  text-wrap: balance;
}

.lbv-mother-panel--shipwreck .lbv-mother-panel__row {
  display: block;
}

/* Act I: slower crossfade than porcelain so the lines breathe on entry. */
.lbv-mother-panel--shipwreck .lbv-mother-panel__phrase {
  display: inline-block;
  opacity: 0;
  animation: lbv-phrase-in 2200ms var(--ease) both;
  animation-play-state: paused;
}
.lbv-mother-panel--shipwreck[data-in-view] .lbv-mother-panel__phrase {
  animation-play-state: running;
}
.lbv-mother-panel--shipwreck .lbv-mother-panel__phrase--1 {
  animation-delay: 1500ms;
}
.lbv-mother-panel--shipwreck .lbv-mother-panel__phrase--2 {
  animation-delay: 3500ms;
}

/* Act II: trust — text holds back, lets the image settle first. */
.lbv-mother-panel--trust .lbv-mother-panel__phrase {
  display: inline-block;
  opacity: 0;
  animation: lbv-phrase-in 2400ms var(--ease) both;
  animation-play-state: paused;
}
.lbv-mother-panel--trust[data-in-view] .lbv-mother-panel__phrase {
  animation-play-state: running;
}
.lbv-mother-panel--trust .lbv-mother-panel__phrase--1 {
  animation-delay: 1800ms;
}
.lbv-mother-panel--trust .lbv-mother-panel__phrase--2 {
  animation-delay: 3200ms;
}

/* Scroll indicator */
.lbv-mother-scroll {
  position: absolute;
  bottom: clamp(28px, 5vh, 52px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6em;
  padding: 0.6em 1em;
  background: transparent;
  color: #f3e7c6;
  border: 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 700ms var(--ease) 700ms, color 200ms var(--ease);
}
.lbv-mother-panel--shipwreck .lbv-mother-scroll {
  /* Appear after both phrases have had time to land (~phrase-2 start + most of its fade). */
  transition: opacity 900ms var(--ease) 5500ms, color 200ms var(--ease);
}
.lbv-mother-panel[data-in-view] .lbv-mother-scroll {
  opacity: 0.85;
}
.lbv-mother-scroll:hover,
.lbv-mother-scroll:focus-visible {
  opacity: 1;
  color: #fff5d6;
  outline: none;
}
.lbv-mother-scroll__chev {
  width: 14px;
  height: 14px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  animation: lbv-cab-chev 1.8s ease-in-out infinite;
}
@keyframes lbv-cab-chev {
  0%   { transform: rotate(45deg) translate(-4px, -4px); opacity: 0.4; }
  50%  { transform: rotate(45deg) translate(0, 0);       opacity: 1; }
  100% { transform: rotate(45deg) translate(4px, 4px);   opacity: 0.4; }
}

/* ---------- Mother end-of-video CTA ---------- */
.lbv-mother-cta {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: clamp(48px, 10vh, 100px);
  background: rgba(0, 0, 0, 0);
  opacity: 0;
  pointer-events: none;
  /* Veil and overall opacity settle slowly first. */
  transition: opacity 2000ms var(--ease), background 2200ms var(--ease);
}
.lbv-mother-panel[data-video-ended] .lbv-mother-cta {
  opacity: 1;
  pointer-events: auto;
  background: rgba(0, 0, 0, 0.38);
}
.lbv-mother-cta__btn {
  display: inline-block;
  padding: 0.9em 2.6em;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-style: normal;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-decoration: none;
  color: #1a1208;
  background: var(--gold);
  border: 1px solid var(--gold);
  /* Start further down; rise in only after the veil has begun to settle. */
  transform: translateY(28px);
  opacity: 0;
  transition:
    transform 1400ms var(--ease) 1200ms,
    opacity 1200ms var(--ease) 1200ms,
    background 220ms var(--ease),
    color 220ms var(--ease);
}
.lbv-mother-panel[data-video-ended] .lbv-mother-cta__btn {
  transform: translateY(0);
  opacity: 1;
}
.lbv-mother-cta__btn:hover,
.lbv-mother-cta__btn:focus-visible {
  background: #fff5d6;
  color: #1a1208;
  outline: none;
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
  .lbv-cabinet-hotspot__dot {
    width: 14px;
    height: 14px;
  }
  .lbv-cabinet-hotspot__dot::before,
  .lbv-cabinet-hotspot__dot::after {
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
  }
  .lbv-cabinet-hotspot__tip {
    font-size: 0.6rem;
    letter-spacing: 0.18em;
  }
  .lbv-cabinet-beetle-tip {
    font-size: 1rem;
  }
  .lbv-mother-panel__line {
    padding: 0 0.5em;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .lbv-cabinet-hotspot__dot::before,
  .lbv-cabinet-hotspot__dot::after {
    animation: none;
    opacity: 0.35;
    transform: scale(2);
  }
  .lbv-mother-scroll__chev { animation: none; }
  .lbv-cabinet-modal[open] .lbv-cabinet-modal__inner:not(.lbv-cabinet-porcelain),
  .lbv-cabinet-modal[open] .lbv-mother-journey { animation: none; }
  .lbv-cabinet-back__chev,
  .lbv-cabinet-modal__close { transition: none; }
  .lbv-mother-journey { scroll-behavior: auto; }
  .lbv-mother-panel__copy {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .lbv-mother-panel[data-in-view] .lbv-mother-scroll { opacity: 0.85; }
  /* Show all porcelain phrases immediately without animation. */
  .lbv-cabinet-porcelain__phrase,
  .lbv-cabinet-porcelain__rule {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .lbv-mother-panel--shipwreck .lbv-mother-panel__phrase,
  .lbv-mother-panel--trust .lbv-mother-panel__phrase {
    animation: none;
    opacity: 1;
  }
}