/* Qurban Loading Screen - Premium Design */
:root {
    --primary-green: #1b5e20;
    --light-green: #4caf50;
    --accent-green: #aed581;
    --sky-blue: #e3f2fd;
    --white: #ffffff;
}

#qurban-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--primary-green) 0%, #2e7d32 50%, var(--light-green) 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.8s;
    overflow: hidden;
}

.loader-content {
    text-align: center;
    position: relative;
}

/* Sky Elements (Optional but adds depth) */
.cloud {
    position: absolute;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    filter: blur(5px);
    animation: move-clouds 20s linear infinite;
}

.cloud-1 { width: 100px; height: 30px; top: -100px; left: -200px; animation-duration: 25s; }
.cloud-2 { width: 150px; height: 40px; top: -150px; left: 100px; animation-duration: 30s; animation-delay: -5s; }

/* Cow Animation */
.cow-wrapper {
    position: relative;
    width: 250px; /* Locked size */
    height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10001;
}

.cow-svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.2));
}

.cow-head {
    transform-origin: 90px 60px;
    animation: head-eating 3s infinite ease-in-out;
}

.cow-tail {
    transform-origin: 160px 80px;
    animation: tail-flick 2s infinite ease-in-out;
}

/* Grass Field */
.grass-container {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 8px;
    margin-top: -30px;
    height: 40px;
    z-index: 1;
}

.grass-blade {
    width: 12px;
    height: 35px;
    background: var(--accent-green);
    border-radius: 60% 60% 0 0;
    transform-origin: bottom center;
    animation: grass-sway 3.5s infinite ease-in-out;
}

.grass-blade:nth-child(2n) {
    height: 25px;
    background: #c5e1a5;
    animation-delay: 0.5s;
    animation-duration: 4s;
}

.grass-blade:nth-child(3n) {
    height: 45px;
    background: #9ccc65;
    animation-delay: 1.2s;
    animation-duration: 3s;
}

/* Text Loading */
.loader-text {
    margin-top: 50px;
    color: var(--white);
    font-family: 'Outfit', 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.loading-subtext {
    margin-top: 10px;
    font-size: 0.9rem;
    opacity: 0.9;
    font-weight: 300;
}

.dots::after {
    content: '';
    display: inline-block;
    width: 20px;
    text-align: left;
    animation: dots-anim 1.5s steps(4, end) infinite;
}

/* Keyframes */
@keyframes head-eating {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    30% { transform: translate(-10px, 35px) rotate(15deg); }
    50% { transform: translate(-8px, 32px) rotate(12deg); }
    70% { transform: translate(-12px, 38px) rotate(18deg); }
}

@keyframes tail-flick {
    0%, 100% { transform: rotate(0deg); }
    30% { transform: rotate(15deg); }
    60% { transform: rotate(-10deg); }
}

@keyframes grass-sway {
    0%, 100% { transform: scaleY(1) skewX(0); }
    50% { transform: scaleY(0.9) skewX(15deg); }
}

@keyframes move-clouds {
    from { transform: translateX(-100vw); }
    to { transform: translateX(100vw); }
}

@keyframes dots-anim {
    0%, 20% { content: ''; }
    40% { content: '.'; }
    60% { content: '..'; }
    80%, 100% { content: '...'; }
}

/* Fade Out State */
.loader-hidden {
    opacity: 0;
    visibility: hidden;
}

/* Responsive adjustment */
@media (max-width: 600px) {
    .cow-wrapper { width: 150px; height: 110px; }
    .loader-text { font-size: 1rem; margin-top: 30px; }
}