/* ==========================================
   Sara XV Luxury Signature Edition V4
   Archivo 7: loader.css
   ========================================== */

#luxury-loader{
    position:fixed;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    background:
        radial-gradient(circle at top left,
            rgba(123,15,30,.12),
            transparent 35%),
        radial-gradient(circle at bottom right,
            rgba(200,162,74,.10),
            transparent 40%),
        linear-gradient(
            180deg,
            #FBF7F1 0%,
            #F4ECE3 100%
        );
    z-index:20000;
    transition:
        opacity .9s ease,
        visibility .9s ease;
}

#luxury-loader.hidden{
    opacity:0;
    visibility:hidden;
}

/* Rosas decorativas */

.loader-roses{
    position:absolute;
    inset:0;
    background:
        url('../assets/images/roses-top-left.svg')
        top left / 260px no-repeat,
        url('../assets/images/roses-bottom-right.svg')
        bottom right / 260px no-repeat;
    opacity:.18;
}

/* Monograma */

.loader-monogram{
    width:140px;
    height:140px;
    border:1px solid rgba(200,162,74,.55);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:'Italianno', cursive;
    font-size:4.8rem;
    color:var(--wine);
    background:rgba(255,255,255,.70);
    backdrop-filter:blur(10px);
    box-shadow:
        0 20px 45px rgba(0,0,0,.08);
    animation:loaderPulse 2.8s ease-in-out infinite;
}

/* Título */

.loader-title{
    margin-top:26px;
    font-family:'Cinzel', serif;
    letter-spacing:.32rem;
    color:var(--wine);
    font-size:.92rem;
    text-transform:uppercase;
}

/* Línea dorada */

.loader-line{
    width:190px;
    height:2px;
    margin-top:20px;
    background:
        linear-gradient(
            90deg,
            transparent,
            var(--gold-light),
            var(--gold),
            var(--gold-light),
            transparent
        );
    animation:loaderShine 2.2s ease-in-out infinite;
}

/* Pétalos */

.loader-petal{
    position:absolute;
    top:-40px;
    font-size:1.2rem;
    opacity:.18;
    pointer-events:none;
    animation:loaderPetal linear infinite;
}

/* Partículas doradas */

.loader-gold{
    position:absolute;
    width:6px;
    height:6px;
    border-radius:50%;
    background:rgba(232,208,138,.85);
    box-shadow:
        0 0 10px rgba(232,208,138,.7),
        0 0 20px rgba(232,208,138,.45);
    animation:loaderGold linear infinite;
}

/* Animaciones */

@keyframes loaderPulse{
    0%{
        transform:scale(1);
        box-shadow:0 0 0 rgba(200,162,74,0);
    }
    50%{
        transform:scale(1.05);
        box-shadow:
            0 0 26px rgba(200,162,74,.28);
    }
    100%{
        transform:scale(1);
        box-shadow:0 0 0 rgba(200,162,74,0);
    }
}

@keyframes loaderShine{
    0%{
        opacity:.35;
        transform:scaleX(.7);
    }
    50%{
        opacity:1;
        transform:scaleX(1);
    }
    100%{
        opacity:.35;
        transform:scaleX(.7);
    }
}

@keyframes loaderPetal{
    from{
        transform:
            translateY(-40px)
            rotate(0deg);
    }
    to{
        transform:
            translateY(110vh)
            translateX(120px)
            rotate(360deg);
    }
}

@keyframes loaderGold{
    from{
        transform:
            translateY(100vh)
            scale(.4);
        opacity:0;
    }
    20%{
        opacity:1;
    }
    80%{
        opacity:1;
    }
    to{
        transform:
            translateY(-120px)
            scale(1.4);
        opacity:0;
    }
}

/* Desvanecimiento */

.loader-fade{
    animation:loaderFade .9s ease forwards;
}

@keyframes loaderFade{
    to{
        opacity:0;
        visibility:hidden;
    }
}

/* Responsive */

@media(max-width:768px){

    .loader-monogram{
        width:120px;
        height:120px;
        font-size:4rem;
    }

    .loader-title{
        font-size:.82rem;
        letter-spacing:.22rem;
    }

    .loader-line{
        width:150px;
    }

    .loader-roses{
        background-size:180px;
    }

}