:root {
  --vdl-door-texture: none;
  --vdl-logo-image: none;

  --vdl-bg-0: #020100;
  --vdl-bg-1: #090503;
  --vdl-bg-2: #160d08;
  --vdl-brown-1: #2f180b;
  --vdl-brown-2: #5b2f14;
  --vdl-brown-3: #7a4320;
  --vdl-gold-1: #fff1d4;
  --vdl-gold-2: #f3d7a1;
  --vdl-gold-3: #d0a45c;
  --vdl-gold-4: #9b642a;
  --vdl-shadow: rgba(0, 0, 0, 0.56);
  --vdl-fade-duration: 850ms;
}

/* Early boot guard: keeps the first paint covered until JS hands over to the real overlay. */
html.vdl-preload,
html.vdl-preload body {
  background: #050301;
}

html.vdl-preload body {
  overflow: hidden;
  min-height: 100vh;
}

html.vdl-intro-lock,
body.vdl-intro-lock {
  overflow: hidden;
}

body.vdl-intro-active .vdl-blur-target {
  filter: blur(18px) saturate(0.90) brightness(0.82);
  transform: scale(1.012);
  transform-origin: center center;
}

body.vdl-intro-active.vdl-intro-reveal .vdl-blur-target {
  filter: blur(0) saturate(1) brightness(1);
  transform: scale(1);
}

.vdl-blur-target {
  transition:
    filter 1100ms cubic-bezier(.22,.8,.2,1),
    transform 1100ms cubic-bezier(.22,.8,.2,1);
  will-change: filter, transform;
}

/* Overlay */
.vdl-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  overflow: hidden;
  isolation: isolate;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  contain: layout paint style;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background:
    radial-gradient(circle at 50% 26%, rgba(255, 215, 152, 0.08) 0%, transparent 18%),
    linear-gradient(180deg, #040302 0%, #000000 100%);
  transition:
    opacity 420ms ease,
    visibility 0s linear 420ms;
  will-change: opacity;
}

.vdl-overlay.is-ready {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 420ms ease;
}

.vdl-overlay.is-ready.is-hiding {
  opacity: 0;
  visibility: visible;
  pointer-events: none;
  transition: opacity var(--vdl-fade-duration) ease;
}

/* Scene background */
.vdl-scene-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 22%, rgba(255, 242, 213, 0.18) 0%, rgba(255, 214, 151, 0.12) 10%, transparent 24%),
    linear-gradient(180deg, #20140d 0%, #5a3117 42%, #120905 100%);
  transition: opacity 1100ms ease;
}

.vdl-overlay.show-light .vdl-scene-bg,
.vdl-overlay.open-doors .vdl-scene-bg {
  opacity: 1;
}

.vdl-scene-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 52%, transparent 34%, rgba(0, 0, 0, 0.26) 70%, rgba(0, 0, 0, 0.62) 100%);
}

/* Glass reveal layer for premium blur-to-sharp feel */
.vdl-glass-reveal {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  backdrop-filter: blur(14px) saturate(0.92);
  -webkit-backdrop-filter: blur(14px) saturate(0.92);
  background: linear-gradient(180deg, rgba(10, 8, 6, 0.12), rgba(10, 8, 6, 0.02));
  transition:
    opacity 900ms ease,
    backdrop-filter 900ms ease,
    -webkit-backdrop-filter 900ms ease;
}

.vdl-overlay.reveal-site .vdl-glass-reveal {
  opacity: 1;
  backdrop-filter: blur(0) saturate(1);
  -webkit-backdrop-filter: blur(0) saturate(1);
}

/* Mist */
.vdl-mist {
  position: absolute;
  left: -8%;
  width: 116%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1200ms ease, transform 1800ms ease;
  filter: blur(18px);
}

.vdl-mist-back {
  top: 8%;
  height: 34%;
  z-index: 3;
  transform: translateY(-24px) scale(1.04);
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 235, 203, 0.18) 0%, rgba(255, 217, 172, 0.08) 36%, transparent 72%);
}

.vdl-mist-front {
  bottom: -4%;
  height: 30%;
  z-index: 8;
  transform: translateY(24px) scale(1.05);
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 221, 174, 0.16) 0%, rgba(255, 196, 132, 0.08) 34%, transparent 70%);
}

.vdl-overlay.show-mist .vdl-mist {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.vdl-overlay.show-mist .vdl-mist-back {
  animation: vdlMistDriftBack 8s ease-in-out infinite alternate;
}

.vdl-overlay.show-mist .vdl-mist-front {
  animation: vdlMistDriftFront 7s ease-in-out infinite alternate;
}

@keyframes vdlMistDriftBack {
  0% { transform: translateY(0) scale(1); }
  100% { transform: translateY(8px) scale(1.03); }
}

@keyframes vdlMistDriftFront {
  0% { transform: translateY(0) scale(1); }
  100% { transform: translateY(-8px) scale(1.04); }
}

/* Light system */
.vdl-rays {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(74vw, 920px);
  height: min(100vh, 1080px);
  z-index: 4;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.88);
  transition: opacity 1000ms ease, transform 1400ms cubic-bezier(.22,.8,.2,1);
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.00) 0%,
      rgba(255,239,206,0.12) 18%,
      rgba(255,219,153,0.28) 44%,
      rgba(255,188,108,0.16) 72%,
      rgba(255,255,255,0.00) 100%
    );
  clip-path: polygon(47.5% 0%, 52.5% 0%, 76% 100%, 24% 100%);
  filter: blur(14px);
}

.vdl-floor-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(62vw, 780px);
  height: 154px;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 220px) scale(0.9);
  transition: opacity 1000ms ease, transform 1400ms cubic-bezier(.22,.8,.2,1);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 227, 175, 0.34) 0%, rgba(255, 204, 122, 0.16) 42%, transparent 74%);
  filter: blur(16px);
}

.vdl-overlay.show-light .vdl-rays,
.vdl-overlay.open-doors .vdl-rays {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.02);
  animation: vdlRaysPulse 3.6s ease-in-out infinite alternate;
}

.vdl-overlay.show-light .vdl-floor-glow,
.vdl-overlay.open-doors .vdl-floor-glow {
  opacity: 1;
  transform: translate(-50%, 220px) scale(1.05);
}

@keyframes vdlRaysPulse {
  0% { filter: blur(14px) brightness(1); }
  100% { filter: blur(18px) brightness(1.08); }
}

/* Particles */
.vdl-particles {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  opacity: 0;
  transition: opacity 900ms ease;
}

.vdl-overlay.show-mist .vdl-particles,
.vdl-overlay.show-light .vdl-particles {
  opacity: 1;
}

.vdl-particle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 235, 197, 0.95) 0%, rgba(255, 218, 173, 0.40) 48%, transparent 78%);
  filter: blur(0.4px);
  animation: vdlFloat 10s linear infinite;
}

.vdl-particle.p1 { width: 6px; height: 6px; left: 16%; top: 76%; animation-delay: 0s; }
.vdl-particle.p2 { width: 8px; height: 8px; left: 24%; top: 68%; animation-delay: 1.0s; }
.vdl-particle.p3 { width: 5px; height: 5px; left: 40%; top: 84%; animation-delay: 1.8s; }
.vdl-particle.p4 { width: 7px; height: 7px; left: 56%; top: 72%; animation-delay: 0.7s; }
.vdl-particle.p5 { width: 6px; height: 6px; left: 66%; top: 82%; animation-delay: 2.2s; }
.vdl-particle.p6 { width: 9px; height: 9px; left: 78%; top: 66%; animation-delay: 1.5s; }
.vdl-particle.p7 { width: 5px; height: 5px; left: 84%; top: 80%; animation-delay: 2.8s; }
.vdl-particle.p8 { width: 7px; height: 7px; left: 48%; top: 62%; animation-delay: 3.3s; }

@keyframes vdlFloat {
  0% {
    transform: translate3d(0, 0, 0) scale(0.88);
    opacity: 0;
  }
  12% {
    opacity: 0.86;
  }
  50% {
    transform: translate3d(14px, -88px, 0) scale(1);
    opacity: 0.72;
  }
  100% {
    transform: translate3d(-12px, -176px, 0) scale(1.12);
    opacity: 0;
  }
}

/* Stage */
.vdl-stage {
  position: absolute;
  inset: 0;
  z-index: 10;
  perspective: 2300px;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}

/* Center seam */
.vdl-center-seam {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  z-index: 18;
  opacity: 0.18;
  background: linear-gradient(180deg, transparent, rgba(255, 230, 178, 0.75) 14%, rgba(255, 170, 86, 0.50) 50%, transparent 100%);
  box-shadow: 0 0 20px rgba(255, 196, 103, 0.16);
  transition: opacity 500ms ease;
}

.vdl-overlay.open-doors .vdl-center-seam {
  opacity: 0;
}

/* Doors */
.vdl-door {
  position: absolute;
  top: 0;
  width: 50.2%;
  height: 100%;
  z-index: 15;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform, filter;
  transition:
    transform 1850ms cubic-bezier(.22,.8,.2,1),
    filter 1200ms ease,
    box-shadow 1000ms ease;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.00) 14%, rgba(0,0,0,0.15) 54%, rgba(0,0,0,0.32) 100%),
    linear-gradient(90deg, rgba(0,0,0,0.36), rgba(255,255,255,0.08) 16%, rgba(0,0,0,0.08) 52%, rgba(0,0,0,0.26) 100%),
    var(--vdl-door-texture);
  background-size: cover, cover, cover;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow:
    inset 0 0 95px rgba(0, 0, 0, 0.54),
    inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.vdl-door-left {
  left: 0;
  transform-origin: left center;
  transform: translate3d(0, 0, 0) rotateY(0deg);
}

.vdl-door-right {
  right: 0;
  transform-origin: right center;
  transform: translate3d(0, 0, 0) rotateY(0deg);
}

.vdl-door-frame,
.vdl-door-motif,
.vdl-door-inlay,
.vdl-door-handle,
.vdl-door-edge-glow {
  position: absolute;
  display: block;
  pointer-events: none;
}

.vdl-door-frame.outer {
  inset: 1.8% 4%;
  border: 1px solid rgba(243, 215, 161, 0.10);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.20),
    inset 0 0 40px rgba(0, 0, 0, 0.12);
}

.vdl-door-frame.inner {
  inset: 8% 10%;
  border: 1px solid rgba(243, 215, 161, 0.12);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.16),
    inset 0 0 22px rgba(0, 0, 0, 0.10);
}

.vdl-door-motif {
  inset: 11% 16%;
  opacity: 0.34;
  mix-blend-mode: screen;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 219, 158, 0.16) 0%, transparent 18%),
    radial-gradient(circle at 50% 50%, rgba(255, 219, 158, 0.13) 0%, transparent 22%),
    radial-gradient(circle at 50% 82%, rgba(255, 219, 158, 0.16) 0%, transparent 18%),
    linear-gradient(180deg, transparent 0%, rgba(255, 215, 159, 0.10) 16%, transparent 31%, rgba(255, 215, 159, 0.10) 50%, transparent 69%, rgba(255, 215, 159, 0.10) 84%, transparent 100%);
}

.vdl-door-inlay {
  left: 12%;
  right: 12%;
  height: 3px;
  background:
    linear-gradient(90deg, transparent 0%, rgba(255, 229, 176, 0.28) 10%, rgba(185, 118, 45, 0.46) 50%, rgba(255, 229, 176, 0.28) 90%, transparent 100%);
  box-shadow:
    0 0 12px rgba(255, 200, 124, 0.10),
    0 1px 0 rgba(0,0,0,0.16);
}

.vdl-door-inlay.top {
  top: 16%;
}

.vdl-door-inlay.bottom {
  bottom: 16%;
}

.vdl-door-handle {
  top: 50%;
  width: 16px;
  height: 144px;
  margin-top: -72px;
  border-radius: 999px;
  z-index: 2;
  background:
    linear-gradient(180deg, #fbebc7 0%, #ddb66f 20%, #b97a34 58%, #7f4e1c 100%);
  box-shadow:
    0 0 0 1px rgba(78, 46, 15, 0.30),
    0 0 20px rgba(255, 214, 145, 0.14),
    inset 0 0 10px rgba(255,255,255,0.24);
}

.vdl-door-left .vdl-door-handle {
  right: 26px;
}

.vdl-door-right .vdl-door-handle {
  left: 26px;
}

.vdl-door-edge-glow {
  top: 0;
  bottom: 0;
  width: 8px;
  opacity: 0.18;
  filter: blur(2px);
  transition: opacity 600ms ease, box-shadow 600ms ease, filter 600ms ease;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.00) 0%,
      rgba(255,237,191,0.92) 10%,
      rgba(255,204,107,0.74) 50%,
      rgba(255,154,65,0.18) 100%
    );
}

.vdl-door-left .vdl-door-edge-glow {
  right: -4px;
}

.vdl-door-right .vdl-door-edge-glow {
  left: -4px;
}

.vdl-overlay.show-light .vdl-door-edge-glow {
  opacity: 1;
  filter: blur(1px);
  box-shadow: 0 0 28px rgba(255, 208, 120, 0.50);
}

.vdl-overlay.open-doors .vdl-door-left {
  transform: translate3d(-2%, 0, 0) rotateY(-104deg);
  filter: brightness(0.88);
  box-shadow:
    inset 0 0 78px rgba(0,0,0,0.40),
    10px 0 44px rgba(0,0,0,0.24);
}

.vdl-overlay.open-doors .vdl-door-right {
  transform: translate3d(2%, 0, 0) rotateY(104deg);
  filter: brightness(0.88);
  box-shadow:
    inset 0 0 78px rgba(0,0,0,0.40),
    -10px 0 44px rgba(0,0,0,0.24);
}

/* Logo altar */
.vdl-logo-altar {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 22;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-50%, -44%, 0) scale(0.92);
  will-change: opacity, transform;
  transition:
    opacity 900ms ease,
    transform 1200ms cubic-bezier(.22,.8,.2,1);
}

.vdl-overlay.show-logo .vdl-logo-altar {
  opacity: 1;
  transform: translate3d(-50%, -50%, 0) scale(1);
}

.vdl-logo-aura,
.vdl-logo-ring,
.vdl-logo-plinth {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.vdl-logo-aura {
  width: 280px;
  height: 280px;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 1000ms ease;
  background:
    radial-gradient(circle, rgba(255, 245, 219, 0.92) 0%, rgba(255, 229, 181, 0.28) 36%, rgba(255,255,255,0.00) 72%);
  filter: blur(12px);
}

.vdl-overlay.show-logo .vdl-logo-aura {
  opacity: 1;
  animation: vdlAuraBreathe 3.2s ease-in-out infinite alternate;
}

@keyframes vdlAuraBreathe {
  0% { transform: translate(-50%, -50%) scale(1); }
  100% { transform: translate(-50%, -50%) scale(1.05); }
}

.vdl-logo-ring {
  border-radius: 50%;
  opacity: 0;
  transition: opacity 1000ms ease;
}

.vdl-logo-ring.ring-1 {
  width: 308px;
  height: 308px;
  border: 1px solid rgba(243, 215, 161, 0.18);
  box-shadow:
    0 0 28px rgba(255, 210, 134, 0.14),
    inset 0 0 28px rgba(255, 210, 134, 0.08);
}

.vdl-logo-ring.ring-2 {
  width: 352px;
  height: 352px;
  border: 1px solid rgba(243, 215, 161, 0.08);
  box-shadow:
    0 0 40px rgba(255, 210, 134, 0.08),
    inset 0 0 24px rgba(255, 210, 134, 0.04);
}

.vdl-overlay.show-logo .vdl-logo-ring {
  opacity: 1;
}

.vdl-overlay.show-logo .vdl-logo-ring.ring-1 {
  animation: vdlRingRotate 12s linear infinite;
}

.vdl-overlay.show-logo .vdl-logo-ring.ring-2 {
  animation: vdlRingRotateReverse 16s linear infinite;
}

@keyframes vdlRingRotate {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes vdlRingRotateReverse {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(-360deg); }
}

.vdl-logo-plinth {
  width: 248px;
  height: 58px;
  transform: translate(-50%, 122px);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 225, 173, 0.26) 0%, rgba(255, 197, 121, 0.12) 46%, transparent 78%);
  filter: blur(12px);
}

.vdl-logo-frame {
  position: relative;
  z-index: 2;
  width: min(240px, 48vw);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  border-radius: 34px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02)),
    rgba(12, 9, 6, 0.42);
  border: 1px solid rgba(243, 215, 161, 0.18);
  box-shadow:
    0 18px 40px rgba(0,0,0,0.26),
    0 0 40px rgba(255, 205, 132, 0.08),
    inset 0 0 0 1px rgba(255,255,255,0.04);
  backdrop-filter: blur(8px);
  overflow: hidden;
}

.vdl-logo-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.00) 34%, rgba(255,255,255,0.04) 100%);
}

.vdl-logo-frame::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -40%;
  width: 36%;
  pointer-events: none;
  transform: rotate(18deg);
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.12), transparent);
  opacity: 0;
}

.vdl-overlay.show-logo .vdl-logo-frame::after {
  animation: vdlFrameSheen 2.6s ease 0.8s 1 forwards;
}

@keyframes vdlFrameSheen {
  0% {
    left: -40%;
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    left: 120%;
    opacity: 0;
  }
}

.vdl-logo-frame img {
  display: block;
  width: min(220px, 44vw);
  height: auto;
  filter:
    drop-shadow(0 0 42px rgba(255, 214, 145, 0.18))
    drop-shadow(0 0 18px rgba(255,255,255,0.08));
}

/* Skip button bottom-center, mobile-safe */
.vdl-skip {
  position: absolute;
  left: 50%;
  bottom: max(14px, calc(env(safe-area-inset-bottom) + 12px));
  z-index: 30;
  min-width: 140px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  padding: 11px 18px;
  font: 600 13px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0.02em;
  color: #f7ead1;
  background: rgba(14, 11, 8, 0.42);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transform: translateX(-50%);
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, opacity 180ms ease;
}

.vdl-skip:hover {
  transform: translateX(-50%) translateY(-1px);
  background: rgba(24, 18, 13, 0.56);
  border-color: rgba(255,255,255,0.24);
}

.vdl-skip:focus-visible {
  outline: 2px solid rgba(255, 223, 164, 0.90);
  outline-offset: 2px;
}

/* Mobile */
@media (max-width: 768px) {
  body.vdl-intro-active .vdl-blur-target {
    filter: blur(12px) saturate(0.92) brightness(0.86);
    transform: scale(1.008);
  }

  .vdl-rays {
    width: min(82vw, 560px);
  }

  .vdl-floor-glow {
    width: min(80vw, 420px);
    height: 116px;
    transform: translate(-50%, 160px) scale(0.92);
  }

  .vdl-door-frame.inner {
    inset: 9% 9%;
  }

  .vdl-door-inlay.top {
    top: 14%;
  }

  .vdl-door-inlay.bottom {
    bottom: 14%;
  }

  .vdl-door-handle {
    width: 12px;
    height: 104px;
    margin-top: -52px;
  }

  .vdl-door-left .vdl-door-handle {
    right: 16px;
  }

  .vdl-door-right .vdl-door-handle {
    left: 16px;
  }

  .vdl-logo-aura {
    width: 200px;
    height: 200px;
  }

  .vdl-logo-ring.ring-1 {
    width: 228px;
    height: 228px;
  }

  .vdl-logo-ring.ring-2 {
    width: 260px;
    height: 260px;
  }

  .vdl-logo-plinth {
    width: 168px;
    transform: translate(-50%, 96px);
  }

  .vdl-logo-frame {
    width: min(184px, 54vw);
    border-radius: 26px;
  }

  .vdl-logo-frame img {
    width: min(168px, 48vw);
  }

  .vdl-skip {
    min-width: 132px;
    padding: 10px 16px;
    font-size: 12px;
  }
}

/* Very small devices */
@media (max-width: 420px) {
  .vdl-logo-frame {
    width: min(168px, 56vw);
  }

  .vdl-logo-frame img {
    width: min(152px, 48vw);
  }

  .vdl-skip {
    bottom: max(12px, calc(env(safe-area-inset-bottom) + 10px));
    min-width: 124px;
    padding: 10px 14px;
  }
}

/* =====================================================
   V4.2 Eye-Candy Enhancements (non-destructive overrides)
   ===================================================== */

/* Cinematic camera dolly — subtle zoom in through the scene */
.vdl-overlay .vdl-stage {
  transform: scale(1.008);
  transform-origin: 50% 52%;
  transition: transform 3200ms cubic-bezier(.16,1,.3,1);
}

.vdl-overlay.open-doors .vdl-stage {
  transform: scale(1.045);
}

.vdl-overlay.reveal-site .vdl-stage {
  transform: scale(1.075);
}

/* Heaven-light bloom that bursts from seam when doors open */
.vdl-heaven-bloom {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  z-index: 12;
  pointer-events: none;
  opacity: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 250, 230, 1) 0%, rgba(255, 225, 170, 0.82) 22%, rgba(255, 196, 120, 0.36) 48%, rgba(255, 170, 85, 0.12) 72%, transparent 100%);
  filter: blur(4px);
  transition: opacity 500ms ease;
}

.vdl-overlay.open-doors .vdl-heaven-bloom {
  opacity: 1;
  animation: vdlHeavenBurst 2200ms cubic-bezier(.22,.8,.2,1) forwards;
}

@keyframes vdlHeavenBurst {
  0% {
    transform: scale(0.4);
    opacity: 0;
    filter: blur(2px) brightness(1.1);
  }
  20% {
    opacity: 1;
    filter: blur(6px) brightness(1.6);
  }
  55% {
    transform: scale(62);
    opacity: 0.74;
    filter: blur(28px) brightness(1.3);
  }
  100% {
    transform: scale(120);
    opacity: 0;
    filter: blur(42px) brightness(1);
  }
}

/* Vertical seam burst — crack of light escaping the doors */
.vdl-seam-burst {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 8px;
  margin-left: -4px;
  z-index: 13;
  opacity: 0;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(255, 242, 210, 0.20) 8%,
      rgba(255, 232, 178, 0.90) 30%,
      rgba(255, 200, 130, 0.98) 50%,
      rgba(255, 232, 178, 0.80) 70%,
      rgba(255, 242, 210, 0.14) 94%,
      transparent 100%
    );
  filter: blur(5px);
  box-shadow:
    0 0 36px rgba(255, 214, 148, 0.72),
    0 0 82px rgba(255, 188, 112, 0.42);
  transition: opacity 400ms ease;
}

.vdl-overlay.open-doors .vdl-seam-burst {
  opacity: 1;
  animation: vdlSeamBurst 1800ms cubic-bezier(.22,.8,.2,1) forwards;
}

@keyframes vdlSeamBurst {
  0% {
    transform: scaleX(1) scaleY(0.5);
    opacity: 0;
    filter: blur(3px) brightness(1);
  }
  30% {
    transform: scaleX(1.2) scaleY(1);
    opacity: 1;
    filter: blur(6px) brightness(1.5);
  }
  70% {
    transform: scaleX(3.8) scaleY(1.05);
    opacity: 0.7;
    filter: blur(12px) brightness(1.2);
  }
  100% {
    transform: scaleX(8) scaleY(1.1);
    opacity: 0;
    filter: blur(22px) brightness(1);
  }
}

/* Parallax dust layer — slower, finer, deeper-feeling ambient motes */
.vdl-dust-far {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1400ms ease;
}

.vdl-overlay.show-mist .vdl-dust-far,
.vdl-overlay.show-light .vdl-dust-far,
.vdl-overlay.open-doors .vdl-dust-far {
  opacity: 0.85;
}

.vdl-dust {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 238, 202, 0.92) 0%, rgba(255, 213, 162, 0.30) 55%, transparent 78%);
  filter: blur(0.3px);
  animation: vdlDustDrift 14s linear infinite;
}

.vdl-dust.d1 { left: 10%; top: 88%; width: 3px; height: 3px; animation-delay: 0s; animation-duration: 13s; }
.vdl-dust.d2 { left: 22%; top: 80%; width: 2px; height: 2px; animation-delay: 2.2s; animation-duration: 15s; }
.vdl-dust.d3 { left: 33%; top: 92%; width: 4px; height: 4px; animation-delay: 0.8s; animation-duration: 12s; }
.vdl-dust.d4 { left: 45%; top: 78%; width: 2px; height: 2px; animation-delay: 3.6s; animation-duration: 16s; }
.vdl-dust.d5 { left: 58%; top: 90%; width: 3px; height: 3px; animation-delay: 1.4s; animation-duration: 14s; }
.vdl-dust.d6 { left: 70%; top: 84%; width: 4px; height: 4px; animation-delay: 2.8s; animation-duration: 13s; }
.vdl-dust.d7 { left: 82%; top: 92%; width: 2px; height: 2px; animation-delay: 0.4s; animation-duration: 17s; }
.vdl-dust.d8 { left: 92%; top: 80%; width: 3px; height: 3px; animation-delay: 4.2s; animation-duration: 15s; }

@keyframes vdlDustDrift {
  0% {
    transform: translate3d(0, 0, 0) scale(0.8);
    opacity: 0;
  }
  10% {
    opacity: 0.9;
  }
  50% {
    transform: translate3d(-8px, -180px, 0) scale(1);
    opacity: 0.7;
  }
  100% {
    transform: translate3d(10px, -380px, 0) scale(1.2);
    opacity: 0;
  }
}

/* Gold foil shimmer sweep across the logo frame (upgraded cadence) */
.vdl-logo-frame::after {
  animation: none; /* reset base; our upgraded animation below takes over */
}

.vdl-overlay.show-logo .vdl-logo-frame::after {
  animation: vdlFoilSheen 3.4s cubic-bezier(.25,.8,.25,1) 0.9s infinite;
}

@keyframes vdlFoilSheen {
  0% {
    left: -50%;
    opacity: 0;
    background: linear-gradient(180deg, transparent, rgba(255,235,190,0.20), transparent);
  }
  12% {
    opacity: 1;
  }
  35% {
    background: linear-gradient(180deg, transparent, rgba(255,245,210,0.38), transparent);
  }
  50% {
    opacity: 0.6;
  }
  100% {
    left: 130%;
    opacity: 0;
    background: linear-gradient(180deg, transparent, rgba(255,218,160,0.14), transparent);
  }
}

/* Slightly warmer, smoother door swing curve */
.vdl-door {
  transition:
    transform 2100ms cubic-bezier(.16,1,.3,1),
    filter 1400ms ease,
    box-shadow 1200ms ease;
}

/* Mobile scaling for new layers */
@media (max-width: 768px) {
  .vdl-overlay.open-doors .vdl-stage {
    transform: scale(1.03);
  }
  .vdl-overlay.reveal-site .vdl-stage {
    transform: scale(1.055);
  }
  .vdl-seam-burst {
    width: 6px;
    margin-left: -3px;
  }
  .vdl-dust {
    transform: scale(0.8);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .vdl-overlay {
    display: none !important;
  }

  html.vdl-intro-lock,
  body.vdl-intro-lock {
    overflow: auto !important;
  }

  .vdl-blur-target {
    filter: none !important;
    transform: none !important;
  }

  .vdl-stage,
  .vdl-heaven-bloom,
  .vdl-seam-burst,
  .vdl-dust-far,
  .vdl-logo-frame::after {
    animation: none !important;
    transition: none !important;
  }
}