/**
 * Kitsune Kei Truck - Global Styles & JDM UI
 * Foglio di stile centralizzato per coerenza su tutte le pagine.
 */

:root {
    /* Palette Colori Ufficiale */
    --kitsune-orange: hsl(24, 100%, 50%);
    --inari-red: hsl(0, 100%, 50%);
    --dark-bg: #000;
    --hazard-yellow: #facc15;
    --text-light: #f4f4f5;
}

body {
    background-color: var(--dark-bg);
    color: var(--text-light);
    font-family: 'Inter', sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- TIPOGRAFIA CUSTOM E BRANDING --- */
.bebas { font-family: 'Bebas Neue', cursive; }
.mono { font-family: 'JetBrains Mono', monospace; }

.bg-kitsune { background-color: var(--kitsune-orange) !important; }
.text-kitsune { color: var(--kitsune-orange) !important; }

.k-red { 
    color: var(--inari-red) !important; 
    font-weight: 900;
}

/* --- EFFETTI DI TRANSIZIONE GLOBALI --- */
a, button {
    transition: all 0.3s ease;
}

/* --- EFFETTO FADE-IN LENTO INIZIALE (Fase Zero) --- */
@keyframes cinematic-intro {
    0% { opacity: 0; filter: blur(12px); transform: scale(1.02); }
    100% { opacity: 1; filter: blur(0); transform: scale(1); }
}
.animate-intro {
    animation: cinematic-intro 2.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* --- ODOMETRO (Rallentato) --- */
.odometer-container {
    display: flex;
    background: #000;
    padding: 5px 10px;
    border: 2px solid #333;
    border-radius: 4px;
    overflow: hidden;
    height: 44px;
}
.digit-slot {
    position: relative;
    width: 24px;
    height: 34px;
    overflow: hidden;
    text-align: center;
}
.digit-strip {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
}
.digit-strip.animate {
    /* Transizione a 3 secondi con curva morbida e inesorabile */
    transition: transform 3s cubic-bezier(0.25, 1, 0.5, 1);
}
.digit-strip span {
    display: block;
    height: 34px;
    line-height: 34px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
    font-size: 22px;
    color: white;
}

/* --- ANIMAZIONI VEICOLO E BARRA (Rallentate) --- */
@keyframes soft-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
/* Da 2.5s a 4s per dare peso al veicolo */
.truck-animation { animation: soft-bounce 4s infinite ease-in-out; }

@keyframes hazard-scroll {
    from { background-position: 0 0; }
    to { background-position: 42px 0; }
}
.hazard-bar {
    height: 100%; width: 100%;
    background: repeating-linear-gradient(-45deg, var(--hazard-yellow), var(--hazard-yellow) 15px, #000 15px, #000 30px);
    background-size: 42px 100%;
    /* Velocità dimezzata per un caricamento più epico */
    animation: hazard-scroll 2s linear infinite;
}

/* --- BLOCCO ARANCIONE E FORM INPUT --- */
.orange-block {
    background-color: var(--kitsune-orange);
    transform: skewY(-1.5deg);
    backface-visibility: hidden; /* Riduce la sfocatura sui bordi diagonali */
}
.orange-block > * {
    transform: skewY(1.5deg) translateZ(0); /* translateZ forza l'accelerazione hardware */
    backface-visibility: hidden;
}

.waitlist-input {
    background: rgba(0, 0, 0, 0.15);
    border: 2px solid rgba(0, 0, 0, 0.3);
    color: black;
    font-weight: 800;
    outline: none;
    transition: all 0.4s ease;
}
.waitlist-input:focus {
    border-color: black;
    background: rgba(255, 255, 255, 0.1);
}

#success-msg, #duplicate-msg, #inline-alert { 
    display: none; 
}

/* --- SCROLLBAR JDM --- */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--dark-bg);
}
::-webkit-scrollbar-thumb {
    background: var(--kitsune-orange);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--inari-red);
}