/* Scene 1 — the gate (1.psd). Whole scene is the tap target. */

/* config gate.backdrop:'door' — the desktop letterbox behind the door art.
   (In 'video' mode js/gate.js removes this node entirely, so what shows
   beside the 9:16 stage is the hero's own blurred video frame.)
   The #hero id selector in css/hero.css also matches this node -- the gate
   lives inside that section -- so this has to out-specify it. */
#hero .gate--door .scene__backdrop {
  background-image: url('../assets/gate-blur.webp?v=8');
}

/* config gate.backdrop:'video' — the gate paints nothing of its own. The hero
   <video>'s poster (the clip's first frame: closed curtains) is the backdrop,
   .hero__scrim is the reference's radial overlay over it, and the gate is only
   the seal and its label. */
.gate--video { background: transparent; }

.gate {
  position: absolute;
  inset: 0;
  z-index: 3;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  /* The scene centres its stage with flex; the gate is a sibling layer with
     its own stage, so it has to centre it the same way. */
  display: flex;
  justify-content: center;
  width: 100%;
}
.gate:focus-visible { outline: 3px solid var(--c-gold-lt); outline-offset: -6px; }

/* The seal + monogram lifted out of 'Group 1'. The PSD DropShadow effect
   cannot be rendered by psd-tools, so it is re-created here. */
.gate__seal {
  position: absolute;
  left: 387px;
  top: 812px;
  width: 306px;
  height: 297px;
  filter: drop-shadow(0 14px 26px rgba(60, 30, 8, 0.45));
  transform-origin: 50% 50%;
  animation: gate-breathe 3s ease-in-out infinite;
  will-change: transform;
}

@keyframes gate-breathe {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.gate__label {
  color: #f4e3c7;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(60, 26, 6, 0.55);
  animation: gate-label 3s ease-in-out infinite alternate;
}

@keyframes gate-label {
  from { opacity: 0.62; }
  to   { opacity: 1; }
}

/* Gate exit: opacity/translate only, driven by GSAP (see js/gate.js). */
.gate__group { display: block; position: absolute; inset: 0; }

/* The dark scrim the reference dips in and out of. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(circle at center,
      rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.7) 100%);
  opacity: 1;
}