.gateway {
  --gateway-frame: max(292px, calc(100svh - var(--header)));
  --gateway-travel: clamp(1700px, 230svh, 2400px);
  height: calc(var(--gateway-frame) + var(--gateway-travel));
  background: #10130e;
}
.gateway:not(.gateway-ready) { display: none; }
.gateway-stage {
  position: sticky;
  top: var(--header);
  isolation: isolate;
  height: var(--gateway-frame);
  overflow: clip;
  background: radial-gradient(ellipse at 64% 56%, #303529, #171b14 47%, #0b0e0a 83%);
}
.gateway-stage::before {
  position: absolute;
  inset: 12px var(--gutter);
  z-index: 2;
  pointer-events: none;
  border-block: 1px solid #e8e7d32c;
  content: "";
}
.gateway-floor {
  position: absolute;
  inset: 28% -40% -80%;
  z-index: -2;
  transform: perspective(520px) rotateX(58deg);
  transform-origin: center top;
  background: repeating-linear-gradient(0deg, #c1ca9c19 0 1px, transparent 1px 60px), repeating-linear-gradient(90deg, #c1ca9c19 0 1px, transparent 1px 70px);
  mask-image: radial-gradient(ellipse, #000 4%, transparent 68%);
}
.gateway-mist {
  position: absolute;
  inset: 32% -13% -14%;
  z-index: -1;
  transform: translate3d(var(--mist-x, -9%), var(--mist-y, 13%), 0) scale(1.2);
  background: url("./assets/mist-layer.webp") center / 100% 100% no-repeat;
  opacity: var(--mist-alpha, .15);
  mix-blend-mode: screen;
}
.gateway-copy {
  position: absolute;
  z-index: 2;
  left: var(--gutter);
  top: clamp(59px, 15svh, 148px);
  width: min(31vw, 370px);
  pointer-events: none;
}
.gateway-kicker, .gateway-label, .gateway-book-front > span, .gateway-book-back > span, .gateway-book-right > span, .gateway-frame figcaption {
  font: 700 clamp(8px, 1vw, 11px)/1.35 var(--mono);
  letter-spacing: .09em;
}
.gateway-kicker { color: var(--lime); }
.gateway-title {
  margin-top: clamp(8px, 1.4vw, 17px);
  font: 700 clamp(45px, 6.8vw, 104px)/.93 var(--display);
  letter-spacing: -.04em;
}
.gateway-title b, .gateway-label b, .gateway-book-front b { color: var(--lime); }
.gateway-copy p {
  max-width: 25ch;
  margin-top: clamp(10px, 2.5vh, 25px);
  color: #c5c7b9;
  font-size: clamp(12px, 1.3vw, 16px);
  line-height: 1.45;
}
.gateway-label {
  position: absolute;
  z-index: 2;
  bottom: 27px;
  left: var(--gutter);
  right: var(--gutter);
  display: flex;
  justify-content: space-between;
  color: #c4c5b7;
}
.gateway-progress {
  position: absolute;
  z-index: 3;
  bottom: 12px;
  left: var(--gutter);
  right: var(--gutter);
  height: 1px;
  transform: scaleX(var(--gateway-progress, 0));
  transform-origin: left center;
  background: var(--lime);
}

.gateway-book-world {
  position: absolute;
  inset: 6% 3% 5% 24%;
  display: grid;
  place-items: center;
  perspective: clamp(610px, 93vw, 1470px);
}
.gateway-book {
  position: relative;
  width: min(94%, 810px, calc(var(--gateway-frame) * 1.37));
  aspect-ratio: 1.44;
  transform-style: preserve-3d;
  transform: translate3d(var(--book-x, -22%), var(--book-y, 13%), var(--book-z, -160px)) rotateY(var(--book-yaw, -31deg)) rotateX(var(--book-tilt, 14deg)) rotateZ(var(--book-roll, -9deg));
}
.gateway-book-shadow {
  position: absolute;
  inset: 42% -8% -23%;
  transform: translateZ(-84px) rotateX(53deg);
  background: radial-gradient(ellipse, #000c, transparent 70%);
  pointer-events: none;
}
.gateway-book-stack {
  position: absolute;
  inset: 2% -.8% -2.2% 49.4%;
  transform: translateZ(-9px);
  border: 1px solid #4b4c3e;
  background: repeating-linear-gradient(0deg, #d8d3bd 0 1px, #8a866f 1px 3px);
  box-shadow: 9px 15px 28px #0009;
}
.gateway-book-right {
  position: absolute;
  inset: 0 0 0 50%;
  background: #1c1e17;
  box-shadow: 6px 10px 18px #0007;
  opacity: var(--book-page-light, .48);
}
.gateway-book-right::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, #151811b7, transparent 12%), linear-gradient(0deg, #10140ed9, transparent 26%);
  content: "";
}
.gateway-book-right img, .gateway-frame img { width: 100%; height: 100%; object-fit: cover; }
.gateway-book-right img { object-position: center 94%; filter: saturate(.65) contrast(1.05); }
.gateway-book-right > span {
  position: absolute;
  z-index: 1;
  right: 8%;
  bottom: 6%;
  color: #f2efe1;
}
.gateway-book-hinge {
  position: absolute;
  inset: 0 0 0 50%;
  transform: translateZ(3px) rotateY(var(--book-turn, -2deg));
  transform-origin: left center;
  transform-style: preserve-3d;
}
.gateway-book-front, .gateway-book-back {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(10px, 2.1vw, 29px);
  border: 1px solid #828775;
  backface-visibility: hidden;
}
.gateway-book-front {
  transform: translateZ(2px);
  background: linear-gradient(115deg, #0c0f0bd4, #10130d40 62%, #0a0c0aaf), url("./assets/ref-dark.webp") center 61% / cover;
  box-shadow: 7px 10px 22px #0009;
}
.gateway-book-front strong, .gateway-book-back strong {
  display: block;
  font: 700 clamp(22px, 5vw, 75px)/.91 var(--display);
  letter-spacing: -.04em;
}
.gateway-book-front strong { text-shadow: 0 4px 18px #000d; }
.gateway-book-front > span { color: var(--lime); }
.gateway-book-back {
  transform: rotateY(180deg) translateZ(2px);
  color: #171910;
  background: repeating-linear-gradient(20deg, #3d342b0b 0 1px, transparent 1px 6px), linear-gradient(90deg, #e2ddce, #f0ebdb 69%, #b8b39c);
  box-shadow: -6px 9px 19px #0008;
}
.gateway-book-back strong { margin-top: clamp(5px, 1.4vh, 15px); font-size: clamp(19px, 4.3vw, 62px); }
.gateway-book-back em {
  color: #333b20;
  font: 700 clamp(6px, .9vw, 10px)/1.2 var(--mono);
  letter-spacing: .065em;
}
.gateway-book-back p { max-width: 26ch; margin-top: clamp(4px, 1.4vh, 13px); font-size: clamp(8px, 1.04vw, 14px); line-height: 1.4; }
.gateway-book-edge {
  position: absolute;
  inset: 0 -2px 0 auto;
  width: 4px;
  transform: rotateY(90deg);
  background: #868a74;
}

.gateway-stage-archive {
  background: radial-gradient(ellipse at 48% 68%, #33382a, #171b14 38%, #0a0d09 76%);
}
.gateway-stage-archive .gateway-copy { top: clamp(49px, 9svh, 93px); width: 86%; }
.gateway-stage-archive .gateway-copy p { margin-top: 9px; max-width: 43ch; }
.gateway-spotlight {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(ellipse 28% 65% at var(--spot-x, 29%) 63%, #c5e39f4d, transparent 83%);
}
.gateway-archive-world { position: absolute; inset: 21% -3% 4%; perspective: clamp(620px, 86vw, 1390px); }
.gateway-archive-camera {
  position: absolute;
  inset: 0;
  transform: rotateY(var(--archive-yaw, 14deg)) rotateX(5deg);
  transform-style: preserve-3d;
}
.gateway-frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(156px, 23vw, 355px);
  height: clamp(178px, 45svh, 440px);
  padding: 6px;
  transform: translate(-50%, -49%) translate3d(var(--frame-x, 0%), var(--frame-y, 0%), var(--frame-z, -300px)) rotateY(var(--frame-turn, 0deg)) rotateZ(var(--frame-tilt, 0deg));
  border: 1px solid #c5c8b476;
  opacity: var(--frame-light, .3);
  background: #151811;
  box-shadow: 0 22px 33px #080b08a8, inset 0 0 0 1px #989e7b30;
  backface-visibility: hidden;
}
.gateway-frame img { filter: grayscale(.63) contrast(1.08); }
.gateway-frame figcaption {
  position: absolute;
  inset: auto 6px 6px;
  padding: 15px 7px 5px;
  color: #f1f0e3;
  background: linear-gradient(0deg, #0b0e08d9, transparent);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

@media (max-width: 760px) {
  .gateway-copy { top: clamp(43px, 8svh, 80px); width: 84%; }
  .gateway-title { font-size: clamp(37px, 10vw, 68px); }
  .gateway-title br { display: none; }
  .gateway-copy p { margin-top: 7px; max-width: 38ch; }
  .gateway-book-world { inset: 16% 0 4%; }
  .gateway-book { width: min(90%, calc(var(--gateway-frame) * 1.47)); }
  .gateway-book-front, .gateway-book-back { padding: clamp(8px, 2.5vw, 14px); }
  .gateway-book-front strong, .gateway-book-back strong { font-size: clamp(22px, 6.3vw, 45px); }
  .gateway-archive-world { inset: 25% -12% 3%; }
  .gateway-frame { width: clamp(138px, 46vw, 245px); height: clamp(165px, 40svh, 290px); }
}
@media (max-width: 760px) and (min-height: 650px) {
  .gateway-book-world { inset: 12% 0 11%; }
  .gateway-book { width: min(94%, 560px); aspect-ratio: 1.24; }
}
@media (max-height: 520px) {
  .gateway-copy, .gateway-stage-archive .gateway-copy { top: 45px; }
  .gateway-title { font-size: clamp(32px, min(8vw, 13svh), 57px); }
  .gateway-copy p { margin-top: 6px; }
  .gateway-label { bottom: 20px; }
  .gateway-progress { bottom: 9px; }
  .gateway-stage::before { inset-block: 9px; }
  .gateway-archive-world { inset-block-start: 31%; }
  .gateway-frame { height: clamp(132px, 42svh, 215px); }
}
:root[data-motion="reduced"] .gateway { display: none; }
@media (max-width: 300px) {
  .gateway-copy { width: calc(100% - var(--gutter) * 2); }
  .gateway-title { font-size: 27px; }
  .gateway-copy p { font-size: 11px; }
  .gateway-label { font-size: 7px; letter-spacing: .02em; }
}