/* Berkeley Motor Works — cinematic scroll hero (home only).
   Layers, back to front: poster <img> (LCP, always present) → canvas frame sequence →
   scrim gradients → content. Inherits every token from site.css; adds no new colour. */

.cine{position:relative}
/* Only the homepage hero tucks under the transparent header. */
.cine:not(.cine-band){margin-top:-130px}
.cine .cine-stage{position:relative;min-height:max(100svh,820px);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;padding-top:240px}
.cine-band .cine-stage{min-height:100svh;padding-top:clamp(90px,12vh,140px);align-items:stretch}

/* Scroll travel exists only when the sequence is actually running. */
.cine.is-cine{height:calc(100svh + 230vh);min-height:1700px}
/* A pinned stage must be exactly one viewport tall. The 820px floor that the unpinned
   stage uses would, on a 1280x720 laptop, push the stage bottom -- and the hero CTAs
   with it -- below the fold for the whole length of the pin. */
.cine.is-cine .cine-stage{position:sticky;top:0;height:100svh;min-height:100svh}
.cine.is-static{height:auto}

.cine-poster,.cine-canvas,.cine-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 52%}
.cine-poster{z-index:-4}
.cine-video{z-index:-3;opacity:0;transition:opacity .9s var(--ease)}
/* The loop is decoration behind the copy and carries no sound or controls. If
   autoplay is refused (Low Power Mode) WebKit paints its start-playback glyph in
   the middle of the hero; suppress it -- cine.js restarts the clip on the first
   scroll or tap, and until then the frame reads as the poster it replaced. */
.cine-video::-webkit-media-controls{display:none!important}
.cine-video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
.cine-stage.video-on .cine-video{opacity:1}
.cine-canvas{z-index:-2;opacity:0;transition:opacity .7s var(--ease)}
.cine-stage.cine-on .cine-canvas{opacity:1}

/* Scrims: matches .hero::after, plus a deep fade into the leather section below
   so the last frame hands off to the page instead of cutting. */
.cine-scrim{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(5,6,8,.93) 0%,rgba(5,6,8,.72) 42%,rgba(5,6,8,.2) 78%),
    linear-gradient(0deg,rgba(5,6,8,1) 0%,rgba(5,6,8,.55) 18%,rgba(5,6,8,0) 44%),
    linear-gradient(180deg,rgba(5,6,8,.78) 0%,rgba(5,6,8,0) 26%)}
/* The gradient itself is never recomputed while scrolling: cine.js animates only
   opacity on this layer, which the compositor handles without a repaint. */
.cine.is-cine .cine-scrim{will-change:opacity}
/* Fine brushed edge along the handoff, same language as the panel edges. */
.cine-scrim::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--edge-hi) 22%,var(--edge) 50%,var(--edge-hi) 78%,transparent)}

/* ---- content choreography, driven by --p (0 → 1 across the pin) ---------- */
.cine .wrap{width:100%;display:grid;gap:34px;padding-bottom:clamp(40px,7vw,90px);align-items:end;position:relative}
@media(min-width:1000px){.cine .wrap{grid-template-columns:1.25fr .75fr}}
.cine h1{max-width:16ch}
.cine .lede{margin-bottom:30px}

/* Choreography is applied by cine.js as direct transform/opacity writes rather than an
   inherited CSS custom property, which would invalidate the whole hero subtree on every
   frame. Measured cost of the running hero: ~4ms/frame median, p95 16.5ms, against
   ~0.5ms for a static page (qa/cine-perf.py, vsync cap lifted). */
.cine.is-cine .cine-copy,.cine.is-cine .book-card{will-change:transform,opacity}

/* Entrance on load — the headline is never withheld behind a scroll. */
@keyframes cine-rise{from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:none}}
.cine-copy>*{animation:cine-rise .9s var(--ease) both}
.cine-copy>:nth-child(2){animation-delay:.08s}
.cine-copy>:nth-child(3){animation-delay:.16s}
.cine-copy>:nth-child(4){animation-delay:.24s}

/* A pinned stage is exactly one viewport tall, where the original hero could grow to
   880px. On short laptops (1366x768 and similar) the copy would otherwise rise under
   the glass nav, so the hero scales to fit the height it actually has. Verified by
   qa/cine-qa.py, which asserts clearance at four viewport sizes. */
/* 1440x900 laptops fit the approved type scale, but only just -- buy clearance from
   the top padding rather than shrinking the headline at the most common laptop size. */
@media (min-height:861px) and (max-height:920px) and (min-width:900px){
  .cine .cine-stage{padding-top:212px}
  .cine .wrap{padding-bottom:clamp(32px,5vw,62px)}
}
@media (max-height:860px) and (min-width:900px){
  .cine .cine-stage{padding-top:200px}
  .cine h1{font-size:clamp(2rem,3.9vw,3.5rem)}
  .cine .lede{font-size:1.02rem;margin-bottom:22px}
  .cine .wrap{gap:24px;padding-bottom:clamp(28px,4vw,48px)}
  .cine .book-card .gp-content{padding-top:22px;padding-bottom:22px}
}
@media (max-height:760px) and (min-width:900px){
  .cine .cine-stage{padding-top:178px}
  .cine h1{font-size:clamp(1.85rem,3.3vw,2.95rem)}
  .cine .kicker{margin-bottom:12px}
}

/* Scroll cue */
.cine-cue{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:3;
  display:flex;align-items:center;gap:10px;font:600 .68rem/1 var(--f-body);letter-spacing:.24em;
  text-transform:uppercase;color:var(--silver-3);transition:opacity .3s linear}
.cine.is-static .cine-cue{display:none}
.cine-cue i{display:block;width:1px;height:26px;background:linear-gradient(180deg,var(--silver-3),transparent);animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%,100%{transform:scaleY(.4);transform-origin:top;opacity:.4}50%{transform:scaleY(1);opacity:1}}

@media (prefers-reduced-motion:reduce){
  .cine,.cine.is-cine{height:auto!important;min-height:0}
  .cine.is-cine .cine-stage{position:relative;height:auto}
  .cine-copy>*,.cine-cue i{animation:none}
  .cine .cine-copy,.cine .book-card{transform:none!important;opacity:1!important}
}

/* ---------------- About: full-bleed shop sequence ------------------------- */
/* Travel is longer than the hero's: 200 frames across ~40s of footage want room. */
.cine-band.is-cine{height:calc(100svh + 320vh);min-height:2200px}
.cine-band.is-static{height:auto}
.cine-band .cine-scrim.band{
  background:
    linear-gradient(90deg,rgba(5,6,8,.9) 0%,rgba(5,6,8,.62) 46%,rgba(5,6,8,.16) 82%),
    linear-gradient(0deg,rgba(5,6,8,.96) 0%,rgba(5,6,8,.4) 22%,rgba(5,6,8,0) 48%),
    linear-gradient(180deg,rgba(5,6,8,.88) 0%,rgba(5,6,8,.1) 30%)}
/* align-items:flex-start matters: the base .cine .wrap sets align-items:end, which in
   a column flex pushes the text to the right edge -- the lightest part of the scrim. */
.cine-band .wrap{display:flex;flex-direction:column;justify-content:space-between;
  align-items:flex-start;gap:28px;padding-top:0;
  padding-bottom:clamp(32px,6vh,72px);width:100%}
.cine-band .cine-intro{max-width:46ch}
.cine-band .cine-intro h2{margin-bottom:.35em}
.cine-band .cine-intro .lede{margin:0}

/* Chapters: all six are in the document. On a running sequence they stack in one
   place and the active one is shown; with no JS, reduced motion, or on a phone they
   fall back to a plain readable list. */
.cine-chapters{list-style:none;margin:0;padding:0;display:grid;gap:14px;max-width:52ch}
.cine-ch{margin:0;padding:18px 20px;border-radius:var(--r);
  background:var(--g-onyx);border:1px solid var(--edge-lo);
  -webkit-backdrop-filter:blur(14px) saturate(130%);backdrop-filter:blur(14px) saturate(130%)}
.cine-ch h3{margin:0 0 .3em;font-size:clamp(1.05rem,1.5vw,1.3rem)}
.cine-ch p{margin:0;color:var(--text-2);font-size:.98rem}
.cine-ch::before{content:"";display:block;width:30px;height:1px;margin-bottom:12px;
  background:linear-gradient(90deg,var(--edge-hi),transparent)}

.cine-band.is-cine .cine-chapters{display:grid;grid-template-areas:"ch";min-height:168px;max-width:46ch}
.cine-band.is-cine .cine-ch{grid-area:ch;opacity:0;transform:translate3d(0,14px,0);
  transition:opacity .5s var(--ease),transform .5s var(--ease);pointer-events:none;align-self:end}
.cine-band.is-cine .cine-ch.on{opacity:1;transform:none;pointer-events:auto}

@media (max-width:899px){
  .cine-band .cine-stage{min-height:auto;padding-top:clamp(56px,8vh,90px)}
  .cine-band .wrap{gap:22px}
  .cine-chapters{max-width:none}
}

/* ---------------- phones: the footage is shown, not stretched -------------- */
/* On a phone the About band falls back to the mp4 loop, and the stage is as tall
   as its seven chapters (~1480px on a 390px-wide screen). Covering that box with a
   640x360 source meant a ~4x upscale cropped to a sliver of the frame: the loop was
   unreadable as footage and the chapter text sat on top of it. So below 900px the
   media becomes a real 16:9 block at the top of the section and the words move
   underneath it, where they are on the page background and plainly legible. */
@media (max-width:899px){
  .cine-band .cine-stage{display:block;padding-top:0;overflow:visible}
  .cine-band .cine-poster{position:relative;inset:auto;width:100%;height:auto;
    aspect-ratio:16/9;display:block;border-radius:var(--r);
    border:1px solid var(--edge-lo)}
  .cine-band .cine-video{position:absolute;inset:0 0 auto 0;width:100%;height:auto;
    aspect-ratio:16/9;border-radius:var(--r)}
  .cine-band .cine-canvas{display:none}
  /* The scrim existed to buy contrast for text sitting over the footage. Nothing
     sits over it any more, so it would only mute the picture. */
  .cine-band .cine-scrim{display:none}
  .cine-band .wrap{padding-top:22px;padding-bottom:0}
  /* Below 900px the band is a looping clip, not a scroll-scrubbed sequence,
     so the instruction to scroll through it would describe nothing. */
  .cine-scrollnote{display:none}
}

/* The homepage hero keeps its text over the footage -- that is the design -- but the
   fixed Call/Book dock is 92px tall and was sitting on top of the hero's own
   CTAs at rest. Buy that height back at the bottom of the stage. */
@media (max-width:1179px){
  .cine:not(.cine-band) .wrap{padding-bottom:calc(clamp(40px,7vw,90px) + 92px)}
}
/* Phones: the hero was 1354px of stage on an 844px screen, so the headline, the lede
   and all three CTAs sat below the fold and the dock covered the first of them.
   Tightening the type and the top padding brings the primary CTA above the dock and
   cuts ~150px of scroll before the page proper begins. The desktop scale is untouched. */
@media (max-width:560px){
  .cine:not(.cine-band) .cine-stage{padding-top:168px;min-height:100svh}
  .cine h1{font-size:clamp(2.1rem,9.2vw,2.75rem)}
  .cine .lede{font-size:1rem;margin-bottom:18px}
  .cine .wrap{gap:22px}
  .cine .btn-row{gap:10px}
}
@media (prefers-reduced-motion:reduce){
  .cine-band,.cine-band.is-cine{height:auto!important;min-height:0}
  .cine-band.is-cine .cine-chapters{display:grid;grid-template-areas:none;min-height:0}
  .cine-band.is-cine .cine-ch{grid-area:auto;opacity:1!important;transform:none!important;pointer-events:auto}
}