@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&family=Nunito:wght@400;700&display=swap');

:root {
    /* Color Palette - Warm Bread Theme */
    --bg-color: #FFF8F0;
    /* Warm Cream */
    --text-color: #5D4037;
    /* Deep Coffee */
    --accent-color: #E6A055;
    /* Bread Crust */
    --secondary-color: #F5DCA8;
    /* Dough/Light Yellow */

    /* Typography */
    --font-main: 'Nunito', 'Noto Sans SC', sans-serif;
    --font-size-base: 16px;
    --font-heading-1: 3rem;
    --font-heading-2: 2rem;
    --font-size-hero-super: 5rem;
    /* Super large size for hero text */
}

body {
    margin: 0;
    padding: 0;
    /* height: 400vh; Removed - controlled by .hero-spacer now */
    width: 100vw;
    /* Use Design System Variables */
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-main);
    overflow-x: hidden;
    overflow-y: auto;
    /* Allow vertical scroll */
}

/* Custom Text Selection Color */
::selection {
    background-color: var(--accent-color);
    color: #fff;
}

::-moz-selection {
    background-color: var(--accent-color);
    color: #fff;
}

.hero-spacer {
    /* height: 3500px;  Removed - controlled by JS Dynamic Calculation */
    min-height: 100vh;
    /* Default fall-back */
    pointer-events: none;
    /* Let events pass through if needed */
}

.content-section {
    position: relative;
    z-index: 50;
    /* Higher than .scene to cover it */
    background-color: var(--bg-color);
    /* Solid background to act as a curtain */
    min-height: 100vh;
    /* Ensure it takes up space */
    padding: 4rem 2rem;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.05);
    /* Slight shadow for depth */
    display: flex;
    justify-content: center;
    align-items: center;
}

.content-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Coming Soon Text Styling */
.coming-soon-container {
    grid-column: span 4;
    /* Span all database columns */
    text-align: center;
    padding: 10vh 0;
}

.coming-soon-title {
    font-size: var(--font-heading-2);
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 1rem;
}

.coming-soon-subtitle {
    font-size: var(--font-size-base);
    color: var(--accent-color);
    font-weight: 400;
}

/* Mobile Grid Adaptation */
@media (max-width: 768px) {
    .content-grid {
        grid-template-columns: 1fr;
        /* Single column on mobile */
    }

    .coming-soon-container {
        grid-column: span 1;
    }
}

.scene {
    position: fixed;
    /* Fix the scene so it doesn't scroll away immediately */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    perspective: 1000px;
}

.world {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform-origin: center center;
    will-change: transform;
}

.uplight {
    position: absolute;
    width: 300%;
    height: 300%;
    bottom: -150%;
    left: -100%;
    background: radial-gradient(ellipse at center, rgba(245, 220, 168, 0.6) 0%, transparent 60%);
    transform: rotateX(90deg) translateZ(-300px);
    pointer-events: none;
    z-index: 0;
}

.hero-container {
    position: absolute;
    top: 50%;
    left: 50%;
    /* Combine translate logic in JS, initial state here */
    transform: translate(-50%, -50%) translateZ(0);
    -webkit-transform: translate(-50%, -50%) translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 20;
    transform-style: preserve-3d;
    /* Keep children in 3D space */
}

.main-logo {
    width: 200px;
    height: 200px;
    display: block;
    margin-bottom: 0;
    /* Margin handled by text positioning */
}

.hero-text {
    position: absolute;
    top: calc(50% + 430px);
    /* 50% + 100px(Logo Half) + 30px(Gap) */
    left: 50%;
    /* Center horizontally + GPU hint */
    transform: translateX(-50%) translateZ(0);
    -webkit-transform: translateX(-50%) translateZ(0);

    font-size: var(--font-size-hero-super);
    /* h2 -> Super Large */
    font-weight: 700;
    line-height: 1.1;
    /* Tighten line height for large text */
    margin: 0;
    width: 90vw;
    /* Ensure it spans the viewport */
    max-width: 1000px;
    /* Widen container */
    text-shadow: 0 2px 10px rgba(93, 64, 55, 0.1);
    /* Soft shadow */
    pointer-events: none;
    /* Let clicks pass through if needed */
    /* iOS Safari GPU Hints */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.hero-line {
    display: block;
    opacity: 0;
    transform: translateY(50px);
    -webkit-transform: translateY(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    -webkit-transition: opacity 0.8s ease-out, -webkit-transform 0.8s ease-out;
    margin-bottom: 60px;
    /* Fixed pixel spacing for consistent rhythm */
    /* iOS Safari GPU Hints */
    will-change: transform, opacity;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.hero-line.visible {
    opacity: 1;
    transform: translateY(0);
    -webkit-transform: translateY(0);
}

.falling-emoji {
    position: absolute;
    /* Start above viewport, X will be set via var(--x), Z via var(--z) */
    top: -100px;
    left: 0;
    user-select: none;
    pointer-events: none;
    /* Dynamic blur based on Z-depth */
    filter: blur(var(--blur));
    will-change: transform, opacity;
}

@keyframes fall {
    0% {
        /* Fall from top, use CSS vars for X and Z */
        transform: translate3d(var(--x), -100px, var(--z)) rotate(0deg);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    85% {
        opacity: 1;
    }

    100% {
        /* Fall to bottom */
        transform: translate3d(var(--x), 150vh, var(--z)) rotate(360deg);
        opacity: 0;
    }
}

/* Mobile Adaptation */
@media (max-width: 768px) {

    /* Mobile Adaptation */
    .hero-spacer {
        /* JS handles height dynamically */
    }

    :root {
        /* Reduce Hero Font Size on Mobile (5rem -> 2.8rem) */
        --font-size-hero-super: 3.2rem;
        --font-heading-1: 2rem;
    }

    .hero-container {
        width: 150px;
        /* Smaller logo on mobile */
        height: 150px;
    }

    .uplight {
        transform: rotateX(90deg) translateZ(-450px);
        /* Adjust scale if too large */
        bottom: -100%;
        /* Pull up slightly */
    }

    /* iOS Performance: Disable hero-line transitions on mobile */
    .hero-line {
        transition: none !important;
        -webkit-transition: none !important;
        opacity: 1;
        transform: translateY(0);
        -webkit-transform: translateY(0);
    }

    /* Mobile Hybrid Mode: 3D breads + 2D text */
    /* Hero breaks out of 3D context for smooth scrolling */
    .hero-container {
        transform-style: flat;
        -webkit-transform-style: flat;
    }

    .hero-text {
        transform-style: flat;
        -webkit-transform-style: flat;
    }

    /* Blur is active on mobile (filter: none removed) */
}

/* Fixed Global UI Frame */
.global-ui {
    pointer-events: none;
    /* Allow clicks to pass through to content */
}

.ui-corner {
    position: fixed;
    z-index: 9999;
    /* Ensure it is absolutely on top of everything */
    /* Always on top of everything (Hero + Content) */
    font-size: 12px;
    font-weight: 700;
    color: var(--text-color);
    padding: 1.5rem;
    opacity: 0.6;
    /* Subtle appearance */
    text-transform: uppercase;
    letter-spacing: 1px;
}

.top-left {
    top: max(0px, env(safe-area-inset-top));
    left: max(0px, env(safe-area-inset-left));
}

.bottom-left {
    bottom: max(0px, env(safe-area-inset-bottom));
    left: max(0px, env(safe-area-inset-left));
}

.bottom-right {
    bottom: max(0px, env(safe-area-inset-bottom));
    right: max(0px, env(safe-area-inset-right));
}

.top-right {
    top: max(0px, env(safe-area-inset-top));
    right: max(0px, env(safe-area-inset-right));
    text-align: right;
    pointer-events: auto;
    /* Enable clicks on links */
}

.top-right a {
    color: var(--text-color);
    text-decoration: none;
    margin-left: 2rem;
    position: relative;
    transition: color 0.3s ease;
}

.top-right a:hover {
    color: var(--accent-color);
}

/* Hide Navigation on Mobile */
@media (max-width: 768px) {
    .top-right {
        display: none;
    }
}