/* =====================================================
   Site Preloader — Global Heart Animation
   Linked from: frontend/layouts/main.blade.php
   Controlled by: Admin > Settings > Preloader
   ===================================================== */

#site-preloader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #fff1f2 0%, #fce7f3 50%, #fff1f2 100%);
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

#site-preloader.fade-out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.preloader-inner {
    text-align: center;
    user-select: none;
}

/* ── Heart container ── */
.heart-wrap {
    position: relative;
    width: 90px;
    height: 90px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Heart SVG ── */
.heart-svg {
    width: 64px;
    height: 64px;
    fill: url(#heartGrad);
    filter: drop-shadow(0 4px 16px rgba(236, 72, 153, 0.45));
    animation: heartbeat 1.1s ease-in-out infinite;
    position: relative;
    z-index: 2;
}

@keyframes heartbeat {
    0%,  100% { transform: scale(1);    }
    14%        { transform: scale(1.20); }
    28%        { transform: scale(1);    }
    42%        { transform: scale(1.14); }
    70%        { transform: scale(1);    }
}

/* ── Ripple rings ── */
.ripple {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    border-radius: 50%;
    border: 2px solid rgba(236, 72, 153, 0.5);
    animation: rippleOut 2s ease-out infinite;
    z-index: 1;
}

.ripple-1 { width: 90px;  height: 90px;  animation-delay: 0s;   }
.ripple-2 { width: 120px; height: 120px; animation-delay: 0.6s; }

@keyframes rippleOut {
    0%   { transform: translate(-50%, -50%) scale(0); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 0;   }
}

/* ── Site name text ── */
.preloader-text {
    font-family: 'Georgia', serif;
    font-size: 1.35rem;
    font-weight: 700;
    background: linear-gradient(90deg, #db2777, #e11d48);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 6px;
    letter-spacing: 0.02em;
}

/* ── Tagline text ── */
.preloader-sub {
    font-size: 0.82rem;
    font-weight: 500;
    color: #be185d;
    letter-spacing: 0.09em;
    margin: 0;
    animation: pulse 1.8s ease infinite;
}

@keyframes pulse {
    0%,  100% { opacity: 1;    }
    50%        { opacity: 0.75; }
}