/* A smaller introduction window before How Sequenza Works. Keep the film uncropped. */
.brand-cinema.film-feature{position:relative;padding:3.5rem 1.25rem 1.5rem;border:0;background:transparent;isolation:isolate}
.cinema-stage{position:relative;width:100%;max-width:820px;margin:0 auto;aspect-ratio:16/9;overflow:hidden;background:#020308;border:1px solid rgba(167,183,231,.2);border-radius:.65rem}
.cinema-stage video{display:block;width:100%;height:100%;object-fit:contain;aspect-ratio:16/9;border:0;border-radius:0;background:#020308}
.cinema-invitation{position:absolute;inset:0;z-index:1;display:none;align-items:flex-end;justify-content:space-between;gap:1.5rem;padding:2rem;pointer-events:none;background:linear-gradient(180deg,rgba(2,3,8,.24),transparent 28%,transparent 48%,rgba(2,3,8,.74));transition:opacity .45s ease,visibility .45s ease}
.brand-cinema.is-enhanced .cinema-invitation{display:flex}
.cinema-title{max-width:35rem;text-shadow:0 2px 18px rgba(0,0,0,.45)}
.cinema-title .eyebrow{font-size:.66rem;letter-spacing:.26em;color:#a9e6ff}
.cinema-title h2{font:600 clamp(1.55rem,3.2vw,2.6rem)/1.02 var(--disp);letter-spacing:-.035em;margin:1rem 0 0;color:#f4f6ff}
.cinema-play{pointer-events:auto;flex:none;display:flex;align-items:center;gap:1.1rem;min-height:64px;padding:.5rem 0;border:0;border-radius:0;color:#f4f6ff;background:transparent;cursor:pointer;font-family:var(--text);text-align:left}
.cinema-play[hidden]{display:none}
.cinema-play-icon{display:grid;place-items:center;flex:none;width:58px;height:58px;border-radius:50%;border:1px solid rgba(233,238,255,.66);background:rgba(2,3,8,.38);transition:background .25s,border-color .25s,transform .25s}
.cinema-play-icon svg{width:23px;height:23px;fill:currentColor;margin-left:2px}
.cinema-play-copy b{display:block;font-size:1rem;font-weight:600}
.cinema-play-copy small{display:block;margin-top:.35rem;color:#c4cee3;font-size:.76rem;letter-spacing:.02em}
.cinema-play:hover .cinema-play-icon{border-color:#a9e6ff;background:rgba(0,181,255,.18);transform:scale(1.06)}
.cinema-play:focus-visible{outline:3px solid #a9e6ff;outline-offset:8px}
.brand-cinema.is-started .cinema-invitation{opacity:0;visibility:hidden;pointer-events:none}
.brand-cinema.is-started .cinema-play{pointer-events:none}
.cinema-caption.wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem 2rem;width:100%;max-width:820px;margin:0 auto;padding:1rem 0 .5rem;border:0}
.brand-cinema .film-note{margin:0;color:#e9eeff;font-size:.88rem}
.brand-cinema .film-note span{display:block;margin-top:.25rem;color:rgba(233,238,255,.62);font-size:.79rem}
.brand-cinema .film-description{margin:0;max-width:74ch;text-align:right;font-size:.8rem;color:#c4cee3;align-self:start}
.brand-cinema .film-description summary{min-height:44px;display:list-item;padding-block:.2rem;list-style-position:inside;color:#b8dcef;font-weight:500;text-underline-offset:4px}
.brand-cinema .film-description summary:hover{color:#fff}
.brand-cinema .film-description p{text-align:left;margin-top:.55rem;line-height:1.75}
.cinema-status{grid-column:1/-1;color:#c4cee3;font-size:.88rem}
.cinema-status a{color:#a9e6ff;text-underline-offset:4px}
.cinema-stage video:focus-visible{outline:3px solid #a9e6ff;outline-offset:-5px}
@media(max-width:800px){
  .brand-cinema.film-feature{padding-top:2.5rem}
  .cinema-invitation{padding:1.5rem;gap:1rem}
  .cinema-title .eyebrow{font-size:.55rem;letter-spacing:.2em}
  .cinema-title h2{font-size:clamp(1.55rem,4.5vw,3rem);margin-top:.6rem}
  .cinema-play-icon{width:56px;height:56px}
  .cinema-play-copy{display:none}
  .cinema-caption.wrap{padding-block:1rem .5rem;gap:1rem;grid-template-columns:minmax(0,1fr) auto}
}
@media(max-width:480px){
  .cinema-invitation{padding:1.1rem;align-items:flex-end}
  .cinema-title h2{font-size:1.55rem}
  .cinema-title .eyebrow::before{width:1.2rem}
  .cinema-title .eyebrow{gap:.5rem}
  .cinema-play-icon{width:48px;height:48px}
  .cinema-play{min-width:48px;min-height:48px;padding:0}
  .brand-cinema.film-feature{padding:2rem 1rem 1rem}
  .cinema-caption.wrap{grid-template-columns:1fr}
  .brand-cinema .film-description{text-align:left}
}
@media(prefers-reduced-motion:reduce){
  .cinema-invitation,.cinema-play-icon{transition:none}
  .cinema-play:hover .cinema-play-icon{transform:none}
}