/* Composer Assistant — the HOME page only: How it works' CAMERA.
   Split out of home.css (29 Sep 2026, COORD) when home.css reached its
   1000-line limit; loaded right after it by templates/site/home.html, and
   nowhere else. Part of the swap unit: home.html + home.css + home-hero.css
   + this file + static/site/js/home-camera.js (its script) + 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.

   Everything here applies only while home.js runs the camera (a wide screen,
   motion allowed): it adds .home-how--cam and builds .home-cam. With no
   script, a narrow screen or reduced motion, none of these rules match. */

/* ── How it works, THE CAMERA (wide screen, motion allowed). The steps scroll
   on the left; on the right a sticky stage holds the whole plugin, which
   home.js zooms and pans (the rig's transform) to each step's area. That
   step's shot is laid over the area once the camera lands; a card floats
   over the dimmed plugin. ───────────────────────────────────────────────── */

/* A28: ONE column on the dark band — the heading above (in the page's text
   column), the stage below it, as wide as the page. The steps list and the
   stage share one cell: the list is only the scroll track (its lead-in holds
   the whole plugin before step 1); the stage sticks over it, and its bar
   shows the four steps, the current one lit, and its sentence. The steps'
   own text stays in the list for screen readers, visually hidden. */
.home-how--cam { display: grid; grid-template-columns: minmax(0, 1fr); }
.home-how--cam > * { grid-area: 1 / 1; }

.home-how--cam .home-steps { gap: 0; padding-block: 40vh 20vh; }
.home-how--cam .home-step { min-height: 88vh; }

/* ⟳ A52: the last step (the handoff) keeps the stage for TWO step ranges
   after it turns active, the others one: the first carries the handover
   (YOUR TAKE, then the pull-back into the DAW, ~2.5 s), the second the drag
   loop itself. A step turns active when its top passes 55 % of the screen
   (home-camera.js) and the stage lets go when the list's end reaches the
   stage's foot, so: 2 × 88vh + the stage's top and height (.home-cam below)
   − that 55 % − the list's 20vh foot. home-camera.js also holds the exit
   until the loop has been seen (data-hold). */
.home-how--cam .home-step[data-handoff] {
  min-height: calc(2 * 88vh + max(8vh, 50vh - 23.5rem) + min(84vh, 47rem) - 55vh - 20vh);
}

/* ⟳ A55: a step with two beats (its data-frame holds one "|": step 2, the
   drop on WHAT, then the grid and the staff) gets two step ranges, a full
   one per beat — the drop gets the camera's move and its loop's time
   (home-camera.js also holds its end until the loop has been seen). */
.home-how--cam .home-step[data-frame*="|"] { min-height: calc(2 * 88vh); }

.home-how--cam .home-step__text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* No taller than the plugin needs (47rem: the whole plugin at the stage's
   widest, plus the bar) — on a tall screen it sits in the middle of it
   instead of leaving an empty band over the plugin. */
.home-cam {
  position: sticky;
  top: max(8vh, calc(50vh - 23.5rem));
  align-self: start;
  height: min(84vh, 47rem);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 1.25rem;
}

/* ⟳ A33: the stage is the page's own ground, in the visitor's theme — no
   panel behind the plugin. The plugin picture carries its own edge (an
   outline inside its box, so the stage's edge never clips it) and depth. */
.home-cam__view {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.home-cam__rig {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transform-origin: 0 0;
  transition: transform .9s cubic-bezier(.65, 0, .35, 1), filter .6s ease;
}

.home-cam__rig img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  outline: 1px solid var(--border-strong);
  outline-offset: -1px;
  box-shadow: 0 1.5rem 3rem -1.5rem color-mix(in srgb, var(--on-brass) 40%, transparent);
}

/* Zoomed in, the rest of the plugin steps back, softer — toward the PAGE's
   colour (A33): washed pale on the light page, darkened on the dark one. */
.home-cam__rig::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  background: var(--bg-base);
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s ease;
}

.home-cam__view.is-zoomed .home-cam__rig { filter: saturate(.7) blur(1.5px); }
.home-cam__view.is-zoomed .home-cam__rig::after { opacity: .6; }

/* The spot: the step's area, lit — a window onto the same picture, undimmed. */
.home-cam__spot {
  position: absolute;
  overflow: hidden;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brass) 70%, transparent),
              0 1rem 2.5rem -.5rem color-mix(in srgb, var(--on-brass) 35%, transparent),
              0 1.25rem 3.5rem color-mix(in srgb, var(--bg-base) 60%, transparent);
  pointer-events: none;
  animation: home-fade-in .45s ease both;
  /* When the camera pans aside for a card, the lit area glides with it. */
  transition: .9s cubic-bezier(.65, 0, .35, 1);
  transition-property: left, top, width, height;
}

.home-cam__spot:not(.is-on) { display: none; }
.home-cam__spot img {
  position: absolute;
  max-width: none;
  height: auto;
  transition: .9s cubic-bezier(.65, 0, .35, 1);
  transition-property: left, top, width;
}

.home-cam__view .home-shot {
  position: absolute;
  padding: 0;
  background: transparent;
  border-radius: var(--radius-sm);
  animation: home-fade-in .45s ease both;
  transition: .9s cubic-bezier(.65, 0, .35, 1);
  transition-property: left, top, width, height, clip-path;
}

.home-cam__view .home-shot:not(.is-on) { display: none; }

.home-cam__view .home-shot img,
.home-cam__view .home-shot video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.home-cam__view .home-shot figcaption { display: none; }

/* The card takes most of the stage (A20: big) — the camera has panned the
   step's area to the other edge. */
.home-cam__view .home-shot--card {
  top: 50%;
  right: 3%;
  width: 72%;
  padding: .75rem;
  background: var(--bg-card);
  box-shadow: 0 0 0 1px var(--border-strong),
              0 1.5rem 3.5rem -1rem color-mix(in srgb, var(--on-brass) 40%, transparent),
              0 1.5rem 4rem color-mix(in srgb, var(--bg-base) 70%, transparent);
  animation: home-card-in .65s cubic-bezier(.2, .7, .2, 1) both;
  transform: translateY(-50%);
}

.home-cam__view .home-shot--card img,
.home-cam__view .home-shot--card video { height: auto; }
.home-cam__view .home-film { height: 100%; }
.home-cam__view .home-shot--card.is-left { right: auto; left: 3%; }

/* Step 4's handover (A28, Fede's pick B): the DAW takes the whole stage — the
   loop whole (contained), the page's own colour around it, over the plugin.
   home-camera.js fades it in around the plugin once the camera has pulled
   back to the plugin's place in the DAW. */
.home-cam__view .home-shot--card.is-full {
  inset: 0;
  width: auto;
  grid-template-rows: minmax(0, 1fr);      /* the stage's height, so the loop fits in it whole */
  padding: 0;
  border-radius: 0;
  background: var(--bg-base);
  box-shadow: none;
  transform: none;
  animation: home-fade-in .5s ease both;
}

.home-cam__view .home-shot--card.is-full .home-film { grid-template-rows: minmax(0, 1fr); }
.home-cam__view .home-shot--card.is-full img,
.home-cam__view .home-shot--card.is-full video { height: 100%; border-radius: 0; }

/* The bar under the stage: the four steps as a row (current lit, past bright),
   then the current step's sentence and, at the right, what the shot shows. */
.home-cam__bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .75rem 2rem;
  align-items: start;
}

.home-cam__steps {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--data);
  font-size: .8rem;
  color: var(--text-muted);
}

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

.home-cam__steps li.is-past { color: var(--text-primary); }
.home-cam__steps li.is-current { border-top-color: var(--brass); color: var(--brass-text); }
.home-cam__n { margin-right: .5rem; }

.home-cam__line { margin: 0; min-height: 3.1em; max-width: 46rem; font-size: 1.05rem; line-height: 1.55; }

.home-cam__caption { margin: 0; font-family: var(--data); font-size: .8rem; color: var(--brass-text); text-align: right; }

@keyframes home-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes home-card-in {
  from { opacity: 0; transform: translateY(-44%) scale(.96); }
  to   { opacity: 1; transform: translateY(-50%); }
}