/* Homepage hero: identity in the corners, featured credits that swap the background clip. */
.home-page .hero-media video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .9s ease; filter:contrast(1.04) saturate(.96) brightness(.92); }
.home-page .hero-media video.feature-clip { opacity:0; }
.home-page .hero-media video.feature-clip.is-on { opacity:1; }
/* A light top fade for the header, only the faintest wide vignette through the middle,
   and the bottom fade that carries the video into the next section. */
.home-page .hero-shade { background:
  linear-gradient(180deg, rgba(11,16,20,0) 68%, var(--ink) 100%),
  radial-gradient(ellipse 80% 70% at 50% 45%, rgba(0,0,0,0) 60%, rgba(0,0,0,.12) 100%),
  linear-gradient(180deg, rgba(0,0,0,.3), rgba(0,0,0,0) 22%, rgba(0,0,0,0) 62%, rgba(0,0,0,.6)); }
.home-page .hero::after { content:""; position:absolute; inset:-110px; pointer-events:none; opacity:.15; animation:film-grain .6s steps(6) infinite; mix-blend-mode:overlay; z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 -.1 1 0 0 0 -.1 1 0 0 0 -.1 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:220px; }
.hero-ident,.hero-lower { position:absolute; left:var(--gutter); right:var(--gutter); z-index:3; font:400 12px/1.7 'DM Mono',monospace; letter-spacing:.1em; }
.hero-ident { top:92px; display:flex; justify-content:space-between; gap:24px; }
.hero-ident p { margin:0; }.hero-ident p:last-child { text-align:right; }.hero-ident span { opacity:.6; }
/* Name and location read as captions, not links: a thin rule above, smaller and quieter than the menu. */
.hero-ident p { padding-top:10px; border-top:1px solid rgba(231,227,220,.28); font-size:11px; color:rgba(231,227,220,.82); }
.hero-ident span { opacity:.7; }
.hero-lower { bottom:34px; display:flex; justify-content:space-between; align-items:flex-end; gap:6vw; }
.hero-featured-label { margin:0 0 16px; opacity:.6; }
.hero-credits { display:grid; grid-template-columns:repeat(3,auto); gap:0 54px; }
.hero-credit { all:unset; cursor:pointer; padding-top:10px; border-top:1px solid rgba(231,227,220,.28); opacity:.55; transition:opacity .3s,border-color .3s; }
.hero-credit span { display:block; }.hero-credit span:nth-child(2) { display:none; }.hero-credit span:last-child { opacity:.6; }
.hero-credit.is-on,.hero-credit:hover,.hero-credit:focus-visible { opacity:1; border-top-color:var(--paper); }
.hero-credit.is-on span:nth-child(2),.hero-credit:hover span:nth-child(2) { display:block; }
.hero-credit:focus-visible { outline:2px solid var(--accent); outline-offset:6px; }
/* Reel progress: a thin line fills along the top rule of the film that's playing. */
.hero-credit { position:relative; }
.hero-credit.is-on { border-top-color:rgba(231,227,220,.28); }
.hero-credit::before { content:""; position:absolute; left:0; right:0; top:-1px; height:1px; background:var(--paper); transform:scaleX(0); transform-origin:left; }
.hero-credit.is-on::before { transform:scaleX(var(--p,0)); }
.hero-all { white-space:nowrap; padding-bottom:4px; border-bottom:1px solid rgba(231,227,220,.4); }
.hero-all b { color:var(--accent); font-weight:400; margin-left:6px; }
.hero-all:hover { color:var(--accent); border-color:var(--accent); }
/* Phones: no hover, so show one film at a time; it cycles on its own and a tap opens it. */
@media (max-width:899px) {
  .hero-ident { top:80px; font-size:10px; }
  .hero-ident p { font-size:10px; }.hero-ident p:first-child { max-width:62%; }
  .hero-lower { bottom:28px; align-items:flex-end; gap:20px; }
  .hero-featured { min-width:0; }
  .hero-credits { display:block; }
  .hero-credit { display:none; opacity:1; border-top-color:var(--paper); font-size:12px; }
  .hero-credit.is-on,.hero-credits:not(:has(.is-on)) .hero-credit:first-child { display:block; animation:credit-in .6s ease; }
  .hero-credit span:nth-child(2) { display:block; }
  .hero-credit::after { content:"VIEW FILM ↗"; display:block; margin-top:10px; color:var(--accent); font-size:10px; }
  .hero-featured-label { margin-bottom:12px; font-size:10px; }
  .hero-all { font-size:10px; }
}
@keyframes credit-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) { .hero-credit { animation:none !important; } }
/* Moving film grain over the hero, like a projected print. */
@keyframes film-grain {
  0% { transform:translate(0,0); } 17% { transform:translate(-40px,25px); } 33% { transform:translate(30px,-50px); }
  50% { transform:translate(-60px,-20px); } 67% { transform:translate(50px,40px); } 83% { transform:translate(-25px,60px); } 100% { transform:translate(0,0); }
}
@media (prefers-reduced-motion:reduce) { .home-page .hero::after { animation:none; } }
/* Run the shade past the hero's bottom edge so no sliver of video shows at the seam with the next section. */
.home-page .hero-shade { inset:0 0 -3px; }