/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* ===== GLOBAL ===== */
body {
    margin: 0;
    font-family: 'Segoe UI', 'Nunito', sans-serif;
    background: linear-gradient(to bottom, #cfefff, #eaf7ff, #ffffff);
    color: #3a4a5a;
    overflow-x: hidden;
}

/* ===== HEADER ===== */
header {
    text-align: center;
    margin-top: 40px;
}

.title-cloud {
    background: rgba(255,255,255,0.75);
    padding: 30px 40px;
    border-radius: 40px;
    display: inline-block;
    box-shadow: 0 10px 25px rgba(150,200,255,0.4);
    backdrop-filter: blur(6px);
}

.title-cloud h1 {
    margin: 0;
    font-size: 2.8em;
    color: #5aa9e6;
}

.subtitle {
    margin-top: 10px;
    font-size: 1.1em;
    color: #7bb7e8;
}

/* ===== NAV ===== */
nav {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin: 30px 0;
}

nav a {
    text-decoration: none;
    background: #ffffff;
    padding: 12px 25px;
    border-radius: 999px;
    color: #5aa9e6;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: 0.25s ease;
}

nav a:hover {
    background: #e6f7ff;
    transform: translateY(-4px);
    box-shadow: 0 6px 18px rgba(90,169,230,0.4);
}

/* ===== CONTAINER ===== */
.container {
    width: 80%;
    margin: auto;
    padding-bottom: 60px;
}

/* ===== CARDS ===== */
.card {
    background: rgba(255,255,255,0.85);
    padding: 25px;
    margin: 25px 0;
    border-radius: 30px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    backdrop-filter: blur(4px);
    transition: 0.3s;
}

.card:hover {
    transform: translateY(-6px);
}

/* ===== FLOATING CLOUDS (PASTEL + WHIMSICAL) ===== */

.cloud {
    position: fixed;
    z-index: -1; /* keeps clouds behind content */
    background: radial-gradient(circle at 30% 30%, #ffffff 40%, #dff3ff 100%);
    opacity: 0.85;
    border-radius: 50%;
    filter: blur(1px);
    animation: float 55s linear infinite;
}

/* Sizes */
.cloud-lg { width: 260px; height: 140px; }
.cloud-md { width: 180px; height: 100px; }
.cloud-sm { width: 120px; height: 70px; }

/* Extra fluff */
.cloud::before,
.cloud::after {
    content: "";
    position: absolute;
    background: radial-gradient(circle at 40% 40%, #ffffff 40%, #e8f7ff 100%);
    border-radius: 50%;
    opacity: 0.9;
}

.cloud-lg::before { width: 150px; height: 150px; top: -50px; left: 20px; }
.cloud-lg::after  { width: 180px; height: 180px; top: -60px; right: 10px; }

.cloud-md::before { width: 100px; height: 100px; top: -35px; left: 10px; }
.cloud-md::after  { width: 120px; height: 120px; top: -45px; right: 5px; }

.cloud-sm::before { width: 70px; height: 70px; top: -25px; left: 5px; }
.cloud-sm::after  { width: 80px; height: 80px; top: -30px; right: 5px; }

@keyframes float {
    from { transform: translateX(-300px); }
    to   { transform: translateX(120vw); }
}

/* ===== CLOUD PLACEMENT (ADD THESE DIVS IN YOUR HTML) ===== */
/* These positions control where clouds appear on the screen */

.cloud-placement-1 { top: 8%; left: -15%; animation-delay: 0s; }
.cloud-placement-2 { top: 25%; left: -20%; animation-delay: 6s; }
.cloud-placement-3 { top: 45%; left: -10%; animation-delay: 12s; }

.cloud-placement-4 { top: 60%; left: -18%; animation-delay: 18s; }
.cloud-placement-5 { top: 75%; left: -12%; animation-delay: 24s; }
.cloud-placement-6 { top: 85%; left: -20%; animation-delay: 30s; }

/* ===== RAINBOW ARC BEHIND HEADER ===== */
.header-wrapper {
    position: relative;
    text-align: center;
    margin-top: 40px;
}

.rainbow-arc {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 420px;
    height: 220px;
    background: conic-gradient(
        from 180deg,
        #ffb3ba,
        #ffdfba,
        #ffffba,
        #baffc9,
        #bae1ff,
        #ffb3ba
    );
    border-radius: 50% 50% 0 0;
    opacity: 0.35;
    filter: blur(4px);
    z-index: -2;
}

/* ===== TITLE CLOUD (FOREGROUND) ===== */
.title-cloud {
    background: rgba(255,255,255,0.8);
    padding: 30px 40px;
    border-radius: 40px;
    display: inline-block;
    box-shadow: 0 10px 25px rgba(150,200,255,0.4);
    backdrop-filter: blur(6px);
    position: relative;
    z-index: 1;
}

/* ===== CLOUD-SHEEP MASCOT ===== */
.mascot-cloud-sheep {
    position: absolute;
    right: -80px;
    top: -10px;
    width: 140px;
    height: 90px;
    background: radial-gradient(circle at 30% 30%, #ffffff 40%, #e6f4ff 100%);
    border-radius: 50px;
    box-shadow: 0 6px 18px rgba(150,200,255,0.6);
    animation: mascot-float 6s ease-in-out infinite;
}

/* cloud blobs */
.mascot-cloud-sheep::before,
.mascot-cloud-sheep::after {
    content: "";
    position: absolute;
    background: radial-gradient(circle at 40% 40%, #ffffff 40%, #eaf7ff 100%);
    border-radius: 50%;
}

.mascot-cloud-sheep::before {
    width: 70px;
    height: 70px;
    top: -25px;
    left: 5px;
}

.mascot-cloud-sheep::after {
    width: 80px;
    height: 80px;
    top: -30px;
    right: 0;
}

/* sheep face */
.mascot-face {
    position: absolute;
    top: 20px;
    left: 40px;
    width: 60px;
    height: 50px;
    background: #fff7f0;
    border-radius: 50px;
    box-shadow: 0 0 0 2px #ffd6c2;
}

/* eyes */
.mascot-eye {
    position: absolute;
    top: 18px;
    width: 8px;
    height: 8px;
    background: #444;
    border-radius: 50%;
}

.mascot-eye.left { left: 14px; }
.mascot-eye.right { right: 14px; }

/* blush */
.mascot-blush {
    position: absolute;
    top: 28px;
    width: 10px;
    height: 6px;
    background: #ffb3ba;
    border-radius: 50%;
    opacity: 0.7;
}

.mascot-blush.left { left: 8px; }
.mascot-blush.right { right: 8px; }

/* ears */
.mascot-ear {
    position: absolute;
    top: 8px;
    width: 16px;
    height: 26px;
    background: #fff7f0;
    border-radius: 50px;
    box-shadow: 0 0 0 2px #ffd6c2;
}

.mascot-ear.left { left: -8px; transform: rotate(-15deg); }
.mascot-ear.right { right: -8px; transform: rotate(15deg); }

/* float animation */
@keyframes mascot-float {
    0%   { transform: translateY(0px); }
    50%  { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

/* ===== SAKURA PETALS (BACKGROUND DRIFT) ===== */
.petal {
    position: fixed;
    width: 14px;
    height: 18px;
    background: #ffb3ba;
    border-radius: 70% 30% 70% 30%;
    opacity: 0.7;
    z-index: -2;
    animation: petal-drift 12s linear infinite;
}

@keyframes petal-drift {
    0%   { transform: translate(0, -20px) rotate(0deg); opacity: 0; }
    20%  { opacity: 0.9; }
    100% { transform: translate(-80px, 120vh) rotate(120deg); opacity: 0; }
}

/* ===== WINGS (UNICODE FOREGROUND FLOATERS) ===== */
.wing {
    position: fixed;
    font-size: 1.4rem;
    opacity: 0.8;
    animation: wing-float 10s ease-in-out infinite;
    z-index: 0;
}

@keyframes wing-float {
    0%   { transform: translateY(0px); }
    50%  { transform: translateY(-12px); }
    100% { transform: translateY(0px); }
}

/* ===== BUBBLES (BACKGROUND) ===== */
.bubble {
    position: fixed;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.8);
    background: radial-gradient(circle, rgba(255,255,255,0.6) 30%, rgba(200,230,255,0.1) 100%);
    opacity: 0.7;
    z-index: -2;
    animation: bubble-rise 14s linear infinite;
}

@keyframes bubble-rise {
    0%   { transform: translateY(40px); opacity: 0; }
    20%  { opacity: 0.9; }
    100% { transform: translateY(-120vh); opacity: 0; }
}

/* ===== SPARKLE TRAILS NEAR CLOUDS ===== */
.sparkle {
    position: fixed;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, #ffffff 40%, #d0eaff 100%);
    border-radius: 50%;
    opacity: 0.8;
    animation: sparkle 3s infinite ease-in-out;
    z-index: -1;
}

@keyframes sparkle {
    0%   { transform: scale(0.5); opacity: 0; }
    50%  { transform: scale(1); opacity: 1; }
    100% { transform: scale(0.5); opacity: 0; }
}

/* ===== CARNIVAL SILHOUETTES (BOTTOM DECOR) ===== */
.carnival-strip {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    height: 90px;
    background: linear-gradient(to top, rgba(186,225,255,0.9), rgba(186,225,255,0));
    border-radius: 40px 40px 0 0;
    z-index: -1;
}

.carnival-icon {
    position: absolute;
    font-size: 1.8rem;
    opacity: 0.9;
    bottom: 18px;
}

.carnival-icon.ferris { left: 12%; }
.carnival-icon.carousel { left: 72%; }


/* ===== FOOTER ===== */
footer {
    text-align: center;
    padding: 25px;
    color: #7aaed6;
    font-size: 0.9em;
}