/* Hestia landing page. Page styles only: scrollcraft.css is the mechanism and is never
   edited. Colours are the app's tokens (see CLAUDE.md). Sage is for clickable things only,
   plus the one CTA panel. Headings are charcoal. Terracotta is the ember and what it lights. */

:root {
  --sc-canvas: #ecece0;
  --sc-surface: #fafaf5;
  --sc-ink: #2f2f2b;       /* charcoal text, NOT the app's blue "ink" */
  --sc-ink-soft: #6b6b63;
  --sc-accent: #4a6f54;    /* sage, clicks only */
  --sc-accent-ink: #fafaf5;
  --sc-font-display: "Fraunces", Georgia, serif;
  --sc-font-text: "Inter", system-ui, sans-serif;
  --hestia-accent: #9a5634;       /* terracotta: the ember, steps */
  --hestia-accent-soft: #f2e2d6;
  --hestia-border: #d8d7c8;
  --sage-press: #3f5f48;

  /* Wide layout: copy is placed in the drawing's own units (1440 x 900) so it stays over
     the empty part of the scene at any 16:10 to 16:9 size. site.js sets these from the
     viewport; the fallbacks are the 1440 x 900 values. */
  --k: 1;
  --ox: 0px;
  --oy: 0px;
  --bar-h: 72px;
  --gut: 48px;
}

/* The hero line is there from the first pixel, before the engine mounts. */
[data-sc-window="hero"] { opacity: 1; }

/* ------------------------------------------------------------------ nav -- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  height: var(--bar-h);
  padding: 0 var(--gut);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
/* A cream band, only while the scene behind the nav is lit (grey labels fail on #F2E2D6). */
.bar::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--sc-canvas);
  opacity: var(--band, 0);
}
.bar__logo { display: block; color: var(--sc-accent); line-height: 0; border-radius: 4px; }
.logo { width: 113px; height: 30px; overflow: visible; }
/* The ember's home in the logo. It lights up (a warm pool, like the ember's own) once the
   walking ember has come back to it at the close. */
.logo__halo { opacity: 0; transition: opacity 600ms var(--sc-ease-out); }
.logo.is-home .logo__halo { opacity: 0.95; }
@media (prefers-reduced-motion: no-preference) {
  .logo.is-home .logo__dot { animation: home-dot 900ms var(--sc-ease-out); transform-box: fill-box; transform-origin: center; }
}
@keyframes home-dot { 0% { transform: scale(1.9); } 100% { transform: scale(1); } }

.rail { display: flex; align-items: center; gap: 6px; }
.rail__stop {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 6px; min-height: 44px;
  font-size: 13px; font-weight: 500; color: var(--sc-ink-soft); text-decoration: none;
  border-radius: 6px;
  transition: color 160ms var(--sc-ease-out);
}
.rail__stop:hover { color: var(--sc-ink); }
.rail__dot {
  width: 7px; height: 7px; border-radius: 50%; box-sizing: content-box;
  border: 1px solid var(--sc-ink-soft); background: transparent;
  transition: background-color 200ms var(--sc-ease-out), border-color 200ms var(--sc-ease-out);
}
.rail__line { width: 24px; height: 1px; background: var(--hestia-border); }
.rail__stop.is-passed .rail__dot { background: var(--hestia-accent-soft); border-color: var(--hestia-accent); }
.rail__line.is-passed { background: var(--hestia-accent); }
/* The current stop carries the ember. */
.rail__stop[aria-current="step"] { color: var(--sc-ink); font-weight: 600; }
.rail__stop[aria-current="step"] .rail__dot {
  width: 10px; height: 10px; margin: -2px 0;
  background: var(--hestia-accent); border: 3px solid var(--hestia-accent-soft);
}

.pill {
  display: inline-flex; align-items: center; height: 44px; padding: 0 22px;
  border-radius: var(--sc-r-pill);
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background-color 140ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.pill:hover { background: var(--sage-press); }
.pill:active { transform: scale(0.97); }

/* ---------------------------------------------------------------- stage -- */
.leg { overflow: clip; }
.scene {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
}
/* The ember walks these routes itself on the page; the drawn copies are its paths. */
.scene .trail, .scene .ember, .scene .note { visibility: hidden; }
.scene .lit { opacity: 0; }
.room { position: absolute; inset: 0; background: var(--hestia-accent-soft); opacity: 0; }
/* The camera zooms up to 50x (through the window, through the doorway). Lines keep the logo's
   weight instead of swelling into bars as they sweep past. Each stroke keeps its width on
   screen by itself: --px (or --w) from tools/scenes.mjs, times --kv, how big the drawing's
   units are on this screen (set by site.js per layout). So a moving camera restyles nothing.
   While a drawing draws itself on, its strokes must scale (pathLength), so they divide by the
   zoom they are seen at instead (--z, set by site.js only then). */
.scene [style*="--w"] { vector-effect: non-scaling-stroke; stroke-width: calc(var(--px, var(--w)) * var(--kv, 1) * 1px); }
.scene.drawing [style*="--w"] { vector-effect: none; stroke-width: calc(var(--w) * 1px / var(--z, 1)); }
/* The flat inside the home window at the close. One copy per layout. */
.inwin--m { display: none; }
.route {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 200; pointer-events: none; overflow: visible;
}
/* site.js measures this to frame the drawings: the whole screen on wide layouts, the box
   above the copy when stacked. */
.area-probe {
  position: absolute; left: var(--gut); right: var(--gut);
  top: var(--top, 0px); height: var(--area, 100%);
  visibility: hidden; pointer-events: none;
}

/* Draw-on. site.js gives each stroke pathLength="1", its own start (--s) and length (--l),
   and moves --d on the drawing from 0 to 1. Fills arrive once the stroke is mostly drawn. */
.scene.drawing .dr, .logo.drawing .dr {
  stroke-dasharray: 1 1;
  stroke-dashoffset: clamp(0, calc(1 - (var(--d) - var(--s)) / var(--l)), 1);
  fill-opacity: clamp(0, calc((var(--d) - var(--s) - 0.55 * var(--l)) / (0.45 * var(--l))), 1);
}

/* ----------------------------------------------------------------- copy -- */
.copy, .frag {
  position: absolute; margin: 0;
  left: calc(var(--ox) + var(--x) * var(--k) * 1px);
  /* On 16:9 the drawing is cropped top and bottom; copy never slides up under the nav. */
  top: max(calc(var(--bar-h) + 24px), calc(var(--oy) + var(--y) * var(--k) * 1px));
  width: calc(var(--w) * var(--k) * 1px);
}
.copy { display: flex; flex-direction: column; gap: calc(18px * var(--k)); }

.display {
  margin: 0;
  font-family: var(--sc-font-display); font-weight: 500;
  font-size: clamp(32px, calc(48px * var(--k)), 62px);
  line-height: 1.04; letter-spacing: -0.02em;
  color: var(--sc-ink);
  text-wrap: balance;
  font-variation-settings: "opsz" 96;
}
.display--hero { font-size: clamp(40px, calc(64px * var(--k)), 82px); line-height: 1.02; }
.display--quiet { font-weight: 400; font-size: clamp(24px, calc(34px * var(--k)), 44px); line-height: 1.2; letter-spacing: -0.01em; }
.lede, .body {
  margin: 0; max-width: 34em;
  font-size: clamp(16px, calc(18px * var(--k)), 21px); line-height: 1.6;
  color: var(--sc-ink-soft); text-wrap: pretty;
}
.lede { font-size: clamp(16px, calc(19px * var(--k)), 22px); line-height: 1.55; }
/* On the lit room the muted grey drops under 4.5:1, so body copy goes charcoal there. */
.body--lit { color: var(--sc-ink); }

.steps {
  list-style: none; margin: 4px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  font-size: clamp(14px, calc(14px * var(--k)), 17px); font-weight: 500; color: var(--sc-ink);
}
.steps li + li::before { content: "·" / ""; color: var(--hestia-accent); margin-right: 10px; font-weight: 600; }

.badges { display: flex; flex-wrap: wrap; gap: 12px; margin-top: calc(10px * var(--k)); }
.badge {
  display: block; line-height: 0; border-radius: 9px;
  transition: transform 120ms var(--sc-ease-out);
}
.badge img { height: clamp(42px, calc(48px * var(--k)), 56px); width: auto; }
.badge:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .badge:hover { transform: translateY(-1px); }
}
/* Stands in for the store badges until the apps are live: a status tag, not a button (so
   never sage), with the ember glowing like a lamp being lit, and where Hestia opens first. */
.soon { display: flex; flex-direction: column; align-items: flex-start; gap: calc(10px * var(--k)); margin-top: calc(6px * var(--k)); }
.soon p { margin: 0; }
.soon__tag {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 16px 7px 13px; border-radius: var(--sc-r-pill);
  background: var(--hestia-accent-soft); color: var(--sc-ink);
  font-size: clamp(14px, calc(15px * var(--k)), 16px); font-weight: 600;
}
.soon__ember { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--hestia-accent); }
.soon__ember::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  background: var(--hestia-accent); opacity: 0;
  animation: ember-glow 2.4s var(--sc-ease-out) infinite;
}
@keyframes ember-glow {
  from { transform: scale(0.4); opacity: 0.4; }
  to { transform: scale(1.3); opacity: 0; }
}
.soon__where { font-size: clamp(14px, calc(15px * var(--k)), 17px); line-height: 1.45; color: var(--sc-ink-soft); text-wrap: pretty; }

/* Real app fragments. Never redrawn, only cropped. */
.frag img {
  width: 100%; height: auto;
  border-radius: calc(18px * var(--k));
  box-shadow: 0 18px 40px rgb(47 47 43 / 0.14), 0 2px 6px rgb(47 47 43 / 0.08);
}
.frag--express img { border-radius: 999px; }

/* Positions, in drawing units, from the approved desktop boards. */
.copy--hero     { --x: 96;  --y: 300; --w: 520; gap: calc(20px * var(--k)); }
.copy--browse   { --x: 96;  --y: 300; --w: 420; }
.frag--prefs    { --x: 150; --y: 720; --w: 540; }
.copy--interest { --x: 96;  --y: 240; --w: 520; }
.frag--express  { --x: 108; --y: 520; --w: 238; }
.copy--host     { --x: 96;  --y: 200; --w: 420; }
.frag--card     { --x: 560; --y: 290; --w: 400; }
.frag--draft    { --x: 96;  --y: 580; --w: 360; }
.copy--stairs   { --x: 96;  --y: 150; --w: 560; }
.copy--home     { --x: 736; --y: 104; --w: 380; gap: calc(14px * var(--k)); }

/* ---------------------------------------------------------------- close -- */
.cta {
  position: absolute;
  left: 0; right: 0; margin-inline: auto;
  bottom: calc(64px + env(safe-area-inset-bottom));
  width: min(calc(1040 * var(--k) * 1px), calc(100vw - 2 * var(--gut)));
  padding: clamp(22px, 4vh, 40px) clamp(28px, 4vw, 52px);
  border-radius: 32px;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgb(250 250 245 / 0.18), 0 28px 60px rgb(47 47 43 / 0.18), 0 4px 10px rgb(47 47 43 / 0.08);
}
.cta__text { display: flex; flex-direction: column; gap: clamp(8px, 1.5vh, 14px); align-self: center; }
.cta__logo { width: auto; height: clamp(22px, 3.4vh, 32px); align-self: flex-start; }
.cta__title { color: var(--sc-accent-ink); font-size: clamp(34px, 6.2vh, 56px); line-height: 1.02; }
.cta__body { margin: 0; max-width: 30em; font-size: clamp(16px, 2vh, 18px); line-height: 1.5; color: var(--sc-accent-ink); }
.cta .badges { margin-top: clamp(4px, 1vh, 8px); }
.cta .badge img { height: clamp(40px, 5.6vh, 52px); }
.cta .badge:focus-visible { outline-color: var(--sc-accent-ink); }
.cta:focus { outline: none; }
/* On the sage panel the tag darkens instead of lightening, so it never reads as a button. */
.cta .soon { margin-top: clamp(4px, 1vh, 8px); gap: 8px; }
.cta .soon__tag { background: rgb(47 47 43 / 0.2); color: var(--sc-accent-ink); }
.cta .soon__ember { box-shadow: 0 0 0 2px var(--hestia-accent-soft); }
.cta .soon__ember::after { background: var(--hestia-accent-soft); }
.cta .soon__where { color: var(--sc-accent-ink); }
.cta__door { height: clamp(150px, 28vh, 256px); width: auto; margin: 0 12px calc(-1 * clamp(22px, 4vh, 40px)) 0; }
/* The panel's arrival. --cta runs 0 to 1 (site.js) as the street lifts: the panel rises into
   the room it leaves, then its contents follow one after another (--i): logo, title, line,
   the coming-soon line (or badges), and last the lit doorway. The engine fades the panel itself and owns its
   transform, so this uses the separate translate property. */
.cta { translate: 0 calc((1 - var(--cta, 1)) * 80px); }
.cta__text > *, .cta__door {
  opacity: clamp(0, calc((var(--cta, 1) - 0.22 - var(--i, 0) * 0.1) / 0.34), 1);
  translate: 0 calc((1 - clamp(0, calc((var(--cta, 1) - 0.22 - var(--i, 0) * 0.1) / 0.34), 1)) * 14px);
}
.cta__title { --i: 1; }
.cta__body { --i: 2; }
.cta .badges, .cta .soon { --i: 3; }
.cta__door { --i: 4; }

.foot {
  position: absolute; left: var(--gut); right: var(--gut);
  bottom: calc(14px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 8px 28px; flex-wrap: wrap;
  font-size: 13px; color: var(--sc-ink-soft);
}
.foot a { color: var(--sc-accent); padding: 8px 0; }
.foot a:hover { color: var(--sage-press); }
.foot__logo { line-height: 0; padding: 4px 0 !important; }
.foot__logo img { width: 68px; height: 18px; }
.foot__copy { margin-left: auto; }

/* -------------------------------------------------------- stacked layout --
   Phones, portrait tablets, and any window narrower than 3:2. Recomposed, not shrunk:
   the drawing gets the top of the screen and the copy sits under it. Every drawing still
   fills the screen, so two legs that share a drawing match exactly; each leg is clipped to
   the drawing area, and site.js frames the drawing inside it with the camera. The peak and
   the close open the clip to the whole screen (--open, set by site.js). */
.only-stack { display: none; }
@media (max-width: 860px), (max-aspect-ratio: 1499/1000) {
  :root { --bar-h: 64px; --gut: 16px; --rail-h: 20px; --top: calc(var(--bar-h) + var(--rail-h)); --area: 48svh; }
  .only-wide { display: none; }
  .only-stack { display: block; }

  .bar { align-items: flex-start; padding-top: 10px; }
  .logo { width: 83px; height: 22px; margin-top: 11px; }
  .rail {
    position: absolute; left: var(--gut); right: var(--gut); top: var(--bar-h);
    height: var(--rail-h); gap: 0; justify-content: space-between;
  }
  .rail__stop { padding: 0; min-height: 24px; min-width: 24px; justify-content: center; }
  .rail__label {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .rail__line { flex: 1; width: auto; }
  .rail__dot { width: 6px; height: 6px; }
  .rail__stop[aria-current="step"] .rail__dot { width: 8px; height: 8px; border-width: 2px; margin: 0; }
  .pill { padding: 0 18px; }
  .bar::before { height: calc(var(--top) + 6px); }

  .leg, .route {
    clip-path: inset(calc(var(--top) * (1 - var(--open, 0))) 0
      calc((100svh - var(--top) - var(--area)) * (1 - var(--open, 0))) 0);
  }
  .room .scene { top: auto; bottom: 0; height: calc(100svh - 34svh); }
  .inwin--wide { display: none; }
  .inwin--m { display: inline; }

  .copy, .frag { left: var(--gut); right: var(--gut); width: auto; }
  .copy { top: calc(var(--top) + var(--area) + 16px); gap: 12px; }
  .display { font-size: clamp(28px, 8vw, 40px); }
  .display--hero { font-size: clamp(34px, 10.2vw, 48px); }
  .display--quiet { font-size: clamp(22px, 6.4vw, 30px); }
  .lede, .body { font-size: 16px; line-height: 1.55; }
  .steps { font-size: 14px; }
  .badge img { height: 44px; }
  .soon__tag { font-size: 14px; }
  .soon__where { font-size: 15px; }
  .copy--hero { gap: 14px; }
  .copy--home { top: calc(var(--top) + 24px); }

  /* Fragments overlap the foot of the drawing, like a card held up to the scene. */
  .frag { top: auto; bottom: calc(100svh - var(--top) - var(--area) + 10px); width: min(70%, 320px); left: auto; }
  .frag--prefs { width: min(86%, 380px); left: var(--gut); right: auto; }
  .frag--express { width: 168px; left: var(--gut); right: auto; }
  .frag--card { width: min(62%, 300px); }
  .frag--draft { display: none; }
  .frag img { border-radius: 14px; }

}
/* Phones: the close's panel stacks (text, then the coming-soon line), with the lit doorway tucked in the
   corner, so the copy keeps its full width. */
@media (max-width: 860px) {
  .cta {
    left: var(--gut); right: var(--gut); width: auto;
    bottom: calc(92px + env(safe-area-inset-bottom));
    padding: 22px 20px; border-radius: 24px;
    flex-direction: column; align-items: stretch;
  }
  .cta__title { font-size: clamp(30px, 8.4vw, 40px); padding-right: 76px; }
  .cta__body { font-size: 16px; }
  .cta .badge img { height: 44px; }
  .cta__door { position: absolute; right: 14px; top: 14px; height: 76px; margin: 0; }
  .foot { gap: 4px 18px; }
}
/* Short phones (iPhone SE and the like): a little less drawing, so the hero's coming-soon
   tag clears the bottom edge, and the panel sits higher. The hero drops its cities line;
   the panel still has it. */
@media (max-width: 860px) and (max-height: 700px) {
  :root { --area: 44svh; }
  .copy--hero .soon__where { display: none; }
  .cta { top: calc(var(--top) + 30svh + 4px); bottom: auto; }
}

/* --------------------------------------------------------- reduced motion --
   Finished, lit drawings. The ember sits where it lights things; no route is walked. */
@media (prefers-reduced-motion: reduce) {
  .soon__ember::after { animation: none; }
  .scene .trail, .scene .ember, .scene .note { visibility: visible; }
  .scene .lit { opacity: 1; }
  .route { display: none; }
  .scene.drawing .dr { stroke-dasharray: none; fill-opacity: 1; }
}