:root {
    --bg-color: #0e0e0e;
    /* Deep dark grey/black */
    --text-primary: #f0f0f0;
    --text-secondary: #888888;
    --steel-gold: #D4AF37;
    /* Standard gold often used in premium branding */
    --font-main: 'Outfit', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--bg-color);
    color: var(--text-primary);
    font-family: var(--font-main);
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    /* No scroll for this starter "explore" view */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: crosshair;
    /* Adds to the "explore" feel */
}

/* --- Logo Styling --- */
.logo-container {
    position: absolute;
    top: 30px;
    left: 30px;
    z-index: 100;
}

.brand-logo {
    display: block;
    width: 180px;
    /* Base size, adjust as needed */
    height: auto;

    /* 
       New logo is transparent.
    */
    /* mix-blend-mode: screen; Removed for transparent logo */
    /* opacity: 0.9; */
    /* filter: contrast(1.1); Removed for transparent logo */
}

/* --- Content Styling (3D Universe) --- */
/* The Viewport: The camera lens */
#viewport {
    position: relative;
    width: 100vw;
    height: 100vh;
    perspective: 1000px;
    /* Determines the intensity of the 3D effect */
    overflow: hidden;
    z-index: 10;
    pointer-events: none;
    /* Allow clicks to pass through if empty */
}

/* The Universe: The world containing everything */
#universe {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform: translate3d(0, 0, 0);
    /* Initial state */
    /* Check implementation_plan.md for the cubic-bezier tweak */
    /* transition: transform 2.5s cubic-bezier(0.7, 0, 0.3, 1); */
    /* Let's try a custom 'Anticipation' curve: Pull back slightly then SHOOT forward */
    transition: transform 2.0s cubic-bezier(0.6, 0.05, 0.2, 0.95);
    will-change: transform;
    pointer-events: none;
    /* Allow clicks to pass through */
}

/* Items in space */
.explore-item {
    position: absolute;
    top: 50%;
    left: 50%;
    /* Centering offset so coordinates map to center of element */
    transform-origin: center center;
    /* Note: Final transform is applied via inline styles in JS */
    color: var(--text-primary);
    text-align: center;
    pointer-events: auto;
    /* IMPORTANT: Re-enable clicks on content */
    /* Use flex to center content within the item's box if needed */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 0;
    height: 0;
    overflow: visible;
    /* Allow text to spill out */
}

/* Typography Specifics */
.main-title {
    font-size: 8vw;
    line-height: 0.9;
    font-weight: 700;
    letter-spacing: -2px;
    background: linear-gradient(135deg, #ffffff 0%, #777777 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: opacity 0.5s;
}

.tagline {
    font-size: 1.5rem;
    font-weight: 200;
    color: var(--steel-gold);
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-top: 20px;
    white-space: nowrap;
}

.topic-label {
    font-size: 2rem;
    /* Will appear smaller if far away */
    color: var(--text-secondary);
    /* Dimmed by default */
    letter-spacing: 2px;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.3s, transform 0.3s;
    text-transform: uppercase;
    font-weight: 300;
    border-bottom: 1px solid transparent;
}

.topic-label:hover {
    color: var(--steel-gold);
    border-bottom: 1px solid var(--steel-gold);
    transform: scale(1.1);
}

/* Stars / Dust */
.star {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 4px;
    background: white;
    border-radius: 50%;
    opacity: 0.6;
    transform: translate3d(var(--x), var(--y), var(--z));
}

/* --- Asset Protection --- */
.img-protected {
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
}

/* --- Ambient Background --- */
.ambient-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60vw;
    height: 60vw;
    background: radial-gradient(circle, rgba(50, 50, 50, 0.3) 0%, rgba(14, 14, 14, 0) 70%);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1;
    filter: blur(50px);
}

/* --- Mobile Optimization --- */
@media (max-width: 768px) {
    .main-title {
        font-size: 12vw;
        /* Larger rel to screen on mobile */
    }

    .tagline {
        font-size: 1rem;
        letter-spacing: 2px;
    }

    .topic-label {
        font-size: 1.2rem;
        /* Smaller topics so they don't overlap too much */
    }

    /* Adjust perspective slightly for mobile? */
    #viewport {
        perspective: 800px;
    }
}