@import url('https://fonts.googleapis.com/css2?family=Syncopate:wght@400;700&family=Space+Grotesk:wght@300;400;600&display=swap');

:root {
    --color-accent: #00f0ff;
    --font-main: 'Space Grotesk', sans-serif;
    --font-display: 'Syncopate', sans-serif;
    --bg-dark: #050505;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--bg-dark);
    color: #ffffff;
    font-family: var(--font-main);
    cursor: none;
    overflow-x: hidden;
    transition: --color-accent 0.5s ease;
}

body.modal-open { overflow: hidden; }

#app-content {
    will-change: transform, text-shadow;
    width: 100%;
    overflow-x: hidden;
}

#canvas-container {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: -1; pointer-events: none;
    background: radial-gradient(circle at center, #1a1a1a 0%, #000000 100%);
}

#vfx-canvas {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 9999; mix-blend-mode: screen; opacity: 0.8;
}

/* Loader */
#loader {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: #000; z-index: 99999;
    display: flex; justify-content: center; align-items: center; flex-direction: column;
}
.loader-progress {
    width: 0%; height: 100%; background: var(--color-accent); transition: width 0.2s;
}
.section-padding { padding-top: 120px; padding-bottom: 120px; }