/* Keep the complete entrance composition in narrow landscape windows.
   The current artwork's free roof tips lie near 18% and 82% of its width;
   retaining at least the middle 70% leaves room for both tips and the Qilin.
   Scale the common scene, never individual figures, doors or roof layers.
   Portrait, static/reduced-motion and older-browser behavior remain unchanged. */
@supports (width: 100cqw) {
  @media (orientation: landscape) {
    .js .opening-gate .gate:not(.gate-static) {
      container-type: inline-size;
      --sw: min(
        max(100vw, calc(var(--ar) * var(--vh) * var(--fill, 1))),
        calc(100cqw / .70)
      );
    }

    .js .opening-gate .gate:not(.gate-static) .gate-scene {
      top: clamp(
        min(0px, calc(var(--vh) - var(--sh))),
        calc(var(--vh) * var(--focus-y) - var(--fy) * var(--sh)),
        max(0px, calc(var(--vh) - var(--sh)))
      );
    }
  }

  /* Below 1.575:1 the capped 2.25:1 scene becomes shorter than its stage.
     Blend sky and floor together without a hard rectangular image edge. */
  @media (orientation: landscape) and (max-aspect-ratio: 63/40) {
    .js .opening-gate .gate:not(.gate-static) .gate-scene {
      --gate-floor-fade: clamp(0px, calc(var(--vh) - var(--sh)), 120px);
      --gate-sky-fade: min(11%, var(--gate-floor-fade));
      -webkit-mask-image: linear-gradient(180deg,
        transparent 0%, #000 var(--gate-sky-fade),
        #000 calc(100% - var(--gate-floor-fade)), transparent 100%);
      mask-image: linear-gradient(180deg,
        transparent 0%, #000 var(--gate-sky-fade),
        #000 calc(100% - var(--gate-floor-fade)), transparent 100%);
    }
  }
}