/* Hero banner slide 1 */
.hero-banner-slide-1 {
    position: relative;
    min-height: 333px;
    height: 333px;
    overflow: visible;
    container-type: size;
}
.hero-banner-slide-1 .hero-banner-copy h3 {
    animation:
        hero-banner-title-opacity 6s linear infinite,
        hero-banner-title-translate 6s linear infinite;
}

@keyframes hero-banner-title-opacity {
    0% {
        animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
        opacity: 0;
    }
    11.667% {
        opacity: 1;
    }
    75% {
        animation-timing-function: ease-in-out;
        opacity: 1;
    }
    95% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@keyframes hero-banner-title-translate {
    0% {
        animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
        translate: 0 20.738px;
    }
    13.333% {
        translate: 0 0;
    }
    75% {
        animation-timing-function: ease-in-out;
        translate: 0 0;
    }
    96.667% {
        translate: 0 20.738px;
    }
    100% {
        translate: 0 20.738px;
    }
}
.hero-banner-slide-1 .hero-banner-copy p {
    animation:
        hero-banner-subtitle-opacity 6s linear infinite,
        hero-banner-subtitle-translate 6s linear infinite;
}

@keyframes hero-banner-subtitle-opacity {
    0% {
        opacity: 0;
    }
    4.167% {
        animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
        opacity: 0;
    }
    15.833% {
        opacity: 1;
    }
    76.667% {
        animation-timing-function: ease-in-out;
        opacity: 1;
    }
    96.667% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@keyframes hero-banner-subtitle-translate {
    0% {
        translate: 0 20.738px;
    }
    4.167% {
        animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
        translate: 0 20.738px;
    }
    16.667% {
        translate: 0 0;
    }
    76.667% {
        animation-timing-function: ease-in-out;
        translate: 0 0;
    }
    98.333% {
        translate: 0 20.738px;
    }
    100% {
        translate: 0 20.738px;
    }
}
.hero-banner-deco {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: visible;
}

.hero-banner-el {
    position: absolute;
    display: block;
    height: auto;
    max-width: none;
    pointer-events: none;
    user-select: none;
}

.hero-banner-el--moon {
    top: 10px;
    left: 27px;
    width: 99.699px;
    height: 99.699px;
    aspect-ratio: 1 / 1;
    transform: rotate(10.283deg);
    background: url("../assets/images/hero-banner/moon.png") 50% / cover no-repeat;
    z-index: 3;
    animation:
        hero-moon-opacity 6s linear infinite,
        hero-moon-translate 6s linear infinite,
        hero-moon-scale 6s linear infinite;
}

@keyframes hero-moon-opacity {
    0% {
        opacity: 0;
    }
    16.667% {
        animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    80% {
        animation-timing-function: ease-in-out;
        opacity: 1;
    }
    98.333% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@keyframes hero-moon-translate {
    0% {
        translate: 0 15px;
    }
    16.667% {
        animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
        translate: 0 15px;
    }
    31.667% {
        animation-timing-function: ease-in-out;
        translate: 0 0;
    }
    58.333% {
        animation-timing-function: ease-in-out;
        translate: 0 -4px;
    }
    83.333% {
        animation-timing-function: ease-in-out;
        translate: 0 2px;
    }
    98.333% {
        translate: 0 15px;
    }
    100% {
        translate: 0 15px;
    }
}

@keyframes hero-moon-scale {
    0% {
        scale: 0.8 0.8;
    }
    16.667% {
        animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
        scale: 0.8 0.8;
    }
    31.667% {
        scale: 1 1;
    }
    80% {
        animation-timing-function: ease-in-out;
        scale: 1 1;
    }
    98.333% {
        scale: 0.8 0.8;
    }
    100% {
        scale: 0.8 0.8;
    }
}

.hero-banner-el--rocket {
    top: -2%;
    right: 2%;
    width: 197.963px;
    height: 197.963px;
    aspect-ratio: 1 / 1;
    transform: rotate(12.654deg);
    background: url("../assets/images/hero-banner/rocket.png") 6.039px 0 / 94.988% 126.65% no-repeat;
    z-index: 3;
    animation:
        hero-rocket-opacity 6s linear infinite,
        hero-rocket-translate 6s linear infinite,
        hero-rocket-scale 6s linear infinite;
}

@keyframes hero-rocket-opacity {
    0% {
        opacity: 0;
    }
    13.333% {
        animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
        opacity: 0;
    }
    18.333% {
        opacity: 1;
    }
    41.667% {
        animation-timing-function: cubic-bezier(0.55, 0.06, 0.68, 0.19);
        opacity: 1;
    }
    46.667% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@keyframes hero-rocket-translate {
    0% {
        translate: -550px 350px;
    }
    13.333% {
        animation-timing-function: ease;
        translate: -550px 350px;
    }
    30% {
        animation-timing-function: cubic-bezier(0.55, 0.06, 0.68, 0.19);
        translate: -50px 30px;
    }
    46.667% {
        translate: 250px -200px;
    }
    100% {
        translate: 250px -200px;
    }
}

@keyframes hero-rocket-scale {
    0% {
        scale: 0.7 0.7;
    }
    13.333% {
        animation-timing-function: ease;
        scale: 0.7 0.7;
    }
    30% {
        animation-timing-function: cubic-bezier(0.55, 0.06, 0.68, 0.19);
        scale: 1.05 1.05;
    }
    46.667% {
        scale: 0.85 0.85;
    }
    100% {
        scale: 0.85 0.85;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-banner-el--rocket,
    .hero-banner-el--moon,
    .hero-banner-el--spark-r,
    .hero-banner-el--spark-l,
    .hero-banner-el--sparks,
    .hero-banner-el--cloud-l,
    .hero-banner-el--cloud-bl,
    .hero-banner-el--cloud-r,
    .hero-banner-el--cloud-br,
    .hero-banner-slide-1 .hero-banner-copy h3,
    .hero-banner-slide-1 .hero-banner-copy p {
        animation: none;
        opacity: 1;
        translate: none;
        scale: none;
        --rotate-transform: 0.087rad;
    }
}

.hero-banner-el--cloud-l {
    left: -38%;
    bottom: -12%;
    width: 416px;
    height: 312px;
    aspect-ratio: 4 / 3;
    background: url("../assets/images/hero-banner/cloud-4.png") 50% / cover no-repeat;
    z-index: 1;
    animation:
        hero-cloud-l-opacity 6s linear infinite,
        hero-cloud-l-translate 6s linear infinite;
}

@keyframes hero-cloud-l-opacity {
    0% {
        opacity: 0;
    }
    8.333% {
        animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
        opacity: 0;
    }
    23.333% {
        opacity: 1;
    }
    78.333% {
        animation-timing-function: ease-in-out;
        opacity: 1;
    }
    96.667% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@keyframes hero-cloud-l-translate {
    0% {
        translate: -80px 0;
    }
    8.333% {
        animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
        translate: -80px 0;
    }
    26.667% {
        translate: 0 0;
    }
    78.333% {
        animation-timing-function: ease-in-out;
        translate: 0 0;
    }
    98.333% {
        translate: -80px 0;
    }
    100% {
        translate: -80px 0;
    }
}

.hero-banner-el--cloud-bl {
    left: -17%;
    bottom: -22%;
    width: 370px;
    height: 277px;
    aspect-ratio: 183 / 137;
    background: url("../assets/images/hero-banner/cloud-1.png") 50% / cover no-repeat;
    z-index: 2;
    animation:
        hero-cloud-bl-opacity 6s linear infinite,
        hero-cloud-bl-translate 6s linear infinite;
}

@keyframes hero-cloud-bl-opacity {
    0% {
        opacity: 0;
    }
    10% {
        animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    80% {
        animation-timing-function: ease-in-out;
        opacity: 1;
    }
    98.333% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@keyframes hero-cloud-bl-translate {
    0% {
        translate: -60px 30px;
    }
    10% {
        animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
        translate: -60px 30px;
    }
    28.333% {
        translate: 0 0;
    }
    80% {
        animation-timing-function: ease-in-out;
        translate: 0 0;
    }
    100% {
        translate: -60px 30px;
    }
}

.hero-banner-el--cloud-r {
    right: -16%;
    bottom: -36%;
    width: 416px;
    height: 312px;
    aspect-ratio: 4 / 3;
    background: url("../assets/images/hero-banner/cloud-3.png") 50% / cover no-repeat;
    z-index: 1;
    animation:
        hero-cloud-r-opacity 6s linear infinite,
        hero-cloud-r-translate 6s linear infinite;
}

@keyframes hero-cloud-r-opacity {
    0% {
        opacity: 0;
    }
    10% {
        animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
        opacity: 0;
    }
    26.667% {
        opacity: 1;
    }
    80% {
        animation-timing-function: ease-in-out;
        opacity: 1;
    }
    98.333% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@keyframes hero-cloud-r-translate {
    0% {
        translate: 60px 30px;
    }
    10% {
        animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
        translate: 60px 30px;
    }
    30% {
        translate: 0 0;
    }
    80% {
        animation-timing-function: ease-in-out;
        translate: 0 0;
    }
    100% {
        translate: 60px 30px;
    }
}

.hero-banner-el--cloud-br {
    right: -31%;
    bottom: -10%;
    width: 416px;
    height: 312px;
    aspect-ratio: 4 / 3;
    background: url("../assets/images/hero-banner/cloud-2.png") 50% / cover no-repeat;
    transform: scaleX(-1);
    z-index: 0;
    animation:
        hero-cloud-br-opacity 6s linear infinite,
        hero-cloud-br-translate 6s linear infinite;
}

@keyframes hero-cloud-br-opacity {
    0% {
        opacity: 0;
    }
    8.333% {
        animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
        opacity: 0;
    }
    23.333% {
        opacity: 1;
    }
    78.333% {
        animation-timing-function: ease-in-out;
        opacity: 1;
    }
    96.667% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@keyframes hero-cloud-br-translate {
    0% {
        translate: 80px 0;
    }
    8.333% {
        animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
        translate: 80px 0;
    }
    26.667% {
        translate: 0 0;
    }
    78.333% {
        animation-timing-function: ease-in-out;
        translate: 0 0;
    }
    98.333% {
        translate: 80px 0;
    }
    100% {
        translate: 80px 0;
    }
}

.hero-banner-el--spark-l {
    left: 15%;
    top: 35%;
    width: 58px;
    height: 58px;
    aspect-ratio: 1 / 1;
    background: url("../assets/images/hero-banner/spark-1.png") 50% / cover no-repeat;
    transform: rotate(var(--rotate-transform, 0.087rad));
    z-index: 3;
    animation:
        hero-spark-l-opacity 6s linear infinite,
        hero-spark-l-rotate 6s linear infinite,
        hero-spark-l-scale 6s linear infinite;
}

@keyframes hero-spark-l-opacity {
    0% {
        opacity: 0;
    }
    16.667% {
        animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
        opacity: 0;
    }
    26.667% {
        opacity: 1;
    }
    80% {
        animation-timing-function: ease-in-out;
        opacity: 1;
    }
    93.333% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@keyframes hero-spark-l-rotate {
    0% {
        --rotate-transform: 0.087rad;
    }
    16.667% {
        animation-timing-function: ease-in-out;
        --rotate-transform: 0.087rad;
    }
    66.667% {
        animation-timing-function: ease-in-out;
        --rotate-transform: -0.087rad;
    }
    100% {
        --rotate-transform: 0.087rad;
    }
}

@keyframes hero-spark-l-scale {
    0% {
        scale: 0.4 0.4;
    }
    16.667% {
        animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
        scale: 0.4 0.4;
    }
    28.333% {
        animation-timing-function: ease-in-out;
        scale: 1 1;
    }
    58.333% {
        animation-timing-function: ease-in-out;
        scale: 1.08 1.08;
    }
    83.333% {
        scale: 0.95 0.95;
    }
    100% {
        scale: 0.95 0.95;
    }
}

.hero-banner-el--spark-r {
    left: 2%;
    top: 6%;
    width: 37px;
    height: 37px;
    aspect-ratio: 1 / 1;
    background: url("../assets/images/hero-banner/spark-2.png") 50% / cover no-repeat;
    transform: rotate(var(--rotate-transform, 0.087rad));
    z-index: 3;
    animation:
        hero-spark-r-opacity 6s linear infinite,
        hero-spark-r-rotate 6s linear infinite,
        hero-spark-r-scale 6s linear infinite;
}

@keyframes hero-spark-r-opacity {
    0% {
        opacity: 0;
    }
    21.667% {
        animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
        opacity: 0;
    }
    31.667% {
        opacity: 1;
    }
    80% {
        animation-timing-function: ease-in-out;
        opacity: 1;
    }
    95.833% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@keyframes hero-spark-r-rotate {
    0% {
        --rotate-transform: 0.087rad;
    }
    21.667% {
        animation-timing-function: ease-in-out;
        --rotate-transform: 0.087rad;
    }
    71.667% {
        animation-timing-function: ease-in-out;
        --rotate-transform: -0.087rad;
    }
    100% {
        --rotate-transform: 0.087rad;
    }
}

@keyframes hero-spark-r-scale {
    0% {
        scale: 0.4 0.4;
    }
    21.667% {
        animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
        scale: 0.4 0.4;
    }
    33.333% {
        animation-timing-function: ease-in-out;
        scale: 1 1;
    }
    63.333% {
        animation-timing-function: ease-in-out;
        scale: 1.08 1.08;
    }
    88.333% {
        scale: 0.95 0.95;
    }
    100% {
        scale: 0.95 0.95;
    }
}

.hero-banner-el--sparks {
    left: 53%;
    bottom: 4%;
    width: 58px;
    height: 58px;
    aspect-ratio: 1 / 1;
    background: url("../assets/images/hero-banner/sparks.png") 50% / cover no-repeat;
    transform: rotate(var(--rotate-transform, 0.087rad));
    z-index: 3;
    animation:
        hero-sparks-opacity 6s linear infinite,
        hero-sparks-rotate 6s linear infinite,
        hero-sparks-scale 6s linear infinite;
}

@keyframes hero-sparks-opacity {
    0% {
        opacity: 0;
    }
    19.167% {
        animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
        opacity: 0;
    }
    29.167% {
        opacity: 1;
    }
    80% {
        animation-timing-function: ease-in-out;
        opacity: 1;
    }
    98.333% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@keyframes hero-sparks-rotate {
    0% {
        --rotate-transform: 0.087rad;
    }
    19.167% {
        animation-timing-function: ease-in-out;
        --rotate-transform: 0.087rad;
    }
    69.167% {
        animation-timing-function: ease-in-out;
        --rotate-transform: -0.087rad;
    }
    100% {
        --rotate-transform: 0.087rad;
    }
}

@keyframes hero-sparks-scale {
    0% {
        scale: 0.4 0.4;
    }
    19.167% {
        animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
        scale: 0.4 0.4;
    }
    30.833% {
        animation-timing-function: ease-in-out;
        scale: 1 1;
    }
    60.833% {
        animation-timing-function: ease-in-out;
        scale: 1.08 1.08;
    }
    85.833% {
        scale: 0.95 0.95;
    }
    100% {
        scale: 0.95 0.95;
    }
}

@media (max-width: 1344px) {
    .hero-banner-slide-1 {
        min-height: 277px;
        height: 277px;
    }
    .hero-banner-el--moon {
        width: 82.93px;
        height: 82.93px;
    }

    .hero-banner-el--rocket {
        width: 164.68px;
        height: 164.68px;
    }

    .hero-banner-el--spark-r {
        width: 30.78px;
        height: 30.78px;
    }

    .hero-banner-el--spark-l,
    .hero-banner-el--sparks {
        width: 48.25px;
        height: 48.25px;
    }

    .hero-banner-el--cloud-l,
    .hero-banner-el--cloud-r,
    .hero-banner-el--cloud-br {
        width: 346px;
        height: 259.5px;
    }

    .hero-banner-el--cloud-bl {
        width: 307.8px;
        height: 230.4px;
    }

}

@media (max-width: 651px) {
    .hero-banner-slide-1 {
        min-height: 152px;
        height: 152px;
    }
    .hero-banner-el--moon {
        width: 45.51px;
        height: 45.51px;
    }

    .hero-banner-el--rocket {
        width: 90.34px;
        height: 90.34px;
    }

    .hero-banner-el--spark-r {
        width: 16.89px;
        height: 16.89px;
    }

    .hero-banner-el--spark-l,
    .hero-banner-el--sparks {
        width: 26.47px;
        height: 26.47px;
    }

    .hero-banner-el--cloud-l,
    .hero-banner-el--cloud-r,
    .hero-banner-el--cloud-br {
        width: 190px;
        height: 142.5px;
    }

    .hero-banner-el--cloud-bl {
        width: 168.9px;
        height: 126.4px;
    }

}