/* ==============================
   GLOBAL STYLE
============================== */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

/* Headlines, Buttons, Branding → Ethnocentric */
h1, h2, h3, h4, h5, h6, header nav a, button, .btn {
    font-family: 'Ethnocentric', Arial, sans-serif !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Normaler Text → Poppins */
body, p, li, span, a:not(header nav a), input, textarea {
    font-family: 'Poppins', Arial, sans-serif !important;
    letter-spacing: 0.02em;
    line-height: 1.7;
}

/* Hintergrund & Feinschliff */
body {
    background: radial-gradient(circle at 50% -20%, #1a1a1a, #0a0a0a 85%);
    color: #f3f3f3;
    -webkit-font-smoothing: antialiased;
}

/* Animations- und Deko-Effekte */
[data-animate] {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}
[data-animate].visible {
    opacity: 1;
    transform: translateY(0);
}

/* Pulse Effekt */
.pulse-red {
    animation: pulseRed 2.5s infinite;
}
@keyframes pulseRed {
    0%, 100% {
        text-shadow: 0 0 20px rgba(229, 9, 20, 0.4), 0 0 40px rgba(229, 9, 20, 0.2);
    }
    50% {
        text-shadow: 0 0 30px rgba(255, 59, 63, 0.8), 0 0 60px rgba(255, 59, 63, 0.5);
    }
}
/* ===============================
   BURNOUT INTRO ANIMATION – Transparent Background + Smooth Reveal
=============================== */
#burnout-overlay {
    position: fixed;
    inset: 0;
    background: transparent; /* kein dunkler Hintergrund mehr */
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
    pointer-events: none; /* Seite ist sofort klickbar */
    animation: revealRight 2s ease-in-out forwards;
}

/* Szene (zentriert) */
.burnout-scene {
    position: relative;
    width: 600px;
    height: 600px;
    transform-origin: center;
}

/* === WHEEL === */
.wheel {
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #1c1c1c 0%, #000 70%);
    border: 18px solid #222;
    box-shadow: inset 0 0 60px #000, 0 0 60px #e50914;
    margin: 0 auto;
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: spinAndDriftRight 1.9s cubic-bezier(0.65, 0.05, 0.36, 1) forwards;
}

/* Logo im Rad */
.wheel img {
    width: 70%;
    opacity: 0.9;
    filter: drop-shadow(0 0 10px rgba(255,255,255,0.3));
    border-radius: 50%;
    animation: logoSpinRight 1.9s cubic-bezier(0.65, 0.05, 0.36, 1) forwards;
}

/* === HEAT FLASH === */
.flash {
    position: absolute;
    top: 0;
    left: -100%;
    width: 80%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,80,80,0.6), rgba(255,0,0,0.2), transparent);
    filter: blur(20px);
    opacity: 0.7;
    animation: flashSweep 1.8s ease-in-out forwards;
    z-index: 4;
}

/* === SMOKE === */
.smoke {
    position: absolute;
    bottom: 50px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.45), transparent 70%);
    opacity: 0;
    filter: blur(30px);
    animation: smokeDrift 1.9s ease-out infinite;
}
.smoke1 { left: 150px; animation-delay: 0s; }
.smoke2 { left: 250px; animation-delay: 0.1s; }
.smoke3 { left: 350px; animation-delay: 0.2s; }

/* === REIFENSPUR === */
.tire-mark {
    position: absolute;
    bottom: 40px;
    left: calc(50% - 150px);
    width: 300px;
    height: 10px;
    background: linear-gradient(to right, rgba(0,0,0,0.85), rgba(0,0,0,0.3));
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
    opacity: 0;
    transform: scaleX(0.2);
    animation: tireMark 1.6s ease-out forwards;
}

/* === KEYFRAMES === */
@keyframes spinAndDriftRight {
    0%   { transform: rotate(0deg) scale(1); opacity: 1; }
    50%  { transform: rotate(720deg) scale(1.05); opacity: 1; }
    100% { transform: rotate(1080deg) scale(1.2) translateX(200vw); opacity: 0; }
}

@keyframes logoSpinRight {
    0%   { transform: rotate(0deg) scale(1); }
    100% { transform: rotate(1080deg) scale(1.2); opacity: 0; }
}

@keyframes smokeDrift {
    0% { transform: translate(0, 0) scale(0.6); opacity: .5; }
    50% { opacity: .8; }
    100% { transform: translate(220px, -40px) scale(1.3); opacity: 0; }
}

@keyframes tireMark {
    0%   { opacity: 0; transform: scaleX(0.2); }
    20%  { opacity: 1; transform: scaleX(1); }
    70%  { opacity: 1; }
    100% { opacity: 0; transform: scaleX(1.1); }
}

@keyframes revealRight {
    0% { transform: translateX(0); opacity: 1; }
    100% { transform: translateX(200vw); opacity: 0; visibility: hidden; }
}

@keyframes flashSweep {
    0%   { left: -100%; opacity: 0.6; }
    40%  { left: 20%; opacity: 1; }
    80%  { left: 120%; opacity: 0.4; }
    100% { left: 200%; opacity: 0; }
}