@charset "UTF-8";


#section_01-hero {
    max-height: 100vh;
    padding: 0;
    border: none;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

#section_01-hero .hero-bg-pattern {
    position: relative;
    width: 100%;
    height: 100%;
}

#section_01-hero .hero-bg-pattern img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

#section_01-hero .hero-content {
    /* position: relative; */
    position: absolute;
    text-align: center;
    bottom: 110px;
    padding: 0px 60px;
    max-width: 800px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

#section_01-hero .hero-butterflies {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 8;
}

#section_01-hero .hero-butterfly {
    position: absolute;
    width: 72px;
    height: 58px;
    --butter-img: url('../../../../images/Vmap/butter01.webp');
    opacity: 0.9;
    transform-origin: 50% 50%;
    will-change: transform;
}

#section_01-hero .hero-butterfly::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--butter-img);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    transform-origin: 50% 55%;
    animation: hero-butter-wing 0.9s ease-in-out infinite;
}

#section_01-hero .hero-butterfly.b1 {
    top: 10%;
    left: -4%;
    width: 53px;
    height: 42px;
    --butter-img: url('../../../../images/Vmap/butter01.webp');
    animation: hero-butter-path-1 22s linear infinite;
}

#section_01-hero .hero-butterfly.b2 {
    top: -2%;
    left: 18%;
    width: 59px;
    height: 46px;
    --butter-img: url('../../../../images/Vmap/butter02.webp');
    animation: hero-butter-path-2 24s linear infinite;
}

#section_01-hero .hero-butterfly.b3 {
    top: 14%;
    left: 82%;
    width: 48px;
    height: 38px;
    --butter-img: url('../../../../images/Vmap/butter02.webp');
    animation: hero-butter-path-3 21s linear infinite;
}

#section_01-hero .hero-butterfly.b4 {
    top: 68%;
    left: 92%;
    width: 67px;
    height: 53px;
    --butter-img: url('../../../../images/Vmap/butter01.webp');
    animation: hero-butter-path-4 25s linear infinite;
}

#section_01-hero .hero-butterfly.b5 {
    top: 76%;
    left: 72%;
    width: 56px;
    height: 43px;
    --butter-img: url('../../../../images/Vmap/butter01.webp');
    animation: hero-butter-path-5 23s linear infinite;
}

#section_01-hero .hero-butterfly.b6 {
    top: 84%;
    left: 24%;
    width: 61px;
    height: 48px;
    --butter-img: url('../../../../images/Vmap/butter02.webp');
    animation: hero-butter-path-6 26s linear infinite;
}

#section_01-hero .hero-butterfly.b7 {
    top: 46%;
    left: -6%;
    width: 50px;
    height: 40px;
    --butter-img: url('../../../../images/Vmap/butter01.webp');
    animation: hero-butter-path-7 20s linear infinite;
}

#section_01-hero .hero-edition {
    font-size: 1.4rem;
    color: #fff;
    font-weight: 300;
    text-shadow:
        1px 1px 1px #000,
        0 0 0.1em #000,
        0 0 0.1em #000;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-bottom: 0rem;
}

#section_01-hero .hero-cta-group {
    display: flex;
    gap: 16px;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

#section_01-hero .scroll-hint {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    animation: bounce 2s ease infinite;
    opacity: 0.8;
    z-index: 5;
}

#section_01-hero .scroll-hint span {
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #fff;
}

@keyframes bounce {

    0%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    50% {
        transform: translateX(-50%) translateY(6px);
    }
}

@keyframes hero-butter-wing {
    0% {
        transform: rotate(-12deg) scale(0.95);
    }

    50% {
        transform: rotate(16deg) scale(1.04);
    }

    100% {
        transform: rotate(-11deg) scale(0.97);
    }
}

@keyframes hero-butter-path-1 {
    0% {
        transform: translate(0, 0) rotate(10deg);
    }

    20% {
        transform: translate(32vw, -20vh) rotate(18deg);
    }

    40% {
        transform: translate(54vw, -28vh) rotate(10deg);
    }

    60% {
        transform: translate(70vw, -8vh) rotate(-2deg);
    }

    80% {
        transform: translate(56vw, 10vh) rotate(-10deg);
    }

    100% {
        transform: translate(24vw, 4vh) rotate(6deg);
    }
}

@keyframes hero-butter-path-2 {
    0% {
        transform: translate(0, 0) rotate(-8deg);
    }

    20% {
        transform: translate(26vw, 18vh) rotate(8deg);
    }

    40% {
        transform: translate(48vw, 28vh) rotate(16deg);
    }

    60% {
        transform: translate(70vw, 18vh) rotate(6deg);
    }

    80% {
        transform: translate(58vw, -2vh) rotate(-8deg);
    }

    100% {
        transform: translate(32vw, -10vh) rotate(-14deg);
    }
}

@keyframes hero-butter-path-3 {
    0% {
        transform: translate(0, 0) rotate(4deg);
    }

    20% {
        transform: translate(-24vw, -12vh) rotate(-10deg);
    }

    40% {
        transform: translate(-46vw, -20vh) rotate(-16deg);
    }

    60% {
        transform: translate(-68vw, -6vh) rotate(-4deg);
    }

    80% {
        transform: translate(-52vw, 12vh) rotate(8deg);
    }

    100% {
        transform: translate(-28vw, 6vh) rotate(14deg);
    }
}

@keyframes hero-butter-path-4 {
    0% {
        transform: translate(0, 0) rotate(-10deg);
    }

    20% {
        transform: translate(-30vw, -18vh) rotate(-18deg);
    }

    40% {
        transform: translate(-52vw, -28vh) rotate(-10deg);
    }

    60% {
        transform: translate(-74vw, -18vh) rotate(2deg);
    }

    80% {
        transform: translate(-62vw, 2vh) rotate(10deg);
    }

    100% {
        transform: translate(-38vw, 12vh) rotate(16deg);
    }
}

@keyframes hero-butter-path-5 {
    0% {
        transform: translate(0, 0) rotate(6deg);
    }

    20% {
        transform: translate(-20vw, -14vh) rotate(-8deg);
    }

    40% {
        transform: translate(-42vw, -24vh) rotate(-14deg);
    }

    60% {
        transform: translate(-60vw, -14vh) rotate(-4deg);
    }

    80% {
        transform: translate(-48vw, 6vh) rotate(8deg);
    }

    100% {
        transform: translate(-24vw, 14vh) rotate(14deg);
    }
}

@keyframes hero-butter-path-6 {
    0% {
        transform: translate(0, 0) rotate(-6deg);
    }

    20% {
        transform: translate(18vw, -18vh) rotate(8deg);
    }

    40% {
        transform: translate(36vw, -30vh) rotate(14deg);
    }

    60% {
        transform: translate(54vw, -20vh) rotate(4deg);
    }

    80% {
        transform: translate(44vw, -2vh) rotate(-8deg);
    }

    100% {
        transform: translate(22vw, 8vh) rotate(-14deg);
    }
}

@keyframes hero-butter-path-7 {
    0% {
        transform: translate(0, 0) rotate(2deg);
    }

    20% {
        transform: translate(28vw, -16vh) rotate(12deg);
    }

    40% {
        transform: translate(52vw, -24vh) rotate(18deg);
    }

    60% {
        transform: translate(72vw, -14vh) rotate(8deg);
    }

    80% {
        transform: translate(60vw, 4vh) rotate(-4deg);
    }

    100% {
        transform: translate(34vw, 12vh) rotate(-10deg);
    }
}



.pad-only,
.mb-only {
    display: none;
}

@media screen and (min-width: 1600px) {
    #section_01-hero .hero-content {
        bottom: 22%;
        max-width: 1200px;
    }

    #section_01-hero .hero-cta-group {
        gap: 48px;
    }
}

@media screen and (max-width: 1200px) {

    .pc-only,
    .mb-only {
        display: none;
    }

    .pad-only {
        display: block;
    }

    #section_01-hero .hero-content {
        bottom: 18%;
    }
}


@media screen and (max-width: 720px) {

    .pc-only,
    .pad-only {
        display: none;
    }

    .mb-only {
        display: block;
    }

    #section_01-hero .hero-content {
        bottom: 15%;
    }
}


@media screen and (max-width: 768px) {

    #section_01-hero .hero-butterfly.b5,
    #section_01-hero .hero-butterfly.b6,
    #section_01-hero .hero-butterfly.b7 {
        display: none;
    }
}

@media screen and (max-width: 820px) {

    #section_01-hero .btn-primary.px-5,
    #section_01-hero .btn-secondary.px-5 {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

}

@media screen and (max-width: 600px) {

    #section_01-hero .hero-cta-group .btn {
        width: 100%;
        max-width: 175px;
    }

    #section_01-hero .hero-cta-group {
        flex-direction: column;
    }
}

@media screen and (max-width: 420px) {

    #section_01-hero .btn {
        padding: 10px 0px;
        font-size: 0.9rem;
    }
}



/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    #section_01-hero .scroll-hint {
        display: none;
    }

    #section_01-hero .hero-butterfly {
        animation: none !important;
    }

    #section_01-hero .hero-butterfly::before {
        animation: none !important;
    }
}