/* Cinematic movement layer for the current React catalogue. */
html.hf-motion-enabled:not(.hf-motion-reduced) .streamHeroImage{
    animation:hfCinemaHero 1.65s .08s cubic-bezier(.16,1,.3,1) both;
}
html.hf-motion-enabled:not(.hf-motion-reduced) .streamTopbar{
    animation:hfCinemaTopbar .85s .18s cubic-bezier(.16,1,.3,1) both;
}
.hf-motion-item.hf-cinema-title{
    opacity:1;
    filter:none;
    transform:none;
    clip-path:inset(0 100% 0 0);
    transition:clip-path 1.05s var(--hf-delay,0ms) cubic-bezier(.16,1,.3,1);
}
.hf-motion-item.hf-cinema-title.is-visible{clip-path:inset(0 0 0 0)}
.hf-motion-item.hf-cinema-heading{
    --hf-x:-42px;
    --hf-y:0px;
    letter-spacing:.035em;
    filter:none;
    transition:opacity .75s var(--hf-delay,0ms) ease,transform .95s var(--hf-delay,0ms) cubic-bezier(.16,1,.3,1),letter-spacing 1s var(--hf-delay,0ms) cubic-bezier(.16,1,.3,1);
}
.hf-motion-item.hf-cinema-heading.is-visible{letter-spacing:normal}
.hf-motion-item.hf-cinema-card{
    opacity:0;
    filter:blur(7px) saturate(.62);
    clip-path:inset(0 15% 0 0 round 9px);
    transform:perspective(1000px) translate3d(54px,22px,0) rotateY(-5deg) scale(.96);
    transform-origin:left center;
    transition:opacity .72s var(--hf-delay,0ms) ease,transform 1.05s var(--hf-delay,0ms) cubic-bezier(.16,1,.3,1),filter .82s var(--hf-delay,0ms) ease,clip-path 1.05s var(--hf-delay,0ms) cubic-bezier(.16,1,.3,1);
}
.hf-motion-item.hf-cinema-card.is-visible{
    opacity:1;
    filter:none;
    clip-path:none;
    transform:perspective(1000px) translate3d(0,0,0) rotateY(0) scale(1);
}
.hf-motion-item.hf-cinema-card .streamPosterCover,
.hf-motion-item.hf-cinema-card.studentPoster>div{
    transform:scale(1.1);
    transition:transform 1.55s calc(var(--hf-delay,0ms) + 80ms) cubic-bezier(.16,1,.3,1);
}
.hf-motion-item.hf-cinema-card.is-visible .streamPosterCover,
.hf-motion-item.hf-cinema-card.is-visible.studentPoster>div{transform:scale(1)}
.hf-motion-item.hf-cinema-panel{
    opacity:0;
    filter:blur(8px) saturate(.7);
    transform:translate3d(0,46px,0) scale(.93);
    transition:opacity .72s var(--hf-delay,0ms) ease,transform 1.05s var(--hf-delay,0ms) cubic-bezier(.16,1,.3,1),filter .8s var(--hf-delay,0ms) ease;
}
.hf-motion-item.hf-cinema-panel.is-visible{opacity:1;filter:none;transform:none}
@keyframes hfCinemaHero{
    from{opacity:.2;filter:blur(14px) saturate(.55);transform:scale(1.13) translate3d(32px,0,0)}
    to{opacity:1;filter:none;transform:scale(1) translate3d(0,0,0)}
}
@keyframes hfCinemaTopbar{
    from{opacity:0;filter:blur(7px);transform:translate3d(0,-28px,0)}
    to{opacity:1;filter:none;transform:none}
}
@media(max-width:700px){
    .hf-motion-item.hf-cinema-card{
        filter:none;
        transform:none;
        clip-path:none;
        transition:opacity .55s var(--hf-delay,0ms) ease;
    }
    .hf-motion-item.hf-cinema-card.is-visible{filter:none;transform:none;clip-path:none}
    .hf-motion-item.hf-cinema-card .streamPosterCover,
    .hf-motion-item.hf-cinema-card.studentPoster>div{
        transform:none;
        transition:none;
    }
}
@media(prefers-reduced-motion:reduce){
    .streamHeroImage,.streamTopbar,.hf-motion-item.hf-cinema-title,.hf-motion-item.hf-cinema-heading,.hf-motion-item.hf-cinema-card,.hf-motion-item.hf-cinema-panel,.hf-motion-item.hf-cinema-card .streamPosterCover{animation:none!important;transition:none!important;opacity:1!important;filter:none!important;transform:none!important;clip-path:none!important;letter-spacing:normal!important}
}