/* CSS Variables - Light Mode */
:root {
    --bg-primary: #f0f2f5;
    --bg-mesh-1: rgba(255, 182, 193, 0.4); /* Soft pink */
    --bg-mesh-2: rgba(173, 216, 230, 0.4); /* Soft blue */
    --bg-mesh-3: rgba(221, 160, 221, 0.4); /* Soft purple */
}

/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden; /* Hide scrollbars since it's just an object */
    background-color: var(--bg-primary);
    font-family: 'Outfit', sans-serif;
}

/* Mesh Gradient Background Animation */
body::before, body::after, .mesh-glow {
    content: '';
    position: absolute;
    width: 60vw;
    height: 60vw;
    border-radius: 50%;
    filter: blur(80px);
    z-index: -1;
    animation: float 20s infinite ease-in-out alternate;
}

body::before {
    background: var(--bg-mesh-1);
    top: -10%;
    left: -10%;
    animation-delay: 0s;
}

body::after {
    background: var(--bg-mesh-2);
    bottom: -10%;
    right: -10%;
    animation-delay: -5s;
}

/* Optional third glow if we want to add an element for it */
.hero-section::before {
    content: '';
    position: absolute;
    width: 50vw;
    height: 50vw;
    border-radius: 50%;
    background: var(--bg-mesh-3);
    top: 20%;
    left: 20%;
    filter: blur(100px);
    z-index: -1;
    animation: float 25s infinite ease-in-out alternate-reverse;
}

@keyframes float {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(10%, 10%) scale(1.1); }
    100% { transform: translate(-5%, 15%) scale(0.9); }
}

/* Full Screen Hero Container */
.hero-section {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* Visual / Spline Container */
.hero-visual {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
    animation: fadeIn 2s ease-out forwards;
}

.spline-model {
    width: 100%;
    height: 100%;
    cursor: grab;
    /* Optional: drop shadow to make the 3D object pop more against light background */
    filter: drop-shadow(0px 20px 40px rgba(0, 0, 0, 0.05));
}

.spline-model:active {
    cursor: grabbing;
}

/* Hide the "Built with Spline" logo */
spline-viewer::part(logo) {
    display: none !important;
}

/* Clean Vignette to draw attention to center */
.spline-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Allows interaction to pass through */
    background: radial-gradient(circle at center, transparent 30%, rgba(240, 242, 245, 0.6) 100%);
    z-index: 6;
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}