/* La puerta es una hoja fotográfica que gira sobre sus bisagras izquierdas. */
.door-intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(.8rem, 2svh, 1.4rem);
  padding: max(1.1rem, env(safe-area-inset-top)) 1.2rem max(1.1rem, env(safe-area-inset-bottom));
  background: radial-gradient(ellipse at 50% 45%, #050907e8 0, #030504fa 75%);
  transition: opacity .6s ease, visibility .6s ease;
  isolation: isolate;
}
.door-intro::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: url('../media/horror-corridor-photo.webp') center / cover no-repeat;
  opacity: .15;
}
.door-intro__copy { text-align: center; transition: opacity .35s ease, transform .5s ease; }
.door-intro__copy .eyebrow { margin: 0 0 .45rem; color: #aab5a4; font-size: .67rem; letter-spacing: .23em; }
.door-intro__copy h2 { margin: 0; font: 600 clamp(1.6rem, 5.8vw, 2.2rem)/1.1 var(--condensed); letter-spacing: .05em; text-transform: uppercase; color: #d3dbcc; text-shadow:none; }
.door-stage {
  position: relative;
  height: min(65svh, 680px);
  aspect-ratio: .49;
  max-width: 78vw;
  flex: 0 0 auto;
  border: 9px solid #333b32;
  border-bottom-width: 5px;
  background: #020503;
  box-shadow: none;
  perspective: 1100px;
  perspective-origin: 80% 48%;
  transform-origin: 50% 48%;
}
.entry-portal { position: absolute; inset: 0; overflow: hidden; background: #030604; }
.entry-portal img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: brightness(.75) saturate(.65); opacity: .5; transition: opacity .8s .3s ease; }
.entry-door { position: absolute; inset: 0; padding: 0; border: 0; background: transparent; cursor: pointer; perspective: inherit; perspective-origin: inherit; }
.entry-door__leaf {
  position: absolute;
  inset: 0;
  display: block;
  transform-origin: 0 50%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  background: #1c231c;
  box-shadow: none;
  transition: transform 1.5s cubic-bezier(.4,.05,.3,1), filter 1.3s ease;
}
.entry-door__leaf > img { display: block; width: 100%; height: 100%; object-fit: fill; filter: brightness(.8) saturate(.65); }
.entry-door__edge { position: absolute; inset: 0 0 0 auto; width: 9px; background: #141b12; transform: rotateY(90deg); transform-origin: 100% 50%; }
.entry-door:focus-visible { outline: 2px solid #c4d1b8; outline-offset: 12px; }
.entry-door:hover .entry-door__leaf { filter: brightness(1.08); }
.entry-door[aria-disabled="true"] { cursor: progress; }
.door-stage__threshold { position: absolute; bottom: -9px; left: -9px; right: -9px; height: 7px; background: linear-gradient(#69705e, #252c22); box-shadow: none; pointer-events: none; }
.door-intro__controls { text-align: center; transition: opacity .35s ease; }
.door-intro__controls > p { margin: 0 0 .5rem; font: 600 .67rem var(--condensed); letter-spacing: .2em; color: #bec9b6; }
.door-intro .intro__skip { margin: 0; padding: .4rem .7rem; font-size: .63rem; color: #aab7a2; border-color: #abb8a139; background: transparent; }
.door-intro.is-opening .entry-door__leaf { transform: rotateY(-106deg); filter: brightness(.65); }
.door-intro.is-opening .entry-portal img { opacity: 1; }
.door-intro.is-opening .door-intro__copy { opacity: 0; transform: translateY(-8px); }
.door-intro.is-opening #doorHint { opacity: 0; }
.door-intro.is-opening .door-stage { animation: crossThreshold 1.9s .3s cubic-bezier(.55,.1,.3,1) forwards; }
.door-intro.is-opening .intro__skip { position: fixed; z-index: 2; bottom: max(1.2rem, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); }
body.intro-active main, body.intro-active .float-menu { visibility: hidden; }
.hero__title:focus { outline: none; }
body.has-entered .hero__title, body.has-entered .hero__event-date { animation: doorwayTitleReveal .8s ease both; }
@keyframes doorwayTitleReveal { from { opacity: 0; } to { opacity: 1; } }
@keyframes crossThreshold { 0%, 30% { transform: scale(1); } 100% { transform: scale(3.8); } }
@media (max-height: 520px) and (min-width: 560px) {
  .door-intro { gap: .5rem; }
  .door-stage { height: 61svh; border-width: 6px; }
  .door-intro__copy h2 { font-size: 1.4rem; }
  .door-intro__copy .eyebrow { font-size: .55rem; }
  .door-intro__controls > p { font-size: .55rem; margin-bottom: .2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .door-intro, .entry-door__leaf, .entry-portal img, .door-intro__copy { transition: none; }
  .door-intro.is-opening .door-stage { animation: none; }
}