/* Home brand film · Q light window */
.home-film{
  position:relative;
  overflow:hidden;
  padding:clamp(110px,12vw,190px) 0 clamp(120px,13vw,210px);
  background:var(--bg);
  color:var(--ink);
  isolation:isolate;
}
.home-film::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 48%,color-mix(in srgb,var(--lime) 11%,transparent) 0,transparent 38%),
    linear-gradient(90deg,transparent 49.94%,color-mix(in srgb,var(--ink) 5%,transparent) 50%,transparent 50.06%);
  opacity:.72;
}
.home-film-shell{
  width:min(76vw,1200px);
  margin:0 auto;
  text-align:center;
}
.home-film-kicker{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:13px;
  margin:0 0 30px;
  color:var(--mut);
  font:500 11px/1 var(--mono);
  letter-spacing:.22em;
}
.home-film-kicker i{width:42px;height:1px;background:var(--lime);opacity:.9}
.home-film-title{
  max-width:1180px;
  margin:0 auto;
  font-family:var(--zh);
  font-size:clamp(50px,6.3vw,116px);
  font-weight:750;
  line-height:1.02;
  letter-spacing:-.065em;
  text-wrap:balance;
}
.home-film-title span{color:var(--lime-ink)}
.home-film-intro{
  max-width:650px;
  margin:28px auto 58px;
  color:var(--mut);
  font-size:clamp(15px,1.2vw,19px);
  line-height:1.9;
  letter-spacing:.035em;
}
.home-film-stage{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#0a0d0b;
  border:1px solid color-mix(in srgb,var(--lime) 48%,var(--line));
  border-radius:clamp(14px,1.4vw,24px);
  clip-path:inset(36% 0 36% round 24px);
  transform:scale(.965);
  opacity:.5;
  transition:clip-path 1.25s cubic-bezier(.16,1,.3,1),transform 1.25s cubic-bezier(.16,1,.3,1),opacity .65s ease;
  box-shadow:0 32px 90px color-mix(in srgb,#07100a 15%,transparent);
}
.home-film-stage.is-open{
  clip-path:inset(0 round clamp(14px,1.4vw,24px));
  transform:scale(1);
  opacity:1;
}
.home-film-stage video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  background:#080b09;
}
.home-film-tint{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(5,10,7,.08),rgba(5,10,7,.18));
  transition:opacity .45s ease;
}
.home-film-play{
  position:absolute;
  top:50%;left:50%;
  width:clamp(70px,6.6vw,104px);
  aspect-ratio:1;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  color:inherit;
  background:transparent;
  filter:drop-shadow(0 7px 18px rgba(0,0,0,.28));
  transform:translate(-50%,-50%);
  cursor:pointer;
  transition:transform .35s cubic-bezier(.16,1,.3,1),filter .3s ease,opacity .3s ease;
}
.home-film-play img{width:100%;height:100%;object-fit:contain}
.home-film-play:hover{transform:translate(-50%,-50%) scale(1.08);filter:drop-shadow(0 9px 22px rgba(0,0,0,.34))}
.home-film-play:focus-visible{outline:3px solid var(--lime);outline-offset:5px}
.home-film-meta{
  position:absolute;
  top:clamp(18px,2.4vw,38px);
  left:clamp(20px,3vw,48px);
  right:clamp(20px,3vw,48px);
  display:flex;
  justify-content:space-between;
  color:rgba(255,255,255,.78);
  font:500 clamp(9px,.8vw,12px)/1 var(--mono);
  letter-spacing:.22em;
  transition:opacity .3s ease;
}
.home-film-stage.is-playing .home-film-play,
.home-film-stage.is-playing .home-film-tint,
.home-film-stage.is-playing .home-film-meta,
.home-film-stage.is-ended .home-film-play,
.home-film-stage.is-ended .home-film-tint,
.home-film-stage.is-ended .home-film-meta{opacity:0;pointer-events:none}
.home-film-replay{
  position:absolute;
  right:clamp(18px,2.2vw,34px);
  bottom:clamp(18px,2.2vw,34px);
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 13px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:999px;
  color:#fff;
  background:rgba(5,9,7,.38);
  box-shadow:0 8px 24px rgba(0,0,0,.14);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  font:500 11px/1 var(--zh);
  letter-spacing:.08em;
  opacity:0;
  pointer-events:none;
  transform:translateY(5px);
  cursor:pointer;
  transition:opacity .3s ease,transform .3s ease,background .25s ease;
}
.home-film-stage.is-ended .home-film-replay{opacity:.58;pointer-events:auto;transform:none}
.home-film-stage.is-ended:hover .home-film-replay,
.home-film-replay:focus-visible{opacity:1;background:rgba(5,9,7,.62)}
.home-film-replay:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.home-film-caption{
  margin:24px 0 0;
  color:var(--mut);
  font:500 12px/1.4 var(--mono);
  letter-spacing:.16em;
  text-transform:uppercase;
}

@media(max-width:820px){
  .home-film{padding:84px 0 104px}
  .home-film-shell{width:calc(100% - 32px)}
  .home-film-kicker{margin-bottom:22px;font-size:9px}
  .home-film-kicker i{width:28px}
  .home-film-title{font-size:clamp(43px,12vw,70px);letter-spacing:-.075em}
  .home-film-intro{max-width:430px;margin:20px auto 38px;font-size:14px;line-height:1.75}
  .home-film-stage{clip-path:inset(28% 0 28% round 16px);border-radius:16px}
  .home-film-stage.is-open{clip-path:inset(0 round 16px)}
  .home-film-meta{letter-spacing:.13em}
  .home-film-replay{right:14px;bottom:14px;padding:8px 11px;font-size:10px}
  .home-film-stage.is-ended .home-film-replay{opacity:.82}
  .home-film-caption{margin-top:18px;font-size:10px;letter-spacing:.12em}
}
@media(max-width:480px){
  .home-film-title{max-width:350px}
  .home-film-intro{max-width:330px}
  .home-film-play{width:68px}
  .home-film-meta{top:15px;left:16px;right:16px;font-size:8px}
}
@media(prefers-reduced-motion:reduce){
  .home-film-stage{clip-path:none;transform:none;opacity:1;transition:none}
  .home-film-play{transition:none}
}