/*
Theme Name:   Astra Child
Template:     astra
Author:       Rajan Ahmed
Description:  A child theme for Astra
Version:      1.0.1
*/

/* =========================================
   প্রি-লোডার মেইন কন্টেইনার স্টাইল
========================================= */
#rajan-preloader {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #ffffff;
    display: flex; justify-content: center; align-items: center;
    z-index: 9999999;
    opacity: 1; visibility: visible;
    /* প্রি-লোডার যখন গায়েব হবে তখন এই ট্রানজিশন কাজ করবে */
    transition: opacity 0.5s ease, visibility 0.5s, transform 0.5s ease;
}

.loader-content {
    text-align: center;
    width: 90%;
    max-width: 800px;
}

/* =========================================
   লোগো স্টাইল এবং নতুন অ্যানিমেশন
========================================= */
.loader-logo {
    color: #000;
    font-size: clamp(35px, 8vw, 65px);
    font-weight: 900;
    letter-spacing: clamp(5px, 2vw, 15px);
    margin-bottom: 25px;
    text-transform: uppercase;
    line-height: 1.2;
    
    /* নতুন অ্যানিমেশন কোড শুরু */
    opacity: 0; /* শুরুতে অদৃশ্য থাকবে */
    transform: translateY(20px); /* শুরুতে সামান্য নিচে থাকবে */
    /* logoFadeUp = অ্যানিমেশনের নাম
       0.8s = অ্যানিমেশন হতে কত সময় লাগবে
       ease-out = স্মুথ ইফেক্ট
       forwards = অ্যানিমেশন শেষে লোগোটি দৃশ্যমান থাকবে 
    */
    animation: logoFadeUp 0.8s ease-out forwards;
    animation-delay: 0.1s; /* লোড হওয়ার ঠিক পর মুহূর্তেই শুরু হবে */
}

.loader-logo span { color: #a26000; }

/* =========================================
   টাইপিং টেক্সট স্টাইল
========================================= */
#rajan-typing-text {
    font-size: clamp(11px, 3.2vw, 20px); 
    color: #333;
    letter-spacing: clamp(1px, 0.5vw, 3px);
    font-weight: 500;
    white-space: nowrap;
    min-height: 30px;
}

.letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(5px);
    transition: opacity 0.1s, transform 0.1s;
}
.letter.active { opacity: 1; transform: translateY(0); }

/* =========================================
   লোডার বার স্টাইল
========================================= */
.loader-bar-container {
    width: min(85%, 400px);
    height: 3px;
    background: #f0f0f0;
    margin: 20px auto 0;
    overflow: hidden;
    border-radius: 2px;
    /* বারটিও যাতে লোগোর সাথে হালকা ফেড ইন হয় */
    opacity: 0;
    animation: plainFadeIn 1s ease forwards;
    animation-delay: 0.3s;
}

.loader-bar {
    width: 0;
    height: 100%;
    background: #a26000;
    transition: width 0.8s linear; 
}

/* =========================================
   যখন প্রি-লোডার হাইড হবে
========================================= */
.loader-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: scale(1.05);
    pointer-events: none;
}

/* Tablet & Mobile Specific Adjustments */
@media (max-width: 768px) {
    .loader-logo { margin-bottom: 15px; }
    .loader-bar-container { margin-top: 15px; }
}


/* =========================================
   CSS Keyframes (অ্যানিমেশনের নিয়ম)
========================================= */

/* লোগোর জন্য ফেড ইন এবং উপরে ওঠার অ্যানিমেশন */
@keyframes logoFadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* সাধারণ ফেড ইন (লোডার বারের জন্য) */
@keyframes plainFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}