/* Version 2 hero: the doors. The carved AD medallion is a split door
   handle (half on each door), so the page opens on it, closed, and as you
   scroll the two doors swing inward on their hinges and split the AD,
   revealing the night house (the version 1 hero) inside. js/doors.js
   drives it; this sheet only sets the stage. */

/* The scroll track: the stage stays pinned while the doors open, then the
   page carries on. Its extra height is the length of the opening. */
.arrival { position: relative; height: 360svh; }
.arrival__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  perspective: 1500px;
  perspective-origin: 50% 45%;
}
.arrival__stage .hero { height: 100%; }

.doors {
  position: absolute;
  inset: 0;
  z-index: 10;
  transform-style: preserve-3d;
  pointer-events: none;
}
/* Clickable only while closed: a click opens them (js/doors.js). */
.arrival.is-closed .door { pointer-events: auto; cursor: pointer; }

/* ---------- the reveal, staged like a cut ----------
   Behind the doors: the veil (the house still in the dark) and the flood
   (the room's light pouring out through the gap), and nothing else. js/doors.js drives both from how open the doors are. */
.reveal__veil {
  position: absolute;
  inset: 0;
  z-index: 8;
  background: #050403;
  pointer-events: none;
}
.reveal__flood {
  position: absolute;
  inset: -10% 0;
  z-index: 9;
  opacity: 0;
  pointer-events: none;
  transform: scaleX(0.08);
  /* Light adds to what is under it (plus-lighter), so it reads as a glow,
     not as a brown wash laid over the dark. A white-hot core, a short warm
     falloff, almost no wide haze. */
  background:
    radial-gradient(ellipse 14% 58% at 50% 50%, rgba(255, 248, 230, 1), rgba(255, 214, 150, 0.7) 40%, rgba(255, 170, 80, 0) 100%),
    radial-gradient(ellipse 34% 70% at 50% 50%, rgba(255, 180, 90, 0.28), rgba(255, 150, 60, 0) 72%);
  mix-blend-mode: plus-lighter;
}

/* Each door is half the screen, showing its half of the same photo. The
   photo's size and offset come from js/doors.js, so the seam in the wood
   lands exactly on the gap between the two doors at any screen size. */
.door {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  background-image: url('../assets/doors-ad2.jpg');
  background-repeat: no-repeat;
  background-size: var(--bg-w) var(--bg-h);
  backface-visibility: hidden;
  will-change: transform;
}
.door--left  { left: 0;  transform-origin: 0 50%;    background-position: var(--bg-x) var(--bg-y); }
.door--right { right: 0; transform-origin: 100% 50%; background-position: var(--bg-x-right) var(--bg-y); }
/* The doors darken as they turn away from the room's light. */
.door::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #0a0705;
  opacity: var(--shade, 0);
}

/* Warm light leaking through the gap between the closed doors. */
.doors__light {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(to bottom, rgba(255, 200, 120, 0), rgba(255, 210, 140, 0.9) 30%, rgba(255, 200, 120, 0.9) 70%, rgba(255, 200, 120, 0));
  box-shadow: 0 0 18px 4px rgba(255, 170, 70, 0.45), 0 0 60px 14px rgba(255, 150, 50, 0.18);
  animation: seam-glow 3.6s ease-in-out infinite;
}
@keyframes seam-glow {
  0%, 100% { filter: brightness(0.8); }
  50% { filter: brightness(1.15); }
}

/* The greeting on the closed doors. */
.doors__copy {
  position: absolute;
  z-index: 13;
  left: clamp(1.25rem, 6vw, 6rem);
  bottom: clamp(5rem, 14vh, 9rem);
  max-width: calc(100vw - 2.5rem);
  will-change: opacity, transform;
}
.doors__mark {
  display: block;
  width: 2.6rem;
  aspect-ratio: 1170 / 1894;
  margin-bottom: 1.1rem;
  background: var(--lamp);
  -webkit-mask: url('../assets/logo-mark.png') center / contain no-repeat;
          mask: url('../assets/logo-mark.png') center / contain no-repeat;
  filter: drop-shadow(0 1px 10px rgba(0, 0, 0, 0.6));
}
.doors__eyebrow {
  margin: 0 0 0.9rem;
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lamp);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}
.doors__title {
  margin: 0 0 1.4rem;
  font-family: var(--serif);
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0;
  font-size: clamp(3.3rem, 7.6vw, 6.6rem);
  line-height: 1;
  white-space: nowrap; /* "mus. kape?" is one phrase, like the neon */
  color: var(--oat);
  text-shadow: 0 2px 30px rgba(20, 10, 4, 0.75);
}

/* ---------- The neon ----------
   "mus. kape?" is the phrase on the old house's neon, so on the doors it
   is lit like one. On load the tubes sit dark, then warm up softly (one
   gentle dip, no hard flicker); after that the glow breathes slightly, and
   the "?" dims softly once in a long while. js/doors.js adds .is-lit once
   the font has loaded, so the flicker never plays on a fallback font.
   Reduced motion: lit, steady, no flicker. */
.neon {
  --tube: #fff3df;                         /* the white-hot core */
  --glow-1: rgba(255, 217, 154, 0.95);     /* lamp */
  --glow-2: rgba(255, 178, 74, 0.85);      /* amber, the brand's neon */
  --glow-3: rgba(255, 140, 40, 0.55);
  position: relative;
}
/* Light the sign throws onto the doors behind it. */
.neon::before {
  content: '';
  position: absolute;
  inset: -35% -12%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(255, 160, 60, 0.32), rgba(255, 140, 40, 0) 75%);
  filter: blur(12px);
  opacity: 0;
  pointer-events: none;
}
.neon__tube,
.neon__q {
  display: inline-block;
  color: rgba(255, 236, 210, 0.22);        /* unlit glass */
  text-shadow: 0 2px 18px rgba(20, 10, 4, 0.6);
}
.neon.is-lit .neon__tube,
.neon.is-lit .neon__q {
  color: var(--tube);
  text-shadow:
    0 0 2px #fff,
    0 0 6px var(--glow-1),
    0 0 14px var(--glow-2),
    0 0 32px var(--glow-2),
    0 0 64px var(--glow-3);
}
.neon.is-lit::before { opacity: 1; }

/* Warming up: the whole sign, "?" included, glows in slowly with one
   gentle dip. Then the light breathes very slightly, and the "?" dims softly
   once in a long while. Warm, not electric. */
.neon.is-lit .neon__tube,
.neon.is-lit::before {
  animation:
    neon-warm 2.6s ease-out both,
    neon-breathe 7s ease-in-out 2.6s infinite;
}
/* The "?" sits inside the tube, so it warms up with the rest; on its own
   it only sighs. */
.neon.is-lit .neon__q { animation: neon-sigh 16s ease-in-out 4s infinite; }
@keyframes neon-warm {
  0%   { opacity: 0.25; }
  35%  { opacity: 0.9; }
  45%  { opacity: 0.7; }
  70%  { opacity: 1; }
  100% { opacity: 1; }
}
/* Barely there: the glow swells and settles like a lamp. */
@keyframes neon-breathe {
  0%, 100% { opacity: 1; }
  50%  { opacity: 0.93; }
}
/* The old tube's one habit: a soft dim and back, once every sixteen seconds. */
@keyframes neon-sigh {
  0%, 88%, 100% { opacity: 1; }
  92%  { opacity: 0.72; }
  95%  { opacity: 0.95; }
}
.doors__hint {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1.3rem;
  border: 1px solid rgba(255, 217, 154, 0.5);
  border-radius: 999px;
  background: rgba(20, 12, 6, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--lamp);
  font: inherit;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.doors__hint:hover { background: rgba(40, 24, 10, 0.5); }

/* Once open, the doors stop painting. */
.arrival.is-open .doors,
.arrival.is-open .doors__copy,
.arrival.is-open .reveal__veil,
.arrival.is-open .reveal__flood { visibility: hidden; }

@media (max-aspect-ratio: 9/10) {
  .doors__copy { left: 1.25rem; right: 1.25rem; bottom: 6rem; max-width: none; text-align: center; }
  .doors__mark { margin-left: auto; margin-right: auto; }
}

/* Reduced motion: no swinging; the doors simply fade away as you scroll. */
@media (prefers-reduced-motion: reduce) {
  .doors__light { animation: none; }
  .neon.is-lit .neon__tube,
  .neon.is-lit .neon__q,
  .neon.is-lit::before { animation: none; }
  .reveal__flood { display: none; }
}