/* Greener Grocer hero film - ported from film/prototype.html.
   Front page only. Tokens come from style.css; only the film chrome lives here. */

:root{
  --scroll-vh:280; /* how many vh the film is scrubbed over */
}

/* ---------- the film ---------- */
.film{position:relative; height:calc(var(--scroll-vh) * 1vh)}
.stage{position:sticky; top:0; height:100svh; overflow:hidden; background:var(--paper-90)}
#frames{display:block; width:100%; height:100%; object-fit:cover}
canvas#frames{image-rendering:auto}

/* chrome has to stay legible over every frame, so it carries its own scrim */
.stage::after{
  content:""; position:absolute; inset:auto 0 0 0; height:38%;
  background:linear-gradient(to top, rgba(26,33,21,.42), rgba(26,33,21,0));
  pointer-events:none;
}
.hero{
  position:absolute; inset:0; display:grid; place-content:center;
  padding:0 6vw; z-index:2; pointer-events:none;
}
.hero-inner{width:min(70vw,860px)}
#wordmark{
  width:100%; height:auto; display:block; overflow:visible;
  filter:drop-shadow(0 2px 16px rgba(26,33,21,.45)) drop-shadow(0 0 40px rgba(26,33,21,.25));
}
@media (max-width:700px){ .hero-inner{width:84vw} }
.scroll-cue{
  position:absolute; left:50%; bottom:3.2vh; transform:translateX(-50%);
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--text-inverse); opacity:.7; z-index:2;
  text-shadow:0 1px 14px rgba(26,33,21,.6); transition:opacity var(--dur-base) var(--ease-standard);
}
.scroll-cue span{display:block; width:1px; height:34px; margin:10px auto 0; background:currentColor; opacity:.5}

/* ---------- what the film resolves into ---------- */
.after{position:relative; z-index:3; background:var(--surface-page)}

/* ---------- honest reduced-motion path ---------- */
@media (prefers-reduced-motion: reduce){
  .film{height:100svh}
  .stage{position:relative}
  .scroll-cue{display:none}
}