/* ===========================================
   R4P – Kontext-Übergang (Home ↔ Store)
   =========================================== */

#pageTransition {
    --pt-dur: 0.88s;
    --pt-ease: ease;
    --pt-bg: var(--mk-dark, var(--c-green-deep, #0b0f0b));
    position: fixed;
    inset: 0;
    z-index: 10050;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    background: var(--pt-bg);
    transition: opacity 0.28s var(--pt-ease);
}

#pageTransition.is-busy,
html.r4p-pt-enter #pageTransition {
    visibility: visible;
    opacity: 1;
}

/* Ladekreis – bleibt in der Bildschirmmitte (nicht mit Kontext-Animation mitbewegt) */
.page-transition__loader {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    z-index: 10051;
    pointer-events: none;
}

#pageTransition.is-busy .page-transition__loader,
#pageTransition.is-loading .page-transition__loader,
html.r4p-pt-enter #pageTransition .page-transition__loader {
    display: flex;
}

.page-transition__spinner {
    display: block;
    width: 48px;
    height: 48px;
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-top-color: var(--mk-accent, #ffd100);
    border-radius: 50%;
    animation: r4p-pt-spin 0.7s linear infinite;
}

.page-transition__label {
    font-family: var(--ff-body, 'Inter', system-ui, sans-serif);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.88);
}

@keyframes r4p-pt-spin {
    to {
        transform: rotate(360deg);
    }
}

#r4pView {
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

html.r4p-pt-perspective #r4pView {
    transform-style: preserve-3d;
}

html.r4p-pt-perspective {
    perspective: 1200px;
    overflow: hidden;
    height: 100%;
}

/* —— Exit: Seiteninhalt fährt weg —— */
#r4pView.r4p-pt-exit-fwd {
    animation: r4p-kontext-hide-right var(--pt-dur) forwards var(--pt-ease);
}

#r4pView.r4p-pt-exit-back {
    animation: r4p-kontext-hide-left var(--pt-dur) forwards var(--pt-ease);
}

/* —— Enter: Seiteninhalt kommt rein —— */
html.r4p-pt-enter:not(.r4p-pt-ready) #r4pView {
    animation: none;
    opacity: 0;
}

#r4pView.r4p-pt-enter-fwd {
    animation: r4p-kontext-show-right var(--pt-dur) forwards var(--pt-ease);
}

#r4pView.r4p-pt-enter-back {
    animation: r4p-kontext-show-left var(--pt-dur) forwards var(--pt-ease);
}

@keyframes r4p-kontext-hide-right {
    0% {
        transform: translateZ(0) rotateY(0) scale(1);
        opacity: 1;
    }
    40% {
        transform: translate(-40%, 0) scale(0.82) rotateY(20deg);
        opacity: 1;
    }
    100% {
        transform: translateZ(-220px) rotateY(24deg) scale(0.78);
        opacity: 0;
    }
}

@keyframes r4p-kontext-hide-left {
    0% {
        transform: translateZ(0) rotateY(0) scale(1);
        opacity: 1;
    }
    40% {
        transform: translate(40%, 0) scale(0.82) rotateY(-20deg);
        opacity: 1;
    }
    100% {
        transform: translateZ(-220px) rotateY(-24deg) scale(0.78);
        opacity: 0;
    }
}

@keyframes r4p-kontext-show-right {
    0% {
        transform: translateZ(-220px) rotateY(-18deg) scale(0.78);
        opacity: 0;
    }
    40% {
        transform: translate(40%, 0) scale(0.82) rotateY(-20deg);
        opacity: 1;
    }
    100% {
        transform: translateZ(0) rotateY(0) scale(1);
        opacity: 1;
    }
}

@keyframes r4p-kontext-show-left {
    0% {
        transform: translateZ(-220px) rotateY(18deg) scale(0.78);
        opacity: 0;
    }
    40% {
        transform: translate(-40%, 0) scale(0.82) rotateY(20deg);
        opacity: 1;
    }
    100% {
        transform: translateZ(0) rotateY(0) scale(1);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    #pageTransition,
    #r4pView.r4p-pt-exit-fwd,
    #r4pView.r4p-pt-exit-back,
    #r4pView.r4p-pt-enter-fwd,
    #r4pView.r4p-pt-enter-back {
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
    }

    .page-transition__spinner {
        animation: none;
        border-top-color: rgba(255, 255, 255, 0.55);
    }
}