/* 1. Global Variables (The "Source of Truth") */
:root {
    --brand-cream: #FFF8F0;
    --brand-red: #E63946;
    --stage-white: #fffdfb;
    --text-dark: #1D1D1F;
}

/* 2. Base Document Rules */
html {
    /* This ensures the 'Jump Links' from your Navbar slide smoothly */
    scroll-behavior: smooth;
}

body {
    font-family: 'Fredoka', sans-serif;
    background-color: var(--brand-cream);
    color: var(--text-dark);
    margin: 0;
    padding: 0;
}

/* 3. Utility Components */

/* The Bubbly Background Shape for Product Blobs */
.blob {
    border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
}

/* Standard Section Spacing */
section {
    position: relative;
    overflow: hidden;
}

/* 4. Scrollbar Styling (Optional: Makes it look more premium) */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--brand-cream);
}

::-webkit-scrollbar-thumb {
    background: var(--brand-red);
    border-radius: 10px;
}

/* 5. Skeleton Loading State */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #f8f8f8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.animate-modal-up {
    animation: modal-up 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modal-up {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 6. Scroll Reveal Animations */
.reveal-hidden {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-active {
    opacity: 1;
    transform: translateY(0);
}