.hero{
    position:relative;
    width:100%;
    height:100svh;
    min-height:500px;
    overflow:hidden;
}

.hero-image{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    opacity:0;
    --py:0px;
}

.hero-logs,
.hero-hol,
.hero-pipel{
    position:absolute;
    z-index:2;
    height:auto;
    pointer-events:none;
    opacity:0;
    will-change:transform,opacity;
    --py:0px;
}

.hero-logs{
    top:1px;
    left:4%;
    width:20%;
    max-width:420px;
}

.hero-hol{
    left:4%;
    bottom:5%;
    width:50%;
    max-width:920px;
}

.hero-pipel{
    right:10px;
    bottom:1px;
    width:90%;
    max-width:1250px;
}

.hero.active .hero-image{
    animation:heroBgIn 1s ease forwards;
}

.hero.active .hero-logs{
    animation:heroLogsIn .8s ease .6s forwards;
}

.hero.active .hero-hol{
    animation:heroHolIn .8s ease 1s forwards;
}

.hero.active .hero-pipel{
    animation:heroPipelIn .9s ease 1.4s forwards;
}

.hero.leaving .hero-image{
    animation:heroBgOut .7s ease forwards;
}

.hero.leaving .hero-logs{
    animation:heroLogsOut .7s ease forwards;
}

.hero.leaving .hero-hol{
    animation:heroHolOut .7s ease forwards;
}

.hero.leaving .hero-pipel{
    animation:heroPipelOut .7s ease forwards;
}

@media(max-width:1200px){
    .hero-logs{
        width:40%;
    }

    .hero-hol{
        width:50%;
    }

    .hero-pipel{
        width:85%;
    }
}

@media(max-width:768px){
    .hero{
        height:100svh;
        min-height:0;
    }

    .hero-image{
        object-fit:cover;
    }

    .hero-logs{
        top:3%;
        left:5%;
        width:40%;
    }

    .hero-hol{
        top:34%;
        left:5%;
        bottom:auto;
        width:65%;
    }

    .hero-pipel{
        top:64%;
        right:1%;
        bottom:auto;
        width:95%;
    }
}

@media(max-width:480px){
    .hero-logs{
        top:3%;
        left:4%;
        width:46%;
    }

    .hero-hol{
        top:35%;
        left:4%;
        bottom:auto;
        width:100%;
    }

    .hero-pipel{
        top:55%;
        right:0;
        bottom:auto;
        width:140%;
        max-width:none;
    }
}

@keyframes heroBgIn{
    from{
        opacity:0;
        transform:translate3d(0,var(--py),0) scale(1.05);
    }

    to{
        opacity:1;
        transform:translate3d(0,var(--py),0) scale(1.05);
    }
}

@keyframes heroLogsIn{
    from{
        opacity:0;
        transform:translate3d(-30px,var(--py),0);
    }

    to{
        opacity:1;
        transform:translate3d(0,var(--py),0);
    }
}

@keyframes heroHolIn{
    from{
        opacity:0;
        transform:translate3d(30px,var(--py),0);
    }

    to{
        opacity:1;
        transform:translate3d(0,var(--py),0);
    }
}

@keyframes heroPipelIn{
    from{
        opacity:0;
        transform:translate3d(0,calc(40px + var(--py)),0);
    }

    to{
        opacity:1;
        transform:translate3d(0,var(--py),0);
    }
}

@keyframes heroBgOut{
    from{
        opacity:1;
        transform:translate3d(0,var(--py),0) scale(1.05);
    }

    to{
        opacity:0;
        transform:translate3d(0,calc(var(--py) - 20px),0) scale(1.05);
    }
}

@keyframes heroLogsOut{
    from{
        opacity:1;
        transform:translate3d(0,var(--py),0);
    }

    to{
        opacity:0;
        transform:translate3d(-30px,calc(var(--py) - 15px),0);
    }
}

@keyframes heroHolOut{
    from{
        opacity:1;
        transform:translate3d(0,var(--py),0);
    }

    to{
        opacity:0;
        transform:translate3d(30px,calc(var(--py) + 15px),0);
    }
}

@keyframes heroPipelOut{
    from{
        opacity:1;
        transform:translate3d(0,var(--py),0);
    }

    to{
        opacity:0;
        transform:translate3d(0,calc(var(--py) + 25px),0);
    }
}