/* Design Tokens (shared/design/tokens.css → livequiz/public/design/tokens.css) */
@import url('/design/tokens.css');

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

@font-face {
    font-family: 'Bebas Neue';
    src: url('/fonts/BebasNeue-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* === BASE === */
*, *::before, *::after { box-sizing: border-box; }

body {
    background:
        radial-gradient(ellipse 70% 60% at 80% 20%, rgba(91,184,245,0.07) 0%, transparent 55%),
        radial-gradient(ellipse 50% 50% at 10% 90%, rgba(221,255,0,0.05) 0%, transparent 50%),
        #0D0D0D;
    background-attachment: fixed;
    color: #F8F6F1;
    font-family: 'Inter Tight', sans-serif;
    font-weight: 300;
    min-height: 100vh;
}

/* === ROAD ANIMATION === */
.road {
    position: fixed;
    bottom: 0;
    left: 60%;
    transform: translateX(-50%);
    width: 4px;
    height: 100vh;
    overflow: hidden;
    opacity: 0.07;
    z-index: 0;
    pointer-events: none;
}
.road::before {
    content: '';
    position: absolute;
    top: -100%;
    width: 100%;
    height: 200%;
    background: repeating-linear-gradient(
        to bottom,
        #5BB8F5 0, #5BB8F5 60px,
        transparent 60px, transparent 120px
    );
    animation: drive 2.4s linear infinite;
}
@keyframes drive {
    to { transform: translateY(120px); }
}

/* === GRAIN OVERLAY === */
/* Elternelement braucht position: relative und overflow: hidden */
.grain-overlay {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
.grain-overlay::before {
    content: '';
    position: absolute;
    inset: -50%;
    width: 200%;
    height: 200%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    animation: grain 8s steps(10) infinite;
    opacity: 0.06;
}
@keyframes grain {
    0%, 100% { transform: translate(0, 0); }
    10%      { transform: translate(-2%, -3%); }
    20%      { transform: translate(3%, 2%); }
    30%      { transform: translate(-1%, 4%); }
    40%      { transform: translate(2%, -1%); }
    50%      { transform: translate(-3%, 3%); }
    60%      { transform: translate(4%, -2%); }
    70%      { transform: translate(-2%, 1%); }
    80%      { transform: translate(3%, 4%); }
    90%      { transform: translate(-4%, -1%); }
}

/* === SHARED KEYFRAMES === */
@keyframes fade-up {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* === SITE LOGO === */
.site-logo {
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 1060;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    letter-spacing: 0.05em;
    color: #F8F6F1;
    text-decoration: none;
}
.site-logo span { color: #DDFF00; }