/* =========================================================
   DOOR COMPONENT
   Scroll-driven: the door swings open (hinged on the right)
   while the whole scene scales up, so it feels like walking
   through the doorway. Progress is driven by js/door/main.js.
   ========================================================= */

.door-section {
  position: relative;
  z-index: 1;

  /* Total scroll length. The stage is pinned for (height - 100vh),
     so this is 300vh of scrolling. Raise it for a slower open.
     The square opening afterwards is time-based (see revealMs in
     js/door/main.js), so it needs no scroll length here. */
  height: 400vh;
}

.door-stage {
  position: sticky;
  top: 0;

  width: 100%;
  height: 100vh;
  height: 100svh;

  display: grid;
  place-items: center;

  overflow: clip;
}

/* While the square opens, the doorway is held fixed to the screen so an
   overscroll can't lift it (js/door/main.js adds / removes this class) */
.door-stage.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.door-scene {
  /* Door starts at 64% of the screen height (or 78% of the width),
     leaving room to grow as you scroll */
  /* The last term keeps door + side text inside the screen width
     (the whole composition is 910 x 450) */
  --door-h: min(64vh, calc(78vw * 3682 / 2224), calc(96vw * 450 / 910));
  --door-h: min(64svh, calc(78vw * 3682 / 2224), calc(96vw * 450 / 910));

  position: relative;
  height: var(--door-h);
  aspect-ratio: 2224 / 3682;

  /* Zoom towards the centre of the doorway opening */
  transform-origin: 50.09% 51.96%;
}

.door-room {
  position: absolute;
  inset: 0;
  perspective: calc(var(--door-h) * 0.9);
}

.door-frame,
.door-leaf-img {
  position: absolute;
  display: block;
  max-width: none;
  object-fit: fill;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Placement taken from the new_door.svg artboard (2224 x 3682) */
.door-frame {
  left: 0;
  top: 0.0815%;
  width: 100%;
  height: 99.837%;
}

.door-leaf-img {
  left: 1.143%;
  top: 0;
  width: 100.17%;
  height: 100%;
}

/* The dark doorway behind the frame. The frame artwork has a
   transparent opening, so this fills it (the old frame had it
   baked in). Swap the background for content to reveal
   something through the door. */
.door-opening {
  position: absolute;
  left: 8.678%;
  top: 6.301%;
  width: 82.60%;
  height: 87.40%;
  background: #1C0307;
}

/* Hinges are on the right edge of the door */
.door-leaf {
  position: absolute;
  inset: 0;
  transform-origin: 87.84% 50%;
  backface-visibility: hidden;
}

/* Darkens the door as it swings away from the light */
.door-leaf-shade {
  position: absolute;
  top: 0;
  left: 1.143%;
  width: 100.17%;
  height: 100%;
  background: #000;
  opacity: 0;
  pointer-events: none;

  -webkit-mask-image: url("../assets/door/leaf.webp");
  mask-image: url("../assets/door/leaf.webp");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}


/* =========================================================
   TEXT BESIDE THE DOOR
   Positioned as percentages of the door scene (taken from the
   910 x 450 layout), so it zooms together with the door.
   ========================================================= */

.door-text {
  position: absolute;
  display: block;
  height: auto;
  max-width: none;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

.door-text-left {
  left: -117.56%;
  top: 36.44%;
  width: 94.19%;
}

.door-text-right {
  left: 107.74%;
  top: 36.22%;
  width: 109.65%;
}

/* Narrow screens: no room at the sides, so stack the text
   above and below the door instead */
@media (max-width: 760px) {
  .door-scene {
    --door-h: min(56vh, calc(78vw * 3682 / 2224));
    --door-h: min(56svh, calc(78vw * 3682 / 2224));
  }

  .door-text-left {
    left: 2.9%;
    top: auto;
    bottom: 103%;
    width: 94.19%;
  }

  .door-text-right {
    left: 0;
    top: 103%;
    width: 100%;
  }
}