/* A cut-paper relief made from the existing country outlines. */
.germany-map-container.map-depth-ready {
    width: 100%;
    perspective: 1100px;
    perspective-origin: 50% 42%;
    background: linear-gradient(145deg, #fbfcf7, #eef2e8);
}

.map-depth-ready .map-depth-scene {
    position: relative;
    width: 100%;
    max-width: 500px;
    aspect-ratio: 1;
    transform-style: preserve-3d;
    transform: rotateX(9deg) rotateY(-5deg);
    transform-origin: 50% 55%;
}

.map-depth-ready .map-depth-edge,
.map-depth-ready .map-depth-shadow,
.map-depth-ready #germany-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    overflow: visible;
    transform-origin: 50% 50%;
}

.map-depth-ready .map-depth-edge,
.map-depth-ready .map-depth-shadow {
    pointer-events: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 0.7;
}

.map-depth-ready .map-depth-edge {
    fill: #afbea3;
    stroke: #afbea3;
    transform: translateZ(2px) translateY(3px);
    filter: drop-shadow(0 2px 0 #a5b69a) drop-shadow(0 2px 0 #a5b69a);
}

.map-depth-ready .map-depth-shadow {
    fill: #203522;
    stroke: #203522;
    opacity: 0.14;
    filter: blur(9px);
    transform: translateZ(-16px) translateY(17px);
}

.map-depth-ready #germany-svg {
    transform: translateZ(12px);
    transition: none;
}

.map-depth-ready #germany-svg #features {
    filter: drop-shadow(0 1px 0 #bfccb5) drop-shadow(0 3px 3px rgba(31, 48, 38, 0.12));
}

@media (min-width: 1025px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .map-depth-ready .map-depth-scene {
        transform: rotateX(calc(12deg + var(--map-rotate-x, 0deg)))
            rotateY(calc(-8deg + var(--map-rotate-y, 0deg)));
        transition: transform 0.5s ease-out;
    }

    .map-depth-ready:hover .map-depth-scene {
        transition-duration: 0.22s;
    }

    .map-depth-ready.is-depth-visible .map-depth-scene {
        animation: map-relief-arrive 1.1s cubic-bezier(0.2, 0.7, 0.25, 1) backwards;
    }

    .map-depth-ready.is-depth-visible #germany-svg {
        animation: map-relief-rise 1.1s cubic-bezier(0.2, 0.7, 0.25, 1) backwards;
    }

    @keyframes map-relief-arrive {
        from { transform: translateY(14px) rotateX(25deg) rotateY(-14deg); }
        to { transform: rotateX(calc(12deg + var(--map-rotate-x, 0deg))) rotateY(calc(-8deg + var(--map-rotate-y, 0deg))); }
    }

    @keyframes map-relief-rise {
        from { transform: translateZ(0); }
        to { transform: translateZ(12px); }
    }
}

@media (prefers-reduced-motion: reduce) {
    .map-depth-ready #germany-svg #features path {
        transition: none !important;
        animation: none !important;
    }
}