#opening-scene {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: transparent;
  pointer-events: none;
  perspective: 1200px;
  transform-style: preserve-3d;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

#opening-scene.is-complete {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.opening-door {
  position: absolute;
  top: 0;
  height: 100%;
  width: 50vw;
  background: var(--color-bg-matte-black);
  z-index: 10;
  overflow: hidden;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  pointer-events: auto;
}

.opening-door--left {
  left: 0;
  transform-origin: left center;
}

.opening-door--right {
  right: 0;
  transform-origin: right center;
}

.opening-door__rays {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.opening-door--left .opening-door__rays {
  background: repeating-conic-gradient(from 0deg at 100% 50%, #0F0D0A 0deg 0.5deg, #151310 0.5deg 1deg, rgba(229, 196, 131, 0.28) 1deg 1.2deg, #0F0D0A 1.2deg 2deg, #151310 2deg 2.5deg, rgba(229, 196, 131, 0.35) 2.5deg 2.7deg, #0F0D0A 2.7deg 4deg);
}

.opening-door--right .opening-door__rays {
  background: repeating-conic-gradient(from 0deg at 0% 50%, #0F0D0A 0deg 0.5deg, #151310 0.5deg 1deg, rgba(229, 196, 131, 0.28) 1deg 1.2deg, #0F0D0A 1.2deg 2deg, #151310 2deg 2.5deg, rgba(229, 196, 131, 0.35) 2.5deg 2.7deg, #0F0D0A 2.7deg 4deg);
}

.opening-door__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.opening-door--left .opening-door__vignette {
  background: radial-gradient(circle farthest-corner at 100% 50%, transparent 0%, transparent 30%, #0F0D0A 75%, #0F0D0A 100%);
}

.opening-door--right .opening-door__vignette {
  background: radial-gradient(circle farthest-corner at 0% 50%, transparent 0%, transparent 30%, #0F0D0A 75%, #0F0D0A 100%);
}

.opening-door__seam {
  position: absolute;
  top: 0;
  height: 100%;
  width: 1px;
  background: var(--color-accent-gold-light);
  opacity: 0;
  z-index: 20;
  pointer-events: none;
  transition: opacity 0.1s ease;
}

.opening-door--left .opening-door__seam { right: 0; }
.opening-door--right .opening-door__seam { left: 0; }

.opening-shield {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  filter: drop-shadow(0 0 40px rgba(0,0,0,0.85));
}

.opening-shield--left { right: 0; transform: translate(50%, -50%); }
.opening-shield--right { left: 0; transform: translate(-50%, -50%); }

.opening-shield__outer {
  width: min(90vw, 72vh);
  height: min(90vw, 72vh);
  border-radius: 50%;
  border: 1px solid rgba(229, 196, 131, 0.2);
  background: #151310;
  box-shadow: inset 0 0 50px rgba(0,0,0,0.9), 0 0 30px rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.opening-shield__pattern {
  position: absolute;
  inset: 0;
  opacity: 0.7;
  background: repeating-conic-gradient(from 0deg at 50% 50%, #0F0D0A 0deg 1.5deg, #1A1713 1.5deg 3deg);
}

.opening-shield__inner {
  width: min(72vw, 58vh);
  height: min(72vw, 58vh);
  border-radius: 50%;
  border: 1px solid rgba(229, 196, 131, 0.15);
  background: #0A0907;
  box-shadow: inset 0 0 45px rgba(0,0,0,0.95);
  position: relative;
  z-index: 2;
}

.opening-flare {
  position: absolute;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
}

.opening-flare__gold {
  position: absolute;
  width: 60vw;
  height: 30vh;
  border-radius: 50%;
  filter: blur(100px);
  background: radial-gradient(ellipse at center, rgba(229,196,131,0.2) 0%, rgba(229,196,131,0) 70%);
}

.opening-flare__white {
  position: absolute;
  width: 40vw;
  height: 15vh;
  border-radius: 50%;
  filter: blur(60px);
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
}

.opening-logo {
  position: relative;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 80vw;
  opacity: 0;
}

.opening-logo img {
  width: 100%;
  max-width: 280px;
  height: auto;
}

@media (max-width: 767px) {
  .opening-logo img {
    max-width: 252px;
  }
}

.opening-skip {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  z-index: 40;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(229, 196, 131, 0.6);
  transition: color 0.3s ease;
  padding: 0.5rem;
}

.opening-skip:hover { color: var(--color-accent-gold-light); }

.opening-skip span {
  opacity: 0;
  transform: translateX(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.opening-skip:hover span {
  opacity: 1;
  transform: translateX(0);
}

.opening-skip svg {
  width: 1rem;
  height: 1rem;
}

#opening-scene.is-opening .opening-door {
  will-change: transform;
}

#opening-scene.is-opening .opening-flare,
#opening-scene.is-opening .opening-logo {
  will-change: transform, opacity;
}

#opening-scene.is-opening .opening-logo {
  animation: opening-logo-sequence 3.25s cubic-bezier(0.45, 0, 0.55, 1) forwards;
}

#opening-scene.is-opening .opening-flare {
  animation: opening-flare-bloom 1.5s cubic-bezier(0.45, 0, 0.2, 1) 1.5s forwards;
}

#opening-scene.is-opening .opening-door--left {
  animation: opening-door-left 1.8s cubic-bezier(0.6, -0.28, 0.735, 0.045) 3.5s forwards;
}

#opening-scene.is-opening .opening-door--right {
  animation: opening-door-right 1.8s cubic-bezier(0.6, -0.28, 0.735, 0.045) 3.5s forwards;
}

#opening-scene.is-opening .opening-door__seam {
  animation: opening-seam-fade 0.1s ease 3.5s forwards;
}

#opening-scene.is-skipped .opening-logo,
#opening-scene.is-skipped .opening-flare {
  opacity: 0 !important;
  animation: none;
}

#opening-scene.is-skipped .opening-door--left {
  transform: rotateY(-100deg);
}

#opening-scene.is-skipped .opening-door--right {
  transform: rotateY(100deg);
}

@keyframes opening-logo-sequence {
  0% {
    opacity: 0;
    transform: scale(0.92);
  }
  /* Match former emerge end at 2.0s (2 / 3.25 ≈ 61.5%) */
  61.5% {
    opacity: 1;
    transform: scale(1);
  }
  /* Soft hold before exit */
  76.9% {
    opacity: 1;
    transform: scale(1);
  }
  /* Complete fade ~250ms before doors open at 3.5s */
  100% {
    opacity: 0;
    transform: scale(0.985);
  }
}

@keyframes opening-flare-bloom {
  from { opacity: 0; transform: scale(0.4); }
  to { opacity: 1; transform: scale(1.6); }
}

@keyframes opening-door-left {
  to { transform: rotateY(-100deg); }
}

@keyframes opening-door-right {
  to { transform: rotateY(100deg); }
}

@keyframes opening-seam-fade {
  to { opacity: 0.2; }
}

@media (prefers-reduced-motion: reduce) {
  #opening-scene.is-opening .opening-logo,
  #opening-scene.is-opening .opening-flare,
  #opening-scene.is-opening .opening-door--left,
  #opening-scene.is-opening .opening-door--right {
    animation: none;
  }

  #opening-scene.is-opening .opening-logo { opacity: 1; }
  #opening-scene.is-opening .opening-door--left { transform: rotateY(-100deg); }
  #opening-scene.is-opening .opening-door--right { transform: rotateY(100deg); }
}