/* =========================================================
   MTHD — Coming Soon / Protocol.01
   Single-screen layout: every dimension is clamp()'d against
   viewport height so the page fits with zero scrolling on any
   device, from short landscape phones to large desktops.
   ========================================================= */

:root {
  --bg: #141414;
  --fg: #ffffff;
  --fg-muted: rgba(255, 255, 255, 0.62);
  --fg-faint: rgba(255, 255, 255, 0.38);
  --border: rgba(255, 255, 255, 0.2);
  --border-soft: rgba(255, 255, 255, 0.12);

  --font-head: 'Oswald', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, 'Courier New', monospace;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0; padding: 0; margin: -1px;
}

/* subtle film-grain / scanline texture — reinforces the "system" mood without adding color */
.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.035;
  background-image:
    repeating-linear-gradient(0deg, #fff 0px, transparent 1px, transparent 2px);
  mix-blend-mode: overlay;
}

/* ---------- Stage ---------- */
.stage {
  position: relative;
  height: 100svh;
  height: 100dvh;
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vh, 40px) clamp(16px, 4vw, 24px);
  z-index: 1;
  overflow: hidden;
}

.hero {
  width: 100%;
  max-width: 480px;
  text-align: center;
}

/* ---------- Sequential fade-in ----------
   Pure CSS, no JS dependency. animation-fill-mode: backwards holds the
   "from" state (opacity: 0) until each element's delay elapses. Nine
   elements step in top-to-bottom at 0.24s intervals with a gentle,
   smooth 0.8s ease (small drift, no snap) each; the last one finishes
   at ~2.72s, safely inside the 3s "fully loaded" budget. Degrades
   gracefully to fully visible if animations are unsupported (base
   opacity stays 1). */
.fade-in {
  animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.fade-in.d1 { animation-delay: 0s; }
.fade-in.d2 { animation-delay: 0.24s; }
.fade-in.d3 { animation-delay: 0.48s; }
.fade-in.d4 { animation-delay: 0.72s; }
.fade-in.d5 { animation-delay: 0.96s; }
.fade-in.d6 { animation-delay: 1.2s; }
.fade-in.d7 { animation-delay: 1.44s; }
.fade-in.d8 { animation-delay: 1.68s; }
.fade-in.d9 { animation-delay: 1.92s; }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .fade-in { animation: none; opacity: 1; transform: none; }
}

.logo {
  height: clamp(22px, 5vh, 40px);
  width: auto;
  margin: 0 auto clamp(10px, 2vh, 20px);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: clamp(9px, 1.6vh, 12px);
  letter-spacing: 0.12em;
  color: var(--fg-muted);
  margin: 0 0 clamp(7px, 1.6vh, 14px);
  text-transform: uppercase;
}

.headline {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(28px, 6.6vh, 52px);
  line-height: 1;
  letter-spacing: 0.01em;
  margin: 0 0 clamp(9px, 1.8vh, 18px);
  text-transform: uppercase;
}

.launch-date {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: clamp(8px, 1.3vh, 13px) clamp(20px, 4vw, 28px);
  border: 1px solid var(--border);
  margin: 0 0 clamp(10px, 2vh, 18px);
  background: var(--bg);
}

.launch-date__label {
  font-family: var(--font-mono);
  font-size: clamp(8.5px, 1.2vh, 10px);
  letter-spacing: 0.16em;
  color: var(--fg-faint);
}

.launch-date__value {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(19px, 3.4vh, 27px);
  letter-spacing: 0.06em;
}

.offer {
  display: inline-block;
  font-family: var(--font-mono);
  /* vw-capped so the sentence always stays on one line, even on the
     narrowest phones, while still shrinking with vh like everything
     else on taller/shorter screens. */
  font-size: clamp(7px, min(1.6vh, 2.15vw), 12px);
  letter-spacing: 0;
  color: var(--fg-muted);
  border: 1px solid var(--border);
  padding: clamp(6px, 1.1vh, 10px) clamp(8px, 2vw, 18px);
  margin: 0 0 clamp(12px, 2.2vh, 20px);
  white-space: nowrap;
  max-width: 100%;
}

.offer strong {
  color: var(--fg);
  font-weight: 500;
}

/* ---------- Form ---------- */
.signup { width: 100%; max-width: 420px; margin: 0 auto; }
.signup__hp { position: absolute; left: -9999px; }

.signup__row {
  display: flex;
  gap: 0;
  border: 1px solid var(--border);
  background: var(--bg);
}

.signup__input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: clamp(13px, 2vh, 15px);
  padding: clamp(11px, 1.8vh, 15px) 16px;
  outline: none;
}

.signup__input::placeholder { color: var(--fg-faint); }

.signup__input:focus {
  background: rgba(255, 255, 255, 0.04);
}

.signup__btn {
  flex-shrink: 0;
  background: var(--fg);
  color: var(--bg);
  border: none;
  border-left: 1px solid var(--border);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  padding: 0 20px;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.signup__btn:hover { opacity: 0.85; }
.signup__btn:active { opacity: 0.7; }
.signup__btn:disabled { opacity: 0.5; cursor: not-allowed; }

.signup__note {
  font-size: clamp(10px, 1.4vh, 11.5px);
  color: var(--fg-faint);
  margin: clamp(7px, 1.2vh, 12px) 0 0;
  white-space: nowrap;
}

.status {
  max-width: 420px;
  margin: clamp(10px, 1.6vh, 16px) auto 0;
  padding: clamp(10px, 1.4vh, 14px) 16px;
  border: 1px solid var(--border);
  background: var(--bg);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
}

.status p { margin: 0; }
.status--success { border-color: rgba(255, 255, 255, 0.4); }
.status--error { border-color: rgba(255, 120, 120, 0.5); color: #ffb3b3; }

/* ---------- Ingredients ---------- */
.ingredients {
  width: 100%;
  max-width: 480px;
  margin: clamp(14px, 2.6vh, 26px) auto 0;
  padding-top: clamp(10px, 1.8vh, 16px);
  border-top: 1px solid var(--border-soft);
  text-align: center;
}

.ingredients__label {
  font-family: var(--font-mono);
  font-size: clamp(8.5px, 1.2vh, 10px);
  letter-spacing: 0.16em;
  color: var(--fg-faint);
  text-transform: uppercase;
  margin: 0 0 clamp(6px, 1.2vh, 10px);
}

.ingredients__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: clamp(4px, 0.8vh, 8px) clamp(9px, 1.6vw, 14px);
  font-family: var(--font-mono);
  font-size: clamp(9.5px, 1.5vh, 11.5px);
  color: var(--fg-muted);
  margin: 0;
  line-height: 1.4;
}

.ingredients__row b {
  color: var(--fg);
  font-weight: 500;
}

.ingredients__dot {
  color: var(--fg-faint);
}

/* ---------- Footer ---------- */
.footer {
  margin: clamp(12px, 2.2vh, 22px) 0 0;
  text-align: center;
}

.footer p {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: var(--fg-faint);
}

/* ---------- Responsive ---------- */
@media (max-width: 480px) {
  .signup__row {
    flex-direction: column;
    border: none;
    gap: 10px;
  }
  .signup__input {
    border: 1px solid var(--border);
  }
  .signup__btn {
    border: 1px solid var(--border);
    padding: clamp(10px, 1.6vh, 14px);
  }
}

/* Very short viewports (landscape phones, embedded frames): drop the
   ingredient dose values down to bare essentials so the row stays on
   one or two lines and the whole page still fits with no scrolling. */
@media (max-height: 420px) {
  .logo { height: 18px; margin-bottom: 6px; }
  .eyebrow { margin-bottom: 6px; }
  .headline { font-size: clamp(22px, 8vh, 34px); margin-bottom: 8px; }
  .launch-date { padding: 5px 16px; margin-bottom: 8px; }
  .offer { margin-bottom: 10px; padding: 5px 12px; }
  .ingredients { margin-top: 10px; padding-top: 8px; }
  .footer { margin-top: 8px; }
}

/* Extreme short viewports (e.g. small embedded frames): compress once
   more to guarantee the whole page still clears the visible area. */
@media (max-height: 300px) {
  .stage { padding-top: 8px; padding-bottom: 8px; }
  .logo { height: 14px; margin-bottom: 4px; }
  .eyebrow { font-size: 8px; margin-bottom: 4px; }
  .headline { font-size: clamp(18px, 7vh, 26px); margin-bottom: 5px; }
  .launch-date { padding: 3px 12px; margin-bottom: 5px; gap: 1px; }
  .launch-date__value { font-size: 15px; }
  .offer { margin-bottom: 6px; padding: 3px 10px; font-size: 9px; }
  .signup__input { padding: 6px 12px; font-size: 12px; }
  .signup__note { margin-top: 4px; font-size: 9px; }
  .ingredients { margin-top: 6px; padding-top: 5px; }
  .ingredients__label { margin-bottom: 3px; }
  .footer { margin-top: 5px; }
}