#page-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: var(--bs-primary, #0d6efd);
    box-shadow: 0 0 8px rgba(13, 110, 253, 0.55);
    z-index: 10000;
    opacity: 0;
    transition: width 0.25s ease-out, opacity 0.2s ease-out;
    pointer-events: none;
    will-change: width, opacity;
}

#page-progress-bar.active {
    opacity: 1;
}

[data-bs-theme="dark"] #page-progress-bar {
    background: var(--bs-info, #6ea8fe);
    box-shadow: 0 0 8px rgba(110, 168, 254, 0.6);
}

/* Mobile spinner overlay — shown instead of the top bar on phone-sized screens.
   Uses Bootstrap 5's `sm` breakpoint (<576px) so it matches the rest of the UI. */
#page-progress-spinner {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.45);
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.15s ease-out;
    pointer-events: none;
}

#page-progress-spinner .pps-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 4px solid rgba(13, 110, 253, 0.25);
    border-top-color: var(--bs-primary, #0d6efd);
    animation: rms-pps-spin 0.8s linear infinite;
}

[data-bs-theme="dark"] #page-progress-spinner {
    background: rgba(0, 0, 0, 0.55);
}

[data-bs-theme="dark"] #page-progress-spinner .pps-circle {
    border-color: rgba(110, 168, 254, 0.25);
    border-top-color: var(--bs-info, #6ea8fe);
}

@keyframes rms-pps-spin {
    to { transform: rotate(360deg); }
}

/* Show the spinner overlay (and hide the top bar) on mobile widths only. */
@media (max-width: 575.98px) {
    #page-progress-bar {
        display: none !important;
    }

    #page-progress-spinner {
        display: flex;
    }

    #page-progress-spinner.active {
        opacity: 1;
    }
}

/* Reduced-motion: keep a static indicator instead of the spinning ring. */
@media (prefers-reduced-motion: reduce) {
    #page-progress-spinner .pps-circle {
        animation: none;
        border-color: var(--bs-primary, #0d6efd);
        border-top-color: var(--bs-primary, #0d6efd);
        opacity: 0.85;
    }
    [data-bs-theme="dark"] #page-progress-spinner .pps-circle {
        border-color: var(--bs-info, #6ea8fe);
        border-top-color: var(--bs-info, #6ea8fe);
    }
}

/* Subtle page fade-in on load */
@keyframes rms-page-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

main {
    animation: rms-page-fade-in 180ms ease-out;
}

/* Cascade top-level blocks inside <main> in from top to bottom.
   :where() keeps specificity at 0 so page-specific styles always win.
   Opt out per-block with data-no-stagger, or per-page on <main data-no-stagger>. */
:where(main:not([data-no-stagger])) > :where(:not([data-no-stagger])) {
    animation: rms-page-fade-in 220ms ease-out both;
}
:where(main:not([data-no-stagger])) > :where(:not([data-no-stagger])):nth-child(1) { animation-delay:   0ms; }
:where(main:not([data-no-stagger])) > :where(:not([data-no-stagger])):nth-child(2) { animation-delay:  40ms; }
:where(main:not([data-no-stagger])) > :where(:not([data-no-stagger])):nth-child(3) { animation-delay:  80ms; }
:where(main:not([data-no-stagger])) > :where(:not([data-no-stagger])):nth-child(4) { animation-delay: 120ms; }
:where(main:not([data-no-stagger])) > :where(:not([data-no-stagger])):nth-child(5) { animation-delay: 160ms; }
:where(main:not([data-no-stagger])) > :where(:not([data-no-stagger])):nth-child(6) { animation-delay: 200ms; }
:where(main:not([data-no-stagger])) > :where(:not([data-no-stagger])):nth-child(7) { animation-delay: 240ms; }
:where(main:not([data-no-stagger])) > :where(:not([data-no-stagger])):nth-child(8) { animation-delay: 280ms; }

@media (prefers-reduced-motion: reduce) {
    main,
    :where(main) > * {
        animation: none;
    }
}