/* App Content */
.app-content {
    padding: 1.25rem;
    padding-bottom: 55px !important;
}

/* Mobile responsive styles */
@media (max-width: 767.98px) {
    .app-content {
        padding: 15px;
        padding-bottom: 55px !important;
    }

    .page-header {
        margin-bottom: 15px;
        font-size: 1.5rem;
    }
} 

/* Mobile Bottom Navigation Bar */
#mobile-nav-wrapper .mobile-nav-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    
    height: 84px;
    z-index: 1040;
    background-color: var(--bs-body-bg);
    border-top: 1px solid var(--bs-border-color);
    box-shadow: 0 -2px 5px rgba(0,0,0,0.05);

    display: block !important;
}

@media (min-width: 768px) {
    #mobile-nav-wrapper .mobile-nav-bar {
        display: none !important;
    }
}

/* ===== Home Page Styles ===== */

/* Global overflow fix */
body {
    overflow-x: hidden !important;
}

section {
    overflow-x: hidden !important;
}

/* Rocket Wrapper */
.rocket-wrapper {
    position: absolute;
    top: 30%;
    right: 5%;
    z-index: 10;
    animation: rocketDrift 7s cubic-bezier(.45,.05,.25,.95) infinite;
}

#rocket {
    width: 640px;
    animation: rocketPulse 2s ease-in-out infinite;
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.3));
    will-change: transform;
    position: relative;
    z-index: 2;
    transform-origin: 30% 60%;
}

@keyframes rocketDrift {
    0%   { transform: translate3d(0, 0, 0) rotate(-5deg); }
    25%  { transform: translate3d(6px, -10px, 0) rotate(-3.5deg); }
    50%  { transform: translate3d(10px, -16px, 0) rotate(-2deg); }
    75%  { transform: translate3d(6px, -10px, 0) rotate(-3.5deg); }
    100% { transform: translate3d(0, 0, 0) rotate(-5deg); }
}

@keyframes rocketShake {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
    50% { transform: translate3d(1px, -0.5px, 0) rotate(-0.3deg); }
}

@keyframes rocketPulse {
    0%, 100% { opacity: .96; }
    50%      { opacity: 1; }
}

/* Falling Clouds */
.falling-cloud {
    position: absolute;
    filter: brightness(2.1) contrast(1.05);
    opacity: 0;
    will-change: transform, opacity;
    z-index: 1;
    pointer-events: none;
}

.cloud-1 {
    width: 210px;
    right: 52%;
    left: auto;
    top: 28%;
    animation: cloudAlongLeft 6s linear infinite;
    animation-delay: -4s;
}

.cloud-2 {
    width: 250px;
    right: -8%;
    left: auto;
    top: 26%;
    animation: cloudAlongRight 7s linear infinite;
    animation-delay: -7s;
}

@keyframes cloudAlongLeft {
    0%    { transform: translate3d(0, 0, 0); opacity: 0; }
    10%   { opacity: .65; }
    90%   { opacity: .6; }
    100%  { transform: translate3d(-20%, 65vh, 0); opacity: 0; }
}

@keyframes cloudAlongRight {
    0%    { transform: translate3d(0, 0, 0); opacity: 0; }
    10%   { opacity: .65; }
    90%   { opacity: .6; }
    100%  { transform: translate3d(20%, 65vh, 0); opacity: 0; }
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
    .rocket-wrapper,
    .falling-cloud {
        display: none;
    }
    /* Add safe space for wave on mobile */
    #home { padding-bottom: 5rem; padding-top: 1rem; }
    #home .position-absolute.bottom-0 svg { height: 48px; }
}

/* Extra mobile spacing to prevent wave cutting off content */
@media (max-width: 767.98px) {
    #home { padding-bottom: 6rem; }
    #home .position-absolute.bottom-0 svg { height: 40px; }
    #home .row { min-height: auto; padding-bottom: 2rem; }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    #rocket {
        width: 560px;
    }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    #rocket {
        width: 600px;
    }
}