/*
    File: preloader.css
    Description: Styling for the Magica Beauty preloader
*/

/* --- Main Container (Layout) --- */
#preloader-container {
    position: fixed;
    z-index: 99999 !important;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--background, #232323); /* Use theme bg or fallback */
    
    /* Transition opacity for dissolve effect instead of sliding */
    transition: opacity 1s ease-in-out, visibility 1s ease-in-out;
    opacity: 1;
    visibility: visible;
    
    /* Centering logic */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Class to trigger the dissolve */
#preloader-container.dissolve {
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* Allow clicks to pass through while fading */
}

/* Wrapper to stack Ornaments, Text, and Loader vertically */
.preloader-content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Spacing between elements */
    
    /* Inherit theme color for SVGs and Text */
    color: var(--primary); 
    
    /* Intro fade animation */
    opacity: 0;
    animation: fadeInUp 1s ease-out forwards 0.3s;
}

/* --- SVG Ornaments --- */
.preloader-ornament {
    width: 280px;
    height: auto;
    display: block;
    fill: currentColor; /* Inherits var(--primary) */
    opacity: 0.9;
}

.ornament-bottom {
    transform: scaleY(-1); /* Mirror the bottom one */
}

/* --- Text Styling --- */
.preloader-text {
    text-align: center;
    line-height: 1.2;
    margin: 5px 0;
}

.preloader-logo {
    font-family: var(--font-heading, 'Playfair Display');
    font-size: 3rem;
    font-weight: bold;
    display: inline-block;
    color: var(--primary);
    
    /* Animation States */
    position: relative;
    bottom: -20px;
    opacity: 0;
    margin: 0 5px;
    transition: all 0.5s ease-in-out;
}

.preloader-logo.active {
    bottom: 0;
    opacity: 1;
}

.preloader-logo.fade {
    bottom: 150px;
    opacity: 0;
}

/* --- RESTORED CUSTOM LOADER --- */
#loader {
    display: block;
    position: relative;
    margin-top: 30px; /* Space from the bottom ornament */
    
    width: 150px;
    height: 150px;
    
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: var(--primary);
    
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

#loader:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    /* Secondary Ring Color */
    border-top-color: var(--primary-hover);
    
    -webkit-animation: spin 3s linear infinite;
    animation: spin 3s linear infinite;
}

#loader:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    /* Inner Ring Color */
    border-top-color: var(--secondary);
    
    -webkit-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
}

/* Wrapper Fade In Animation */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Spinner Animation */
@-webkit-keyframes spin {
    0%   { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes spin {
    0%   { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}