/* ==========================================================================
   Smooth page navigation
   --------------------------------------------------------------------------
   1) A thin top progress bar (like the one on GitHub/YouTube) gives instant
      feedback the moment a link is clicked, instead of a blank pause.
   2) The View Transitions API (@view-transition) tells supporting browsers
      (Chrome/Edge 126+) to cross-fade between pages natively instead of a
      hard white-flash reload. Browsers that don't support it just ignore
      this block and fall back to a normal navigation — nothing breaks.
   ========================================================================== */

@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation: zio-fade-out 0.22s ease both;
}

::view-transition-new(root) {
    animation: zio-fade-in 0.28s ease both;
}

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

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

#zio-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, #0587ca, #06b6d4, #4dc9a0);
    box-shadow: 0 0 8px rgba(6, 182, 212, 0.55);
    z-index: 999999;
    opacity: 0;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none !important;
    }
    #zio-progress-bar {
        transition: none !important;
    }
}