/* --- ASSETS (CSS ART) --- */
/* Kept as CSS because these are complex "drawn" elements */

/* Sunburst Background */
.sunburst {
    background: radial-gradient(circle at 50% 50%, #fff 20%, #E0F7FA 60%, #B2EBF2 100%);
    opacity: 0.8;
    z-index: -10;
}

/* Realistic Clouds (Enhanced - Thicker & Brighter) */
.cloud {
    position: absolute;
    width: var(--w);
    height: var(--h);
    background: linear-gradient(to bottom, #FFFFFF 15%, #F0F9FF 100%);
    /* Whiter top */
    border-radius: 100px;
    /* Stronger glow + shadow for thickness */
    box-shadow:
        0 8px 20px rgba(0, 90, 162, 0.1),
        0 0 25px rgba(255, 255, 255, 1.0);
    opacity: 1 !important;
    /* Force full opacity for "thick" look, managed slightly in variations */
}

/* Cloud Variations with Shapes Restored */

/* Large Bottom Left */
.cloud-1 {
    --w: 320px;
    --h: 100px;
    top: 45%;
    left: 2%;
    opacity: 0.95;
    z-index: 5;
}

.cloud-1::after {
    width: 140px;
    height: 140px;
    top: -70px;
    left: 40px;
}

.cloud-1::before {
    width: 100px;
    height: 100px;
    top: -40px;
    left: 140px;
}

/* Large Top Right */
.cloud-2 {
    --w: 350px;
    --h: 120px;
    top: 12%;
    right: 2%;
    opacity: 0.95;
}

/* Moved down slightly to avoid sun */
.cloud-2::after {
    width: 160px;
    height: 160px;
    top: -90px;
    left: 50px;
}

.cloud-2::before {
    width: 120px;
    height: 120px;
    top: -50px;
    left: 160px;
}

/* Medium Top Left */
.cloud-3 {
    --w: 220px;
    --h: 85px;
    top: 8%;
    left: 5%;
    opacity: 0.9;
    transform: scale(0.9);
}

.cloud-3::after {
    width: 90px;
    height: 90px;
    top: -45px;
    left: 25px;
}

/* Small Distant Center */
.cloud-4 {
    --w: 120px;
    --h: 50px;
    top: 35%;
    left: 40%;
    opacity: 0.6;
    transform: scale(0.6);
    z-index: -1;
}

.cloud-4::after {
    width: 60px;
    height: 60px;
    top: -30px;
    left: 20px;
}

/* Medium Bottom Right */
.cloud-5 {
    --w: 260px;
    --h: 95px;
    top: 55%;
    right: 3%;
    opacity: 0.85;
}

.cloud-5::after {
    width: 110px;
    height: 110px;
    top: -55px;
    left: 30px;
}

.cloud-5::before {
    width: 80px;
    height: 80px;
    top: -30px;
    left: 110px;
}

/* Tiny floater */
.cloud-6 {
    --w: 100px;
    --h: 40px;
    top: 12%;
    right: 25%;
    opacity: 0.5;
}

.cloud-6::after {
    width: 50px;
    height: 50px;
    top: -25px;
    left: 15px;
}

/* New Left Clouds */
.cloud-7 {
    --w: 240px;
    --h: 90px;
    top: 28%;
    left: 3%;
    opacity: 0.85;
    z-index: 4;
}

.cloud-7::after {
    width: 100px;
    height: 100px;
    top: -50px;
    left: 30px;
}

.cloud-7::before {
    width: 70px;
    height: 70px;
    top: -30px;
    left: 110px;
}

.cloud-8 {
    --w: 200px;
    --h: 75px;
    top: 65%;
    left: 8%;
    opacity: 0.75;
    transform: scale(0.9);
}

.cloud-8::after {
    width: 80px;
    height: 80px;
    top: -40px;
    left: 20px;
}

.cloud-8::before {
    width: 50px;
    height: 50px;
    top: -25px;
    left: 90px;
}

/* TOP SKY CLOUDS - Fill upper header area */
.cloud-top-1 {
    --w: 180px;
    --h: 65px;
    top: 2%;
    left: 8%;
    opacity: 0.75;
    transform: scale(0.85);
}

.cloud-top-1::after {
    width: 85px;
    height: 85px;
    top: -42px;
    left: 25px;
}

.cloud-top-1::before {
    width: 55px;
    height: 55px;
    top: -25px;
    left: 90px;
}

.cloud-top-2 {
    --w: 150px;
    --h: 55px;
    top: 1%;
    left: 35%;
    opacity: 0.65;
    transform: scale(0.7);
    z-index: -1;
}

.cloud-top-2::after {
    width: 70px;
    height: 70px;
    top: -35px;
    left: 20px;
}

.cloud-top-2::before {
    width: 45px;
    height: 45px;
    top: -20px;
    left: 75px;
}

.cloud-top-3 {
    --w: 200px;
    --h: 70px;
    top: 3%;
    right: 12%;
    opacity: 0.8;
    transform: scale(0.9);
}

.cloud-top-3::after {
    width: 95px;
    height: 95px;
    top: -48px;
    left: 30px;
}

.cloud-top-3::before {
    width: 65px;
    height: 65px;
    top: -30px;
    left: 105px;
}

/* SUN STYLES */
.sun-container {
    position: absolute;
    top: -100px;
    /* Moved up further */
    right: 5%;
    width: 200px;
    height: 200px;
    z-index: 20;
    /* High z-index to sit ABOVE clouds */
    pointer-events: none;
    transform-origin: center center;
}

.sun-orb {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, #FFFDE7 30%, #FFF176 100%);
    /* Brighter yellow core */
    border-radius: 50%;
    box-shadow: 0 0 60px rgba(255, 235, 59, 0.8), 0 0 120px rgba(255, 255, 255, 1.0);
    /* Stronger glow */
    z-index: 2;
}

.sun-rays {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-conic-gradient(from 0deg,
            rgba(255, 255, 255, 0.3) 0deg,
            /* Increased opacity from 0.1 to 0.3 */
            rgba(255, 235, 59, 0.2) 10deg,
            /* Added slight yellow tint to rays */
            transparent 10deg,
            transparent 20deg);
    border-radius: 50%;
    mask-image: radial-gradient(circle, transparent 35%, black 65%);
    /* Fade out inner rays near orb */
    -webkit-mask-image: radial-gradient(circle, transparent 35%, black 65%);
    animation: rotate-rays 20s linear infinite;
    z-index: 1;
}

@keyframes rotate-rays {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ... existing cloud pseudos and other css ... */

.cloud::after,
.cloud::before {
    content: '';
    position: absolute;
    background: inherit;
    border-radius: 50%;
}

/* Re-apply pseudos to match new cloud base logic if needed, but existing logic relies on inheriting background which is fine. 
   Just need to make sure specific cloud variations don't override the global opacity too aggressively if we want "thick".
*/



/* Animation for floating icons */
@keyframes bob {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.animate-bob {
    animation: bob 3s ease-in-out infinite;
}

/* Mobile Menu Animations */
@keyframes blob {
    0% {
        transform: translate(0px, 0px) scale(1);
    }

    33% {
        transform: translate(30px, -50px) scale(1.1);
    }

    66% {
        transform: translate(-20px, 20px) scale(0.9);
    }

    100% {
        transform: translate(0px, 0px) scale(1);
    }
}

.animate-blob {
    animation: blob 7s infinite;
}

.animation-delay-2000 {
    animation-delay: 2s;
}

.animation-delay-4000 {
    animation-delay: 4s;
}

/* Animated Text Gradient - Prism Shine */
.animate-text-float {
    animation: text-float 4s ease-in-out infinite;
}

.animate-shine-overlay {
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    background-image: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.9) 45%, #E0F7FA 50%, rgba(255, 255, 255, 0.9) 55%, transparent 65%);
    background-size: 250% 100%;
    animation: shine-flow 5s linear infinite;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

@keyframes shine-flow {
    0% {
        background-position: -150% 0, 0 0;
    }

    100% {
        background-position: 150% 0, 0 0;
    }
}

@keyframes text-float {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-5px) scale(1.02);
    }
}

/* === 3D BUBBLE LETTER STYLES === */
.bubble-text-container {
    filter: drop-shadow(0 8px 15px rgba(0, 0, 0, 0.15));
}

.bubble-letter {
    display: inline-block;
    position: relative;
    font-weight: 700;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.bubble-letter:hover {
    transform: scale(1.15) rotate(-3deg);
    filter: brightness(1.1);
}

/* Orange Bubble - Premium Light Orange */
body .bubble-orange {
    color: #FFA347 !important;
    text-shadow:
        0 1px 0 #f59030,
        0 2px 0 #eb7d1a,
        0 3px 0 #d16a0a,
        0 4px 0 #b85800,
        0 5px 0 #9e4800,
        0 6px 8px rgba(255, 163, 71, 0.4),
        0 8px 20px rgba(255, 163, 71, 0.3);
}

/* Blue Bubble - Premium Light Blue */
body .bubble-navy {
    color: #4DA6FF !important;
    text-shadow:
        0 1px 0 #3d94eb,
        0 2px 0 #2d82d7,
        0 3px 0 #1d70c3,
        0 4px 0 #0d5eaf,
        0 5px 0 #004c9b,
        0 6px 8px rgba(77, 166, 255, 0.4),
        0 8px 20px rgba(77, 166, 255, 0.3);
}

/* Red Bubble - Premium Light Red/Coral */
body .bubble-red {
    color: #FF6B6B !important;
    text-shadow:
        0 1px 0 #f05555,
        0 2px 0 #e04040,
        0 3px 0 #d02b2b,
        0 4px 0 #c01616,
        0 5px 0 #b00000,
        0 6px 8px rgba(255, 107, 107, 0.4),
        0 8px 20px rgba(255, 107, 107, 0.3);
}

/* Cyan Bubble - Premium Light Cyan/Sky Blue */
body .bubble-cyan {
    color: #5DD9F5 !important;
    text-shadow:
        0 1px 0 #47cce8,
        0 2px 0 #31bfdb,
        0 3px 0 #1bb2ce,
        0 4px 0 #05a5c1,
        0 5px 0 #0098b4,
        0 6px 8px rgba(93, 217, 245, 0.4),
        0 8px 20px rgba(93, 217, 245, 0.3);
}

/* Purple Bubble - Premium Light Purple/Violet */
body .bubble-purple {
    color: #C77DFF !important;
    text-shadow:
        0 1px 0 #b566f0,
        0 2px 0 #a350e0,
        0 3px 0 #9139d0,
        0 4px 0 #7f22c0,
        0 5px 0 #6d0bb0,
        0 6px 8px rgba(199, 125, 255, 0.4),
        0 8px 20px rgba(199, 125, 255, 0.3);
}

/* Green Bubble - Premium Light Green/Mint */
body .bubble-green {
    color: #5CE68A !important;
    text-shadow:
        0 1px 0 #46d974,
        0 2px 0 #30cc5e,
        0 3px 0 #1abf48,
        0 4px 0 #04b232,
        0 5px 0 #00a520,
        0 6px 8px rgba(92, 230, 138, 0.4),
        0 8px 20px rgba(92, 230, 138, 0.3);
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 768px) {

    /* Adjust Sun Position & Size */
    .sun-container {
        top: -80px;
        /* Move UP to clear header/text area (since relative to content-layer) */
        right: -10%;
        /* Off to the right */
        transform: scale(0.45);
        position: absolute;
    }

    /* Scale down clouds further */
    .cloud {
        transform: scale(0.5);
    }

    /* Adjust specific clouds to maintain relative sizing but smaller */
    .cloud-3 {
        transform: scale(0.4);
    }

    .cloud-4 {
        transform: scale(0.3);
    }

    .cloud-8 {
        transform: scale(0.45);
    }

    /* New Mobile Clouds (make them visible) */
    .cloud-9 {
        display: block !important;
        --w: 150px;
        --h: 60px;
        top: 25%;
        right: -5%;
        opacity: 0.8;
    }

    .cloud-9::after {
        width: 75px;
        height: 75px;
        top: -35px;
        left: 20px;
    }

    .cloud-9::before {
        width: 50px;
        height: 50px;
        top: -20px;
        left: 80px;
    }

    .cloud-10 {
        display: block !important;
        --w: 120px;
        --h: 50px;
        bottom: 15%;
        left: -2%;
        opacity: 0.7;
    }

    .cloud-10::after {
        width: 60px;
        height: 60px;
        top: -30px;
        left: 15px;
    }

    .cloud-11 {
        display: block !important;
        --w: 140px;
        --h: 55px;
        top: 50%;
        left: -8%;
        opacity: 0.6;
    }

    .cloud-11::after {
        width: 70px;
        height: 70px;
        top: -35px;
        left: 10px;
    }

    .cloud-12 {
        display: block !important;
        --w: 130px;
        --h: 50px;
        top: 10%;
        left: 5%;
        opacity: 0.5;
        z-index: -1;
    }

    .cloud-12::after {
        width: 65px;
        height: 65px;
        top: -30px;
        left: 15px;
    }
}

/* --- CHILDREN ILLUSTRATIONS --- */
.child-ill {
    position: absolute;
    z-index: 8;
    /* In front of clouds (z-4/5), behind content (z-10) */
    pointer-events: none;
    filter: none;
    /* No blur */
    opacity: 0.9;
    animation: float-peek 6s ease-in-out infinite;
}

@keyframes float-peek {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-10px) rotate(2deg);
    }
}

/* Specific Positions */
/* Child 1 Removed */

/* Child 2: Right Side - Peeking in */
.child-2 {
    top: 40%;
    right: -60px;
    width: 280px;
    height: auto;
    animation-delay: 2s;
    transform-origin: right center;
}

/* Child 3: Top Left - Peeking down/in */
.child-3 {
    top: 22%;
    /* Moved down from 15% */
    left: -40px;
    width: 220px;
    height: auto;
    animation-delay: 1s;
}

/* Mobile Adjustments for Illustrations */
@media (max-width: 768px) {
    .child-ill {
        opacity: 0.8;
        filter: none;
    }

    /* Even smaller on mobile */
    .child-2 {
        width: 80px;
        right: -15px;
        top: 30%;
    }

    .child-3 {
        width: 70px;
        left: -10px;
        top: 18%;
        /* Moved down from 10% */
    }
}

/* --- TABLET & SMALL LAPTOP RESPONSIVENESS --- */
@media (min-width: 769px) and (max-width: 1024px) {

    /* Sun: Intermediate size & position */
    .sun-container {
        top: -20px;
        /* Not as high up as mobile (-80px), but not default desktop */
        right: -5%;
        transform: scale(0.7);
        /* Perfect middle ground */
        position: absolute;
    }

    /* Clouds: Slightly smaller than desktop massive ones */
    .cloud {
        transform: scale(0.75);
    }

    /* Illustrations: Intermediate scaling */
    .child-2 {
        width: 180px;
        right: -40px;
        top: 35%;
    }

    .child-3 {
        width: 150px;
        left: -30px;
        top: 18%;
        /* Keep the lowered position for navbar clear */
    }
}

/* --- PREMIUM UI ANIMATIONS --- */
@keyframes mild-pulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 15px 30px rgba(245, 130, 31, 0.4);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 25px 50px rgba(245, 130, 31, 0.6);
    }
}

.custom-pulse {
    animation: mild-pulse 3s ease-in-out infinite;
}

/* --- FOOTER STYLES --- */
footer {
    position: relative;
}

footer a {
    transition: color 0.3s ease, transform 0.3s ease;
}

footer a:hover {
    transform: translateY(-2px);
}

/* Footer social icons animation */
footer .w-10.h-10 {
    transition: all 0.3s ease;
}

footer .w-10.h-10:hover {
    transform: translateY(-3px) scale(1.1);
}

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Improve focus states for accessibility */
a:focus-visible,
button:focus-visible {
    outline: 2px solid #F5821F;
    outline-offset: 2px;
}

/* Hide scrollbar but keep functionality */
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}