/* =========================================================
LUSSO MODULAR — INTRO ANIMATION V1.1.1
Slow four-piece assembly + architectural shutter outro
========================================================= */

html.lusso-intro-lock,
body.lusso-intro-lock{
    overflow:hidden !important;
    overscroll-behavior:none !important;
}

.lussoIntro,
.lussoIntro *{
    box-sizing:border-box;
}

.lussoIntro{
    --lusso-intro-bg:#F2570E;
    --lusso-intro-logo-width:250px;
    --lusso-intro-logo-mobile:180px;
    --lusso-intro-exit:900ms;

    position:fixed;
    inset:0;
    z-index:2147483000;
    width:100vw;
    height:100dvh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--lusso-intro-bg);
    overflow:hidden;
    pointer-events:auto;
    isolation:isolate;
    transform:translateZ(0);
    -webkit-font-smoothing:antialiased;
}

/* Mobile-only mode is hidden at CSS level as well as in JS, preventing any
   orange overlay flash on desktop before the script executes. */
@media(min-width:768px){
    .lussoIntro.lussoIntro--mobileOnly{
        display:none !important;
    }
}

/* Four orange architectural shutters. During the intro they simply sit on
   top of the same orange canvas. During the outro JS sends them outward. */
.lussoIntro__outroPanels{
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
}

.lussoIntro__panel{
    position:absolute;
    width:50.3%;
    height:50.3%;
    background:var(--lusso-intro-bg);
    transform:translate3d(0,0,0) scale(1.01);
    will-change:transform,opacity;
    backface-visibility:hidden;
}

.lussoIntro__panel--tl{left:0;top:0}
.lussoIntro__panel--tr{right:0;top:0}
.lussoIntro__panel--bl{left:0;bottom:0}
.lussoIntro__panel--br{right:0;bottom:0}

.lussoIntro__stage,
.lussoIntro__finalLogo{
    position:absolute;
    left:50%;
    top:50%;
    width:var(--lusso-intro-logo-width);
    aspect-ratio:1/1;
    transform:translate3d(-50%,-50%,0);
    transform-origin:center;
    backface-visibility:hidden;
}

.lussoIntro__stage{z-index:2}

.lussoIntro__finalLogo{
    z-index:3;
    opacity:0;
    pointer-events:none;
    will-change:transform,opacity,filter;
}

.lussoIntro__finalLogo img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
    user-select:none;
    -webkit-user-drag:none;
}

/* Each quarter uses the exact supplied transparent PNG, cropped to its quadrant. */
.lussoIntro__piece{
    position:absolute;
    width:50%;
    height:50%;
    display:block;
    background-image:var(--lusso-intro-logo-image);
    background-repeat:no-repeat;
    background-size:200% 200%;
    opacity:0;
    transform:translate3d(0,0,0);
    transform-origin:center;
    will-change:transform,opacity,filter;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
}

.lussoIntro__piece--tl{left:0;top:0;background-position:0 0}
.lussoIntro__piece--tr{right:0;top:0;background-position:100% 0}
.lussoIntro__piece--bl{left:0;bottom:0;background-position:0 100%}
.lussoIntro__piece--br{right:0;bottom:0;background-position:100% 100%}

/* WAAPI handles the assembly. This class only enables the pieces cleanly. */
.lussoIntro.is-assembling .lussoIntro__piece{
    opacity:1;
}

/* Once the four quarters are assembled, crossfade to the pristine source PNG. */
.lussoIntro.is-formed .lussoIntro__stage{
    opacity:0;
    transition:opacity 120ms linear;
}

.lussoIntro.is-formed .lussoIntro__finalLogo{
    opacity:1;
}

.lussoIntro.is-exiting{
    pointer-events:none;
}

.lussoIntro.is-hidden{
    display:none !important;
}

@media(max-width:767px){
    .lussoIntro__stage,
    .lussoIntro__finalLogo{
        width:var(--lusso-intro-logo-mobile);
    }
}

@media(prefers-reduced-motion:reduce){
    .lussoIntro__piece,
    .lussoIntro__stage{
        display:none !important;
    }

    .lussoIntro__finalLogo{
        opacity:1 !important;
        transform:translate3d(-50%,-50%,0) !important;
        filter:none !important;
    }
}