/* Empire Comics — coming-soon. A full-bleed reproduction of the game's TITLE
   scene: storefront fills the viewport, the game's own animated layers (stars,
   lamp, neon sign, rain) play on top, and the signup content overlays the lower
   sidewalk exactly where the in-game menu sits. */

:root {
  --bg:#08060f; --pink:#d145a8; --pink-hi:#ff8acd; --cyan:#5dd6ff; --cyan-hi:#b4f0ff;
  --yellow:#ffe065; --offwhite:#f0e8ff; --muted:#9a8fd0; --outline:#1a1838; --purple:#6a4ec9;
  --deep:#3d2e6e;
  --ui:"Silkscreen","Courier New",ui-monospace,monospace;
}
* { box-sizing:border-box; }
html,body { margin:0; height:100%; }
body { background:var(--bg); color:var(--offwhite); font-family:var(--ui); overflow:hidden; }
img { image-rendering:pixelated; }
/* sr-only: removes from view but keeps it for crawlers + screen readers */
.visually-hidden { position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
a { color:var(--cyan-hi); text-decoration:none; }
a:hover { color:var(--pink-hi); }

/* ---- full-bleed title scene ------------------------------------------------ */
/* aspect-locked to the storefront art (320:240) and sized to COVER the viewport,
   so the %-positioned overlay layers below stay glued to the building. Anchored
   to the top so all cropping happens at the bottom (the sidewalk — the safe
   zone), keeping the neon sign visible. */
.scene { position:fixed; left:50%; transform:translateX(-50%);
  --sw:max(100vw, calc(100svh * 4 / 3)); --sh:calc(var(--sw) * 0.75); /* 320:240 box */
  --ovf:max(0px, calc(var(--sh) - 100svh));                           /* vertical overflow */
  width:var(--sw); height:var(--sh);
  /* shift up by a sign-safe fraction so some wet-sidewalk reflection survives the
     bottom crop — capped at 5% of scene height (< the sign's 7.9% top) and never
     more than the real overflow, so no gap appears when the scene fits exactly. */
  top:calc(-1 * min(var(--ovf), calc(var(--sh) * 0.05)));
  background:#0a0818 url("art/title-bg.png") top center / 100% 100% no-repeat;
  image-rendering:pixelated; overflow:hidden; z-index:0; pointer-events:none; }

/* full-frame additive overlay sheets (320×240/frame) — inset:0 auto-aligns. */
.stars { position:absolute; inset:0; z-index:1;
  background:url("art/title-stars.png") 0 0 no-repeat; background-size:1400% 100%;
  animation:stars 2.6s steps(14) infinite; }
@keyframes stars { from { background-position-x:0%; } to { background-position-x:107.6923%; } } /* 14/13 */

.lamp { position:absolute; inset:0; z-index:2;
  background:url("art/title-lamp.png") 0 0 no-repeat; background-size:1600% 100%;
  animation:lamp 1.8s steps(16) infinite; }
@keyframes lamp { from { background-position-x:0%; } to { background-position-x:106.6667%; } } /* 16/15 */

.rain { position:absolute; inset:0; z-index:5; opacity:.85;
  background:url("art/title-rain.png") 0 0 no-repeat; background-size:1200% 100%;
  animation:rain 0.85s steps(12) infinite; }
@keyframes rain { from { background-position-x:0%; } to { background-position-x:109.0909%; } } /* 12/11 */

/* neon sign: canonical TitleScene placement — logo@(85,19) native 348×174 ×0.402.
   flicker-on once (frames 0-13) then idle-buzz loop (14-17). */
.logo { position:absolute; z-index:3; left:26.5625%; top:7.9167%;
  width:43.719%; aspect-ratio:348/174;
  background:url("art/logo-flicker.png") 0 0 no-repeat; background-size:1800% 100%;
  filter:drop-shadow(0 0 14px rgba(209,69,168,.6)) drop-shadow(0 0 7px rgba(93,214,255,.45));
  animation:flickerOn 1.5s steps(14) 1 both, idleBuzz 0.6s steps(4) 1.5s infinite; }
@keyframes flickerOn { from { background-position-x:0%; } to { background-position-x:82.353%; } }
@keyframes idleBuzz { from { background-position-x:82.353%; } to { background-position-x:105.882%; } }

/* CLOSED sign blink: 52×21/frame at (76,136). */
.sign { position:absolute; z-index:4; left:23.75%; top:56.6667%;
  width:16.25%; aspect-ratio:52/21;
  background:url("art/title-sign-blink.png") 0 0 no-repeat; background-size:1600% 100%;
  animation:sign 2.4s steps(16) infinite; }
@keyframes sign { from { background-position-x:0%; } to { background-position-x:106.6667%; } } /* 16/15 */

/* ---- overlaid content ----------------------------------------------------- */
/* a deliberate lower-third scrim so the content always has a legible home and
   real visual weight, even when the storefront scales huge on 1080p/1440p. */
.hero { position:fixed; inset:0; z-index:10; display:flex; flex-direction:column;
  justify-content:flex-end; align-items:center; padding:0 16px clamp(22px,4.5vh,52px);
  background:linear-gradient(to top,
    rgba(8,6,15,.97) 0%, rgba(8,6,15,.92) 18%, rgba(8,6,15,.6) 38%, rgba(8,6,15,0) 56%); }
.panel { display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center;
  width:100%; max-width:600px; }

/* comic-logo "COMING SOON": big outlined caps with an offset hot-pink drop
   shadow. Layered hard (0-blur) text-shadows keep it pixel-crisp. */
.coming { margin:0; font-weight:700; line-height:1; letter-spacing:2px; color:var(--yellow);
  font-size:clamp(30px,6vw,56px); text-transform:uppercase;
  text-shadow:
    -2px -2px 0 var(--outline), 2px -2px 0 var(--outline),
    -2px 2px 0 var(--outline),  2px 2px 0 var(--outline),
    -2px 0 0 var(--outline),    2px 0 0 var(--outline),
    0 -2px 0 var(--outline),    0 2px 0 var(--outline),
    5px 6px 0 var(--pink), 7px 8px 0 var(--outline); }
.tag { margin:3px auto 0; max-width:560px; font-size:clamp(12px,1.6vw,16px); line-height:1.8;
  color:var(--offwhite); text-shadow:0 0 6px rgba(0,0,0,.6), 1px 1px 0 var(--outline); }

.signup { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; width:100%; max-width:540px; }
.signup input { font-family:var(--ui); font-size:clamp(13px,1.3vw,15px); color:var(--offwhite);
  background:rgba(10,8,24,.85); border:2px solid var(--cyan); border-radius:3px; padding:15px 16px;
  flex:1 1 230px; min-width:0; box-shadow:0 0 12px rgba(93,214,255,.25) inset; }
.signup input::placeholder { color:var(--muted); }
.signup input:focus { outline:none; border-color:var(--cyan-hi); box-shadow:0 0 14px rgba(93,214,255,.6); }
.signup button { font-family:var(--ui); font-weight:700; font-size:clamp(13px,1.3vw,15px); letter-spacing:1px; cursor:pointer;
  color:var(--yellow); background:rgba(10,8,24,.85); border:2px solid var(--yellow); border-radius:3px;
  padding:15px 28px; min-height:50px; text-shadow:0 0 10px rgba(255,224,101,.7);
  box-shadow:0 0 14px rgba(255,224,101,.3); transition:transform .1s ease, background .1s ease; }
.signup button:hover { background:var(--yellow); color:var(--outline); text-shadow:none; transform:translateY(-1px); }
.signup button:active { transform:translateY(1px); }
.status { min-height:1.2em; margin:-4px 0 0; font-size:12px; letter-spacing:.5px; }
.status.ok { color:var(--cyan-hi); text-shadow:0 0 8px rgba(93,214,255,.5); }
.status.err { color:var(--pink-hi); text-shadow:0 0 8px rgba(255,138,205,.5); }

.foot { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:14px;
  margin-top:4px; }
/* shared solid pixel-style button (Discord + Website) with a chunky raised lip.
   line-height:1 + align-items:center + the icon as a block element keep the label
   optically centred against the glyph (Silkscreen otherwise sits low in its em box). */
.btn-social { display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--ui); font-weight:700; font-size:12px; line-height:1; letter-spacing:1px;
  color:var(--offwhite); text-decoration:none; padding:13px 18px; min-height:46px;
  background:var(--deep); border:2px solid var(--cyan); border-radius:4px;
  box-shadow:0 3px 0 var(--outline), 0 0 14px rgba(93,214,255,.3);
  transition:transform .08s ease, box-shadow .08s ease, background .1s ease; }
.btn-social:hover { transform:translateY(-1px); background:#4a3886; }
.btn-social:active { transform:translateY(3px); box-shadow:0 0 14px rgba(93,214,255,.3); }
.btn-social .ico { display:block; width:auto; height:18px; image-rendering:pixelated; flex:none; }

/* ---- portrait / narrow: fit the whole storefront (don't crop the sign) ----- */
/* when the viewport is taller than 4:3, COVER would crop the sign off the sides,
   so instead fit the scene to the full width at the top and let the content
   panel sit in the dark band below it. */
@media (max-aspect-ratio: 4/3) {
  /* enlarge past 100vw so the storefront fills more height (crops the neighbour
     buildings on the sides, never the centred sign), and fade the bottom into the
     page bg so there's no hard cut-off above the content panel. */
  .scene { --sw:142vw; left:50%; transform:translateX(-50%); /* width/height/top recompute from --sw */
    -webkit-mask-image:linear-gradient(to bottom, #000 60%, transparent 98%);
            mask-image:linear-gradient(to bottom, #000 60%, transparent 98%); }
}
@media (max-width:480px) {
  .signup { flex-direction:column; align-items:stretch; }
  .signup input { flex:0 0 auto; } /* column flex-basis is a height — neutralize it */
}

@media (prefers-reduced-motion: reduce) {
  .rain { animation:none; opacity:.4; }
  .stars, .lamp, .sign { animation:none; }
  .logo { animation:none; background-position-x:94.118%; }
}