/* Hero banner slide 2 */
.hero-banner-slide-2 {
    position: absolute;
    inset: 0;
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    container-type: size;
    overflow: hidden;
    background: var(--hero-gradient-banner);
}

.hero-banner-slide-2.active {
    opacity: 1;
    pointer-events: auto;
}

.hero-banner-copy--slide-2 {
    position: relative;
    z-index: 4;
}

.hero-banner-slide-2 .hero-banner-copy h3 {
    animation:
        hero-s2-title-opacity 7.5s linear infinite,
        hero-s2-title-translate 7.5s linear infinite;
}

@keyframes hero-s2-title-opacity {
    0% {
        animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
        opacity: 0;
    }
    9.333% {
        opacity: 1;
    }
    86.667% {
        animation-timing-function: ease-in-out;
        opacity: 1;
    }
    96% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@keyframes hero-s2-title-translate {
    0% {
        animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
        translate: 0 25px;
    }
    10% {
        translate: 0 0;
    }
    86.667% {
        animation-timing-function: ease-in-out;
        translate: 0 0;
    }
    97.333% {
        translate: 0 25px;
    }
    100% {
        translate: 0 25px;
    }
}

.hero-banner-slide-2 .hero-banner-copy p {
    animation:
        hero-s2-subtitle-opacity 7.5s linear infinite,
        hero-s2-subtitle-translate 7.5s linear infinite;
}

@keyframes hero-s2-subtitle-opacity {
    0% {
        opacity: 0;
    }
    3.333% {
        animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
        opacity: 0;
    }
    12% {
        opacity: 1;
    }
    88% {
        animation-timing-function: ease-in-out;
        opacity: 1;
    }
    97.333% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@keyframes hero-s2-subtitle-translate {
    0% {
        translate: 0 25px;
    }
    3.333% {
        animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
        translate: 0 25px;
    }
    12.667% {
        translate: 0 0;
    }
    88% {
        animation-timing-function: ease-in-out;
        translate: 0 0;
    }
    98.667% {
        translate: 0 25px;
    }
    100% {
        translate: 0 25px;
    }
}

.hero-banner-deco--slide-2 {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: visible;
}

.hero-banner-s2-el {
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    pointer-events: none;
    user-select: none;
}

.hero-banner-s2-el--phone {
    left: 49%;
    bottom: -1%;
    width: 245.197px;
    height: 226.834px;
    aspect-ratio: 187 / 173;
    transform: translateX(-50%) rotate(var(--rotate-transform, 0.077rad));
    background: url("../assets/images/hero-banner-2/phone.png") 50% / contain no-repeat;
    z-index: 3;
    animation:
        hero-s2-phone-opacity 7.5s linear infinite,
        hero-s2-phone-rotate 7.5s linear infinite,
        hero-s2-phone-translate 7.5s linear infinite,
        hero-s2-phone-scale 7.5s linear infinite;
}

@keyframes hero-s2-phone-opacity {
    0% {
        opacity: 0;
    }
    9.333% {
        animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
        opacity: 0;
    }
    17.333% {
        opacity: 1;
    }
    89.333% {
        animation-timing-function: ease-in-out;
        opacity: 1;
    }
    98.667% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@keyframes hero-s2-phone-rotate {
    0% {
        --rotate-transform: 0.077rad;
    }
    9.333% {
        animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
        --rotate-transform: 0.077rad;
    }
    20% {
        --rotate-transform: 0.13rad;
    }
    89.333% {
        animation-timing-function: ease-in-out;
        --rotate-transform: 0.13rad;
    }
    100% {
        --rotate-transform: 0.077rad;
    }
}

@keyframes hero-s2-phone-translate {
    0% {
        translate: 0 70px;
    }
    9.333% {
        animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
        translate: 0 70px;
    }
    20% {
        animation-timing-function: ease-in-out;
        translate: 0 0;
    }
    46.667% {
        animation-timing-function: ease-in-out;
        translate: 0 -3px;
    }
    73.333% {
        animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
        translate: 0 3px;
    }
    89.333% {
        animation-timing-function: ease-in-out;
        translate: 0 0;
    }
    100% {
        translate: 0 70px;
    }
}

@keyframes hero-s2-phone-scale {
    0% {
        scale: 0.92 0.92;
    }
    9.333% {
        animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
        scale: 0.92 0.92;
    }
    20% {
        scale: 1 1;
    }
    89.333% {
        animation-timing-function: ease-in-out;
        scale: 1 1;
    }
    100% {
        scale: 0.92 0.92;
    }
}

.hero-banner-s2-el--post-1 {
    left: 38%;
    top: 34%;
    width: 109.747px;
    height: 109.747px;
    aspect-ratio: 1 / 1;
    transform: translateX(-50%) rotate(-0.565deg);
    background: url("../assets/images/hero-banner-2/post-1.png") 50% / cover no-repeat;
    z-index: 1;
    animation:
        hero-s2-post-1-opacity 7.5s linear infinite,
        hero-s2-post-1-translate 7.5s linear infinite,
        hero-s2-post-1-scale 7.5s linear infinite;
}

@keyframes hero-s2-post-1-opacity {
    0% {
        opacity: 0;
    }
    20% {
        animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
        opacity: 0;
    }
    29.333% {
        opacity: 1;
    }
    86.667% {
        animation-timing-function: ease-in-out;
        opacity: 1;
    }
    96% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@keyframes hero-s2-post-1-translate {
    0% {
        translate: 0 30px;
    }
    20% {
        animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
        translate: 0 30px;
    }
    29.333% {
        animation-timing-function: ease-in-out;
        translate: 0 0;
    }
    40% {
        animation-timing-function: ease-in-out;
        translate: 0 -6px;
    }
    60% {
        animation-timing-function: ease-in-out;
        translate: 0 5px;
    }
    80% {
        animation-timing-function: ease-in-out;
        translate: 0 -3px;
    }
    86.667% {
        animation-timing-function: ease-in-out;
        translate: 0 0;
    }
    96% {
        translate: 0 30px;
    }
    100% {
        translate: 0 30px;
    }
}

@keyframes hero-s2-post-1-scale {
    0% {
        scale: 0.9 0.9;
    }
    20% {
        animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
        scale: 0.9 0.9;
    }
    29.333% {
        scale: 1 1;
    }
    100% {
        scale: 1 1;
    }
}

.hero-banner-s2-el--post-2 {
    left: 47%;
    top: 41%;
    width: 145.867px;
    height: 145.867px;
    aspect-ratio: 1 / 1;
    transform: translateX(-50%) rotate(12.888deg);
    background: url("../assets/images/hero-banner-2/post-2.png") 50% / cover no-repeat;
    z-index: 5;
    animation:
        hero-s2-post-2-opacity 7.5s linear infinite,
        hero-s2-post-2-translate 7.5s linear infinite,
        hero-s2-post-2-scale 7.5s linear infinite;
}

@keyframes hero-s2-post-2-opacity {
    0% {
        opacity: 0;
    }
    20% {
        animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
        opacity: 0;
    }
    29.333% {
        opacity: 1;
    }
    86.667% {
        animation-timing-function: ease-in-out;
        opacity: 1;
    }
    96% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@keyframes hero-s2-post-2-translate {
    0% {
        translate: 0 35px;
    }
    20% {
        animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
        translate: 0 35px;
    }
    29.333% {
        animation-timing-function: ease-in-out;
        translate: 0 0;
    }
    37.333% {
        animation-timing-function: ease-in-out;
        translate: 0 5px;
    }
    53.333% {
        animation-timing-function: ease-in-out;
        translate: 0 -7px;
    }
    70.667% {
        animation-timing-function: ease-in-out;
        translate: 0 4px;
    }
    82.667% {
        animation-timing-function: ease-in-out;
        translate: 0 -2px;
    }
    86.667% {
        animation-timing-function: ease-in-out;
        translate: 0 0;
    }
    96% {
        translate: 0 35px;
    }
    100% {
        translate: 0 35px;
    }
}

@keyframes hero-s2-post-2-scale {
    0% {
        scale: 0.9 0.9;
    }
    20% {
        animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
        scale: 0.9 0.9;
    }
    29.333% {
        scale: 1 1;
    }
    100% {
        scale: 1 1;
    }
}

.hero-banner-s2-el--post-3 {
    left: 57%;
    top: 62%;
    width: 117.296px;
    height: 117.296px;
    aspect-ratio: 1 / 1;
    transform: translateX(-50%) rotate(10.085deg);
    background: url("../assets/images/hero-banner-2/post-3.png") 50% / cover no-repeat;
    z-index: 4;
    animation:
        hero-s2-post-3-opacity 7.5s linear infinite,
        hero-s2-post-3-translate 7.5s linear infinite,
        hero-s2-post-3-scale 7.5s linear infinite;
}

@keyframes hero-s2-post-3-opacity {
    0% {
        opacity: 0;
    }
    20% {
        animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
        opacity: 0;
    }
    29.333% {
        opacity: 1;
    }
    86.667% {
        animation-timing-function: ease-in-out;
        opacity: 1;
    }
    96% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@keyframes hero-s2-post-3-translate {
    0% {
        translate: 0 35px;
    }
    20% {
        animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
        translate: 0 35px;
    }
    29.333% {
        animation-timing-function: ease-in-out;
        translate: 0 0;
    }
    42.667% {
        animation-timing-function: ease-in-out;
        translate: 0 -5px;
    }
    64% {
        animation-timing-function: ease-in-out;
        translate: 0 6px;
    }
    77.333% {
        animation-timing-function: ease-in-out;
        translate: 0 -4px;
    }
    86.667% {
        animation-timing-function: ease-in-out;
        translate: 0 0;
    }
    96% {
        translate: 0 35px;
    }
    100% {
        translate: 0 35px;
    }
}

@keyframes hero-s2-post-3-scale {
    0% {
        scale: 0.9 0.9;
    }
    20% {
        animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
        scale: 0.9 0.9;
    }
    29.333% {
        scale: 1 1;
    }
    100% {
        scale: 1 1;
    }
}

.hero-banner-s2-el--gear {
    left: 11%;
    top: 32%;
    width: 142px;
    height: 116px;
    aspect-ratio: 14 / 11;
    transform: rotate(var(--rotate-transform, -0.132rad));
    background: url("../assets/images/hero-banner-2/icon-gear.png") 50% / contain no-repeat;
    z-index: 3;
    animation:
        hero-s2-gear-opacity 7.5s linear infinite,
        hero-s2-gear-rotate 7.5s linear infinite,
        hero-s2-gear-translate 7.5s linear infinite;
}

@keyframes hero-s2-gear-opacity {
    0% {
        opacity: 0;
    }
    18.667% {
        animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
        opacity: 0;
    }
    28% {
        opacity: 1;
    }
    90.667% {
        animation-timing-function: ease-in-out;
        opacity: 1;
    }
    98.667% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@keyframes hero-s2-gear-rotate {
    0% {
        --rotate-transform: -0.132rad;
    }
    18.667% {
        animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
        --rotate-transform: -0.132rad;
    }
    29.333% {
        animation-timing-function: ease-in-out;
        --rotate-transform: -0.202rad;
    }
    60% {
        animation-timing-function: ease-in-out;
        --rotate-transform: -0.237rad;
    }
    86.667% {
        --rotate-transform: -0.176rad;
    }
    100% {
        --rotate-transform: -0.176rad;
    }
}

@keyframes hero-s2-gear-translate {
    0% {
        translate: -45px 0;
    }
    18.667% {
        translate: -45px 0;
    }
    20% {
        translate: -30.004px 0;
    }
    21.333% {
        translate: -18.259px 0;
    }
    22.667% {
        translate: -10.529px 0;
    }
    24% {
        translate: -5.72px 0;
    }
    25.333% {
        translate: -2.792px 0;
    }
    26.667% {
        translate: -1.097px 0;
    }
    28% {
        translate: -0.246px 0;
    }
    29.333% {
        translate: 0 0;
    }
    30.667% {
        translate: 0.014px 0.03px;
    }
    32% {
        translate: 0.059px 0.122px;
    }
    33.333% {
        translate: 0.136px 0.281px;
    }
    34.667% {
        translate: 0.245px 0.507px;
    }
    36% {
        translate: 0.387px 0.801px;
    }
    37.333% {
        translate: 0.562px 1.159px;
    }
    38.667% {
        translate: 0.766px 1.571px;
    }
    40% {
        translate: 0.996px 2.025px;
    }
    41.333% {
        translate: 1.243px 2.5px;
    }
    42.667% {
        translate: 1.5px 2.975px;
    }
    44% {
        translate: 1.757px 3.429px;
    }
    45.333% {
        translate: 2.004px 3.841px;
    }
    46.667% {
        translate: 2.234px 4.199px;
    }
    48% {
        translate: 2.438px 4.493px;
    }
    49.333% {
        translate: 2.613px 4.719px;
    }
    50.667% {
        translate: 2.755px 4.878px;
    }
    52% {
        translate: 2.864px 4.97px;
    }
    53.333% {
        translate: 2.941px 5px;
    }
    54.667% {
        translate: 2.986px 4.946px;
    }
    56% {
        translate: 3px 4.78px;
    }
    57.333% {
        translate: 2.97px 4.495px;
    }
    58.667% {
        translate: 2.878px 4.087px;
    }
    60% {
        translate: 2.719px 3.558px;
    }
    61.333% {
        translate: 2.493px 2.914px;
    }
    62.667% {
        translate: 2.199px 2.171px;
    }
    64% {
        translate: 1.841px 1.355px;
    }
    65.333% {
        translate: 1.429px 0.5px;
    }
    66.667% {
        translate: 0.975px -0.355px;
    }
    68% {
        translate: 0.5px -1.171px;
    }
    69.333% {
        translate: 0.025px -1.914px;
    }
    70.667% {
        translate: -0.429px -2.558px;
    }
    72% {
        translate: -0.841px -3.087px;
    }
    73.333% {
        translate: -1.199px -3.495px;
    }
    74.667% {
        translate: -1.493px -3.78px;
    }
    76% {
        translate: -1.719px -3.946px;
    }
    77.333% {
        translate: -1.878px -4px;
    }
    78.667% {
        translate: -1.97px -4px;
    }
    80% {
        translate: -2px -4px;
    }
    81.333% {
        translate: -1.953px -4px;
    }
    82.667% {
        translate: -1.788px -4px;
    }
    84% {
        translate: -1.467px -4px;
    }
    85.333% {
        translate: -1px -4px;
    }
    86.667% {
        translate: -0.533px -4px;
    }
    88% {
        translate: -0.212px -4px;
    }
    89.333% {
        translate: -0.047px -4px;
    }
    90.667% {
        translate: 0 -4px;
    }
    92% {
        translate: -1.841px -4px;
    }
    93.333% {
        translate: -7.637px -4px;
    }
    94.667% {
        translate: -17.029px -4px;
    }
    96% {
        translate: -27.971px -4px;
    }
    97.333% {
        translate: -37.363px -4px;
    }
    98.667% {
        translate: -43.159px -4px;
    }
    100% {
        translate: -45px -4px;
    }
}

.hero-banner-s2-el--doc {
    left: 2%;
    bottom: 8%;
    width: 150px;
    height: 150px;
    aspect-ratio: 1 / 1;
    transform: rotate(var(--rotate-transform, -0.114rad));
    background: url("../assets/images/hero-banner-2/icon-doc.png") 50% / contain no-repeat;
    z-index: 3;
    animation:
        hero-s2-doc-opacity 7.5s linear infinite,
        hero-s2-doc-rotate 7.5s linear infinite,
        hero-s2-doc-translate 7.5s linear infinite;
}

@keyframes hero-s2-doc-opacity {
    0% {
        opacity: 0;
    }
    16% {
        animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
        opacity: 0;
    }
    25.333% {
        opacity: 1;
    }
    89.333% {
        animation-timing-function: ease-in-out;
        opacity: 1;
    }
    97.333% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@keyframes hero-s2-doc-rotate {
    0% {
        --rotate-transform: -0.114rad;
    }
    16% {
        animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
        --rotate-transform: -0.114rad;
    }
    26.667% {
        animation-timing-function: ease-in-out;
        --rotate-transform: -0.202rad;
    }
    53.333% {
        animation-timing-function: ease-in-out;
        --rotate-transform: -0.228rad;
    }
    80% {
        animation-timing-function: ease-in-out;
        --rotate-transform: -0.184rad;
    }
    98.667% {
        --rotate-transform: -0.114rad;
    }
    100% {
        --rotate-transform: -0.114rad;
    }
}

@keyframes hero-s2-doc-translate {
    0% {
        translate: -55px 0;
    }
    16% {
        translate: -55px 0;
    }
    17.333% {
        translate: -36.671px 0;
    }
    18.667% {
        translate: -22.316px 0;
    }
    20% {
        translate: -12.868px 0;
    }
    21.333% {
        translate: -6.991px 0;
    }
    22.667% {
        translate: -3.413px 0;
    }
    24% {
        translate: -1.341px 0;
    }
    25.333% {
        translate: -0.301px 0;
    }
    26.667% {
        translate: 0 0;
    }
    28% {
        translate: 0.024px -0.043px;
    }
    29.333% {
        translate: 0.098px -0.178px;
    }
    30.667% {
        translate: 0.225px -0.408px;
    }
    32% {
        translate: 0.406px -0.737px;
    }
    33.333% {
        translate: 0.641px -1.159px;
    }
    34.667% {
        translate: 0.927px -1.659px;
    }
    36% {
        translate: 1.257px -2.213px;
    }
    37.333% {
        translate: 1.62px -2.787px;
    }
    38.667% {
        translate: 2px -3.341px;
    }
    40% {
        translate: 2.38px -3.841px;
    }
    41.333% {
        translate: 2.743px -4.263px;
    }
    42.667% {
        translate: 3.073px -4.592px;
    }
    44% {
        translate: 3.359px -4.822px;
    }
    45.333% {
        translate: 3.594px -4.957px;
    }
    46.667% {
        translate: 3.775px -5px;
    }
    48% {
        translate: 3.902px -4.922px;
    }
    49.333% {
        translate: 3.976px -4.68px;
    }
    50.667% {
        translate: 4px -4.265px;
    }
    52% {
        translate: 3.953px -3.673px;
    }
    53.333% {
        translate: 3.808px -2.914px;
    }
    54.667% {
        translate: 3.558px -2.013px;
    }
    56% {
        translate: 3.202px -1.016px;
    }
    57.333% {
        translate: 2.74px 0.016px;
    }
    58.667% {
        translate: 2.182px 1.013px;
    }
    60% {
        translate: 1.544px 1.914px;
    }
    61.333% {
        translate: 0.854px 2.673px;
    }
    62.667% {
        translate: 0.146px 3.265px;
    }
    64% {
        translate: -0.544px 3.68px;
    }
    65.333% {
        translate: -1.182px 3.922px;
    }
    66.667% {
        translate: -1.74px 4px;
    }
    68% {
        translate: -2.202px 3.948px;
    }
    69.333% {
        translate: -2.558px 3.787px;
    }
    70.667% {
        translate: -2.808px 3.51px;
    }
    72% {
        translate: -2.953px 3.116px;
    }
    73.333% {
        translate: -3px 2.609px;
    }
    74.667% {
        translate: -2.97px 2.009px;
    }
    76% {
        translate: -2.87px 1.344px;
    }
    77.333% {
        translate: -2.682px 0.656px;
    }
    78.667% {
        translate: -2.389px -0.009px;
    }
    80% {
        translate: -1.984px -0.609px;
    }
    81.333% {
        translate: -1.5px -1.116px;
    }
    82.667% {
        translate: -1.016px -1.51px;
    }
    84% {
        translate: -0.611px -1.787px;
    }
    85.333% {
        translate: -0.318px -1.948px;
    }
    86.667% {
        translate: -0.13px -2px;
    }
    88% {
        translate: -0.03px -2px;
    }
    89.333% {
        translate: 0 -2px;
    }
    90.667% {
        translate: -2.25px -2px;
    }
    92% {
        translate: -9.334px -2px;
    }
    93.333% {
        translate: -20.814px -2px;
    }
    94.667% {
        translate: -34.186px -2px;
    }
    96% {
        translate: -45.666px -2px;
    }
    97.333% {
        translate: -52.75px -2px;
    }
    98.667% {
        translate: -55px -2px;
    }
    100% {
        translate: -55px -2px;
    }
}

.hero-banner-s2-el--gallery {
    right: 10%;
    top: 39%;
    width: 136.311px;
    height: 137.44px;
    aspect-ratio: 120 / 121;
    --gallery-scale: 1;
    transform: rotate(var(--rotate-transform, -0.098rad));
    background: url("../assets/images/hero-banner-2/icons-sheet.png") calc(-168.325px * var(--gallery-scale)) calc(-27.325px * var(--gallery-scale)) / 434.369% 287.2% no-repeat;
    z-index: 3;
    animation:
        hero-s2-gallery-opacity 7.5s linear infinite,
        hero-s2-gallery-rotate 7.5s linear infinite,
        hero-s2-gallery-translate 7.5s linear infinite;
}

@keyframes hero-s2-gallery-opacity {
    0% {
        opacity: 0;
    }
    17.333% {
        animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
        opacity: 0;
    }
    26.667% {
        opacity: 1;
    }
    90.667% {
        animation-timing-function: ease-in-out;
        opacity: 1;
    }
    97.333% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@keyframes hero-s2-gallery-rotate {
    0% {
        --rotate-transform: -0.098rad;
    }
    17.333% {
        animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
        --rotate-transform: -0.098rad;
    }
    28% {
        animation-timing-function: ease-in-out;
        --rotate-transform: -0.028rad;
    }
    56% {
        animation-timing-function: ease-in-out;
        --rotate-transform: -0.002rad;
    }
    82.667% {
        animation-timing-function: ease-in-out;
        --rotate-transform: -0.046rad;
    }
    98.667% {
        --rotate-transform: -0.098rad;
    }
    100% {
        --rotate-transform: -0.098rad;
    }
}

@keyframes hero-s2-gallery-translate {
    0% {
        translate: 60px 0;
    }
    17.333% {
        translate: 60px 0;
    }
    18.667% {
        translate: 40.005px 0;
    }
    20% {
        translate: 24.345px 0;
    }
    21.333% {
        translate: 14.038px 0;
    }
    22.667% {
        translate: 7.626px 0;
    }
    24% {
        translate: 3.723px 0;
    }
    25.333% {
        translate: 1.463px 0;
    }
    26.667% {
        translate: 0.328px 0;
    }
    28% {
        translate: 0 0;
    }
    29.333% {
        translate: -0.027px -0.035px;
    }
    30.667% {
        translate: -0.11px -0.142px;
    }
    32% {
        translate: -0.253px -0.327px;
    }
    33.333% {
        translate: -0.456px -0.59px;
    }
    34.667% {
        translate: -0.72px -0.927px;
    }
    36% {
        translate: -1.039px -1.328px;
    }
    37.333% {
        translate: -1.403px -1.771px;
    }
    38.667% {
        translate: -1.798px -2.229px;
    }
    40% {
        translate: -2.202px -2.672px;
    }
    41.333% {
        translate: -2.597px -3.073px;
    }
    42.667% {
        translate: -2.961px -3.41px;
    }
    44% {
        translate: -3.28px -3.673px;
    }
    45.333% {
        translate: -3.544px -3.858px;
    }
    46.667% {
        translate: -3.747px -3.965px;
    }
    48% {
        translate: -3.89px -4px;
    }
    49.333% {
        translate: -3.973px -3.932px;
    }
    50.667% {
        translate: -4px -3.72px;
    }
    52% {
        translate: -3.953px -3.356px;
    }
    53.333% {
        translate: -3.808px -2.838px;
    }
    54.667% {
        translate: -3.558px -2.168px;
    }
    56% {
        translate: -3.202px -1.365px;
    }
    57.333% {
        translate: -2.74px -0.46px;
    }
    58.667% {
        translate: -2.182px 0.5px;
    }
    60% {
        translate: -1.544px 1.46px;
    }
    61.333% {
        translate: -0.854px 2.365px;
    }
    62.667% {
        translate: -0.146px 3.168px;
    }
    64% {
        translate: 0.544px 3.838px;
    }
    65.333% {
        translate: 1.182px 4.356px;
    }
    66.667% {
        translate: 1.74px 4.72px;
    }
    68% {
        translate: 2.202px 4.932px;
    }
    69.333% {
        translate: 2.558px 5px;
    }
    70.667% {
        translate: 2.808px 4.947px;
    }
    72% {
        translate: 2.953px 4.782px;
    }
    73.333% {
        translate: 3px 4.499px;
    }
    74.667% {
        translate: 2.975px 4.096px;
    }
    76% {
        translate: 2.891px 3.575px;
    }
    77.333% {
        translate: 2.734px 2.951px;
    }
    78.667% {
        translate: 2.491px 2.247px;
    }
    80% {
        translate: 2.152px 1.5px;
    }
    81.333% {
        translate: 1.729px 0.753px;
    }
    82.667% {
        translate: 1.271px 0.049px;
    }
    84% {
        translate: 0.848px -0.575px;
    }
    85.333% {
        translate: 0.509px -1.096px;
    }
    86.667% {
        translate: 0.266px -1.499px;
    }
    88% {
        translate: 0.109px -1.782px;
    }
    89.333% {
        translate: 0.025px -1.947px;
    }
    90.667% {
        translate: 0 -2px;
    }
    92% {
        translate: 3.368px -2px;
    }
    93.333% {
        translate: 13.906px -2px;
    }
    94.667% {
        translate: 30px -2px;
    }
    96% {
        translate: 46.094px -2px;
    }
    97.333% {
        translate: 56.632px -2px;
    }
    98.667% {
        translate: 60px -2px;
    }
    100% {
        translate: 60px -2px;
    }
}

.hero-banner-s2-el--bell {
    right: 27%;
    bottom: 12%;
    width: 53.799px;
    height: 51.831px;
    aspect-ratio: 53.8 / 51.83;
    transform: rotate(var(--rotate-transform, -0.08rad));
    background: url("../assets/images/hero-banner-2/icon-bell.png") 50% / contain no-repeat;
    z-index: 3;
    animation:
        hero-s2-bell-opacity 7.5s linear infinite,
        hero-s2-bell-rotate 7.5s linear infinite,
        hero-s2-bell-translate 7.5s linear infinite;
}

@keyframes hero-s2-bell-opacity {
    0% {
        opacity: 0;
    }
    20% {
        animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
        opacity: 0;
    }
    28% {
        opacity: 1;
    }
    92% {
        animation-timing-function: ease-in-out;
        opacity: 1;
    }
    98.667% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@keyframes hero-s2-bell-rotate {
    0% {
        --rotate-transform: -0.08rad;
    }
    20% {
        animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
        --rotate-transform: -0.08rad;
    }
    29.333% {
        animation-timing-function: ease-in-out;
        --rotate-transform: -0.028rad;
    }
    60% {
        animation-timing-function: ease-in-out;
        --rotate-transform: 0.007rad;
    }
    86.667% {
        --rotate-transform: -0.054rad;
    }
    100% {
        --rotate-transform: -0.054rad;
    }
}

@keyframes hero-s2-bell-translate {
    0% {
        translate: 45px 0;
    }
    20% {
        translate: 45px 0;
    }
    21.333% {
        translate: 28.072px 0;
    }
    22.667% {
        translate: 15.677px 0;
    }
    24% {
        translate: 8.18px 0;
    }
    25.333% {
        translate: 3.866px 0;
    }
    26.667% {
        translate: 1.482px 0;
    }
    28% {
        translate: 0.326px 0;
    }
    29.333% {
        translate: 0 0;
    }
    30.667% {
        translate: -0.018px 0.029px;
    }
    32% {
        translate: -0.073px 0.118px;
    }
    33.333% {
        translate: -0.168px 0.271px;
    }
    34.667% {
        translate: -0.304px 0.49px;
    }
    36% {
        translate: -0.481px 0.775px;
    }
    37.333% {
        translate: -0.695px 1.124px;
    }
    38.667% {
        translate: -0.943px 1.533px;
    }
    40% {
        translate: -1.215px 1.991px;
    }
    41.333% {
        translate: -1.5px 2.486px;
    }
    42.667% {
        translate: -1.785px 3px;
    }
    44% {
        translate: -2.057px 3.514px;
    }
    45.333% {
        translate: -2.305px 4.009px;
    }
    46.667% {
        translate: -2.519px 4.467px;
    }
    48% {
        translate: -2.696px 4.876px;
    }
    49.333% {
        translate: -2.832px 5.225px;
    }
    50.667% {
        translate: -2.927px 5.51px;
    }
    52% {
        translate: -2.982px 5.729px;
    }
    53.333% {
        translate: -3px 5.882px;
    }
    54.667% {
        translate: -2.97px 5.971px;
    }
    56% {
        translate: -2.878px 6px;
    }
    57.333% {
        translate: -2.719px 5.946px;
    }
    58.667% {
        translate: -2.493px 5.78px;
    }
    60% {
        translate: -2.199px 5.495px;
    }
    61.333% {
        translate: -1.841px 5.087px;
    }
    62.667% {
        translate: -1.429px 4.558px;
    }
    64% {
        translate: -0.975px 3.914px;
    }
    65.333% {
        translate: -0.5px 3.171px;
    }
    66.667% {
        translate: -0.025px 2.355px;
    }
    68% {
        translate: 0.429px 1.5px;
    }
    69.333% {
        translate: 0.841px 0.645px;
    }
    70.667% {
        translate: 1.199px -0.171px;
    }
    72% {
        translate: 1.493px -0.914px;
    }
    73.333% {
        translate: 1.719px -1.558px;
    }
    74.667% {
        translate: 1.878px -2.087px;
    }
    76% {
        translate: 1.97px -2.495px;
    }
    77.333% {
        translate: 2px -2.78px;
    }
    78.667% {
        translate: 1.976px -2.946px;
    }
    80% {
        translate: 1.895px -3px;
    }
    81.333% {
        translate: 1.742px -3px;
    }
    82.667% {
        translate: 1.503px -3px;
    }
    84% {
        translate: 1.18px -3px;
    }
    85.333% {
        translate: 0.82px -3px;
    }
    86.667% {
        translate: 0.497px -3px;
    }
    88% {
        translate: 0.258px -3px;
    }
    89.333% {
        translate: 0.105px -3px;
    }
    90.667% {
        translate: 0.024px -3px;
    }
    92% {
        translate: 0 -3px;
    }
    93.333% {
        translate: 2.526px -3px;
    }
    94.667% {
        translate: 10.43px -3px;
    }
    96% {
        translate: 22.5px -3px;
    }
    97.333% {
        translate: 34.57px -3px;
    }
    98.667% {
        translate: 42.474px -3px;
    }
    100% {
        translate: 45px -3px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-banner-slide-2 .hero-banner-copy h3,
    .hero-banner-slide-2 .hero-banner-copy p,
    .hero-banner-s2-el--bell,
    .hero-banner-s2-el--gallery,
    .hero-banner-s2-el--doc,
    .hero-banner-s2-el--gear,
    .hero-banner-s2-el--phone,
    .hero-banner-s2-el--post-1,
    .hero-banner-s2-el--post-2,
    .hero-banner-s2-el--post-3 {
        animation: none;
        opacity: 1;
        translate: none;
        scale: none;
        --rotate-transform: 0.087rad;
    }

    .hero-banner-s2-el--bell {
        --rotate-transform: -0.08rad;
    }

    .hero-banner-s2-el--gallery {
        --rotate-transform: -0.098rad;
    }

    .hero-banner-s2-el--doc {
        --rotate-transform: -0.114rad;
    }

    .hero-banner-s2-el--gear {
        --rotate-transform: -0.132rad;
    }

    .hero-banner-s2-el--phone {
        --rotate-transform: 0.077rad;
        scale: 1;
    }

    .hero-banner-s2-el--post-1,
    .hero-banner-s2-el--post-2,
    .hero-banner-s2-el--post-3 {
        scale: 1;
    }
}

@media (max-width: 1344px) {
    .hero-banner-s2-el--phone {
        width: 204.08px;
        height: 188.88px;
    }

    .hero-banner-s2-el--post-1 {
        width: 91.35px;
        height: 91.35px;
    }

    .hero-banner-s2-el--post-2 {
        width: 121.41px;
        height: 121.41px;
    }

    .hero-banner-s2-el--post-3 {
        width: 97.75px;
        height: 97.75px;
    }

    .hero-banner-s2-el--gear {
        width: 103.62px;
        height: 81.42px;
    }

    .hero-banner-s2-el--doc {
        width: 103.62px;
        height: 103.62px;
    }

    .hero-banner-s2-el--gallery {
        width: 113.39px;
        height: 114.33px;
        --gallery-scale: 0.8317;
    }

    .hero-banner-s2-el--bell {
        width: 50.62px;
        height: 50.62px;
    }

}

@media (max-width: 651px) {
    .hero-banner-s2-el--phone {
        width: 112.02px;
        height: 103.83px;
    }

    .hero-banner-s2-el--post-1 {
        width: 50.15px;
        height: 50.15px;
    }

    .hero-banner-s2-el--post-2 {
        width: 66.69px;
        height: 66.69px;
    }

    .hero-banner-s2-el--post-3 {
        width: 53.59px;
        height: 53.59px;
    }

    .hero-banner-s2-el--gear {
        width: 58px;
        height: 46px;
    }

    .hero-banner-s2-el--doc {
        width: 56.87px;
        height: 56.87px;
    }

    .hero-banner-s2-el--gallery {
        width: 62.28px;
        height: 62.79px;
        --gallery-scale: 0.4569;
    }

    .hero-banner-s2-el--bell {
        width: 25px;
        height: 24px;
    }

}