:root {
    --gold: #d4af37; /* Dourado Metálico, sofisticado */
    --dark: #020202; /* Preto profundo */
    --modal-perspective: 2500px;
}

body {
    background-color: var(--dark);
    font-family: 'Montserrat', sans-serif;
    overflow-x: hidden;
    color: #e5e5e5;
    -webkit-font-smoothing: antialiased;
}

/* TYPOGRAPHY PREMIUM */
h1, h2, h3, .logo, .nav-link, .btn-hero-explore, .btn-luxury-submit, .btn-sport-vip, .mobile-nav-link {
    font-family: 'Oswald', sans-serif;
}

/* --- ADIÇÃO: TÍTULO HERO PREMIUM --- */
#hero h1 {
    mix-blend-mode: normal !important; /* Remove transparência para visual sólido */
    text-shadow: 0 10px 30px rgba(0,0,0,0.5); /* Sombra elegante */
}

/* UTILS 3D */
.perspective-container { perspective: 2500px; transform-style: preserve-3d; }
.perspective-content { transform-style: preserve-3d; }
.transform-style-3d { transform-style: preserve-3d; }

/* --- ATUALIZAÇÃO DE CONTRASTE --- */
.text-stroke-white { 
    -webkit-text-stroke: 1px rgba(255,255,255,0.8); 
    color: rgba(255,255,255,0.1); 
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

/* MELHORIA DE CONTRASTE NO VAZADO (HOLLOW) */
.text-outline-gold { 
    /* Aumentei levemente a espessura da borda para 1.5px para mais definição */
    -webkit-text-stroke: 1.5px var(--gold); 
    color: transparent; /* Mantém o estilo vazado */
    font-weight: 900;
    /* O SEGREDO DO CONTRASTE: Drop-shadow no filtro.
       Isso cria uma sombra escura atrás da borda dourada, 
       fazendo ela "saltar" do fundo escuro. */
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.9)); 
}

/* FX LAYERS */
.noise-overlay {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.5'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
}

.vignette-radial { background: radial-gradient(circle, transparent 40%, #000 130%); }

/* BUTTONS SPORT STYLE */
.btn-hero-explore {
    display: inline-block; /* padding definido no HTML com classes responsivas */
    border: 1px solid rgba(255,255,255,0.15); 
    text-transform: uppercase; letter-spacing: 3px; position: relative; overflow: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); transform: skewX(-10deg);
}
.btn-hero-explore > span { display: inline-block; transform: skewX(10deg); }
.btn-hero-explore:hover { border-color: #fff; box-shadow: 0 0 20px rgba(255,255,255,0.1); }

.btn-sport-vip {
    padding: 0.7rem 1.8rem; border: 1px solid rgba(212, 175, 55, 0.3); color: var(--gold);
    font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px;
    position: relative; overflow: hidden; display: inline-block; transform: skewX(-10deg); transition: all 0.3s ease;
}
.btn-sport-vip > span { display: inline-block; transform: skewX(10deg); }

.btn-luxury-submit {
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* CARDS INVENTORY */
.car-card-3d-wrapper { perspective: 2000px; height: 100%; }
.car-card-inner {
    position: relative; transform-style: preserve-3d; transition: transform 0.2s cubic-bezier(0.2, 0, 0.2, 1);
    will-change: transform; background: #050505;
}

/* CAR DETAILS PAGE (SPA) */
#car-details-view {
    will-change: opacity, transform;
}
.thumb-active { border-color: var(--gold); opacity: 1; transform: scale(1.05); }
.thumb-inactive { border-color: transparent; opacity: 0.5; }
.thumb-inactive:hover { opacity: 1; border-color: rgba(255,255,255,0.3); }

.spec-item {
    border-left: 2px solid rgba(212, 175, 55, 0.3); /* Gold light border */
    padding-left: 1.2rem;
    transition: border-color 0.3s ease;
}
.spec-item:hover { border-color: var(--gold); }

/* SCROLLBAR CUSTOM */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { background: #222; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* NAV */
.nav-link { position: relative; opacity: 0.6; transition: opacity 0.3s; }
.nav-link:hover, .nav-link.active { opacity: 1; color: var(--gold); text-shadow: 0 0 10px rgba(212,175,55,0.3); }
.nav-link::after {
    content: ''; display: block; width: 0%; height: 2px; background: var(--gold);
    transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1); margin-top: 6px; transform: skewX(-20deg);
}
.nav-link.active::after { width: 100%; }

/* LIGHT SWEEP ANIMATION */
.light-sweep { pointer-events: none; mix-blend-mode: overlay; will-change: transform; }
.ease-expo { transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }

/* INSTITUTIONAL 3D SCROLL & STYLES */
.inst-card-premium {
    transform-style: preserve-3d;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s;
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5);
}

.inst-card-premium:hover {
    border-color: var(--gold);
    transform: translateY(-10px) scale(1.02);
}

.inst-bottom-cta {
    opacity: 0;
    animation: fadeIn 1s ease-out 1s forwards;
}

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

@keyframes progress {
    0% { transform: scaleX(0); }
    100% { transform: scaleX(1); }
}

.animate-progress {
    animation: progress 3s infinite linear;
}

.animate-pulse-slow {
    animation: pulse 5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.text-stroke-white {
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.3);
    color: transparent;
}

/* --- FIX HERO BUG: WEBGL VISIBILITY --- */
#webgl-hero-container {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 1;
    mix-blend-mode: normal;
}

/* --- MOBILE SPECIFIC STYLES --- */
.hamburger-line {
    transform-origin: center;
}

/* Animação do Hamburger para X */
button.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 6px);
}
button.active .hamburger-line:nth-child(2) {
    opacity: 0;
    transform: translateX(10px);
}
button.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -6px);
    width: 2rem; /* ajusta largura para ficar simétrico */
}

/* Mobile Menu Links */
.mobile-nav-link {
    transform: skewX(-10deg);
}

/* Evitar overflow no mobile */
@media (max-width: 1023px) {
    body, html {
        max-width: 100vw;
        overflow-x: hidden;
    }
    
    #inst-track {
        transform: none !important; /* Reseta transform do GSAP horizontal scroll */
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    
    .inst-card-premium {
        width: 100% !important; /* Cards full width */
    }
}