/* Long Teng V9-RC2. Target: verified V9-RC1; no image or JS replacements.
   Keep the RC1 registration sheet loaded immediately before this override. */

/* Static portrait: the closed image and title share one content-sized row.
   Only the existing floor below native y=72% is stretched into that row.
   The image, architecture and title start retain their original positions. */
@media (orientation: portrait) {
  html:not(.js) .opening-gate .gate,
  .opening-gate .gate.gate-static {
    --rc2-art-height: calc(100vw / var(--ar));
  }
  html:not(.js) .opening-gate .gate-stage,
  .opening-gate .gate-static .gate-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
  html:not(.js) .opening-gate .gate-static-pic,
  .opening-gate .gate-static .gate-static-pic {
    grid-area: 1 / 1;
    align-self: stretch;
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 5rem), transparent);
    mask-image: linear-gradient(180deg, #000 calc(100% - 5rem), transparent);
  }
  html:not(.js) .opening-gate .gate-static-pic::after,
  .opening-gate .gate-static .gate-static-pic::after {
    background-position: center bottom;
    background-size: 100% calc((100% - var(--rc2-art-height) * .72) / .28);
    -webkit-mask-image: linear-gradient(180deg,
      transparent calc(var(--rc2-art-height) * .72),
      #000 calc(var(--rc2-art-height) * .755));
    mask-image: linear-gradient(180deg,
      transparent calc(var(--rc2-art-height) * .72),
      #000 calc(var(--rc2-art-height) * .755));
  }
  html:not(.js) .opening-gate .gate-title,
  .opening-gate .gate-static .gate-title {
    grid-area: 1 / 1;
    align-self: start;
    margin-top: calc(var(--rc2-art-height) - var(--static-pull));
  }
  html:not(.js) .opening-gate .gate-title::before,
  .opening-gate .gate-static .gate-title::before {
    inset: 0;
    height: auto;
    background: linear-gradient(180deg, #160a0500,
      #160a056b 22%, #160a056b calc(100% - 5rem), #160a0500);
  }
  html:not(.js) .opening-gate .gate-welcome,
  .opening-gate .gate-static .gate-welcome {
    grid-area: 2 / 1;
  }
}

/* Wide, shallow desktops only. Fit the complete entrance from first visible
   figure pixel y=448 through the final floor row y=2688 below the header.
   All registered layers scale/move as one; original animation keyframes stay.
   A separate text column ends before the complete image, including side eaves. */
@media (orientation: landscape) and (min-width: 1600px) and (min-aspect-ratio: 2/1) {
  .js .opening-gate .gate:not(.gate-static) {
    --rc2-height-fit: calc((var(--vh) - var(--nav-height, 94px) - 36px) * 2.318303571429);
    --sw: min(65vw, var(--rc2-height-fit));
    --rc2-scene-left: calc(100vw - var(--sw) - var(--gutter));
    --door-edge: calc(var(--rc2-scene-left) + var(--pxn) * var(--sw));
    --rc2-title-width: min(30rem, calc(var(--rc2-scene-left) - var(--gutter) - 2rem));
    --rc2-safe-top: calc(var(--nav-height, 94px) + 20px + max(0px,
      var(--vh) - var(--nav-height, 94px) - 36px - var(--sw) / 2.318303571429) / 2);
  }
  .js .opening-gate .gate:not(.gate-static) .gate-scene {
    left: var(--rc2-scene-left);
    top: calc(var(--rc2-safe-top) - var(--sh) / 6);
    -webkit-mask-image:
      linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent),
      linear-gradient(180deg, transparent, #000 12%, #000 96%, transparent);
    mask-image:
      linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent),
      linear-gradient(180deg, transparent, #000 12%, #000 96%, transparent);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }
  .js .opening-gate .gate:not(.gate-static) .gate-stage {
    background: linear-gradient(180deg, #6b4a34, #987953 32%, #997850 72%, #866748);
  }
  .js .opening-gate .gate:not(.gate-static) .gate-hint {
    left: calc(var(--rc2-scene-left) + var(--fx) * var(--sw));
  }
  .js .opening-gate .gate:not(.gate-static) .gate-title {
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    padding-top: var(--nav-height, 94px);
    padding-bottom: 6vh;
  }
  .js .opening-gate .gate:not(.gate-static) .gate-title-inner {
    margin: 0;
    width: var(--rc2-title-width);
    max-width: var(--rc2-title-width);
  }
  .js .opening-gate .gate:not(.gate-static) .gate-title h1 {
    font-size: clamp(1.9rem, min(calc(var(--rc2-title-width) * .12), 7vh), 3rem);
    max-width: none;
    margin-bottom: 1.5rem;
  }
  .js .opening-gate .gate:not(.gate-static) .gate-title::before {
    inset: 0;
    height: auto;
    background: linear-gradient(90deg, #160a0590,
      #160a0548 calc(var(--rc2-scene-left) - 2rem), #160a0500 calc(var(--rc2-scene-left) + var(--sw) * .16));
  }
}