/* =============================================
   Jain Shikanji Preloader — loader.css
   ============================================= */

/* Import fonts needed for fallback text logo */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@800&family=Lora:ital@1&family=Dancing+Script:wght@700&display=swap');

/* ── Overlay ── */
#jsl-preloader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: #120F29;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    transition: opacity 0.7s ease, visibility 0.7s ease;
}

#jsl-preloader.jsl-loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* ── Logo ── */
.jsl-pre-logo {
    animation: jsl-pre-float 2.8s ease-in-out infinite;
}

.jsl-pre-logo img {
    height: 90px;
    width: auto;
    display: block;
}

/* Text fallback if logo image fails */
.jsl-pre-logo-text {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    font-weight: 800;
    color: #ffd700;
    text-align: center;
    line-height: 1.2;
}

.jsl-pre-logo-text small {
    display: block;
    font-family: 'Dancing Script', cursive;
    font-size: 0.85rem;
    color: #4ae890;
    letter-spacing: 3px;
    margin-top: 4px;
}

/* ── Tagline ── */
.jsl-pre-tagline {
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 1.5px;
    animation: jsl-pre-fade-in 1s ease 0.3s both;
    margin: 0;
}

/* ── Animated bars ── */
.jsl-pre-drops {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    height: 36px;
}

.jsl-pre-drops span {
    display: block;
    width: 8px;
    border-radius: 4px;
    background: #ffd700;
    animation: jsl-pre-bar 1.2s ease-in-out infinite;
}

.jsl-pre-drops span:nth-child(1) { animation-delay: 0.00s; }
.jsl-pre-drops span:nth-child(2) { animation-delay: 0.15s; }
.jsl-pre-drops span:nth-child(3) { animation-delay: 0.30s; }
.jsl-pre-drops span:nth-child(4) { animation-delay: 0.45s; background: #4ae890; }
.jsl-pre-drops span:nth-child(5) { animation-delay: 0.60s; }
.jsl-pre-drops span:nth-child(6) { animation-delay: 0.75s; }
.jsl-pre-drops span:nth-child(7) { animation-delay: 0.90s; background: #4ae890; }

/* ── Shimmer progress line ── */
.jsl-pre-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: linear-gradient(90deg, #ffd700, #4ae890, #ffd700);
    background-size: 200% 100%;
    animation: jsl-pre-progress 1.8s linear infinite;
}

/* ── Keyframes ── */
@keyframes jsl-pre-float {
    0%, 100% { transform: translateY(0px);   }
    50%       { transform: translateY(-10px); }
}

@keyframes jsl-pre-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0);   }
}

@keyframes jsl-pre-bar {
    0%, 100% { height: 8px;  opacity: 0.35; }
    50%       { height: 32px; opacity: 1;    }
}

@keyframes jsl-pre-progress {
    0%   { background-position: 200% center;  }
    100% { background-position: -200% center; }
}

/* ── Mobile ── */
@media (max-width: 480px) {
    .jsl-pre-logo img   { height: 70px; }
    .jsl-pre-logo-text  { font-size: 1.6rem; }
    .jsl-pre-tagline    { font-size: 0.82rem; }
}