/* Global Styles */
:root {
    /* StarCircuit Palette */
    --sc-bg-dark: #1a1a1a;
    --sc-bg-landing: #000000;
    --sc-text-light: #ffffff;
    --sc-accent: #007acc; /* Example accent */
}

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--sc-bg-dark);
    color: var(--sc-text-light);
}

/* Landing Zone - Mobile First */
#landing-zone {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100%;
    background-color: var(--sc-bg-landing);
}

/* Logo Animation */
.fade-in-logo {
    max-width: 70%; /* Smaller on mobile */
    width: 250px;
    opacity: 0;
    animation: fadeIn 2s ease-in forwards;
}

/* Desktop / Tablet Styles */
@media (min-width: 768px) {
    .fade-in-logo {
        max-width: 100%;
        width: 400px; /* Larger details on desktop */
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}