/* Rows travel exactly one sheet width, keeping the gaps continuous across the cut. */
.hero-bb .bb-tile{--film-travel:108vw;--film-row-delay:calc(var(--film-row) * 25ms);transition:opacity .12s,transform .65s cubic-bezier(.16,1,.3,1)}
.hero-bb .bb-tile[data-film-direction="right"]{--film-travel:-108vw}
.hero-bb .bb-tile.film-out{animation:filmRowOut .5s cubic-bezier(.65,0,.2,1) var(--film-row-delay) both}
.hero-bb .bb-tile.film-in{opacity:1;animation:filmRowIn .5s cubic-bezier(.65,0,.2,1) var(--film-row-delay) both}
@keyframes filmRowOut{from{transform:translateX(0)}to{transform:translateX(calc(-1 * var(--film-travel)))}}
@keyframes filmRowIn{from{transform:translateX(var(--film-travel))}to{transform:translateX(0)}}
.hero-bb .bb-text.is-revealed .bb-masked{transition-duration:.8s}
.hero-bb::after,.hero-bb .bb-copy{transition-duration:.4s}
.hero-bb .bb-copy.is-in .intro-final-jp{animation-duration:.4s}
.hero-bb .bb-copy.is-in .intro-final-en{animation-duration:.55s;animation-delay:.3s}
.hero-bb .bb-copy.is-in .intro-final-sub{animation-duration:.25s;animation-delay:.85s}
@media(max-width:820px){
  .hero-bb .bb-tile{--film-travel:96vw}
  .hero-bb .bb-tile[data-film-direction="right"]{--film-travel:-96vw}
}
@media(prefers-reduced-motion:reduce){.hero-bb .bb-tile.film-in,.hero-bb .bb-tile.film-out{animation:none!important}.hero-bb::after,.hero-bb .bb-copy{transition:none}}