:root {
  color-scheme: dark;
  --portal-max: 1280px;
  --surround: #000;
  --surface: #02050b;
  --text: #f8f7f4;
  --muted: #c5cdd6;
  --cyan: #a5e9fa;
  --line: rgba(199,239,248,.5);
  --glass: rgba(3,9,16,.78);
  --glow: rgba(67,201,232,.12);
  --ease-out: cubic-bezier(.16,1,.3,1);
}
* { box-sizing: border-box; }
html { background: var(--surround); }
body { margin: 0; color: var(--text); background: var(--surround); font-family: "Noto Sans Thai","Leelawadee UI",system-ui,sans-serif; }
.gateway {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding-block: max(24px, 9svh);
}
.gateway-portal {
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  width: min(82vw, var(--portal-max));
  aspect-ratio: 16 / 9;
  display: grid;
  grid-template-columns: 46% 1fr;
  background: var(--surface);
}
.gateway-art { position: absolute; inset: 0; overflow: hidden; z-index: -1; pointer-events: none; }
.gateway-art picture, .gateway-image { display: block; width: 100%; }
.gateway-image { height: auto; object-fit: contain; object-position: center top; }
/* Never zoom or crop the artwork: all heads remain inside the source image. */
.gateway-brand { position: absolute; z-index: 2; top: 4cqw; left: 4cqw; width: clamp(128px,16cqw,204px); }
.gateway-brand img { display: block; width: 100%; height: auto; }
.gateway-copy { z-index: 1; grid-column: 1; margin: clamp(90px,11cqw,140px) 0 clamp(28px,5cqw,64px) 7cqw; min-width: 0; animation: copyIn .9s var(--ease-out) both; }
.gateway-kicker { margin: 0 0 20px; color: var(--cyan); font-size: 13px; font-weight: 500; line-height: 1.6; letter-spacing: .04em; }
.gateway-copy h1 { margin: 0; font-size: clamp(28px,4.8cqw,62px); font-weight: 300; line-height: 1.08; letter-spacing: -.045em; overflow-wrap: anywhere; }
.gateway-copy h1 span, .gateway-copy h1 em { display: block; }
.gateway-copy h1 em { font-style: normal; font-weight: 600; color: var(--cyan); margin-top: 6px; }
.gateway-lead { margin: 24px 0 0; color: var(--muted); font-family: "Noto Serif Thai",Georgia,serif; font-size: clamp(16px,1.5cqw,19px); line-height: 1.7; }
.gateway-enter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  max-width: 100%;
  min-height: 50px;
  margin-top: 26px;
  padding: 12px 16px 12px 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  background: var(--glass);
  font-size: 14px;
  letter-spacing: .08em;
  line-height: 1.5;
  text-decoration: none;
  transition: background .25s, box-shadow .25s;
}
.gateway-enter span { flex: 0 0 28px; display: grid; place-items: center; height: 28px; border-radius: 50%; color: var(--surface); background: var(--cyan); font-size: 20px; }
.gateway-enter:hover { background: var(--glow); box-shadow: 0 0 36px var(--glow); }
.gateway-enter:focus-visible { outline: 3px solid var(--cyan); outline-offset: 5px; }
.gateway-status { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 24px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.gateway-status span { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); }
.gateway-status b { font-weight: 400; }
.gateway-status i { font-style: normal; }
.gateway-glow { position: absolute; inset: 0; background: radial-gradient(ellipse at 72% 40%,var(--glow),transparent 60%); mix-blend-mode: screen; animation: gatewayGlow 7s ease-in-out infinite alternate; }
.gateway-scan { position: absolute; inset: 0; background: linear-gradient(115deg,transparent 35%,var(--glow) 50%,transparent 65%); background-size: 250% 100%; opacity: .35; animation: gatewayScan 12s linear infinite; }
@keyframes copyIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes gatewayGlow { from { opacity: .25; } to { opacity: .85; } }
@keyframes gatewayScan { from { background-position: 200% 0; } to { background-position: -100% 0; } }
/* Match picture source order: tablet landscape, then portrait, then phone overrides. */
@media (orientation: landscape) and (min-height: 600px) and (max-width: 1366px) {
  .gateway-portal { aspect-ratio: 4 / 3; grid-template-columns: 43% 1fr; align-items: center; }
  .gateway-copy { margin-left: 6cqw; }
}
@media (orientation: portrait) {
  .gateway-portal { display: block; aspect-ratio: auto; }
  .gateway-art { position: relative; inset: auto; }
  .gateway-brand { top: 4cqw; left: 5cqw; width: clamp(128px,22cqw,200px); }
  .gateway-copy { position: relative; margin: -33% 7% 0; padding-bottom: 36px; }
  .gateway-copy h1 { font-size: clamp(32px,6.2cqw,54px); }
  .gateway-lead { font-size: 18px; }
  .gateway-status { display: none; }
}
@media (orientation: portrait) and (max-width: 599px) {
  .gateway-copy { margin-top: -58%; padding-bottom: 28px; }
  .gateway-copy h1 { font-size: clamp(28px,8.5cqw,42px); }
  .gateway-kicker { margin-bottom: 14px; font-size: 13px; }
  .gateway-lead { margin-top: 18px; font-size: 16px; }
  .gateway-enter { margin-top: 20px; gap: 10px; padding-inline: 14px; font-size: 14px; letter-spacing: .04em; }
}
@media (orientation: landscape) and (max-height: 599px) {
  .gateway { padding-block: max(16px, 9svh); }
  .gateway-portal { aspect-ratio: 16 / 9; }
  .gateway-brand { top: 3cqw; left: 4cqw; width: clamp(112px,18cqw,160px); }
  .gateway-copy { margin: 72px 0 24px 5cqw; }
  .gateway-copy h1 { font-size: clamp(26px,4.6cqw,42px); }
  .gateway-kicker { margin-bottom: 10px; font-size: 12px; }
  .gateway-lead { margin-top: 14px; font-size: 16px; }
  .gateway-enter { margin-top: 16px; padding-inline: 12px; gap: 10px; font-size: 13px; letter-spacing: .03em; }
  .gateway-status { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .gateway-copy, .gateway-glow, .gateway-scan { animation: none; }
  .gateway-enter { transition: none; }
}


/* index2 only: one new full image, isolated from index.html. */
.gateway-portal { aspect-ratio: 16 / 9; }
.gateway-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--glass), transparent 52%);
}
.gateway-copy { position: relative; }
@media (orientation: portrait) {
  .gateway-portal { aspect-ratio: auto; }
  .gateway-copy { margin: 0 7%; padding-top: 28px; }
  .gateway-art::after { background: none; }
}
/* index2 wide scene: background fills the viewport; only content is capped. */
.gateway { position: relative; isolation: isolate; padding-block: 0; }
.gateway-portal {
  width: min(calc(100% - 64px), var(--portal-max));
  min-height: 100svh;
  aspect-ratio: auto;
  background: transparent;
  align-items: center;
}
.gateway-art { position: fixed; inset: 0; z-index: -1; }
.gateway-art picture { width: 100%; height: 100%; }
.gateway-image { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%; }
.gateway-art::after { background: linear-gradient(90deg, var(--glass), transparent 65%); }
.gateway-copy { text-shadow: 0 2px 18px var(--surface); }
@media (orientation: portrait) {
  .gateway-portal { width: min(calc(100% - 32px), var(--portal-max)); }
  .gateway-art { position: fixed; inset: 0; }
  .gateway-copy { margin: 0 7%; padding-top: max(260px, 48svh); padding-bottom: 40px; }
  .gateway-art::after { background: linear-gradient(180deg, transparent 25%, var(--glass) 62%, var(--surface)); }
}
@media (orientation: landscape) and (max-height: 599px) {
  .gateway { padding-block: 0; }
  .gateway-portal { width: min(calc(100% - 32px), var(--portal-max)); }
}