/* =========================================
   1. GLOBAL & UTILITY STYLES
   ========================================= */

body { 
    background-color: #FDFBF7; 
    color: #2D3748; 
    overflow-x: hidden; 
}

/* Hide scrollbar for horizontal scrolling elements */
.hide-scroll::-webkit-scrollbar { 
    display: none; 
}
.hide-scroll { 
    -ms-overflow-style: none; 
    scrollbar-width: none; 
}

/* AI Zodiac Circle in hero/AI section */
.zodiac-circle {
    border: 1px dashed rgba(197, 160, 89, 0.3);
    border-radius: 50%;
}

/* =========================================
   2. CUSTOM UI ANIMATIONS
   ========================================= */

/* Soft pulsing effect for logo/icons */
.animate-pulse-slow {
    animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% { 
        opacity: 1; 
        box-shadow: 0 0 0 0 rgba(232, 201, 113, 0.7); 
    }
    50% { 
        opacity: .8; 
        box-shadow: 0 0 0 10px rgba(232, 201, 113, 0); 
    }
}

/* Product card image hover effect */
.gem-card-hover:hover .gem-img {
    transform: scale(1.1) rotate(2deg);
    transition: transform 0.5s ease;
}

/* =========================================
   3. ADVANCED COSMIC BACKGROUND ANIMATION 
   ========================================= */

/* Moving Gradient Background for Hero Section */
.bg-hero-pattern {
    background: linear-gradient(-45deg, #080d19, #1a2342, #0b1120, #111a3a) !important;
    background-size: 400% 400% !important;
    animation: gradientBG 15s ease infinite;
    position: relative;
    overflow: hidden;
}

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Base setup for stars */
.starry-bg { 
    position: relative; 
    overflow: hidden; 
}

.starry-bg::before, .starry-bg::after {
    content: '';
    position: absolute;
    top: -50%; left: -50%; right: -50%; bottom: -50%; /* Extended area for smooth scrolling */
    pointer-events: none;
    z-index: 1;
}

/* Layer 1: Bright Magical Stars (Organic Twinkle) */
.starry-bg::before {
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.9) 1px, transparent 2px),
        radial-gradient(circle at 75% 15%, rgba(255,255,255,0.6) 2px, transparent 3px),
        radial-gradient(circle at 45% 80%, rgba(255,255,255,0.8) 1.5px, transparent 2.5px),
        radial-gradient(circle at 90% 60%, rgba(255,255,255,0.5) 1px, transparent 2px),
        radial-gradient(circle at 10% 90%, rgba(255,255,255,1) 2px, transparent 4px);
    background-size: 250px 250px;
    opacity: 0.6;
    animation: magicalTwinkle 3.5s ease-in-out infinite alternate;
}

/* Layer 2: Dense Small Stars (Moving upwards & Twinkling in reverse) */
.starry-bg::after {
    background-image: 
        radial-gradient(circle at 50% 50%, rgba(255,255,255,0.5) 1px, transparent 1px),
        radial-gradient(circle at 15% 75%, rgba(255,255,255,0.8) 1.5px, transparent 2px),
        radial-gradient(circle at 85% 25%, rgba(255,255,255,0.6) 1px, transparent 1.5px);
    background-size: 150px 150px;
    opacity: 0.4;
    animation: 
        moveStars 120s linear infinite,
        magicalTwinkle 4.5s ease-in-out infinite alternate-reverse;
}

/* Realistic Organic Twinkle Animation */
@keyframes magicalTwinkle {
    0% { opacity: 0.2; transform: scale(1); filter: brightness(0.8); }
    25% { opacity: 0.5; filter: brightness(1); }
    50% { opacity: 0.9; transform: scale(1.03); filter: brightness(1.5); } /* Star shines brightest here */
    75% { opacity: 0.4; filter: brightness(1); }
    100% { opacity: 0.3; transform: scale(0.98); filter: brightness(0.9); }
}

@keyframes moveStars {
    from { transform: translateY(0); }
    to { transform: translateY(-1000px); }
}

/* =========================================
   4. FLOATING COSMIC AURA (GLOWS)
   ========================================= */

/* Golden Glow */
.cosmic-glow {
    position: absolute;
    width: 80vw;
    height: 80vw;
    max-width: 800px;
    max-height: 800px;
    background: radial-gradient(circle, rgba(197, 160, 89, 0.07) 0%, transparent 60%);
    border-radius: 50%;
    top: -10%;
    right: -10%;
    animation: floatGlow 10s ease-in-out infinite alternate;
    z-index: 1;
    pointer-events: none;
}

/* Deep Blue Glow */
.cosmic-glow-2 {
    position: absolute;
    width: 60vw;
    height: 60vw;
    max-width: 600px;
    max-height: 600px;
    background: radial-gradient(circle, rgba(45, 85, 255, 0.05) 0%, transparent 60%);
    border-radius: 50%;
    bottom: -20%;
    left: -10%;
    animation: floatGlowReverse 12s ease-in-out infinite alternate;
    z-index: 1;
    pointer-events: none;
}

@keyframes floatGlow {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-30px, 50px) scale(1.1); }
}

@keyframes floatGlowReverse {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(40px, -40px) scale(1.15); }
}