.main-hero { 
    position:relative; width:100%; margin:0; padding:0; overflow:hidden;
    min-height:100vh; height:100svh;
}
.main-hero__media { position:absolute; inset:0; z-index:0; width:100%; height:100%; }
.main-hero__vimeo, .main-hero__vimeo > div {
    position:absolute!important; inset:0!important;
    width:100%!important; height:100%!important; padding:0!important; margin:0!important;
}
.main-hero__vimeo iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.main-hero__media video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.main-hero::before {
    content:""; position:absolute; inset:0; z-index:1;
    background-image: var(--hero-bg, none);
    background-size:cover; background-position:center; background-repeat:no-repeat;
    opacity:1; transition:opacity .6s ease; pointer-events:none;
}
.main-hero.is-playing::before { opacity:0; }
.main-hero__overlay { position:absolute; inset:0; z-index:2; pointer-events:none; background:black; opacity:var(--overlay-opacity,0); }
#hero .container-fluid { position:relative; z-index:3; }

@media (prefers-reduced-motion: reduce) {
    .main-hero__media { display:none; }
    .main-hero::before { opacity:1 !important; }
}

.main-hero {
    /* animation: 2.5s zoom-in forwards; */
    animation: 2.5s move-up-then-zoom-in-mobile forwards;
    animation-fill-mode: forwards;
    @media (min-width: 992px) { 
            animation: 2.5s move-up-then-zoom-in forwards;
            animation-fill-mode: forwards;
    }
}
#hero {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 100vh;
    border-top: 6px solid #586F47;
    position: relative;
    .container-fluid {
        padding: 25px 20px 60px 20px;
        z-index: 2;
        height:100%;
        position: relative;
    }
    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.4);
        z-index: 1;
    }
    .fade {
        opacity: 0;
        animation: fadeInContent 1.5s ease forwards 2.5s;
        animation-fill-mode: forwards;
    }
    .hero-content {
        border: 1.5px solid #FFFFFF;
        border-radius: 24px;
        padding: 30px 20px;
        /* min-height: 654px; */
        margin-top: 25px;
        opacity: 0;
        animation: fadeInContent 1.5s ease forwards 2.5s;
        animation-fill-mode: forwards;
        box-sizing: border-box;
        height: calc(100% - 60px);
    }
    .hero__logo {
        width: 140px;
        height: 32px;
    }
    
    .irvine-logo {
        justify-content: center;
        img {
            max-width: 100%;
        }
    }
    
    .title {
        font-size: 48px;
        line-height: 43.2px;
        font-weight: 500;
        letter-spacing: -0.05em;
        text-align: left;
        color: #ffffff;
        text-wrap: balance;
    }
    
    @media (min-width: 992px) {
        .container-fluid {
            padding: 25px 60px 60px 48px;
        }
        .hero__logo {
            width: 208px;
            height: 48px;
        }
        .hero-content {
            padding: 40px;
            /* min-height: 654px; */
            height: calc(100% - 60px);
        }
        
        .title {
            font-size: 72px;
            line-height: 64.8px;
        }
        .irvine-logo {
            justify-content: flex-end;
        }
    }
}

@keyframes move-up-then-zoom-in {
    0% {
        clip-path: inset(calc(50vh - 150px) -50vw calc(50vh - 180px) 100vw round 20px);
    }
    25% {
        clip-path: inset(calc(50vh - 150px) calc(50vw - 250px) calc(50vh - 180px) calc(50vw - 250px) round 20px);
    }
    30% {
        clip-path: inset(calc(50vh - 150px) calc(50vw - 250px) calc(50vh - 180px) calc(50vw - 250px) round 20px);
    }
    100% {
        clip-path: inset(0 0 round 0);
    }
}

@keyframes move-up-then-zoom-in-mobile {
    0% {
        clip-path: inset(calc(50vh - 90px) -50vw calc(50vh - 120px) 100vw round 20px);
    }
    25% {
        clip-path: inset(calc(50vh - 90px) calc(50vw - 150px) calc(50vh - 120px) calc(50vw - 150px) round 20px);
    }
    30% {
        clip-path: inset(calc(50vh - 90px) calc(50vw - 150px) calc(50vh - 120px) calc(50vw - 150px) round 20px);
    }
    100% {
        clip-path: inset(0 0 round 0);
    }
}

@keyframes fadeInContent {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.overlay {
    height: 100vh;
    background-color: #EFF1DB;
}