.hero-showreel{position:relative;width:100%}.hero-showreel__stage{--from: .4;--to: .8;--p: 0;--stick: 0px;--stage-h: 0px;position:sticky;top:var(--stick);width:100%;height:var(--stage-h);display:flex;align-items:center;justify-content:center;overflow:hidden}.hero-showreel__media{position:relative;flex:none;width:calc((var(--from) + (var(--to) - var(--from)) * var(--p)) * 100%);aspect-ratio:16 / 9;contain:layout paint}.hero-showreel__media video,.hero-showreel__media img{width:100%;height:100%;object-fit:cover}@media(prefers-reduced-motion:reduce){.hero-showreel__media{width:calc(var(--to) * 100%)}}.hero-showreel--flowing .hero-showreel__stage{position:static;height:auto}@media(max-width:768px),(hover:none){.hero-showreel__stage{position:static;height:auto}.hero-showreel__media{width:calc(var(--to) * 100%)}}@media(max-width:768px){.hero-showreel__media{aspect-ratio:1 / 1}}.showreel{position:relative;width:100%;height:100%}.showreel video{position:absolute;top:0;right:0;bottom:0;left:0}.showreel__cover{z-index:1}.showreel.is-full .showreel__cover{visibility:hidden}.showreel--playable{cursor:pointer}.showreel--playable.showreel--custom-cursor{cursor:none}.showreel:not(.is-full.playing) .showreel__control{visibility:hidden;opacity:0;pointer-events:none}.showreel__play{position:absolute;top:50%;left:50%;z-index:2;display:flex;width:4.5rem;height:4.5rem;align-items:center;justify-content:center;border-radius:50%;background-color:var(--bg-50);border:1px solid var(--border);-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem);color:var(--text);transform:translate(-50%,-50%);pointer-events:none;transition:opacity .25s ease,visibility .25s}.showreel__play svg{width:40%}.showreel__play-icon{translate:10% 0}.showreel__pause-icon,.showreel.is-full.playing .showreel__play-icon{display:none}.showreel.is-full.playing .showreel__pause-icon{display:block}@media(max-width:768px),(hover:none){.showreel.playing .showreel__play{visibility:hidden;opacity:0}}.showreel.is-idle:not(:has(:focus-visible)) .showreel__play,.showreel.is-idle:not(:has(:focus-visible)) .showreel__control{visibility:hidden;opacity:0;pointer-events:none}.showreel__control>span{position:relative}.showreel .mute-btn>span>svg:last-child{position:absolute;inset:auto;opacity:0}.showreel .mute-btn:not(.muted)>span>svg:first-child{opacity:0}.showreel .mute-btn:not(.muted)>span>svg:last-child{opacity:1}.showreel__keyboard{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.showreel:after{content:"";position:absolute;top:.25rem;right:.25rem;bottom:.25rem;left:.25rem;z-index:2;border-radius:1rem;pointer-events:none}.showreel:has(.showreel__keyboard:focus-visible):after{outline:2px solid var(--hover-prime);box-shadow:inset 0 0 0 2px var(--bg)}