/* ============================================================
   teaser.css — CareNest pre-landing teaser (Design/Apps/Teaser/v1)
   Concept: "the emblem arrives out of the dark, the country lights
   up around it." One dark Night stage, the digital-shield emblem as
   the single luminous object, one-shot bloom, centred single-statement
   hero, three hairline beats, one email capture, minimal footer.

   Consumes vendored tokens: _base.css + _modes.css (copied into
   styles/ for the static nginx deploy — see brief §9.3).
   Reuses the v1 landing's .has-reveal-anim / .btn / pre-paint-mode /
   reduced-motion patterns.
   ============================================================ */

/* ---------- Layout container (teaser is a single centred column) ---- */
.container {
  width: min(760px, 92vw);
  margin-inline: auto;
}

body {
  background: var(--bg-base);
  color: var(--ink);
  min-height: 100vh;
  /* Night base is flat — the only atmosphere is the one-shot bloom (§4). */
}

/* The whole page is one centred statement. */
.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-block: var(--space-8) var(--space-9);
}

/* ============================================================
   §A — Stage + emblem (the hero moment)
   ============================================================ */
.stage {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: var(--space-8);
}

/* ---- The one-shot radial bloom: the ONLY gradient on the page ---- */
.bloom {
  position: absolute;
  top: 0;
  left: 50%;
  width: 560px;
  height: 560px;
  transform: translateX(-50%);
  /* sit centred behind the emblem */
  margin-top: -40px;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
              rgba(52, 210, 194, 0.18) 0%,
              rgba(52, 210, 194, 0.06) 35%,
              transparent 70%);
}
[data-mode="evening"] .bloom {
  background: radial-gradient(ellipse at center,
              rgba(196, 154, 90, 0.20) 0%,
              rgba(196, 154, 90, 0.06) 35%,
              transparent 70%);
}

/* ---- The emblem: single largest object, the centrepiece ---- */
.emblem {
  position: relative;
  z-index: 1;
  width: 240px;
  height: auto;
  max-width: 100%;
  display: block;
}
/* Mode swap: Night → darkmode asset, Evening → evening asset (§3.1). */
[data-mode="night"] .emblem--evening,
[data-mode="evening"] .emblem--darkmode { display: none; }

/* ---- Eyebrow (mono, uppercase) ---- */
.stage__eyebrow {
  position: relative;
  z-index: 1;
  margin-bottom: var(--space-5);
  color: var(--brand-strong);
}

/* ---- Hero line (h1) — marketing-hero override, BIGGER than token h1
   (token --fs-h1 maxes at 36px; this is a marketing surface, mirror the
   landing .close h2 clamp idiom). ---- */
.hero-line {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  font-size: clamp(32px, 6vw, 56px);
  margin-top: var(--space-7);
  max-width: 16em;
  text-wrap: balance;
}
/* The single sanctioned emphasis (pick ONE — here "here"). Brand underline
   from the landing; em is upright, not italic. */
.hero-line em {
  font-style: normal;
  background: linear-gradient(180deg, transparent 64%, var(--brand-tint) 64%);
  background-position: 0 -2px;
  padding-inline: 3px;
}
/* Two-sentence break only on wide; let it wrap naturally on mobile. */
.hero-br { display: none; }
@media (min-width: 700px) { .hero-br { display: inline; } }

/* ---- Sub line ---- */
.hero-sub {
  position: relative;
  z-index: 1;
  color: var(--ink-muted);
  max-width: 34em;
  margin-top: var(--space-5);
  margin-inline: auto;
}

/* ============================================================
   §B — Three beats (the human proof). Statement lines, hairline-
   separated — NOT cards.
   ============================================================ */
.beats {
  width: 100%;
  max-width: 40em;
  margin-top: var(--space-9);
  display: flex;
  flex-direction: column;
}
.beat {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(18px, 2.4vw, 22px);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  color: var(--ink);
  padding-block: var(--space-6);
  border-top: 1px solid var(--hairline);
}
.beat:last-child { border-bottom: 1px solid var(--hairline); }
.beat em {
  font-style: normal;
  color: var(--brand-strong);
}

/* ============================================================
   §C — Email capture (the one action)
   ============================================================ */
.capture {
  width: 100%;
  max-width: 36em;
  margin-top: var(--space-9);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.capture__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h2);
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin-bottom: var(--space-6);
}

.capture__form {
  width: 100%;
  display: flex;
  gap: var(--space-3);
  align-items: stretch;
}
.capture__field {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.capture__field label {
  font-size: var(--fs-body-small);
  color: var(--ink-muted);
  margin-bottom: var(--space-2);
  font-weight: 500;
}
.capture__input {
  width: 100%;
  min-height: 44px;
  padding: 0 var(--space-4);
  background: var(--bg-elevated);
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  font-family: var(--font-display);
  font-size: var(--fs-body);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.capture__input::placeholder { color: var(--ink-faint); }
.capture__input:focus { border-color: var(--brand); }
.capture__input[aria-invalid="true"] { border-color: var(--danger); }

/* Submit reuses the landing .btn / .btn--primary look. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  min-height: 44px; padding: 0 var(--space-5);
  border-radius: var(--r-md);
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.btn--primary { background: var(--brand); color: var(--ink); }
.btn--primary:hover { background: var(--brand-strong); }
.btn[aria-busy="true"] { opacity: 0.7; cursor: progress; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* The submit button aligns to the bottom of the field row (under the
   label) on wide layouts. */
.capture__submit { align-self: flex-end; }

.capture__reassurance {
  margin-top: var(--space-4);
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.02em;
}

/* Inline validity error. */
.capture__error {
  margin-top: var(--space-2);
  color: var(--danger);
  font-size: var(--fs-body-small);
  min-height: 0;
}
.capture__error:empty { display: none; }

/* Success state swaps in place. */
.capture__success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-4);
}
.capture__success-check {
  width: 32px; height: 32px;
  color: var(--brand-strong);
}
.capture__success-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  color: var(--ink);
}
[hidden] { display: none !important; }

/* ============================================================
   §D — Footer (minimal)
   ============================================================ */
.footer {
  flex-shrink: 0;
  border-top: 1px solid var(--hairline);
  padding-top: var(--space-7);
  padding-bottom: var(--space-6);
  margin-top: var(--space-9);
}
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5) var(--space-7);
}
.footer__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
/* Footer mark = the small CareNest emblem (mode-toggled), NOT a separate glyph. */
.footer__emblem { width: 26px; height: auto; display: block; }
[data-mode="night"]   .footer__brand .footer__emblem--evening,
[data-mode="evening"] .footer__brand .footer__emblem--darkmode { display: none; }
.footer__made {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.02em;
  color: var(--ink-faint);
}
.footer__privacy {
  flex: 1 1 240px;
  font-size: var(--fs-body-small);
  color: var(--ink-muted);
  min-width: 200px;
}
.footer__lang {
  margin-left: auto;
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: center;
}
.footer__lang a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--space-3);
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--ink-muted);
  font-size: var(--fs-body-small);
  font-weight: 500;
  transition: color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.footer__lang a:hover { color: var(--ink); }
.footer__lang a[aria-current="page"] { color: var(--ink); background: var(--bg-elevated); }

/* ============================================================
   Entrance choreography (§5.1) — one orchestrated arrival, ≤ ~1.1s,
   then stillness. Driven by a JS-toggled .is-in class (mirrors the
   landing's reveal mechanism) rather than pure CSS animation, so the
   final state is guaranteed even if the entrance never plays (no-JS,
   backgrounded tab, static capture). Gated on html.js so content is
   fully visible when JS is absent (progressive enhancement).
   ============================================================ */
.enter { transition: opacity var(--dur-base) var(--ease-out),
                      transform var(--dur-base) var(--ease-out);
         transition-delay: var(--enter-delay, 0ms); }

/* Hidden start state applies ONLY once JS has confirmed it can drive
   the entrance (html.js) — otherwise everything stays visible. */
html.js .stage .enter { opacity: 0; }
html.js .stage .emblem        { transform: translateY(12px) scale(0.96); transition-duration: var(--dur-slow); }
html.js .stage .bloom         { transform: translateX(-50%) scale(0.6);  transition-duration: 400ms; }
html.js .stage .stage__eyebrow{ transform: translateY(6px); }
html.js .stage .hero-line     { transform: translateY(8px); }
html.js .stage .hero-sub      { transform: translateY(8px); }

/* Per-step delays (the choreography order). */
html.js .stage .emblem        { --enter-delay: 120ms; }
html.js .stage .bloom         { --enter-delay: 120ms; }
html.js .stage .stage__eyebrow{ --enter-delay: 220ms; }
html.js .stage .hero-line     { --enter-delay: 320ms; }
html.js .stage .hero-sub      { --enter-delay: 440ms; }

/* Settled state. */
html.js .stage .enter.is-in   { opacity: 1; transform: none; }
html.js .stage .bloom.is-in   { transform: translateX(-50%) scale(1); }

/* ============================================================
   Below-the-fold reveal (§5.2) — landing's exact mechanism.
   ============================================================ */
.has-reveal-anim {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.has-reveal-anim.is-revealed { opacity: 1; transform: translateY(0); }

/* ============================================================
   Reduced motion (§7) — disable ALL motion; show final state.
   Bloom may remain as a static background but must not animate.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html.js .stage .enter {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  html.js .stage .bloom,
  html.js .stage .bloom.is-in { transform: translateX(-50%) !important; }
  .has-reveal-anim {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================
   Responsive (§6) — three breakpoints keyed off the token queries.
   ============================================================ */

/* Tablet / laptop 600–1279px */
@media (max-width: 1279px) {
  .emblem { width: 200px; }
  .bloom { width: 460px; height: 460px; }
  .beats { margin-top: var(--space-8); }
  .capture { margin-top: var(--space-8); }
}

/* Mobile ≤ 599px */
@media (max-width: 599px) {
  .container { width: 92vw; }
  .emblem { width: 150px; }
  .bloom { width: 340px; height: 340px; margin-top: -24px; }
  main { padding-block: var(--space-7) var(--space-8); }
  .stage { padding-top: var(--space-6); }
  .hero-sub { font-size: var(--fs-body); }
  .beats { margin-top: var(--space-7); }
  .capture { margin-top: var(--space-7); }

  /* Email field + button stack; button full-width below the field. */
  .capture__form { flex-direction: column; gap: var(--space-3); }
  .capture__submit { align-self: stretch; width: 100%; }

  .footer__lang { margin-left: 0; width: 100%; justify-content: center; }
  .footer__inner { justify-content: center; text-align: center; }
}

/* ============================================================
   Mode toggle (Night <-> Evening) — subtle fixed top-right control.
   ============================================================ */
.mode-toggle {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 20;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  color: var(--ink-muted);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.mode-toggle:hover { color: var(--ink); border-color: var(--hairline-strong); }
.mode-toggle svg { width: 20px; height: 20px; }
/* Show the icon of the mode you'll switch TO: night → sun (go evening),
   evening → moon (go night). */
[data-mode="night"]   .mode-toggle__moon { display: none; }
[data-mode="evening"] .mode-toggle__sun  { display: none; }