/* Coming-soon page (founder 8 Oct, after the design pass): the key art at full colour and whole, one column centred
   on the page in the art's own stage between the soldier and the mushroom, text left-aligned inside it, a soft
   tight shadow only behind that column. One screen: body is exactly the viewport and never scrolls. */
@font-face { font-family: "Barlow Condensed"; font-weight: 800; font-display: swap; src: url("/gate/fonts/BarlowCondensed-ExtraBold.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url("/gate/fonts/Barlow-Regular.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url("/gate/fonts/Barlow-SemiBold.woff2") format("woff2"); }
:root {
  --h: clamp(40px, min(6.8vw, 10.5vh), 104px);    /* the headline's size; the column and the logo follow it */
  --col: min(calc(var(--h) * 5.5), calc(100vw - 40px));
  --logo: min(var(--col), 600px);                  /* ~2.5x the first logo, on the column's left edge */
}
* { box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
html { margin: 0; background: #0b0d09; }
body { margin: 0; color: #fff; font: 17px/1.45 "Barlow", "Segoe UI", Arial, sans-serif; height: 100vh; height: 100dvh; display: flex; flex-direction: column; }

/* HEADER IMAGE = the logo-free key art (brand kit v1.3) as an <img> with srcset (960/1600/2400 cut from the 4K
   master), at full colour and WHOLE on desktop (contain: no character cropped; the rest of the screen is the page's
   ink). No page-wide scrim. Life: a slow Ken-Burns drift, 3% over 24 s. Phones (below): a centre-cropped band on top. */
.bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #0b0d09; }
.bg img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 50%; display: block; transform-origin: 50% 45%; animation: drift 24s ease-in-out infinite alternate; }
@keyframes drift { from { transform: scale(1); } to { transform: scale(1.03) translate(-0.4%, -0.3%); } }

main { position: relative; z-index: 1; flex: 1; min-height: 0; width: 100%; padding: 16px 20px 0; display: flex; flex-direction: column; justify-content: center; align-items: center; }
/* The column: centred, text left-aligned; a soft, tight shadow behind it only */
.col { position: relative; isolation: isolate; width: var(--col); display: flex; flex-direction: column; align-items: flex-start; }
/* (flat colour + a long box-shadow blur, square: radial gradients and rounded corners on this layer did not paint in
   Chromium over the drifting art) */
.col::before { content: ""; position: absolute; inset: 6% 2% 4%; z-index: -1; background: rgba(11, 13, 9, 0.46); box-shadow: 0 0 130px 70px rgba(11, 13, 9, 0.46); }

/* The logo (primary, on dark): the column's width, its plate on the column's left edge (the PNG's 22/640 of
   transparent margin pulled back), a little air below it */
.mark { margin: 0 0 calc(var(--logo) * 0.03) calc(var(--logo) * -0.0344); line-height: 0; }
.mark img { display: block; width: var(--logo); height: auto; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.55)); }

h1 { margin: 0 0 12px; font: 800 var(--h) "Barlow Condensed", "Arial Narrow", sans-serif; text-transform: uppercase; line-height: 0.9; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6); }
/* Hero A/B: <html data-hero="A|B"> shows one line */
.hero-a, .hero-b { display: none; }
html[data-hero="A"] .hero-a, html[data-hero="B"] .hero-b { display: block; }
/* Lime only on TD, WORK, the countdown and the button */
h1 em { font-style: normal; color: #8aff14; }

.sub { margin: 0 0 4px; font-size: clamp(17px, 4.4vw, 22px); font-weight: 600; color: rgba(255, 255, 255, 0.9); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7); }
/* Countdown line (date in the markup, countdown.js appends the rest): lime, tabular digits, and a thin lime line
   under it that drains toward 13 Nov (countdown.js sets --left, the share of the run-up still to go). */
.countdown { position: relative; margin-bottom: 18px; padding-bottom: 8px; color: #8aff14; font-variant-numeric: tabular-nums; }
.countdown::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: #8aff14; transform-origin: left center; transform: scaleX(var(--left, 0)); transition: transform 1s linear; }

/* Sign-up (signup.js): the field is the lobby - one row, email + lime button, the privacy line under it */
.signup { width: 100%; }
.signup-form { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.signup-form input[type="email"] { flex: 1 1 200px; min-width: 0; height: 56px; padding: 0 16px; border: 2px solid rgba(255, 255, 255, 0.4); border-radius: 8px; background: rgba(11, 13, 9, 0.72); color: #fff; font: 600 18px "Barlow", "Segoe UI", Arial, sans-serif; }
.signup-form input[type="email"]::placeholder { color: rgba(255, 255, 255, 0.5); }
.signup-form input[type="email"]:focus-visible { outline: none; border-color: #8aff14; }
.signup-form button { flex: 0 0 auto; height: 56px; padding: 0 24px; border: 0; border-radius: 8px; cursor: pointer; font: 800 24px/1 "Barlow Condensed", "Arial Narrow", sans-serif; text-transform: uppercase; background: #8aff14; color: #0b0d09; box-shadow: 0 6px 24px rgba(138, 255, 20, 0.28); }
.signup-form button:hover, .signup-form button:focus-visible { background: #a4ff4a; }
.signup-form button:focus-visible { outline: 3px solid #ffd23f; outline-offset: 3px; }
.signup-form button:disabled { opacity: 0.6; cursor: progress; }
.signup-note { margin: 8px 0 0; font-size: 14px; color: rgba(255, 255, 255, 0.75); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8); }
.signup-msg { margin: 8px 0 0; font-size: 17px; font-weight: 600; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8); }
.signup-err { color: #ffd23f; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
footer { position: relative; z-index: 1; padding: 10px 20px 14px; text-align: center; font-size: 13px; color: rgba(255, 255, 255, 0.6); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8); }

/* THE FLIP: the front face and the lobby card share one grid cell; on success the card turns over (0.7 s). */
.flip { display: grid; width: 100%; transform: perspective(1400px) rotateY(0deg); transform-style: preserve-3d; transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.face { grid-area: 1 / 1; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.back { transform: rotateY(180deg); display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.flip.flipped { transform: perspective(1400px) rotateY(180deg); }
.seats { display: flex; gap: 12px; }
.seat { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 8px; font: 800 28px "Barlow Condensed", "Arial Narrow", sans-serif; color: rgba(255, 255, 255, 0.55); background: rgba(11, 13, 9, 0.6); border: 2px solid rgba(255, 255, 255, 0.25); }
.seat.on { background: #8aff14; border-color: #8aff14; color: #0b0d09; animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(138, 255, 20, 0.55); } 50% { box-shadow: 0 0 0 10px rgba(138, 255, 20, 0); } }
.lobby-text { margin: 0; max-width: 30ch; font-size: clamp(18px, 4.4vw, 24px); font-weight: 600; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8); }

@media (min-width: 700px) {
  .signup-form button { font-size: 26px; padding: 0 28px; }
}
/* Portrait (phones): the key art is a centre-cropped band on top, fading into the page; the column sits below it,
   full width. */
@media (max-aspect-ratio: 1/1) {
  :root { --h: clamp(40px, min(12.5vw, 10.5vh), 104px); --col: calc(100vw - 40px); --logo: min(64vw, 300px); }
  .bg img { height: 50%; object-fit: cover; object-position: 50% 30%; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
  main { justify-content: flex-end; }
}
/* Narrow phones: the button drops under the field, full width */
@media (max-width: 420px) {
  .signup-form button { flex: 1 1 100%; }
}
/* Short portrait phones (e.g. 360 x 640): a smaller logo, so everything still fits one screen */
@media (max-aspect-ratio: 1/1) and (max-height: 700px) {
  :root { --logo: min(50vw, 240px); }
  .countdown { margin-bottom: 14px; }
}
/* Short screens (landscape phones): the headline on one line, a smaller logo */
@media (max-height: 480px) {
  :root { --h: clamp(28px, 9.5vh, 40px); --col: min(560px, calc(100vw - 40px)); --logo: 170px; }
  main { padding-top: 8px; }
  .sub { font-size: 15px; }
  .countdown { margin-bottom: 10px; padding-bottom: 6px; }
  .signup-form input[type="email"], .signup-form button { height: 44px; }
  .signup-form button { font-size: 20px; padding: 0 20px; }
  .signup-note { margin-top: 4px; font-size: 12px; }
  footer { padding: 4px 20px 6px; font-size: 11px; }
}
/* Respect reduced motion: no drift, no flip, no pulse, no animated drain */
@media (prefers-reduced-motion: reduce) {
  .bg img { animation: none; }
  .flip, .countdown::after { transition: none; }
  .seat.on { animation: none; }
}