/* ============================================================
   home.css — Zodianimal.com homepage three-zone editorial layout
   ------------------------------------------------------------
   Phase 4. Consumes tokens.css + type.css by name only (no hex in
   geometry). Owns: the desktop 3-zone grid (gutter spine, main
   column, sticky right identity rail), the asymmetric hero, the
   proverb band wrapper, band rhythm with the "editorial silence"
   tokens, the bottom-docked identity+share companion for tablet
   and mobile, and scroll-driven section reveals guarded by
   @supports (animation-timeline: view()) with a full
   prefers-reduced-motion collapse to instant.

   Interactive behaviour (rail wiring, proverb rotation, meter) is
   owned by Agent B in /js/home.js. This file styles the slots.
   ============================================================ */

/* ------------------------------------------------------------
   0. The three-zone shell
   Desktop (>=1200px): [gutter 72px] [main 1fr] [rail 340px]
   The shell wraps the existing .wrap content; #identity-rail is a
   direct grid child that sticks. Zone A is the ambient spine.
   ------------------------------------------------------------ */
.home-shell {
  display: grid;
  grid-template-columns:
    [gutter] 72px
    [main] minmax(0, 1fr)
    [rail] 340px;
  column-gap: clamp(var(--s-5), 4vw, var(--s-8));
  max-width: 1360px;
  margin-inline: auto;
  padding-inline: clamp(var(--s-4), 4vw, var(--s-7));
  align-items: start;
}

/* Zone A — the left gutter spine: deliberate negative space. */
.home-gutter {
  grid-column: gutter;
  position: sticky;
  top: calc(var(--pn-bar-h, 64px) + var(--s-5));
  align-self: start;
  height: min(70vh, 620px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  pointer-events: none;
  user-select: none;
}
.home-spine {
  writing-mode: vertical-rl;
  font: 400 var(--fs-eyebrow) / 1 var(--mono);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--faint);
  opacity: .7;
}
.home-spine-line {
  width: 1px;
  flex: 1 1 auto;
  min-height: 120px;
  background: linear-gradient(var(--line), transparent);
}

/* Zone B — the scrolling main column. */
.home-main {
  grid-column: main;
  min-width: 0;
}

/* Zone C — the sticky right rail (identity + share + reserved meter). */
#identity-rail {
  grid-column: rail;
  position: sticky;
  top: calc(var(--pn-bar-h, 64px) + var(--s-5));
  align-self: start;
  max-height: calc(100vh - var(--pn-bar-h, 64px) - var(--s-6));
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  scrollbar-width: thin;
}

/* ------------------------------------------------------------
   1. The identity card (Module 1) — both lifecycle states.
   Before reveal it is the invitation; after reveal Agent B swaps in
   the animal name + pairing + sigil. The share call is always here.
   ------------------------------------------------------------ */
#identity-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: var(--s-6);
  box-shadow: var(--e-1);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
#identity-card .rail-kicker {
  font: 600 var(--fs-eyebrow) / 1 var(--sans);
  text-transform: uppercase;
  letter-spacing: .34em;
  color: var(--accent);
  margin: 0;
}
#identity-sigil {
  width: 96px;
  height: 96px;
  margin: var(--s-2) 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-2);
  color: var(--accent);
}
#identity-sigil svg { width: 100%; height: 100%; }
.identity-sigil-wait {
  font-family: var(--serif);
  font-size: 2.6rem;
  color: var(--accent-dim);
  line-height: 1;
}
#identity-name {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 560;
  font-size: var(--fs-h2);
  line-height: 1.06;
  color: var(--moon);
  margin: 0;
  text-wrap: balance;
}
.identity-pairing {
  font: 400 var(--fs-small) / 1.3 var(--mono);
  letter-spacing: .04em;
  color: var(--muted);
  margin: 0;
}
.identity-invite {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-lead);
  line-height: 1.4;
  color: var(--brass-bright);
  margin: 0;
}

/* the always-visible share call */
#identity-share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 44px;
  margin-top: var(--s-2);
  padding: var(--s-3) var(--s-5);
  border: 1px solid var(--accent);
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--moon);
  font: 600 var(--fs-small) / 1 var(--sans);
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
}
#identity-share:hover { background: var(--accent); transform: translateY(-2px); }
#identity-share:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; }

/* ------------------------------------------------------------
   2. The reserved awakening slot (Module 2).
   Agent B (Phase 5) builds the meter INSIDE this slot. We only
   reserve the room so nothing shifts when it mounts (CLS guard).
   ------------------------------------------------------------ */
#awakening-slot {
  --accent: var(--amethyst);
  --accent-bright: var(--amethyst-bright);
  --accent-dim: var(--amethyst-dim);
  min-height: 96px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: var(--s-5);
  box-shadow: var(--e-1);
}
#awakening-slot:empty::before {
  content: "The awakening fills as you read.";
  display: block;
  font: 400 var(--fs-small) / 1.4 var(--sans);
  color: var(--faint);
}

/* rail in-page jump nav (Module 3), quiet */
.rail-jump {
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: var(--s-5);
}
.rail-jump p {
  font: 600 var(--fs-eyebrow) / 1 var(--sans);
  text-transform: uppercase;
  letter-spacing: .28em;
  color: var(--muted);
  margin: 0 0 var(--s-3);
}
.rail-jump ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.rail-jump a { color: var(--body-text); text-decoration: none; font: 400 var(--fs-small)/1 var(--sans); }
.rail-jump a:hover { color: var(--accent-bright); }

/* ------------------------------------------------------------
   3. Band rhythm — each band is its own "room".
   ------------------------------------------------------------ */
.home-main > .band,
.home-main > .hero,
.home-main > #proverb-day,
.home-main > .descent {
  padding-block: clamp(var(--s-8), 10vh, var(--s-9));
}
.home-main > .band + .band { border-top: 1px solid var(--line-soft); }

/* alternate alignment so the eye zig-zags down the scroll */
.home-main > .band:nth-of-type(even) .prose,
.home-main > .band.band--right { margin-inline-start: auto; }
.home-main .prose { max-width: var(--measure); }

/* full-bleed footer, centered measure (it now sits outside .wrap) */
.site-footer {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(var(--s-4), 4vw, var(--s-7));
}

/* ------------------------------------------------------------
   4. The asymmetric hero. Left-weighted: promise + reader form on
   the left, the wheel floats right and may bleed under the rail.
   The H1 stays the Primal Zodiac Animal promise and is the LCP.
   ------------------------------------------------------------ */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5);
}
.hero .eyebrow {
  font: 600 var(--fs-eyebrow) / 1 var(--sans);
  text-transform: uppercase;
  letter-spacing: .34em;
  color: var(--accent);
  margin: 0 0 var(--s-3);
}
.hero h1 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 560;
  font-size: var(--fs-hero, clamp(3rem, 8vw, 6.5rem));
  line-height: 1.05;
  color: var(--moon);
  margin: 0;
  max-width: 16ch;
  text-wrap: balance;
  text-shadow: 0 0 60px var(--glow);
}
.hero h1 em { font-style: italic; color: var(--brass-bright); }
.hero .lede {
  font-family: var(--serif);
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--body-text);
  max-width: 46ch;
  margin: 0;
}

/* the wheel floats to the right on wide screens, bleeds toward rail */
.hero .wheel {
  justify-self: end;
  margin-block: var(--s-4);
}

/* the reader form well */
.hero .reader {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: var(--s-6);
  max-width: 620px;
  box-shadow: var(--e-1);
}
.hero .reader h3 {
  font: 560 var(--fs-h3)/1.1 var(--serif);
  color: var(--moon);
  margin: 0 0 var(--s-2);
}

/* ------------------------------------------------------------
   5. The proverb band (Chinese-zodiac emphasis, up top).
   PROVERB_CSS is inlined in <head>; this only frames the band and
   the "Another proverb" control. Wide, generous vertical air.
   ------------------------------------------------------------ */
#proverb-day {
  --accent: var(--jade);
  --accent-bright: var(--jade-bright);
  --accent-dim: var(--jade-dim);
}
#proverb-day .eyebrow {
  font: 600 var(--fs-eyebrow) / 1 var(--sans);
  text-transform: uppercase;
  letter-spacing: .34em;
  color: var(--accent);
  margin: 0 0 var(--s-3);
}
#proverb-day > h2 {
  font: 560 var(--fs-h2)/1.1 var(--serif);
  color: var(--moon);
  margin: 0 0 var(--s-5);
  max-width: 24ch;
}
#proverb-slot { max-width: 72ch; }
.proverb-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  align-items: center;
  margin-top: var(--s-5);
}
#proverb-another {
  min-height: 44px;
  padding: var(--s-2) var(--s-5);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--accent-bright);
  font: 500 var(--fs-small)/1 var(--sans);
  letter-spacing: .02em;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
#proverb-another:hover { border-color: var(--accent); color: var(--moon); }
#proverb-another:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; }
.proverb-controls a { color: var(--muted); font: 400 var(--fs-small)/1 var(--sans); text-decoration: none; }
.proverb-controls a:hover { color: var(--accent-bright); }

/* ------------------------------------------------------------
   6. The bottom-docked identity + share companion.
   Hidden on desktop; appears at tablet/mobile so the identity card
   and the share call NEVER leave the screen. Reuses #identity-rail
   contents conceptually; this is a separate always-on bar.
   ------------------------------------------------------------ */
.home-dock {
  display: none;
}
#home-dock-name {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--serif);
  font-size: var(--fs-h3);
  line-height: 1.1;
  color: var(--moon);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#home-dock-share {
  flex: 0 0 auto;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: var(--s-2) var(--s-5);
  border: 1px solid var(--accent);
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--moon);
  font: 600 var(--fs-small)/1 var(--sans);
  text-decoration: none;
  cursor: pointer;
}
#home-dock-meter {
  flex-basis: 100%;
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--line);
  overflow: hidden;
}

/* ============================================================
   RESPONSIVE PLAN (doc 02 section 2)
   ============================================================ */

/* Laptop 1024–1199px: 2-zone. Drop Zone A, narrow the rail. */
@media (max-width: 1199px) {
  .home-shell {
    grid-template-columns: [main] minmax(0, 1fr) [rail] 300px;
    column-gap: clamp(var(--s-5), 3vw, var(--s-6));
  }
  .home-gutter { display: none; }
  .home-main { grid-column: main; }
  #identity-rail { grid-column: rail; }
}

/* Tablet + mobile <=1023px: single column, bottom-docked companion. */
@media (max-width: 1023px) {
  .home-shell {
    grid-template-columns: minmax(0, 1fr);
    max-width: 720px;
  }
  .home-gutter { display: none; }

  /* The sticky side rail stops being sticky and relocates inline as a
     full-width identity card beneath the hero result. The share stays
     always-on via the bottom dock below. */
  #identity-rail {
    grid-column: 1;
    position: static;
    max-height: none;
    overflow: visible;
    order: 2;
    margin-top: var(--s-6);
  }
  .rail-jump { display: none; }

  /* the always-on bottom bar: identity chip + share, never leaves screen */
  .home-dock {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    align-items: center;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    padding: var(--s-3) clamp(var(--s-4), 4vw, var(--s-6));
    padding-bottom: max(var(--s-3), env(safe-area-inset-bottom));
    background: color-mix(in oklch, var(--ink-2) 92%, transparent);
    border-top: 1px solid var(--line);
    backdrop-filter: blur(10px);
  }
  /* leave room so the dock never covers the footer content */
  body.pn-has-bar { padding-bottom: 76px; }

  /* the old fixed corner Third Eye HUD is superseded by the rail + dock here;
     hide it so it never overlaps the always-on bottom companion */
  .eyeHud { display: none; }
}

@supports not (color: color-mix(in oklch, red, blue)) {
  @media (max-width: 1023px) {
    .home-dock { background: var(--ink-2); }
  }
}

/* Mobile <=767px: larger tap targets, wheel shrinks to a halo. */
@media (max-width: 767px) {
  .hero h1 { font-size: clamp(2.6rem, 12vw, 4rem); max-width: none; }
  .hero .wheel { justify-self: center; transform: scale(.72); transform-origin: center; opacity: .85; }
  .hero .reader { padding: var(--s-5); }
  .home-main > .band,
  .home-main > .hero,
  .home-main > #proverb-day,
  .home-main > .descent { padding-block: clamp(var(--s-7), 8vh, var(--s-8)); }
}

/* ============================================================
   SCROLL-DRIVEN SECTION REVEALS
   Native CSS scroll-driven animation, compositor-only (cannot hurt
   INP). Guarded by @supports; end state is the visible default so
   anything unsupported or JS-off simply shows the content.
   ============================================================ */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .home-main > .band,
    .home-main > #proverb-day {
      animation: home-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 42%;
    }
  }
}
@keyframes home-rise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   REDUCED MOTION — everything instant, end states intact.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .home-main > .band,
  .home-main > #proverb-day {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  #identity-share,
  #proverb-another,
  #identity-card,
  .hero h1 {
    transition: none !important;
    animation: none !important;
  }
  .home-dock { backdrop-filter: none; }
}