/* doors — motion module (Anand & Palak).
   Slide 1 "open the palace doors" interaction.
   Transform-channel ownership: this module animates `.enter` (door swing) only,
   on the two door layers of .stage--slide1. It never touches .plx or img transforms.
   Extra visual (glow) and UI (tap target, hint) are appended as new elements —
   innerHTML on existing nodes is never replaced. */

/* 3D context for the door swing, scoped to the two door .plx wrappers only.
   Layer nesting is .plx → .jny (journey-scrub) → .enter → img. `perspective`
   reaches only direct children, so the door .jny wrappers pass the 3D context
   through to .enter via preserve-3d. .enter selectors are descendant (not
   direct-child) so they keep matching through the .jny wrapper — each door
   layer has exactly one .enter, so descendant matching is unambiguous. */
.stage--slide1 [data-hero="door-left"].plx,
.stage--slide1 [data-hero="door-right"].plx {
  perspective: 1600px;
}
.stage--slide1 [data-hero="door-left"].plx > .jny,
.stage--slide1 [data-hero="door-right"].plx > .jny {
  transform-style: preserve-3d;
}

.stage--slide1 [data-hero="door-left"].plx .enter,
.stage--slide1 [data-hero="door-right"].plx .enter {
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: transform 1100ms cubic-bezier(0.22, 0.61, 0.18, 1);
  will-change: auto;
}
.stage--slide1 [data-hero="door-left"].plx .enter {
  transform-origin: left center;
}
.stage--slide1 [data-hero="door-right"].plx .enter {
  transform-origin: right center;
}
/* While actively swinging, hint the browser to composite the transform.
   (.doors-swinging is set on the stage element itself — compound selector.) */
.stage--slide1.doors-swinging [data-hero="door-left"].plx .enter,
.stage--slide1.doors-swinging [data-hero="door-right"].plx .enter {
  will-change: transform;
}

/* --- Tap target -----------------------------------------------------------
   Covers the door pair so the whole doorway is one obvious, focusable control. */
.doors-tap {
  position: absolute;
  left: 37.963%;
  top: 43.8542%;
  width: 24.2592%; /* spans left-door start (37.963%) through right-door end (62.2222%) */
  height: 25.8333%;
  z-index: 9;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.doors-tap:focus-visible {
  outline: 2px solid var(--focus, #ffd27a);
  outline-offset: 4px;
  border-radius: 6px;
}
/* Once opened, the target has done its job — stop intercepting pointer/keyboard. */
.doors-tap[aria-disabled="true"] {
  pointer-events: none;
}

/* --- Tap call-to-action ------------------------------------------------
   Two pieces, both inside the single `.doors-hint` aria-hidden wrapper so
   the existing hideHint()/removeChild() cleanup in doors.js takes both away
   together with no JS changes needed:

     .doors-hint-ring  — a pulsing gold halo centered ON the door panels,
                         positioned independently (absolute, own coords) so
                         it escapes the pill's flex flow below. This is the
                         "what to tap" affordance.
     .doors-hint-pill  — the copy, as a legible gold pill sitting just under
                         the doorway (not down at the fountain), with a dark
                         scrim so it reads over the busy courtyard art. This
                         is the "what to do" call-to-action.

   `.doors-hint` itself becomes a non-visual positioning root (inset:0 over
   the stage) so both children can place themselves in doorway-relative
   coordinates without fighting a flex container. */
.doors-hint {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}

/* Pulsing ring halo, hugging the door pair as an ellipse (doors box: left
   37.963%, top 43.8542%, width 24.2592%, height 25.8333% → center
   50.09%/56.77%, aspect ~0.43) so it frames the arch instead of reading as
   an arbitrary spotlight circle. */
.doors-hint-ring {
  position: absolute;
  left: 50%;
  top: 56.7708%;
  width: min(38vw, 128px);
  height: min(84vw, 274px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1.5px solid rgba(255, 224, 170, 0.85);
  box-shadow: 0 0 0 1px rgba(255, 190, 110, 0.25), 0 0 22px 2px rgba(255, 200, 120, 0.35);
  opacity: 0;
  animation: doors-ring-in 700ms ease 700ms forwards, doors-ring-pulse 2.6s ease-in-out 1400ms infinite;
}

/* Gold pill CTA, sitting just under the doorway's bottom edge (69.6875%). */
.doors-hint-pill {
  position: absolute;
  left: 50%;
  top: calc(69.6875% + 2.6%);
  transform: translateX(-50%) translateY(4px);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5em 1.3em;
  border-radius: 999px;
  border: 1px solid rgba(255, 214, 150, 0.55);
  background: linear-gradient(180deg, rgba(40, 22, 10, 0.55), rgba(30, 16, 8, 0.62));
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(1.5px);
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: clamp(13px, 3.4vw, 17px);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffe9bd;
  white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  opacity: 0;
  animation: doors-hint-in 700ms ease 900ms forwards, doors-hint-pulse 2.6s ease-in-out 1900ms infinite;
}
.doors-hint-pill::before {
  content: "";
  width: 0.85em;
  height: 0.85em;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6df, #ffcf82 55%, #e2a24a 100%);
  box-shadow: 0 0 6px rgba(255, 200, 110, 0.8);
  flex: 0 0 auto;
}

.doors-hint.is-hidden .doors-hint-ring,
.doors-hint.is-hidden .doors-hint-pill {
  animation: none;
  opacity: 0;
  transition: opacity 320ms ease;
}

@keyframes doors-hint-in {
  from { opacity: 0; transform: translateX(-50%) translateY(4px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes doors-hint-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.72; }
}
@keyframes doors-ring-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
  to   { opacity: 0.85; transform: translate(-50%, -50%) scale(1); }
}
@keyframes doors-ring-pulse {
  0%   { opacity: 0.85; transform: translate(-50%, -50%) scale(0.94); }
  50%  { opacity: 0.35; transform: translate(-50%, -50%) scale(1.08); }
  100% { opacity: 0.85; transform: translate(-50%, -50%) scale(0.94); }
}

/* --- Golden light bloom ----------------------------------------------------
   Injected into .stage--slide1, seated at the doorway seam, screen-blended
   so it reads as warm light rather than a flat overlay. */
.doors-glow {
  position: absolute;
  left: 50%;
  top: 43.8542%;
  width: 46%;
  height: 26%;
  transform: translate(-50%, 0) scale(0.85);
  z-index: 6;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 226, 160, 0.95) 0%,
    rgba(255, 197, 110, 0.55) 35%,
    rgba(255, 170, 80, 0.18) 62%,
    rgba(255, 170, 80, 0) 78%
  );
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  will-change: auto;
}
.doors-glow.is-blooming {
  will-change: opacity, transform;
  transition: opacity 1100ms ease, transform 1100ms cubic-bezier(0.22, 0.61, 0.18, 1);
}
.doors-glow.is-open {
  opacity: 1;
  transform: translate(-50%, 0) scale(1.08);
}
.doors-glow.is-settled {
  transition: opacity 900ms ease 200ms, transform 900ms ease 200ms;
  opacity: 0.55;
  transform: translate(-50%, 0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  /* No 3D swing: the JS never sets rotateY under reduced motion. Instead it
     toggles .doors-open-rm, which fades/hides each door in place. */
  .stage--slide1 [data-hero="door-left"].plx .enter,
  .stage--slide1 [data-hero="door-right"].plx .enter {
    transition: opacity 220ms linear;
  }
  .stage--slide1 [data-hero="door-left"].plx .enter.doors-open-rm,
  .stage--slide1 [data-hero="door-right"].plx .enter.doors-open-rm {
    opacity: 0;
  }
  .doors-hint-ring {
    animation: none;
    opacity: 0.85;
    transform: translate(-50%, -50%);
  }
  .doors-hint-pill {
    animation: none;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  .doors-glow,
  .doors-glow.is-blooming,
  .doors-glow.is-open,
  .doors-glow.is-settled {
    transition: opacity 220ms linear;
    transform: translate(-50%, 0) scale(1);
  }
}