/* 208 Acai scroll film. The section is tall; the stage pins to the screen while the film scrubs; the page then
   scrolls on. Desktop: the 16:9 film fills the screen, the headline sits over the white counter and fades as the
   fruit launches. Phones: a 4:5 film box at the top with the headline under it. The film is a white counter, so
   the copy is dark and the legibility fades are white, never a dark band.
   Colors come from Sean's logo (brand/logo/208-acai-logo-original.png), sampled 2026-09-23:
   plum #480E4A, magenta #C6519F, sun #F7AC2B, leaf #639B38, cream #FEF8F4. */
.ab-film { position: relative; height: 340vh; background: #FFFFFF; color: #480E4A; }
.ab-film-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.ab-film-media { position: absolute; inset: 0; }
.ab-film-poster, .ab-film-poster img, .ab-film-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ab-film-poster img { object-fit: cover; }
.ab-film-canvas { z-index: 1; }
.ab-film-media::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(0deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.7) 22%, rgba(255,255,255,0) 46%),
              linear-gradient(180deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.5) 9%, rgba(255,255,255,0) 20%);
  transition: opacity .4s; }
.ab-film--live .ab-film-media::after { opacity: calc(1 - var(--ab-fade, 0)); }
.ab-film-copy { position: absolute; z-index: 3; left: max(16px, calc((100vw - 1180px) / 2)); right: 16px;
  bottom: clamp(28px, 6vh, 64px); max-width: 40rem; will-change: opacity, transform; }
.ab-film .ab-film-copy h1 { color: #480E4A; max-width: 13ch; font-size: clamp(42px, 4.6vw, 68px); margin: 0 0 0.5rem; }
.ab-film .ab-film-copy .ab-lede { color: #6E4A70; max-width: 34ch; margin: 0 0 1.4rem; }
.ab-film .ab-film-copy .ab-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.ab-btn { display: inline-block; padding: 14px 26px; border-radius: 999px; background: #480E4A; color: #FEF8F4;
  text-decoration: none; font-weight: 700; border: 2px solid #480E4A; }
.ab-btn:hover { background: #F7AC2B; border-color: #F7AC2B; color: #480E4A; }
.ab-btn--outline { background: transparent; color: #480E4A; }
.ab-btn--outline:hover { background: #480E4A; color: #FEF8F4; border-color: #480E4A; }
.ab-film .ab-hours { margin: 0 0 0.4rem; color: #6E4A70; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.ab-film .ab-hours::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #639B38; flex: none; }

/* Phones. Sean, 2026-10-05: "it's not full width on mobile." The film was a 4:5 box capped by the screen height, so
   on a phone with Safari's bars showing it was about 308px wide with white down both sides. Now the film runs edge to
   edge and takes all the height the copy leaves; the canvas and the poster cover-crop the 4:5 frames to that box, so
   there is never a white bar beside it. The bottom edge fades into the white under it, so film and copy read as one. */
@media (max-width: 767px) {
  .ab-film { height: 300svh; }
  .ab-film-stage { display: flex; flex-direction: column; }
  .ab-film-media { position: relative; inset: auto; flex: 1 1 auto; min-height: 0; width: 100%; }
  .ab-film-media::after { background: linear-gradient(180deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.5) 12%, rgba(255,255,255,0) 26%),
    linear-gradient(0deg, #FFFFFF 0%, rgba(255,255,255,0) 16%); }
  .ab-film-copy { position: relative; left: auto; right: auto; bottom: auto; flex: none; padding: 6px 16px 22px; max-width: none; }
  .ab-film .ab-film-copy h1 { font-size: clamp(32px, 9vw, 40px); margin: 0.15em 0 0.4rem; }
  .ab-film .ab-film-copy .ab-lede { font-size: 17px; line-height: 1.5; margin-bottom: 0.9rem; }
}

/* Reduced motion or Save-Data: one screen, the finished bowl, no scrubbing. */
.ab-film--still { height: auto; }
.ab-film--still .ab-film-stage { position: relative; }
.ab-film--still .ab-film-canvas { display: none; }

/* Motion can always be turned off. hero.js already skips the scrub for reduced motion; this stills the fade too. */
@media (prefers-reduced-motion: reduce) {
  .ab-film-media::after { transition: none; }
}