/* First-visit gate: shown only to people who have never entered (no dmt_entered flag).
   Scaling: everything is sized from ONE unit, --u = 1% of the screen's SHORTER side, so the gate keeps
   the same proportions on a phone, a Z Fold's cover screen, its near-square inner screen, a tablet or
   a laptop. Wide, short screens switch to side-by-side (sigil left, words right) instead of shrinking. */
.dmt-gate{display:none}
html.gate-on,html.gate-on body{overflow:hidden}
html.gate-on .dmt-gate{display:flex}
.dmt-gate{--u:min(1vw,1vh);position:fixed;inset:0;z-index:1000;background:#000;color:#fff;
  flex-direction:column;align-items:center;justify-content:safe center;
  gap:calc(var(--u) * 2.6);padding:calc(var(--u) * 4) 16px;text-align:center;overflow-y:auto;transition:opacity .7s ease}
@supports (height:1svh){.dmt-gate{--u:min(1vw,1svh)}}
.dmt-gate.leaving{opacity:0;pointer-events:none}

.dmt-gate img{display:block;flex:none;aspect-ratio:1;object-fit:contain;max-width:100%;
  width:min(62vh,90vw,780px);height:auto}
@supports (height:1svh){.dmt-gate img{width:min(62svh,90vw,780px)}}

.dmt-gate .g-words{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u) * 2.4)}
.dmt-gate .g-pd{margin:0;font-family:Anton,Impact,sans-serif;text-transform:uppercase;line-height:1;color:#fff;
  font-size:clamp(12px,calc(var(--u) * 2.3),24px);letter-spacing:.12em;border:2px solid #fff;padding:.32em .7em}
.dmt-gate .g-copy{margin:0;font-family:Oswald,system-ui,sans-serif;line-height:1.4;color:#e9e6ff;
  font-size:clamp(15px,calc(var(--u) * 3.1),30px)}
.dmt-gate .g-enter{font-family:Anton,Impact,sans-serif;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;color:#fff;
  font-size:clamp(16px,calc(var(--u) * 3.4),32px);padding:.7em 1.5em;
  background:linear-gradient(90deg,#ff2e88,#d24dff 55%,#00e5ff);border:3px solid #000;
  box-shadow:6px 6px 0 #000,0 0 34px rgba(210,77,255,.65);-webkit-text-stroke:1px #000;paint-order:stroke fill}
.dmt-gate .g-enter:hover{filter:brightness(1.12);transform:translateY(-1px)}
.dmt-gate .g-flee{font-family:Oswald,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
  font-size:clamp(12px,calc(var(--u) * 1.8),18px);color:#a9a3d6;border:1px solid rgba(169,163,214,.45);padding:.6em 1.2em}
.dmt-gate .g-flee:hover{color:#fff;border-color:#fff}
.dmt-gate .g-enter:focus-visible,.dmt-gate .g-flee:focus-visible{outline:3px solid #ffd200;outline-offset:4px}

/* wide and short (landscape phones, a Fold opened sideways, laptops with short windows): side by side */
@media (min-aspect-ratio:5/4) and (max-height:900px){
  .dmt-gate{flex-direction:row;gap:calc(var(--u) * 6)}
  .dmt-gate img{width:min(84vh,52vw,780px)}
  @supports (height:1svh){.dmt-gate img{width:min(84svh,52vw,780px)}}
  .dmt-gate .g-copy{font-size:clamp(15px,calc(var(--u) * 3.6),30px)}
}
@media (prefers-reduced-motion:reduce){.dmt-gate{transition:none}}
/* stacked layout: the sigil gets exactly the height the words leave (the words' height itself scales with --u),
   so near-square screens like the Fold's inner display never push the buttons off the bottom */
.dmt-gate img{width:min(90vw,780px,calc(100vh - 150px - var(--u) * 27))}
@supports (height:1svh){.dmt-gate img{width:min(90vw,780px,calc(100svh - 150px - var(--u) * 27))}}
@media (min-aspect-ratio:5/4) and (max-height:900px){
  .dmt-gate img{width:min(78vh,50vw,780px)}
  @supports (height:1svh){.dmt-gate img{width:min(78svh,50vw,780px)}}
  .dmt-gate .g-words{gap:calc(var(--u) * 3)}
  .dmt-gate .g-pd{font-size:clamp(12px,calc(var(--u) * 2.7),26px)}
  .dmt-gate .g-copy{font-size:clamp(15px,calc(var(--u) * 4.2),36px)}
  .dmt-gate .g-enter{font-size:clamp(16px,calc(var(--u) * 4.2),38px)}
  .dmt-gate .g-flee{font-size:clamp(12px,calc(var(--u) * 2.1),20px)}
}

/* returning visitors (once per browser session): the gate is the intro card. No "We be bitches" exit; it fades
   into the site on its own after ~2.6s, or straight away on a tap */
html.gate-back .dmt-gate .g-flee{display:none}
/* the black card is there from the very first paint (no fade on the card itself, so the site never shows through);
   only the sigil and words fade up out of the dark, then the whole card dissolves slowly into the site */
html.gate-back .dmt-gate{cursor:pointer}
html.gate-back .dmt-gate>*{animation:gate-in 1.4s ease .15s backwards}
@keyframes gate-in{from{opacity:0;transform:scale(.97)}}
html.gate-back .dmt-gate.leaving{transition:opacity 1.8s ease}