.hero-reel .hero-screen{position:relative;overflow:hidden;background:#f1f5f7}
.hero-reel .hero-screen-desktop{aspect-ratio:1.6}
.hero-reel .hero-screen-phone{aspect-ratio:390/844}
.hero-reel .hero-frame{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain;opacity:0;transition:opacity 900ms ease;pointer-events:none}
.hero-reel .hero-frame.is-current{opacity:1}
.hero-reel .hero-frame.is-scroll{height:auto;max-width:none;bottom:auto;object-fit:initial;transform:translateY(0)}
.hero-reel .hero-flick-film{position:absolute;left:0;top:8%;width:100%;height:92%;object-fit:cover;opacity:0;transition:opacity 900ms ease;pointer-events:none;background:#080808}
.hero-reel .hero-flick-film.is-playing{opacity:1}
.hero-reel figcaption{min-height:32px}
.hero-reel figcaption [data-hero-name]{margin:0}
.hero-reel-controls{display:flex;align-items:center;gap:14px;color:#777;font-size:10px;font-variant-numeric:tabular-nums}
.hero-reel-controls button{display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;background:transparent;color:#222;cursor:pointer;font-size:13px;border-radius:4px}
.hero-reel-controls button:hover{background:#eee}
.hero-reel-controls button:focus-visible{outline:2px solid #222;outline-offset:2px}
@media(prefers-reduced-motion:reduce){.hero-reel .hero-frame,.hero-reel .hero-flick-film{transition:none}}