/* ===========================================================================
   SOTEI Logo Loader — 6 parts assemble into final-logo, fade out.
   See /img/logo-loader/loader instructrions for the full spec.
   =========================================================================== */

#sotei-loader {
    position: fixed; inset: 0; z-index: 9999;
    background: #FFFFFF;
    display: flex; align-items: center; justify-content: center;
    transition: opacity .6s ease-out;
}
#sotei-loader.hide { opacity: 0; pointer-events: none; }

.sotei-loader__stage {
    position: relative;
    width: 260px; height: 260px;
    display: grid; place-items: center;
}
.sotei-loader__stage img {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    opacity: 0;
    will-change: transform, opacity, filter;
}

/* Initial off-screen / hidden positions */
.sl-p1 { transform: translateX(-180%); }
.sl-p2 { transform: translateY(180%); }
.sl-p3 { transform: translateY(-180%) scaleY(.2); transform-origin: bottom center; }
.sl-p4 { transform: translateX(180%) scaleX(.2); transform-origin: left center; }
.sl-p5 { transform: translateX(40px); }
.sl-p6 { transform: translateX(-40px); }
.sl-final { transform: scale(.95); }

/* Assembled state */
#sotei-loader.assembled .sl-p1,
#sotei-loader.assembled .sl-p2,
#sotei-loader.assembled .sl-p3,
#sotei-loader.assembled .sl-p4,
#sotei-loader.assembled .sl-p5,
#sotei-loader.assembled .sl-p6 {
    opacity: 1; transform: none;
}

/* Per-part animations driven by JS-applied classes */
.sl-anim-p1 { animation: slPart 0.4s cubic-bezier(.2,.8,.2,1) forwards; }
.sl-anim-p2 { animation: slPart 0.4s cubic-bezier(.2,.8,.2,1) forwards; }
.sl-anim-p3 { animation: slPart 0.4s cubic-bezier(.2,.8,.2,1) forwards; }
.sl-anim-p4 { animation: slPart 0.5s cubic-bezier(.2,.8,.2,1) forwards; }
.sl-anim-p5 { animation: slPart 0.4s ease-out forwards; }
.sl-anim-p6 { animation: slPart 0.4s ease-out forwards; }

@keyframes slPart {
    to { opacity: 1; transform: none; }
}

/* Pulse on completion */
.sl-pulse { animation: slPulse 0.6s ease-in-out forwards !important; }
@keyframes slPulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.05); filter: drop-shadow(0 0 20px rgba(0,0,0,.15)); }
    100% { transform: scale(1); }
}

/* Final swap reveal */
.sl-anim-final { animation: slFinal 0.5s ease-out forwards; }
@keyframes slFinal {
    from { opacity: 0; transform: scale(.95); }
    to   { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 20px rgba(0,0,0,.15)); }
}

/* Body lock while loader is visible */
body.sotei-locked { overflow: hidden; }

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
    #sotei-loader .sotei-loader__stage img { opacity: 1; transform: none !important; animation: none !important; }
}