/* Composer Assistant — the HOME page only: the HERO.
   Split out of home.css (30 Sep 2026, A27 — COORD) so each file stays under
   its 1000-line limit; loaded right after home.css by templates/site/home.html,
   and nowhere else. Part of the swap unit: home.html + home.css + this file +
   home-camera.css + static/site/js/home.js.
   ---------------------------------------------------------------------------
   ⚠️ THE SAME DISCIPLINE AS home.css, asserted by test_site.py's block [10]
   (Marc's [7] reads only site.css and home.css): tokens only, no raw colour,
   no token declared here, no selector declared twice here or in home.css,
   every selector .home*, no accent fill as text.

   The hero (A20, A27): short words and the door, then CA at work — the loop,
   presented as the plugin's WINDOW floating on the page (either theme, A33):
   rounded, a soft deep shadow, a thin edge, a faint brass light behind it.
   It rises into place once on load (CSS only — nothing waits on a script),
   and four moments under it follow the loop (home.js). */

.home-hero {
  padding-block: clamp(2rem, 4.5vw, 3.5rem) clamp(2rem, 4vw, 3rem);
  overflow: hidden;
}

.home-hero__title {
  margin: 0;
  max-width: 22ch;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.4rem, 5.6vw, 4.5rem);
  line-height: 1;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.home-hero__lede {
  margin: 1.25rem 0 0;
  max-width: 60ch;
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  line-height: 1.6;
  color: var(--text-muted);
  text-wrap: pretty;
}

.home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.5rem;
  margin-top: 1.75rem;
}

.home-hero__formats { margin: 1.25rem 0 0; font-size: .9rem; color: var(--text-muted); }

/* ── The film: the plugin's window ──────────────────────────────────────── */

/* On a phone it comes right under the headline (its place in the page). On a
   wide screen it sits under the words, BIG — the full width of the page (A28:
   it may run below the first screen). */
.home-hero__film { margin: 1.5rem 0 0; }

/* ⟳ A33: on the page's own ground in either theme. The shadow is --on-brass
   (a near-black that never flips): it floats the cream window on the light
   page and all but vanishes on the dark one, where the edge and the brass
   light carry it instead (tokens.css: on dark, a border separates, not a
   shadow). */
.home-hero__window {
  position: relative;
  isolation: isolate;
  border-radius: var(--radius-lg);
  box-shadow: 0 2.75rem 5rem -1.75rem color-mix(in srgb, var(--on-brass) 34%, transparent),
              0 .9rem 2rem -.75rem color-mix(in srgb, var(--on-brass) 20%, transparent);
  animation: home-rise 1s cubic-bezier(.2, .75, .25, 1) both;
}

/* A very faint brass light behind the window. */
.home-hero__window::before {
  content: "";
  position: absolute;
  inset: -16% -10% -22%;
  z-index: -1;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--brass) 16%, transparent), transparent);
  pointer-events: none;
}

/* The thin edge, over the film: a hairline (the theme's strong border — a
   dark line round the cream window on the light page, a light one on the
   dark page) and a crisper top edge. */
.home-hero__window::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--border-strong),
              inset 0 1px 0 color-mix(in srgb, var(--text-primary) 14%, transparent);
  pointer-events: none;
}

/* The still (a <picture>: the phone's 4:3 still or the wide one) and the loop
   over it, one cell (.home-film): the loop shows once it really plays. */
.home-hero__window picture { display: block; border-radius: inherit; }

.home-hero__still,
.home-hero__loop {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
}

.home-hero__loop { background: var(--bg-base); }

/* Rises and settles, once (A27). The end state is the page at rest. */
@keyframes home-rise {
  from { opacity: .3; transform: perspective(1400px) rotateX(7deg) translateY(1.75rem) scale(.975); }
  to   { opacity: 1; transform: none; }
}

/* ▌▌ / ▶ — on the window, bottom right: shown on hover or focus, always on a
   touch screen, and always while paused. */
.home-hero__toggle {
  position: absolute;
  right: .85rem;
  bottom: .85rem;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.5rem;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--text-primary) 18%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--bg-base) 72%, transparent);
  color: var(--text-primary);
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s ease;
}

.home-hero__toggle[hidden] { display: none; }

.home-hero__window:hover .home-hero__toggle,
.home-hero__window.is-paused .home-hero__toggle,
.home-hero__toggle:focus-visible { opacity: 1; }

.home-hero__toggle:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

@media (hover: none) {
  .home-hero__toggle { opacity: 1; }
}

/* The icon: two bars while it plays (press to pause), a triangle while paused. */
.home-hero__toggle-icon {
  width: .75rem;
  height: .85rem;
  border-inline: .25rem solid currentColor;
}

.home-hero__window.is-paused .home-hero__toggle-icon {
  margin-left: .2rem;
  border: 0;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* ── The moments: four labels under the window. At rest (no script) a plain
   row; live, each label sits under its own stretch of the loop (home.js sets
   the columns from the chapter times), the current one lit, and a thin line
   follows the film. ───────────────────────────────────────────────────── */

.home-hero__moments { position: relative; margin-top: 1rem; }

.home-hero__chapters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--data);
  font-size: .78rem;
  line-height: 1.35;
  color: var(--text-muted);
}

.home-hero__chapters li {
  padding: .65rem .75rem 0 0;
  border-top: 2px solid color-mix(in srgb, var(--text-primary) 14%, transparent);
  transition: color .3s ease;
}

.home-hero__chapters li.is-past { color: var(--text-primary); }
.home-hero__chapters li.is-current { color: var(--brass-text); }

.home-hero__progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
}

.home-hero__progress[hidden] { display: none; }

.home-hero__progress span {
  display: block;
  height: 100%;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left;
}

/* ── Wide screens: the headline on the left, the words and the door on the
   right, the window under them all, full width. ─────────────────────────── */
@media (min-width: 60rem) {
  .home-hero__text {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 0 clamp(2rem, 5vw, 4rem);
    /* Both columns start on one line: the headline's letters and the lede's
       first line share their top (measured: both inks sit ~8 px under their
       boxes at 1024–1440, so no optical offset is needed). */
    align-items: start;
  }
  .home-hero__title { grid-column: 1; grid-row: 1 / span 3; }
  .home-hero__lede { grid-column: 2; grid-row: 1; margin-top: 0; }
  .home-hero__actions { grid-column: 2; grid-row: 2; }
  .home-owners { grid-column: 2; grid-row: 3; }
  .home-hero__film { grid-column: 1 / -1; grid-row: 4; margin-top: clamp(1.75rem, 3vw, 2.5rem); }
}

/* ⟳ A58 (Marc's rule, L253): below the wide layout the owners' entry comes
   right under the headline, before the film — one slim line: the question and
   a small button, no rule above it. (A wide screen keeps it in the right
   column, unchanged: the grid above places every part of the hero.) */
@media (max-width: 59.99rem) {
  .home-owners {
    flex-wrap: nowrap;
    gap: .75rem;
    margin-top: 1rem;
    padding-top: 0;
    border-top: 0;
    max-width: none;
  }
  .home-owners__label { font-size: .88rem; }
  .home-owners__button { flex: none; gap: .5rem; padding: .4rem .75rem; font-size: .88rem; }
}

/* A phone: the TRAILER (Fede's phone split) — CLIPS's 4:3 cut of the same
   take, each moment framed on its own; only the current moment shows, full
   width, under its line. */
@media (max-width: 46rem) {
  .home-hero__loop { aspect-ratio: 4 / 3; }
  .home-hero__moments.is-live .home-hero__chapters { display: block; }
  .home-hero__moments.is-live .home-hero__chapters li:not(.is-current) { display: none; }
  .home-hero__window { border-radius: var(--radius-md); }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero__window { animation: none; }
  .home-hero__chapters li,
  .home-hero__toggle { transition: none; }
}