/* stage.css — the camera stage and its three overlaid image layers.
 *
 * Layout: the camera (2.webp) and its slot lip (1.webp) sit at the top of the
 * stage; the photo (3.webp) starts hidden above and descends to hang below.
 * Layering front→back: camera (2, z3) → photo (3, z2) → slot lip (1, z1).
 * The camera (2.webp) has a transparent top that reveals the photo as it
 * descends. The slot (1.webp) is 80% transparent — only the bottom ~20% is
 * opaque, so it doesn't block the photo. The photo (3.webp) is nearly fully
 * opaque, covering the slot almost entirely. All sizes scale with vh.
 */

.stage {
  position: relative;
  flex: 0 0 auto;
  width: var(--camera-w);
  height: calc(var(--camera-h) + var(--photo-h) + var(--photo-gap));
  /* No overflow: hidden — the photo is hidden by opacity/clip-path instead,
     and the panda needs to be able to extend past the stage box. */
}

.stage__layer {
  position: absolute;
  left: 50%;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* Slot lip (1.webp) — back layer, behind the photo.
 * The photo (middle layer, z2) slides in front of the slot lip as it descends. */
.stage__layer--slot {
  top: 0;
  height: var(--camera-h);
  width: var(--camera-w);
  aspect-ratio: 1200 / 991;
  object-fit: fill;
  transform: translateX(-50.5%);
  z-index: 1;
}

/* Camera (2.webp) — front layer, top of the stage (same box as the slot lip) */
.stage__layer--camera {
  top: 0;
  height: var(--camera-h);
  width: var(--camera-w);
  aspect-ratio: 1200 / 991;
  object-fit: fill;
  transform: translateX(-50.5%);
  z-index: 3;
}

/*
 * Photo (3.webp) — middle layer, slides in front of the slot lip.
 * Rests just below the camera; hidden above it until the page is loaded.
 * The camera (z3, front) covers the photo where they overlap.
 * The clip-path hides the photo's upper portion (above the slot opening) so the
 * photo is invisible at the start and only becomes visible as it exits the camera.
 */
.stage__layer--photo {
  top: calc(var(--camera-h) + var(--photo-gap));
  height: var(--photo-h);
  width: var(--photo-w);
  aspect-ratio: 970 / 1184;
  transform: translate(-50%, -100%); /* up by its own height = hidden, behind the camera */
  opacity: 0;
  z-index: 2;
  clip-path: inset(20vh 0 0 0);
}

/* Three-step photo development: hidden → emerges through slot → settles in tray */
@keyframes photoDevelop {
  0% {
    opacity: 1;
  }
  100% {
    /* Step 2 — photo in final position, fully revealed */
    transform: translate(-50%, 0);
    clip-path: inset(0vh 0 0 0);
  }
}

/* The "developed" state — added by JS once the page is fully loaded */
.stage.developed .stage__layer--photo {
  animation: photoDevelop 
              var(--develop-duration, 2s)
              var(--develop-ease, linear) 
              var(--develop-delay, 0.5s) forwards;
  opacity: 1;
}

/*
 * The "More details" CTA, overlaid on the photo's off-white bottom border.
 * Fades in as the photo settles, so it never floats over empty space mid-slide.
 * Scoped to ".stage .stage__cta" so it wins over the .btn transition in text.css.
 */
.stage .stage__cta {
  position: absolute;
  left: 50%;
  bottom: calc(var(--photo-h) * 0.103); /* centre of the Polaroid's bottom border */
  transform: translate(-50%, 50%);
  z-index: 4; /* above camera (3) and photo (2) */
  opacity: 0;
  transition: opacity 1s ease-out calc(var(--develop-delay, 0.5s) + var(--develop-duration, 2s) * 1);
}

.stage.developed .stage__cta {
  opacity: 1;
}

/* Panda — positioned layer so z-index applies and it can centre/extend
   past the stage box. Sits above the photo (z2, later in DOM), below camera (z3). */
.stage__panda {
  top: 0;
  width: calc(var(--photo-w) * 0.8);
  aspect-ratio: 800 / 395;
  transform: translate(10%, 10%);
  z-index: 2;
  animation: pandaEntrance
              var(--develop-duration, 0.2s)
              var(--develop-ease, linear)
              var(--develop-delay, 3.5s) forwards;
  opacity: 0;
}

@keyframes pandaEntrance {
  0% {
    opacity: 1;
  }
  100% {
    /* Step 2 — photo in final position, fully revealed */
    opacity: 1;
    transform:
      translate(-26%, 2%)
  }
}

.stage__panda:hover {
  transform: translate(-26%, 2%) scaleX(-1) !important;
}

/* Respect reduced-motion: reveal in place, no slide */
@media (prefers-reduced-motion: reduce) {
  .stage__layer--photo {
    animation: none;
    transform: translate(-50%, 0);
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
  .stage .stage__cta {
    transition: none;
    opacity: 1;
  }
}