html.defiant-spa-loading {
    cursor: progress;
}

html.defiant-spa-loading::after {
    content: "";
    position: fixed;
    z-index: 2147483647;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    pointer-events: none;
    transform-origin: left;
    background: linear-gradient(90deg, #f05a34, #ffd16a, #8c63ff, #66c9ff);
    box-shadow: 0 0 18px rgba(240, 90, 52, .7);
    animation: defiant-spa-progress .85s cubic-bezier(.22, 1, .36, 1) infinite;
}

html.defiant-spa-loading body {
    pointer-events: none;
}

::view-transition-old(root) {
    animation: defiant-spa-out .16s ease both;
}

::view-transition-new(root) {
    animation: defiant-spa-in .28s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes defiant-spa-progress {
    0% { transform: scaleX(.05); opacity: .65; }
    55% { transform: scaleX(.72); opacity: 1; }
    100% { transform: scaleX(1); opacity: 0; }
}

@keyframes defiant-spa-out {
    to { opacity: .28; transform: scale(.997); }
}

@keyframes defiant-spa-in {
    from { opacity: 0; transform: translateY(7px); }
}

@media (prefers-reduced-motion: reduce) {
    html.defiant-spa-loading::after { animation-duration: 1.4s; }
    ::view-transition-old(root),
    ::view-transition-new(root) { animation: none; }
}