/* Appending creative styling to the end of style.css */

/* Floating Glass Island Navbar */
.floating-nav-wrapper {
    position: fixed;
    top: 25px;
    left: 0;
    width: 100%;
    z-index: 1030;
    pointer-events: none; /* Let clicks pass through wrapper */
}
.floating-glass-navbar {
    width: 92%;
    max-width: 1300px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 50px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.6);
    pointer-events: auto; /* Re-enable clicks for navbar */
    transition: all 0.3s ease;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

/* Nav Link Hover Magic */
.nav-links-custom .nav-link {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    z-index: 1;
}
.nav-links-custom .nav-link::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 120%;
    height: 120%;
    background: rgba(11, 160, 156, 0.1);
    border-radius: 20px;
    z-index: -1;
    transition: transform 0.3s ease;
}
.nav-links-custom .nav-link:hover::before {
    transform: translate(-50%, -50%) scale(1);
}

/* Magic Button (Gradient & Glow) */
.btn-magic {
    background: linear-gradient(135deg, var(--color-teal), #00d2ff);
    border: none;
    box-shadow: 0 4px 15px rgba(11, 160, 156, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.btn-magic:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 25px rgba(11, 160, 156, 0.6);
    color: white !important;
}

/* Menu Button Hover */
.menu-btn-hover {
    transition: all 0.3s ease;
}
.menu-btn-hover:hover {
    background: var(--color-teal) !important;
    color: white !important;
    transform: rotate(90deg);
}

/* CTA Gradient Background */
.cta-gradient-bg {
    background: linear-gradient(135deg, var(--color-navy) 0%, #2b5876 100%);
}

/* Pulse Button */
.pulse-button {
    animation: pulseGlow 2s infinite;
    transition: all 0.3s ease;
}
.pulse-button:hover {
    transform: translateY(-5px) scale(1.05);
}
@keyframes pulseGlow {
    0% { box-shadow: 0 0 0 0 rgba(255, 183, 3, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(255, 183, 3, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 183, 3, 0); }
}

/* Floating Animations */
.float-anim-1 { animation: float 4s ease-in-out infinite; transform: rotate(-5deg); }
.float-anim-2 { animation: float 3.5s ease-in-out infinite 0.5s; transform: rotate(3deg); }
.float-anim-3 { animation: float 4.2s ease-in-out infinite 1s; transform: rotate(-2deg); }

@keyframes float {
    0% { transform: translateY(0px) rotate(-2deg); }
    50% { transform: translateY(-15px) rotate(2deg); }
    100% { transform: translateY(0px) rotate(-2deg); }
}

.flight-animation {
    animation: fly 6s linear infinite;
    transform: rotate(-15deg);
}
@keyframes fly {
    0% { transform: translate(0, 0) rotate(-15deg); }
    50% { transform: translate(10px, -15px) rotate(-10deg); }
    100% { transform: translate(0, 0) rotate(-15deg); }
}
.shadow-glow-icon {
    text-shadow: 0 0 10px rgba(255,255,255,0.8);
}

/* Spinning Stars */
.spin-slow {
    animation: spin 8s linear infinite;
}
.spin-slow-reverse {
    animation: spinReverse 6s linear infinite;
}
@keyframes spin { 100% { transform: rotate(360deg); } }
@keyframes spinReverse { 100% { transform: rotate(-360deg); } }

/* Social Icons */
.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #f0f0f0;
    color: var(--color-navy);
    font-size: 1.2rem;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.social-icon:hover {
    color: white;
    transform: translateY(-5px) scale(1.1);
}
.social-icon.facebook:hover { background: #1877F2; box-shadow: 0 5px 15px rgba(24, 119, 242, 0.4); }
.social-icon.instagram:hover {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    box-shadow: 0 5px 15px rgba(220, 39, 67, 0.4);
}
.social-icon.youtube:hover { background: #FF0000; box-shadow: 0 5px 15px rgba(255, 0, 0, 0.4); }

/* Improved Wave Divider for CTA */
.custom-shape-divider-top .shape-fill {
    fill: #fdfaf6; /* Match testimonials bg color */
}

/* Poster Theme Specifics */
.poster-hero {
    background-color: var(--color-navy); /* Deep Purple */
    overflow: hidden;
    position: relative;
    padding: 160px 0 140px; /* Increased top padding for floating nav */
}
.blob-teal {
    position: absolute;
    background: var(--color-teal); /* Logo Teal */
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    animation: morph 8s ease-in-out infinite;
    z-index: 0;
}
.blob-yellow {
    position: absolute;
    background: var(--color-yellow); /* Logo Yellow */
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    animation: morph 8s ease-in-out infinite reverse;
    z-index: 0;
}
@keyframes morph {
    0%, 100% { border-radius: 40% 60% 70% 30% / 40% 40% 60% 50%; }
    34% { border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%; }
    67% { border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%; }
}
.floating-kid {
    animation: float-kid 5s ease-in-out infinite;
    z-index: 5;
    position: relative;
    max-height: 250px;
}
.floating-kid.delay-1 { animation-delay: 1s; }
.floating-kid.delay-2 { animation-delay: 2s; }
@keyframes float-kid {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

.poster-badge {
    position: absolute;
    z-index: 4;
    animation: float-kid 6s ease-in-out infinite 0.5s;
    font-size: 2.5rem;
    color: white;
}

/* 3-Column Features matching Poster */
.poster-feature-col {
    text-align: center;
    position: relative;
    z-index: 2;
}
.feature-blob {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 2.5rem;
    color: white;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.feature-blob.blob-1 {
    background-color: var(--color-yellow);
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    animation: morph 6s ease-in-out infinite;
}
.feature-blob.blob-2 {
    background-color: var(--color-teal);
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    animation: morph 8s ease-in-out infinite reverse;
}
.feature-blob.blob-3 {
    background-color: var(--color-pink);
    border-radius: 50% 50% 40% 60% / 60% 40% 60% 40%;
    animation: morph 7s ease-in-out infinite alternate;
}
.feature-blob:hover {
    transform: translateY(-15px) scale(1.15);
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}
.poster-feature-title {
    font-weight: 900;
    color: var(--color-navy);
    text-transform: uppercase;
    font-size: 1.2rem;
    letter-spacing: 1px;
}

/* Zero Gravity Gym Elements */
.orbital-ring {
    position: absolute;
    border: 3px dashed rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    animation: spin 20s linear infinite;
    z-index: 1;
}
.orbital-ring-2 {
    position: absolute;
    border: 4px dotted rgba(255, 183, 3, 0.6);
    border-radius: 50%;
    animation: spinReverse 25s linear infinite;
    z-index: 1;
}

.float-organic {
    animation: float-organic 7s ease-in-out infinite;
    position: absolute;
    z-index: 5;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 15px 30px rgba(0,0,0,0.4);
}
.float-organic.delay-1 { animation-delay: 1.5s; }
.float-organic.delay-2 { animation-delay: 3s; }
.float-organic.delay-3 { animation-delay: 4.5s; }
.float-organic.delay-4 { animation-delay: 6s; }
.float-organic.delay-5 { animation-delay: 7.5s; }

/* Custom Badge Styles */
.why-badge:hover {
    transform: scale(1.05) translateX(10px) !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
}
@keyframes float-organic {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50% { transform: translateY(-25px) rotate(3deg); }
}

.accessory {
    animation: float-accessory 10s ease-in-out infinite;
    position: absolute;
    z-index: 6;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}
.accessory.delay-1 { animation-delay: 2s; }
.accessory.delay-2 { animation-delay: 5s; }

@keyframes float-accessory {
    0%, 100% { transform: translateY(0) translateX(0) rotate(0deg); }
    33% { transform: translateY(-30px) translateX(15px) rotate(15deg); }
    66% { transform: translateY(-10px) translateX(-15px) rotate(-10deg); }
}

.blob-pink {
    position: absolute;
    background: var(--color-pink);
    border-radius: 50% 50% 40% 60% / 60% 40% 60% 40%;
    animation: morph 12s ease-in-out infinite alternate;
    z-index: 0;
    opacity: 0.8;
}

/* Mission blob responsive sizing */
.mission-blob {
    width: 250px !important;
    height: 250px !important;
    font-size: 6rem !important;
}
@media (max-width: 767px) {
    .mission-blob {
        width: 130px !important;
        height: 130px !important;
        font-size: 3rem !important;
    }
}

/* Floating navbar mobile: collapse overlays page instead of pushing content */
@media (max-width: 991px) {
    .floating-glass-navbar {
        border-radius: 20px;
        width: 96%;
    }
    .floating-glass-navbar .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(255, 255, 255, 0.98);
        border-radius: 0 0 20px 20px;
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
        padding: 1rem 1.5rem 1.5rem;
        z-index: 100;
        margin-top: 8px;
    }
}

/* Feature blobs on mobile: scale down to fit 3 per row */
@media (max-width: 575px) {
    .feature-blob {
        width: 70px !important;
        height: 70px !important;
        font-size: 1.6rem !important;
    }
    .poster-feature-title {
        font-size: 0.75rem !important;
    }
}

/* Poster hero mobile adjustments */
@media (max-width: 991px) {
    .poster-hero {
        padding: 120px 0 80px;
    }
    .poster-hero .col-lg-7 {
        min-height: 350px !important;
    }
    .poster-hero img.float-organic {
        width: 130px !important;
        height: 130px !important;
    }
    .poster-hero .orbital-ring {
        width: 300px !important;
        height: 300px !important;
    }
    .poster-hero .orbital-ring-2 {
        width: 230px !important;
        height: 230px !important;
    }
}