/* Films replace only the old homepage hero image. The original site theme,
   header, typography, product cards and footer remain in selected-pages.css. */
.home-films .product-scene[hidden] { display: none; }
.home-films .product-scene { min-height: inherit; }
.home-films .za-selected-copy { grid-column: 1 / span 5; position: relative; z-index: 1; padding-bottom: 45px; }
.home-films .za-selected-copy h1 { font-size: clamp(46px, 4.7vw, 74px); }
.home-films .za-selected-lead { max-width: 37ch; }
.home-film-media { position: absolute; width: min(67%, 1600px); max-height: calc(100% - 32px); right: -3%; top: 50%; transform: translateY(-50%); aspect-ratio: 16 / 9; pointer-events: none; background: #080808; }
.home-film-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--za-selected-ink), transparent 18%); }
.home-film-media img, .home-film-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain !important; object-position: center center; }
.home-film-media video { opacity: 0; transition: opacity .35s ease; }
.home-film-media video.is-ready { opacity: 1; }
.home-film-controls { position: absolute; z-index: 2; bottom: 42px; left: max(48px, calc((100% - var(--max-w)) / 2)); display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.hero-product-switch { display: flex; gap: 8px; }
.hero-product-switch button, .home-film-motion { position: relative; appearance: none; border: 1px solid var(--hairline); border-radius: 0; background: var(--za-selected-panel); color: var(--text-muted); padding: 13px 16px; min-height: 44px; font: 500 11px/1.2 var(--font-mono); cursor: pointer; }
.hero-product-switch button[aria-pressed="true"] { color: var(--za-selected-gold-bright); border-color: var(--za-selected-gold); }
.hero-product-switch button:hover, .home-film-motion:hover { color: var(--text); border-color: var(--za-selected-gold); }
.home-films button:focus-visible { outline: 2px solid var(--za-selected-gold-bright); outline-offset: 4px; }
.home-film-motion { display: inline-flex; align-items: center; gap: 8px; }
.scene-progress { position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: var(--za-selected-gold); transform: scaleX(var(--progress, 0)); transform-origin: left; }
.home-film-announcement { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.home-film-noscript { position: absolute; bottom: 8px; left: 48px; font-size: 12px; }
html[data-theme="sunlight"] .home-film-media::after { background: linear-gradient(90deg, var(--bg), transparent 18%); }
html[data-theme="sunlight"] .hero-product-switch button, html[data-theme="sunlight"] .home-film-motion { background: var(--bg); color: var(--text); }
html[data-theme="sunlight"] .hero-product-switch button[aria-pressed="true"] { border-color: var(--text); }
@media (max-width: 980px) {
  .home-films.za-selected-hero { height: auto; min-height: 0; padding-bottom: 28px; }
  .home-films .product-scene { display: flex; flex-direction: column; }
  .home-films .product-scene[hidden] { display: none; }
  .home-film-media { position: relative; width: 100%; right: auto; top: auto; transform: none; order: 1; }
  .home-film-media::after { display: none; }
  .home-films .za-selected-hero-inner { width: calc(100% - 48px); min-height: 0; display: block; order: 2; }
  .home-films .za-selected-copy { max-width: none; margin: 0; padding: 26px 0 22px; background: none; border: 0; }
  .home-films .za-selected-copy h1 { font-size: clamp(38px, 6vw, 58px); }
  .home-films .za-selected-copy h1 span { display: inline; }
  .home-films .za-selected-copy h1 span + span::before { content: " "; }
  .home-films .za-selected-lead { max-width: 60ch; margin: 16px 0; }
  .home-film-controls { position: relative; left: auto; bottom: auto; margin: 0 24px; }
  html[data-theme="sunlight"] body.za-selected-page .home-films .za-selected-copy { background: none; }
}
@media (max-width: 620px) {
  /* The existing button already uses a sun icon at this width. */
  body.za-page-home header.site .sunlight-toggle .theme-label-short { display: none; }
  .home-films .za-selected-hero-inner { width: calc(100% - 32px); }
  .home-films .za-selected-copy h1 { font-size: clamp(35px, 9vw, 50px); }
  .home-films .za-selected-copy h1 span { display: block; }
  .home-films .za-selected-copy h1 span + span::before { content: none; }
  .home-film-controls { margin: 0 16px; gap: 8px; }
  .hero-product-switch { gap: 6px; }
  .hero-product-switch button, .home-film-motion { padding: 12px 10px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-film-media video { transition: none; }
}