/* ==========================================================================
   Webal Blocks: page transition (asset wbl.page-transition). Task A4, moved out of base.css by NI-2.
   Cross-document View Transitions (Chrome, Edge, Safari 18.2+). A browser without support ignores all of this and loads pages normally; reduced
   motion gets none of it. :has() is acceptable here because without it the only loss is the transition itself.

   Loaded by Helper/Assets.php ONLY when the core Option "Page transition" is Fade, Fade and rise or Slide (length 150-400 ms). With Off nothing is
   added: the template's own transition (Cassiopeia in Joomla 6 fades between pages) stays exactly as it is, and a site that never chose a
   transition is untouched. Assets.php prints the setting as data attributes on the boot data element
   <script type="application/json" id="wbl-boot" data-wbl-pt="fade|fade-rise|slide" data-wbl-pt-duration="200">, or on the inert
   <template id="wbl-boot"> of Scripts Off. It is plain CSS from here: no script, no inline style, so it works under a strict Content-Security-Policy.
   The rules pick the preset with :root:has(#wbl-boot[...]). Only opacity and transform are animated. With no attribute the default Fade at
   200 ms applies. A transition runs only when both pages opt in, so choose it for the whole site (the plugin then adds this file to pages
   with no Webal module too). The header that holds our navbar stays still: navbar-header.css names it and pins it.
   The asset has a heavy weight in joomla.asset.json so it prints after the template's styles even from a module inside article output.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }

    /* --- Length and direction, inherited by the ::view-transition pseudo-elements from :root.
       --wbl-pt-sign flips the Slide preset for right-to-left languages. */
    :root {
        --wbl-pt-duration: 200ms;
        --wbl-pt-sign: 1;
    }

    :root:dir(rtl) {
        --wbl-pt-sign: -1;
    }

    :root:has(#wbl-boot[data-wbl-pt-duration="150"]) { --wbl-pt-duration: 150ms; }
    :root:has(#wbl-boot[data-wbl-pt-duration="250"]) { --wbl-pt-duration: 250ms; }
    :root:has(#wbl-boot[data-wbl-pt-duration="300"]) { --wbl-pt-duration: 300ms; }
    :root:has(#wbl-boot[data-wbl-pt-duration="350"]) { --wbl-pt-duration: 350ms; }
    :root:has(#wbl-boot[data-wbl-pt-duration="400"]) { --wbl-pt-duration: 400ms; }

    /* --- Fade (the default): old page out, new page in. Both use one timing function so the two opacities add
       up to 1 all the way through (the browser blends them with plus-lighter). */
    ::view-transition-old(root) {
        animation: wbl-pt-fade-out var(--wbl-pt-duration, 200ms) cubic-bezier(0.2, 0.7, 0.2, 1) both;
    }

    ::view-transition-new(root) {
        animation: wbl-pt-fade-in var(--wbl-pt-duration, 200ms) cubic-bezier(0.2, 0.7, 0.2, 1) both;
    }

    /* --- Fade and rise: the new page also rises 0.75rem into place. */
    :root:has(#wbl-boot[data-wbl-pt="fade-rise"])::view-transition-new(root) {
        animation-name: wbl-pt-rise-in;
    }

    /* --- Slide: the old page moves 1.5rem away while the new one slides in from the same side. */
    :root:has(#wbl-boot[data-wbl-pt="slide"])::view-transition-old(root) {
        animation-name: wbl-pt-slide-out;
    }

    :root:has(#wbl-boot[data-wbl-pt="slide"])::view-transition-new(root) {
        animation-name: wbl-pt-slide-in;
    }

    @keyframes wbl-pt-fade-out {
        to { opacity: 0; }
    }

    @keyframes wbl-pt-fade-in {
        from { opacity: 0; }
    }

    @keyframes wbl-pt-rise-in {
        from { opacity: 0; transform: translateY(0.75rem); }
    }

    @keyframes wbl-pt-slide-out {
        to { opacity: 0; transform: translateX(calc(var(--wbl-pt-sign, 1) * -1.5rem)); }
    }

    @keyframes wbl-pt-slide-in {
        from { opacity: 0; transform: translateX(calc(var(--wbl-pt-sign, 1) * 1.5rem)); }
    }
}