/**
 * Link Handler CSS
 * Page transition animations for SPA navigation
 * Used by SPAgify/linkHandler.js
 */

/* Fade Out Animation - page leaving */
@keyframes fadeOutUp {
    from {
        opacity: 1;
        transform: scale(1) skewX(0deg) translate3d(0, 0, 0);
    }

    10% {
        opacity: 0.6;
        transform: scale(0.9) skewX(2.5deg) translate3d(0, 10px, 0);
    }

    to {
        opacity: 0;
        transform: scale(0) skewX(0deg) translate3d(0, -100px, 0);
    }
}

/* Fade In Animation - page entering */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: scale(0) skewX(0deg) translate3d(0, -100px, 0);
    }

    10% {
        opacity: 0.1;
        transform: scale(0.8) skewX(-2.5deg) translate3d(0, -90px, 0);
    }

    to {
        opacity: 1;
        transform: scale(1) skewX(0deg) translate3d(0, 0, 0);
    }
}

/* Default animation attribute selectors */
[animation="fade-out"] {
    animation: fadeOutUp 0.5s ease-in;
}

[animation="fade-in"] {
    animation: fadeInDown 0.5s ease-out;
}

/* Page container element - wraps page content for SPA transitions */
page {
    display: block;
}

/* Continue prompt (SPAgify continuePrompt.css). On iOS a swipe or drag has no
   user activation, so the page it opens is covered until a tap writes its Back
   stop. Glass over the page; its button is the shared [visual-mode="button"]
   control (main.css). The navigation menu stays above it (the module's
   default stacking), so swiping on still works. The tokens switch with the
   colour scheme. */
spa-continue-prompt {
    --spa-continue-prompt-backdrop: var(--site-surface-glass);
    --spa-continue-prompt-backdrop-filter: var(--site-backdrop-blur);
}