/* =====================================================================
   cloudcram.dev — pre-launch landing page
   Background: the reference photo (90s CD store + coffee bar), slightly
   pixelated and softened by scripts/make_bg.py -> /bg.jpg. Type stays
   the sharpest thing on the page. Pixel fonts carry the brand (same
   family as cirrusloft.com / ghostbuster.dev).

   One screen, no scrolling. Time of day (shared/theme.js, ported from
   cirrusloft) grades the photo — brightness, tint, and the warmth of
   the shop's lamp glow — while the interior always stays warm orange.
   Evening is the no-JS fallback.
   ===================================================================== */

/* ---------- evening (default): golden hour ---------- */
:root {
  --bg-filter: brightness(.97) saturate(1.06);
  --tint: #ff9e5e;
  --tint-o: .12;
  --glow-o: .30;          /* warm lamp-glow pool over the café */
  --vin-o: .38;           /* vignette strength */

  --ink: #fff1dc;
  --ink-soft: #dcb9a4;
  --accent: #ff8a3d;
  --accent-2: #e85d9e;
  --secondary: #7fd8c8;
  --panel: rgba(46, 27, 32, .92);
  --panel-2: rgba(66, 39, 44, .92);
  --panel-bd: #ff8a3d;
  --btn-ink: #2c1518;
  --h1-sh: rgba(0, 0, 0, .45);
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- morning: soft and fresh ---------- */
html.morning {
  --bg-filter: brightness(1.06) saturate(1.0);
  --tint: #ffe9b8;
  --tint-o: .10;
  --glow-o: .14;
  --vin-o: .30;
}

/* ---------- afternoon: bright and neutral ---------- */
html.afternoon {
  --bg-filter: brightness(1.1) saturate(1.02);
  --tint: #ffffff;
  --tint-o: .05;
  --glow-o: .10;
  --vin-o: .26;
}

/* ---------- night: closed up, lamps on ---------- */
html.night {
  --bg-filter: brightness(.62) saturate(.88);
  --tint: #1a2050;
  --tint-o: .34;
  --glow-o: .42;
  --vin-o: .5;
}

/* ---------- reset ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { height: 100%; }

body {
  font-family: 'VT323', monospace;
  color: #fff1dc;
  color: var(--ink);
  background: #241a16;   /* behind the photo while it loads */
  height: 100svh;
  overflow: hidden;      /* one screen, no scrolling */
}

/* short or narrow screens get to scroll rather than lose the form */
@media (max-height: 560px), (max-width: 420px) {
  body { overflow: auto; height: auto; min-height: 100svh; }
}

/* ---------- the photo + light layers (fixed, behind everything) ---------- */
.photo {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: url('/bg.jpg') center 30% / cover no-repeat;
  filter: var(--bg-filter);
  transition: filter .8s;
}
/* time-of-day colour grade */
.roomlight {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: var(--tint);
  opacity: var(--tint-o);
  mix-blend-mode: soft-light;
  transition: background .8s, opacity .8s;
}
/* the shop's own lamps: a warm pool that never goes out */
.lampglow {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(90% 70% at 62% 38%,
              rgba(255, 166, 66, .55) 0%, rgba(255, 166, 66, 0) 65%);
  opacity: var(--glow-o);
  transition: opacity .8s;
}
/* vignette quiets the edges; the centre scrim keeps type readable
   directly on the photo (vibium-style, no box around the content) */
.vignette {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(70% 64% at 50% 50%, rgba(12, 6, 4, .62) 0%, transparent 74%),
    radial-gradient(120% 120% at 50% 45%, transparent 50%, rgba(12, 6, 4, .9) 100%);
  opacity: var(--vin-o);
  transition: opacity .8s;
}

/* ---------- layout: one screen ---------- */
.page {
  position: relative; z-index: 1;
  height: 100svh;
  display: flex; flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.2rem clamp(1rem, 6vw, 5.5rem) 3.6rem;
}
@media (max-width: 900px) {
  .page { align-items: center; }
}
@media (max-height: 560px), (max-width: 420px) {
  .page { height: auto; min-height: 100svh; }
}

/* ---------- hero: type directly on the photo, no box ---------- */
.hero {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 1rem;
  width: 100%; max-width: 38rem;
}
/* brand mark, top left like vibium's logo; clicks back to the landing page */
.sitebar {
  position: absolute; top: 1.2rem; left: 1.4rem; z-index: 2;
}
.wordmark {
  font-family: 'Press Start 2P', monospace;
  font-size: .82rem;
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .75), 2px 2px 0 rgba(0, 0, 0, .5);
  letter-spacing: .02em; line-height: 1.5;
  text-decoration: none;
}
.wordmark .hot { color: #ffa057; }
a.wordmark:hover { opacity: .85; }
a.wordmark:active { transform: translateY(1px); display: inline-block; }

/* headline + sub sized like vibium: big bold sans over the photo */
h1 {
  font-family: var(--sans);
  font-size: clamp(2rem, 4.8vw, 3.3rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.015em;
  color: #ffffff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .65), 0 1px 3px rgba(0, 0, 0, .5);
}
h1 .hot { color: #ffa057; }
.tagline {
  font-family: var(--sans);
  font-size: clamp(1rem, 1.6vw, 1.12rem);
  color: rgba(255, 255, 255, .88);
  line-height: 1.55;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .8);
  max-width: 34rem;
}
.tagline b { color: #8fe8d8; font-weight: 500; }

/* ---------- signup: clean modern form, vibium-style ---------- */
.signup {
  width: 100%; max-width: 30rem;
  display: flex; flex-direction: column; align-items: center; gap: .75rem;
  margin-top: .5rem;
  font-family: var(--sans);
}
.signup-title {
  font-size: 1.05rem; font-weight: 600; letter-spacing: .01em;
  color: #ffffff;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .7), 0 0 2px rgba(0, 0, 0, .6);
}
.signup form { display: flex; gap: .6rem; width: 100%; }
.signup input[type="email"] {
  flex: 1; min-width: 0;
  background: rgba(20, 13, 10, .55);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 10px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffffff; font-family: var(--sans); font-size: 1rem;
  padding: .85rem 1rem; outline: 0;
  caret-color: var(--accent);
  transition: border-color .15s, box-shadow .15s;
}
.signup input[type="email"]:focus {
  border-color: rgba(255, 255, 255, .65);
  box-shadow: 0 0 0 3px rgba(255, 138, 61, .3);
}
.signup input[type="email"]::placeholder { color: rgba(255, 255, 255, .6); }
.hp { position: absolute; left: -5000px; }

/* solid rounded button (the form's CTA) */
.btn-solid {
  font-family: var(--sans); font-size: .98rem; font-weight: 600;
  padding: .85rem 1.3rem; cursor: pointer; line-height: 1.2;
  border: 0; border-radius: 10px;
  background: #ffffff; color: #241a16;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .4);
  white-space: nowrap;
  transition: background .15s, transform .05s;
}
.btn-solid:hover { background: #ffe4c4; }
.btn-solid:active { transform: translateY(1px); }
.btn-solid[disabled] { opacity: .6; cursor: wait; }

/* pixel button kept for the 404 page */
.btn {
  font-family: 'Press Start 2P', monospace; font-size: .64rem;
  padding: .7rem .85rem; cursor: pointer; line-height: 1.4;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .45);
  border: 2px solid var(--accent); background: var(--accent); color: var(--btn-ink);
  text-decoration: none; display: inline-block;
}
.btn:hover { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }
.btn:active { transform: translate(2px, 2px); box-shadow: none; }

.signup-note {
  font-size: .88rem; color: rgba(255, 255, 255, .78); line-height: 1.4;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .7);
}
.signup-status {
  font-size: .95rem; font-weight: 500; min-height: 1.3em; line-height: 1.35;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .7);
}
.signup-status.ok { color: #9fe8d8; }
.signup-status.err { color: #ffb3c0; }

@media (max-width: 520px) {
  .signup form { flex-direction: column; }
  .btn-solid { width: 100%; }
}

/* ---------- footer (pinned inside the single screen) ---------- */
footer {
  position: absolute; left: 0; right: 0; bottom: 1.1rem; z-index: 1;
  display: flex; justify-content: center;
  font-family: var(--sans);
  font-size: .85rem; color: rgba(255, 255, 255, .65); text-align: center;
  pointer-events: none;
}
footer a { color: rgba(255, 255, 255, .9); text-decoration: none; }
footer a:hover { text-decoration: underline; color: #ffffff; }
.foot-copy {
  pointer-events: auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .3rem 1.1rem;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .8);
}
.heart { color: #ef4444; margin: 0 2px; }
@media (max-height: 560px), (max-width: 420px) {
  footer { position: static; margin: 1rem 0; }
}