.map-animation-wrapper {
    --scale: 1;
    --rotate: 0deg;
    --off-x: 0;
    --off-y: 0;
    --duration: 1s;
    container-type: size;
    container-name: map;
    position: relative;
    overflow: hidden;
    width: 100%;
    @container module-container (width < 1440px) {
        aspect-ratio: 1;
        min-height: 800px;
    }
    @container module-container (width >= 1440px) {
        aspect-ratio: 16 / 9;
    }
}
/*.map-animation-wrapper.map-animation-wrapper {*/
.map-animation-wrapper.visible {
    --scale: 1.15;
    --rotate: 28deg;
    .country {
        --trans-y: 0;
        opacity: 1;
    }
    customer-cards {
        opacity: 1;
        transform: translateY(0);
        &::part(shadow) {
            scale: 1;
        }
    }
    img.europe {opacity: .25;}
    img.gradient2 {opacity: 1;}
}
/* the canvas is used to position the map and align it in the middle */
.map-animation-canvas {
    position: absolute;
    height: 100%;
    aspect-ratio: 16 / 9;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    grid-template-areas: "a";
    mask-image: var(--mask-image);
    mask-type: alpha;
    mask-position: center;
    mask-size: 100% 100%;
    .map-animation {
        grid-area: a;
        z-index: 1;
    }
    > img {
        grid-area: a;
        pointer-events: none;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    img.europe {
        z-index: 1;
        opacity: 1;
    }
    img.gradient {
        z-index: 2;
    }
    img.gradient2 {
        z-index: 3;
        opacity: 0;
        transform: scaleY(-100%);
        transition: opacity var(--duration) ease-out;
    }
    img.countries {
        z-index: 4;
    }
}
/* the zoom/rotate animation */
.map-animation {
    rotate: var(--rotate);
    scale: var(--scale);
    transform: translateZ(1px) translateX(var(--off-x)) translateY(var(--off-y));
    transition:
            scale var(--duration) ease-out,
            transform var(--duration) ease-out,
            opacity var(--duration) linear,
            rotate var(--duration) ease-out;
;
}
/* the country-label */
.country {
    --delay: 0s;
    position: absolute;
    z-index: 4;
    color: #fff;
    transform-origin: 50% 50%;
    opacity: 0;
    transition: opacity .5s ease-out;
    transition-delay: calc(var(--duration) * 1.2 + var(--delay));
    cursor: default;
}
customer-cards {
    --delay: 0s;
    --card-rotate: 0deg;
    --bounce-tf: cubic-bezier(.68,-0.55,.27,1.55);
    position: absolute;
    rotate: -20deg;
    z-index: 5;
    opacity: 0;
    transition:
            opacity .25s ease-out,
            transform .25s var(--bounce-tf);
;
    transition-delay: calc(var(--duration) * 1.2 + var(--delay));
    transform: translateY(-10cqh);
    font-family: sans-serif;
    font-weight: 800;
    font-size: 3cqh;
    height: 1.5lh;
    width: auto;
    &::part(shadow) {
        rotate: 20deg;
        transform-origin: left bottom;
        scale: 2;
        transition: scale .25s var(--bounce-tf);
        transition-delay: calc(var(--duration) * 1.2 + var(--delay));
    }
}
/* particular country settings */
.country.germany {
    left: 42.5%;
    top: 30%;
    font-size: 2.2cqh;
    letter-spacing: .2em;
    + customer-cards {
        left: 43.9%;
        top: 36.9%;
    }
}
.country.austria {
    --delay: .2s;
    left: 53.4%;
    top: 47%;
    font-size: 1.7cqh;
    letter-spacing: .05em;
    + customer-cards {
        --delay: .2s;
        left: 53.5%;
        top: 50.75%;
        font-size: 2.2cqh;
    }
}
.country.switzerland {
    --delay: .4s;
    left: 41%;
    top: 49.5%;
    font-size: 1.5cqh;
    letter-spacing: .05em;
    + customer-cards {
        --delay: .4s;
        left: 41%;
        top: 53%;
        font-size: 1.5cqh;
    }
}
.country.lichtenstein {
    --delay: .5s;
    left: 44%;
    top: 47%;
    font-size: 1.2cqh;
    + customer-cards {
        --delay: .5s;
        left: 45%;
        top: 49.5%;
        font-size: 1cqh;
    }
}
.country.italy {
    --delay: .6s;
    left: 45%;
    top: 63.5%;
    font-size: 1.7cqh;
    letter-spacing: .05em;
    + customer-cards {
        --delay: .6s;
        left: 45%;
        top: 59%;
        font-size: 1.5cqh;
    }
}
.country.slovenia {
    --delay: .8s;
    left: 53.5%;
    top: 57.3%;
    font-size: 1.15cqh;
    letter-spacing: 0.1em;
    + customer-cards {
        --delay: .8s;
        left: 54%;
        top: 60.0%;
        font-size: 1.25cqh;
    }
}
.country.czech {
    --delay: .9s;
    left: 53.5%;
    top: 40.3%;
    font-size: 1.5cqh;
    letter-spacing: .05em;
    + customer-cards {
        --delay: .9s;
        left: 55%;
        top: 36.7%;
        font-size: 1.5cqh;
    }
}

/*# sourceMappingURL=map-animation.css.map */
