/*
 * The homepage. The site's one stated exception to DESIGN.md (Craig, 2026-11-10): six full-screen
 * scenes whose content moves with the scroll, Syne on every statement, and four cards.
 *
 * Two layouts live here. The default is an ordinary stacked page: what a visitor gets without
 * scripts, on a very short screen, or when their device asks for less motion. assets/js/home.js
 * adds .home--live (with .film--live and .cards--live) when motion is welcome, and that pins each
 * scene while the page scrolls through it. Native scrolling throughout: nothing takes over the wheel.
 */

.home {
  --head: 69px;                              /* the sticky header's height; home.js measures it */
  --stage: calc(100svh - var(--head));       /* one full screen under the header */
  --step: 100svh;                            /* scroll distance from one scene to the next */
  --pad: clamp(16px, 5vw, 64px);
  position: relative;
}

/* ── THE STATEMENTS ────────────────────────────────────────────────────── */
.film-line {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: clamp(28px, 4.4vw, 46px);
  line-height: 1.08;
  letter-spacing: -.025em;
  color: var(--text);
  text-wrap: balance;
}
.film-line .hl { color: var(--accent); }
.film-line .hl--keep { white-space: nowrap; }

/* ── STOPS: where the arrow, the dots and a #scene link land ───────────── */
.home-stop { position: absolute; left: 0; top: 0; width: 1px; height: 1px; pointer-events: none; }
.home--live .home-stop { top: calc(var(--i) * var(--step)); }
/* A stop is the scene finished. The site's 90px allowance above every anchor would land a link
   short of it, with the scene 11% unplayed (the factors still arriving on scene 3). */
.home--live .home-stop, .home--live .home-close { scroll-margin-top: 0; }

/* ── SCENES 1–4, STACKED (the default) ─────────────────────────────────── */
.film { position: relative; }
.film-stage { padding: var(--space-chapter) var(--pad); }
.film-canvas { display: none; }
.film-words { display: grid; gap: var(--space-group); max-width: 880px; margin-inline: auto; }
.film-frame { display: block; width: 100%; aspect-ratio: 16 / 10; margin-top: var(--space-bind); border-radius: var(--radius-lg); }
@media (max-width: 700px) { .film-frame { aspect-ratio: 4 / 5; } }

/* ── SCENES 1–4, PINNED ────────────────────────────────────────────────── */
.film--live { height: calc(var(--stage) + 3 * var(--step)); }
.film--live .film-stage {
  position: sticky;
  top: var(--head);
  height: var(--stage);
  padding: 0;
  overflow: hidden;
}
.film--live .film-canvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: pan-y;                       /* a vertical swipe still scrolls the page */
}
.film--live .film-words { position: absolute; inset: 0; max-width: none; pointer-events: none; }
.film--live .film-line {
  position: absolute;
  left: 50%;
  top: clamp(20px, 5.5vh, 56px);
  width: min(900px, 100% - 2 * var(--pad) - 32px);
  margin: 0;
  transform: translateX(-50%);
  text-align: center;
  opacity: 0;
  font-size: clamp(24px, 3.5vw, 42px);
}
.film--live .film-line[data-scene="1"] {
  top: 50%;
  width: min(780px, 100% - 2 * var(--pad) - 32px);
  transform: translate(-50%, -50%);
  font-size: clamp(34px, 5.4vw, 60px);
  line-height: 1.06;
  opacity: 1;
}
.film-pause {
  position: absolute;
  left: var(--pad);
  bottom: 18px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text-muted);
  font-size: 15px;
  cursor: pointer;
}
.film-pause:hover { color: var(--text); border-color: var(--accent-ring); }

/* ── SCENE 5, STACKED (the default) ────────────────────────────────────── */
.cards { position: relative; }
.cards-stage { padding: var(--space-band) var(--pad); max-width: 1200px; margin-inline: auto; }
.cards-bg, .hcard-frame { display: none; }
.cards-head { display: grid; gap: var(--space-item); justify-items: start; }
.cards-logo { width: clamp(120px, 14vw, 190px); height: auto; }
.cards-row { list-style: none; display: grid; gap: var(--space-group); margin-top: var(--space-group); }
.hcard-face { display: none; }
.hcard-panel {
  display: grid;
  gap: var(--space-item);
  padding: clamp(20px, 3.4vw, 44px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.hcard-copy { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.hcard-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.hcard-tag {
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
}
.hcard-count { font-family: 'DM Mono', monospace; font-size: 13px; color: var(--text-dim); }
.hcard-title { font-size: clamp(21px, 2.3vw, 30px); font-weight: 600; line-height: 1.2; color: var(--text); text-wrap: balance; }
.hcard-text { font-size: 18px; line-height: 1.6; color: var(--text-muted); }
.hcard-copy .links { margin-top: 6px; }
.hcard-demo { position: relative; min-width: 0; min-height: 0; border-radius: var(--radius-lg); overflow: hidden; }
@media (min-width: 900px) {
  .hcard-panel { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 48px; align-items: start; }
}

/* The four demos. */
.hcard-sim { display: block; width: 100%; height: 520px; border: 0; background: var(--surface); }
.hphone { display: flex; justify-content: center; height: 640px; overflow: hidden; }
.hphone > img { display: block; width: min(340px, 100%); height: auto; align-self: flex-start; }
/* The workout picker beside the phone. */
.hlog-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.hlog-pick button {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface2);
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
}
.hlog-pick button:hover { border-color: var(--accent-ring); color: var(--text); }
.hlog-pick button[aria-pressed="true"] { border-color: var(--accent); color: var(--text); font-weight: 600; }

/* The phone: the top of an iPhone, running a working copy of the Logbook app's workout screen
   (assets/js/home-logbook.js). The screen is laid out 390 points wide and scaled to fit. */
.hphone-body {
  position: relative;
  width: min(100%, 500px);
  height: 100%;
  padding: 10px 10px 0;
  border: 2px solid #3a4354;
  border-bottom: 0;
  border-radius: 54px 54px 0 0;
  background: #05070b;
}
.hphone-island { position: absolute; left: 50%; top: 22px; z-index: 2; width: 28%; height: 28px; margin-left: -14%; border-radius: 16px; background: #000; pointer-events: none; }
.hphone-screen {
  height: 100%;
  border-radius: 44px 44px 0 0;
  background: #0b0f17;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  outline-offset: -3px;
}
.hphone-screen::-webkit-scrollbar { display: none; }
.hlb { width: 390px; padding: 0 16px 28px; color: #fff; font-family: -apple-system, 'SF Pro Text', 'DM Sans', system-ui, sans-serif; font-size: 15px; line-height: 1.35; }
/* The status bar stays put, as on the phone; the screen scrolls under it and the island. */
.hl-status { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; height: 54px; margin: 0 -16px; padding: 0 38px; background: #0b0f17; font-weight: 600; font-size: 16px; }
.hl-sig { display: flex; align-items: flex-end; gap: 2px; }
.hl-sig i { width: 3px; border-radius: 1px; background: #fff; }
.hl-sig i:nth-child(1) { height: 4px; } .hl-sig i:nth-child(2) { height: 6px; } .hl-sig i:nth-child(3) { height: 8px; } .hl-sig i:nth-child(4) { height: 10px; }
.hl-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.hl-round { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; background: rgba(255,255,255,.06); }
.hl-mood { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font-size: 24px; line-height: 1; cursor: pointer; }
.hl-mood:hover { background: rgba(255,255,255,.08); }
.hl-nomood { width: 26px; height: 26px; border: 1.5px dashed rgba(255,255,255,.55); border-radius: 50%; }
.hl-card { margin-bottom: 12px; padding: 16px; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; background: rgba(255,255,255,.035); }
.hl-moods p { margin-bottom: 10px; font-weight: 600; }
.hl-moods div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hl-moods button { display: grid; gap: 4px; justify-items: center; min-height: 76px; padding: 8px 4px; border: 1.5px solid transparent; border-radius: 10px; color: rgba(255,255,255,.75); font-size: 13px; cursor: pointer; }
.hl-moods button span { font-size: 32px; line-height: 1.1; }
.hl-moods button:hover { background: rgba(255,255,255,.06); }
.hl-moods button[aria-pressed="true"] { border-color: rgba(82,158,250,.7); background: rgba(82,158,250,.16); color: #fff; }
.hl-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.1); }
.hl-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: rgba(126,200,255,.12); }
.hl-head h4 { font-size: 20px; font-weight: 600; line-height: 1.2; }
.hl-head p, .hl-stats dt, .hl-range p { font-size: 12.5px; color: rgba(255,255,255,.6); }
.hl-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 8px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.hl-stats dd { font-size: 18px; font-weight: 600; }
.hl-range { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; }
.hl-range strong { font-size: 18px; }
.hl-avg { font-size: 13px; color: #529EFA; }
.hl-pill { padding: 5px 10px; border-radius: 999px; background: rgba(77,199,128,.16); font-size: 13px; color: rgba(255,255,255,.75); }
.hl-pill b { color: #4DC780; }
.hl-ref label { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 16px; font-weight: 600; color: #fff; }
.hl-ref label svg { color: #B98CFF; }
.hl-ref textarea {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  background: rgba(0,0,0,.25);
  color: #fff;
  font: inherit;
  font-size: 16px;
  line-height: 1.4;
  resize: none;
}
.hl-ref textarea:focus-visible { outline: 2px solid #B98CFF; outline-offset: 1px; }
.hl-seg { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 12px; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.08); }
.hl-seg button { min-height: 38px; border-radius: 999px; color: rgba(255,255,255,.75); font-size: 14px; cursor: pointer; }
.hl-seg button[aria-pressed="true"] { background: rgba(255,255,255,.22); color: #fff; font-weight: 600; }
.hl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.hl-chip { min-height: 34px; padding: 0 14px; border: 1.5px solid; border-radius: 999px; font-size: 13px; font-weight: 600; color: #1a1a1a; cursor: pointer; }
.hl-chip--ins { background: #F0574D; border-color: #F0574D; }
.hl-chip--inh { background: #FF3392; border-color: #FF3392; }
.hl-chip--food { background: #F7CF45; border-color: #F7CF45; }
.hl-chip--hr { background: #F58FD1; border-color: #F58FD1; }
.hl-chip[aria-pressed="false"] { background: transparent; color: rgba(255,255,255,.7); }
.hl-chart { padding: 12px 8px 8px; }
.hl-chart svg { display: block; width: 100%; height: auto; touch-action: pan-y; }
.hl-ct { font-size: 15px; font-weight: 600; fill: #fff; }
.hl-cs { font-size: 11px; font-weight: 400; fill: rgba(255,255,255,.6); }
.hl-ax { font-size: 10.5px; fill: rgba(255,255,255,.6); }
.hl-ml { font-size: 9.5px; fill: rgba(255,255,255,.85); }
.hl-bg { fill: #529EFA; }
.hl-bg.is-faint { opacity: .35; }
.hl-hr { fill: #F58FD1; opacity: .8; }
.hl-food { fill: none; stroke: #F7CF45; stroke-width: 1.4; stroke-dasharray: 5 2 1 2; }
.hl-ins { fill: none; stroke: #F0574D; stroke-width: 1.4; stroke-dasharray: 4 3; }
.hl-ins.hl-inh { stroke: #FF3392; stroke-dasharray: .6 3; stroke-linecap: round; stroke-width: 1.8; }
.hl-fd { fill: #F7CF45; }
.hl-id { fill: #F0574D; }
.hl-id.hl-inh { fill: #FF3392; }
.hl-chipb { fill: #2a3242; stroke: rgba(255,255,255,.2); }
.hl-chipt { font-size: 11px; font-weight: 600; fill: #fff; }
.hl-hit { cursor: crosshair; }
.hl-note { padding: 0 4px; font-size: 12px; line-height: 1.4; color: rgba(255,255,255,.5); }
.hl-note strong { color: rgba(255,255,255,.75); }
.hlb button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Two across, three down: wide tiles, so a photo keeps most of its width and its people stay in frame. */
.hflip-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hflip {
  position: relative;
  aspect-ratio: 3 / 2;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface2);
  overflow: hidden;
  cursor: pointer;
  perspective: 900px;
}
.hflip img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  backface-visibility: hidden;
  transition: transform .5s cubic-bezier(.3, .7, .2, 1), opacity .3s;
}
.hflip .hflip-b { transform: rotateY(-180deg); }
.hflip[aria-pressed="true"] .hflip-a { transform: rotateY(180deg); }
.hflip[aria-pressed="true"] .hflip-b { transform: rotateY(0deg); }
.hflip:hover { border-color: var(--accent-ring); }
@media (max-width: 700px) { .hflip-grid { gap: 8px; } }
@media (prefers-reduced-motion: reduce) {
  /* No turn: one photo fades to the other. */
  .hflip img { transition: opacity .2s; transform: none !important; }
  .hflip .hflip-b { opacity: 0; }
  .hflip[aria-pressed="true"] .hflip-a { opacity: 0; }
  .hflip[aria-pressed="true"] .hflip-b { opacity: 1; }
}
.hcard-demo--globe { background: var(--bg); border: 1px solid var(--border); min-height: 360px; }
.hglobe { display: block; width: 100%; height: 100%; min-height: 360px; touch-action: pan-y; cursor: grab; }
.hglobe:active { cursor: grabbing; }
.hglobe-bar { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 8px; }
.hglobe-btn {
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 15px;
  cursor: pointer;
}
.hglobe-btn:hover { border-color: var(--accent-ring); }

/* ── SCENE 5, PINNED ───────────────────────────────────────────────────── */
.cards--live { height: calc(var(--stage) + 4 * var(--step)); }
.cards--live .cards-stage {
  position: sticky;
  top: var(--head);
  height: var(--stage);
  max-width: none;
  padding: 20px var(--pad) 84px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 4vh, 44px);
}
.cards--live .cards-bg {
  display: block;
  position: absolute;
  inset: -40px;
  width: calc(100% + 80px);
  height: calc(100% + 80px);
  object-fit: cover;
  filter: blur(22px);
  opacity: .16;
  pointer-events: none;
}
.cards--live .cards-head { position: relative; justify-items: center; text-align: center; gap: clamp(14px, 2.6vh, 28px); }
.cards--live .cards-head .film-line { max-width: 880px; font-size: clamp(24px, 3.5vw, 42px); }
.cards--live .cards-row {
  position: static;                           /* the panels place themselves on the stage */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.8vw, 24px);
  width: min(1072px, 100% - 32px);
  margin-top: 0;
}
.cards--live .hcard { display: flex; min-width: 0; }
.cards--live .hcard-face {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: var(--text);
  text-decoration: none;
}
.hcard-thumb { display: block; width: 100%; height: clamp(72px, 15vh, 132px); object-fit: cover; border-bottom: 1px solid var(--border); }
.hcard-words { display: flex; flex-direction: column; gap: 10px; padding: clamp(12px, 1.5vw, 20px); }
.cards--live .hcard-face:hover { border-color: var(--accent-ring); }
.hcard-line { font-size: clamp(15px, 1.35vw, 17px); font-weight: 600; line-height: 1.35; }
.cards--live .hcard-panel {
  position: absolute;
  left: var(--pad);
  right: calc(var(--pad) + 20px);
  top: 16px;
  bottom: 80px;
  border: 0;
  visibility: hidden;
  align-items: stretch;
  grid-template-rows: minmax(0, 1fr);
}
.cards--live .hcard-frame {
  display: block;
  position: absolute;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  pointer-events: none;
}
.cards--live .hcard-demo, .cards--live .hcard-sim, .cards--live .hphone, .cards--live .hflip-grid { height: 100%; max-height: none; }
.cards--live .hflip-grid { grid-auto-rows: minmax(0, 1fr); }
@media (min-width: 900px) {
  .cards--live .hcard[data-card="2"] .hcard-panel { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); padding-top: 28px; padding-bottom: 0; }
}
.cards--live .hflip { aspect-ratio: auto; }
.cards--live .hcard-demo--globe, .cards--live .hglobe { min-height: 0; }
@media (max-width: 899px) {
  .cards--live .cards-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards--live .cards-stage { padding-inline: 12px; }
  .cards--live .hcard-panel {
    left: 8px;
    right: 28px;
    top: 8px;
    bottom: 76px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 14px;
    padding: 18px 16px 16px;
  }
  .cards--live .hcard-copy { gap: 10px; }
  .cards--live .hcard[data-card="2"] .hcard-panel { padding-bottom: 0; }
  .cards--live .hcard[data-card="2"] .hcard-text { display: none; }
  .hlog-pick { gap: 6px; }
  .hlog-pick button { padding: 0 12px; font-size: 15px; }
  .hphone-body { border-radius: 40px 40px 0 0; padding: 8px 8px 0; }
  .hphone-screen { border-radius: 32px 32px 0 0; }
  .hphone-island { top: 16px; height: 22px; }
  .hcard-thumb { height: clamp(48px, 9vh, 84px); }
  .hcard-words { gap: 6px; padding: 10px 12px 12px; }
  .hcard-words .hcard-tag { font-size: 11px; }
  .cards--live .hcard-title { font-size: clamp(18px, 4.6vw, 22px); }
  .cards--live .hcard-text { font-size: 16px; line-height: 1.45; }
}
@media (max-width: 899px) and (max-height: 760px) { .cards--live .hcard-text { display: none; } }

/* ── SCENE 6 ───────────────────────────────────────────────────────────── */
.home-close { min-height: var(--stage); display: grid; align-content: center; padding: var(--space-band) 0; }
.home-close .shell { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-group); justify-items: center; }
.home-close .film-line { max-width: 900px; text-align: center; font-size: clamp(28px, 4.2vw, 46px); }
.close-row {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));   /* the same row of four as scene 5 */
  gap: clamp(10px, 1.8vw, 24px);
  width: min(1072px, 100%);
}
@media (max-width: 899px) { .close-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.close-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.close-card > :not(.hcard-thumb) { margin-inline: clamp(12px, 1.5vw, 20px); }
.close-card .hcard-thumb { margin-bottom: 6px; }
.close-card p { flex-grow: 1; font-size: 17px; line-height: 1.45; color: var(--text-muted); }
.close-card .go { font-size: 17px; font-weight: 600; color: var(--text); padding-block: 4px; }
.home-close .actions { justify-content: center; }

/* ── THE PROGRESS DOTS AND THE NEXT ARROW ──────────────────────────────── */
.home-rail {
  position: fixed;
  right: max(4px, env(safe-area-inset-right));
  top: calc(var(--head, 69px) + (100svh - var(--head, 69px)) / 2);
  transform: translateY(-50%);
  z-index: 150;
}
.home-rail ol { list-style: none; display: flex; flex-direction: column; align-items: center; }
.home-rail a { display: grid; place-items: center; width: 28px; height: 26px; }
.home-rail a::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 5px;
  border: 1px solid var(--text-dim);
  transition: height .2s, background-color .2s, border-color .2s;
}
.home-rail li.is-past > a::before { background: var(--text-dim); }
.home-rail li.is-now > a::before { height: 24px; background: var(--accent); border-color: var(--accent); }
.home-rail a:hover::before { border-color: var(--accent); }
.home-rail-sub { display: none !important; }
.home-rail li.is-now > .home-rail-sub, .home-rail li.is-open > .home-rail-sub { display: flex !important; }
.home-rail-sub a { height: 20px; }
.home-rail-sub a::before { width: 6px; height: 6px; }
.home-rail-sub li.is-now > a::before { height: 6px; }
@media (min-width: 900px) { .home-rail { right: 14px; } }

.home-next {
  position: fixed;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 150;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-left: -24px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: var(--bg);
  color: var(--accent);
}
.home-next:hover { background: var(--surface2); }
.home-rail[hidden], .home-next[hidden] { display: none; }