.hero{align-items:flex-end;background:#000;background-position:50%;background-size:cover;clip-path:inset(0 0 0 0);color:#fff;display:flex;height:calc(100vh - 40px);width:100%}.hero__content{padding-bottom:80px}.hero__content h1{margin:0;opacity:1;transform:translateY(0);transition:transform .5s ease-in-out,opacity .4s ease-in-out}.transitioning .hero{transition:all 1s cubic-bezier(.83,0,.17,1)}.before-enter .hero{clip-path:inset(0 0 100% 0);transform:translateY(-60px)}.before-enter .hero h1{opacity:0;transform:translateY(40px)}.leave .hero{clip-path:inset(100% 0 0 0);transform:translateY(60px)}.leave .hero h1{opacity:0;transform:translateY(40px)}.page-enter-active .hero,.page-leave-active .hero{clip-path:inset(0 0 0 0);transition:all .5s ease-in-out}.page-enter-from .hero,.page-leave-to .hero{clip-path:inset(100% 0 0 0);transform:translateY(50px)}.page-enter-from .hero h1,.page-leave-to .hero h1{opacity:0;transform:translateY(50px)}@media (max-width:600px){.hero{height:calc(100vh - 80px)}}