/* =========================================================
   STUDX page loader.
   Shared by the employee site and the admin panel. The mark is
   inlined as SVG rather than an <img> so its four blades can be
   animated one at a time.
   ========================================================= */

.studx-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    opacity: 1;
    transition: opacity .28s ease;
}

/* Added by the inline script once the page is ready. The element is
   removed from the DOM shortly after, so it never traps clicks. */
.studx-loader.is-done {
    opacity: 0;
    pointer-events: none;
}

.studx-loader-mark {
    width: 58px;
    height: 58px;
    display: block;
}

.studx-loader-mark path {
    fill: #f7502f;
}

/* Each blade turns about the centre of the viewBox, not about its own
   bounding box — otherwise the four parts drift apart as they scale. */
.studx-loader-mark > g {
    transform-box: view-box;
    transform-origin: 20px 20.7px;
    animation: studx-blade 1.15s ease-in-out infinite;
}

/* A quarter of the cycle between each, so the pinwheel chases itself
   clockwise from the top. */
.studx-loader-blade-right  { animation-delay: .14s }
.studx-loader-blade-bottom { animation-delay: .28s }
.studx-loader-blade-left   { animation-delay: .42s }

@keyframes studx-blade {
    0%, 65%, 100% { opacity: .2; transform: scale(.84) }
    30%           { opacity: 1;  transform: scale(1) }
}

/* Reduced motion: hold the mark still and fully drawn. It is a loading
   indicator, so it still needs to be visible — just not moving. */
@media (prefers-reduced-motion: reduce) {
    .studx-loader {
        transition: none;
    }

    .studx-loader-mark > g {
        animation: none;
        opacity: 1;
        transform: none;
    }
}