/**
 * Page Load Transition Effect
 *
 * Two styles:
 *   .transition-slide  – overlay + logo slide together (left → right).
 *   .transition-reveal  – overlay slides off while logo stays centred, then fades.
 */

/* --- Shared base --- */

.page-transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    pointer-events: none;
    animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
    animation-fill-mode: forwards;
}

.page-transition-logo {
    display: block;
    width: auto;
    height: auto;
    max-width: min(var(--sk-page-transition-logo-size, 180px), calc(100vw - 2rem));
    max-height: min(
        var(--sk-page-transition-logo-size, 180px),
        calc(100dvh - 2rem),
        calc(100vh - 2rem)
    );
    object-fit: contain;
}

body.page-transitioning {
    overflow: hidden;
}

/* --- Slide style (original) --- */

.page-transition-overlay.transition-slide {
    left: -100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 1rem;
    animation-name: slideTransition;
}

.transition-slide .page-transition-logo {
    position: static;
}

@keyframes slideTransition {
    0%   { left: -100%; }
    50%  { left: 0; }
    100% { left: 100%; }
}

/* --- Reveal style --- */

.page-transition-overlay.transition-reveal {
    left: 0;
    overflow: hidden;
    animation-name: revealOverlay;
}

/*
 * Inner wrapper pinned to viewport centre.
 * The overlay clips it as it slides right, so the logo
 * progressively disappears from the left edge.
 * Uses the same transform property as the overlay so they stay perfectly in sync.
 */
.page-transition-overlay.transition-reveal .page-transition-logo-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 1rem;
    animation-name: revealLogoCounter;
    animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
    animation-fill-mode: forwards;
}

@keyframes revealOverlay {
    0%   { transform: translateX(-100%); }
    40%  { transform: translateX(0); }
    60%  { transform: translateX(0); }
    100% { transform: translateX(100%); }
}

@keyframes revealLogoCounter {
    0%   { transform: translateX(100%); }
    40%  { transform: translateX(0); }
    60%  { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}