*{
 box-sizing:border-box;
}

html,body{
 margin:0;
 padding:0;
 overflow-x:hidden;
 background:black;
}


.hero{
 position:relative;
 width:100vw;
 height:100vh;
 overflow:hidden;
}

.hero-video{
 position:absolute;
 inset:0;
 width:100%;
 height:100%;
 object-fit:cover;
 display:block;
}

.hero-text{
 position:absolute;
 top:50%;
 left:80px;
 transform:translateY(-50%);
 color:white;
 z-index:10;
 max-width:600px;
}

.hero-text h1{
 font-size:64px;
 line-height:1.1;
 margin:0 0 20px;
}

.hero-text p{
 opacity:.8;
}
video{
 display:block;
}

.shrink{
 min-height:120vh;
 position:relative;
 overflow:hidden;
}

.shrink-img{
 width:100%;
 height:100vh;
 object-fit:cover;
 transform-origin:center;
 will-change:transform;
}

.shrink-text{
 position:absolute;
 bottom:80px;
 left:80px;
 color:white;
 max-width:500px;
 z-index:5;
}