/* akonyha login intro — the convection scene, the brand hero and the card
 * reveal. Spec: docs/specs/login-intro/.
 *
 * Loads AFTER foundation-ui's tokens/themes/shell + its own login.css, so the
 * fui `.login-*` card keeps owning the card and this sheet adds only akonyha's
 * identity layer (`.kn-login-*`). Token VALUES only — never a redeclared fui
 * selector (foundation-ui/docs/theming.md).
 *
 * Note on layout: fui's `minimal_base` wraps content in `.minimal-frame`, which
 * currently has NO rules in any foundation-ui sheet. Rather than lean on an
 * unstyled frame — or redeclare someone else's selector — the stage and the
 * canvas are both `position: fixed`, so this page's layout depends on nothing
 * but the viewport.
 */

/* ── The warm ground ─────────────────────────────────────────────────────── */

/* Scoped to this page: login.css loads on /login and nowhere else, so these
 * override token VALUES for the login surface only and leave the app's Mocha
 * palette untouched (foundation-ui/docs/theming.md — values, never selectors).
 *
 * Why at all: Mocha's base is #1e1e2e, a blue-black. Nothing warm survives on
 * it, and warmth is where almost all of the "kitchen" reading comes from —
 * more than any shape the scene could draw. Sage remains the ONE accent
 * (whitebell_brand.md §2); everything below is neutral ground, not a second
 * brand colour. Reverting is deleting this block.
 *
 * Contrast against the card (#241c17), all AA or better for normal text:
 *   warm white #f3e7dd — 12.6:1   ·   subtle #c4b3a4 — 7.9:1
 *   muted     #a89383 —  5.3:1    ·   sage   #aec466 — 8.9:1
 */
:root {
  --bg:             #14100d;
  --bg-card:        #241c17;
  --bg-card-hover:  #2e2419;
  --bg-input:       #1a1410;
  --border:         #3a2d23;
  --border-strong:  #4a3a2d;
  --fg:             #f3e7dd;
  --fg-subtle:      #c4b3a4;
  --fg-muted:       #a89383;

  /* The scene's own palette. Each is an `R, G, B` triple because the canvas
     composes `rgba(<triple>, a)` at runtime — a literal colour must never
     appear in the JS (A1, UI token rule). */
  --kn-login-ground:      #14100d;          /* flat base under everything */
  --kn-login-lift-rgb:    88, 52, 28;       /* the warm low glow — where the heat is */
  --kn-login-warm-rgb:    245, 224, 220;    /* plume light (Catppuccin rosewater) */
  --kn-login-accent-rgb:  var(--accent-rgb);/* sage — the minority of plumes */
  --kn-login-grain-rgb:   216, 194, 176;    /* drifting dust */
  --kn-login-card-rgb:    36, 28, 23;       /* = --bg-card, for the card's own tint */
  --kn-login-shadow-rgb:  0, 0, 0;
}

/* ── The scene ───────────────────────────────────────────────────────────── */

.kn-login-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ── The stage: hero above card, both over the scene ─────────────────────── */

.kn-login-stage {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: 24px;
}

/* The shell is the two-tile container: one column stacked on narrow, brand panel
   beside card on wide. The stage only centres it. */
.kn-login-shell {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.kn-login-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  /* The hero opens slightly low and large, then settles as the card arrives. */
  transform: translateY(14px) scale(1.06);
  opacity: 0;
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 700ms ease;
}

.kn-login-brandrow {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Product over platform — vera's lockup convention (`vera` above `valueForge`),
   not ree-x's company-logo-on-top, because almanach is a PLATFORM and ree-x's top
   slot holds a customer company. Reading order is what carries the meaning:
   "aKonyha, part of almanach", never "almanach, containing aKonyha". */
.kn-login-lockup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.05;
}

.kn-login-platform {
  font-size: var(--fs-sm);
  letter-spacing: 0.14em;
  color: var(--fg-muted);
}

/* The vendor sits under the lockup, quietest of the three — whitebell owns both
   the platform and the application, but neither is what it is called. */
.kn-login-byline {
  margin: 0;
  font-size: var(--fs-xs);
}

.kn-login-mark {
  font-size: 40px;
  line-height: 1;
  color: var(--accent);
}

/* The hero carries the brand at display size; fui's `.login-brand-name` sizing is
   tuned for inside the card, so the override is scoped to the hero only. */
.kn-login-hero .login-brand-name { font-size: 28px; letter-spacing: -0.01em; line-height: 1.15; }

/* Prose is a wide-screen affordance only — on a phone the card is the whole
   point and a paragraph above it just pushes the form off the fold. */
.kn-login-head,
.kn-login-intro { display: none; }

.kn-login-card {
  /* Slightly translucent, so the plumes pass behind the card and it sits IN the
     scene rather than on top of it. The blur keeps the form legible over
     whatever brightness happens to drift past. */
  background: rgba(var(--kn-login-card-rgb), 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 48px rgba(var(--kn-login-shadow-rgb), 0.45);

  /* Surfaces in: rises, un-blurs and scales into place after the hero settles. */
  transform: translateY(20px) scale(0.985);
  opacity: 0;
  filter: blur(6px);
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 600ms ease,
              filter 600ms ease;
}

.is-revealed .kn-login-hero {
  transform: none;
  opacity: 1;
}

.is-revealed .kn-login-card {
  transform: none;
  opacity: 1;
  filter: none;
}

/* ── Two tiles, from 980px up ─────────────────────────────────────────────── */

/* The breakpoint and the proportions are ree-x's, deliberately: it walked this
   layout through two owner iterations (its increment-brand-panel.md) and the
   conclusions transfer — the headline must stay CALM (23px/600, subtle ink) or
   it out-shouts the product mark it sits under, and the card keeps its exact
   width so the form never becomes the thing being redesigned. */
@media (min-width: 980px) {
  .kn-login-shell {
    max-width: 980px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
  }

  .kn-login-hero {
    flex: 1 1 auto;
    max-width: 460px;
    align-items: flex-start;
    text-align: left;
    gap: 6px;
  }

  .kn-login-mark { font-size: 52px; }
  .kn-login-hero .login-brand-name { font-size: 40px; }
  .kn-login-platform { font-size: 17px; }

  .kn-login-head {
    display: block;
    margin: 26px 0 0;
    font-size: 23px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--fg-subtle);
  }

  .kn-login-intro {
    display: block;
    margin: 10px 0 0;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--fg-muted);
  }

  /* Fixed, not flexible: the card is a known-good object being placed, not a
     column being sized. */
  .kn-login-card { flex: 0 0 380px; width: 380px; }
}

/* ── The language control ────────────────────────────────────────────────── */

.kn-login-lang {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 2;
  text-decoration: none;
}

/* ── On reduced motion ───────────────────────────────────────────────────── */

/* There is deliberately NO `@media (prefers-reduced-motion: reduce)` block here,
 * and login_simmer.js does not check the query either.
 *
 * The first cut had one. It made the intro dead on this owner's own machine:
 * Windows "Show animations in Windows" is off, which Chrome reports as
 * `reduce`, so the scene drew a single frozen frame and the reveal never
 * played. The OS setting turned out to mean "I dislike window chrome sliding
 * around", not "I cannot look at a splash screen" — and it silently disabled
 * the one thing this page exists for.
 *
 * Same conclusion ree-x's owner reached on the same page for the same reason
 * (ree-x docs/specs/login-intro L5). The decorative splash animates for
 * everyone; the residual is recorded in audit.md rather than hidden here.
 */

/* ── signup (docs/specs/user-signup/) ─────────────────────────────────────────
   The registration page reuses this sheet rather than getting its own: it is the
   same card, the same scene and the same identity layer, so a second stylesheet
   would be a second palette waiting to drift. Only the two elements login does
   not have live here. */

.kn-login-signup {
  margin: 14px 0 0;
  font-size: var(--fs-xs);
  text-align: center;
}

.kn-login-signup a {
  color: var(--fg-muted);
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.35);
  padding-bottom: 1px;
}

.kn-login-signup a:hover { color: var(--accent); }

/* The confirmation shown after a submission — and equally when the user name was
   already taken. Same panel either way, by design. */
.kn-signup-done {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 6px 0 2px;
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}

.kn-signup-done i {
  color: var(--accent);
  font-size: 20px;
  flex: none;
  line-height: 1.3;
}

.kn-signup-done p { margin: 0; }