/* Speed Motos — app.css
 * Tokens, glassmorphism, gradientes, animações racing.
 * Preserva fielmente o design do projeto React original.
 */

/* Base ----------------------------------------------------- */
html { scroll-behavior: smooth; }
body {
    background-color: var(--sm-background, #0F1422);
    color: var(--sm-foreground, #F7F8FA);
    font-family: 'Inter', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    background-image:
        radial-gradient(ellipse 80% 50% at 15% -10%, color-mix(in oklab, var(--sm-primary) 28%, transparent), transparent 60%),
        radial-gradient(ellipse 70% 50% at 90% 10%, color-mix(in oklab, var(--sm-accent) 22%, transparent), transparent 60%),
        radial-gradient(ellipse 60% 40% at 50% 110%, color-mix(in oklab, var(--sm-accent) 14%, transparent), transparent);
}
h1, h2, h3, h4 { font-family: 'Space Grotesk', system-ui, sans-serif; letter-spacing: -0.02em; }

/* Glass utilities ----------------------------------------- */
.glass {
    background: linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid rgba(255,255,255,.08);
}
.glass-strong {
    background: linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
    backdrop-filter: blur(28px) saturate(160%);
    -webkit-backdrop-filter: blur(28px) saturate(160%);
    border: 1px solid rgba(255,255,255,.12);
}

/* Text gradients ------------------------------------------ */
.text-gradient-accent  { background: linear-gradient(135deg, var(--sm-accent), #8b1d22); -webkit-background-clip: text; background-clip: text; color: transparent; }
.text-gradient-primary { background: linear-gradient(135deg, #7aa6ff, var(--sm-primary)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.text-gradient-racing  { background: linear-gradient(120deg, var(--sm-primary) 0%, #00307a 45%, var(--sm-accent) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

.bg-racing { background-image: linear-gradient(120deg, var(--sm-primary), var(--sm-accent)); }

.shadow-glow      { box-shadow: 0 20px 60px -20px color-mix(in oklab, var(--sm-primary) 60%, transparent); }
.shadow-glow-red  { box-shadow: 0 0 0 1px color-mix(in oklab, var(--sm-accent) 30%, transparent), 0 18px 50px -12px color-mix(in oklab, var(--sm-accent) 70%, transparent); }
.shadow-elevated  { box-shadow: 0 30px 80px -30px rgba(0,0,0,.6); }

.grid-bg {
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 40%, transparent 100%);
            mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 40%, transparent 100%);
}

/* Header sticky behavior ---------------------------------- */
.sm-header.is-scrolled {
    padding-top: .75rem; padding-bottom: .75rem;
    background: linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
    backdrop-filter: blur(28px) saturate(160%);
    -webkit-backdrop-filter: blur(28px) saturate(160%);
    border-bottom: 1px solid rgba(255,255,255,.10);
}

/* Animations ---------------------------------------------- */
@keyframes fade-up   { from {opacity:0; transform: translateY(24px);} to {opacity:1; transform: translateY(0);} }
@keyframes fade-in   { from {opacity:0;} to {opacity:1;} }
@keyframes float     { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes pulse-ring{ 0%{box-shadow:0 0 0 0 color-mix(in oklab,var(--sm-accent) 50%, transparent)} 70%{box-shadow:0 0 0 18px transparent} 100%{box-shadow:0 0 0 0 transparent} }

.animate-fade-up    { animation: fade-up 0.8s cubic-bezier(.22,1,.36,1) both; }
.animate-fade-in    { animation: fade-in 1s ease-out both; }
.animate-float      { animation: float 4s ease-in-out infinite; }
.animate-pulse-ring { animation: pulse-ring 2s infinite; }

.hover-lift { transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s; }
.hover-lift:hover { transform: translateY(-6px); }

/* Reveal on scroll ---------------------------------------- */
.sm-reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1); }
.sm-reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Reduced motion ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    .sm-reveal { opacity: 1; transform: none; }
}

/* WP / Elementor compat ----------------------------------- */
.elementor-section, .elementor-widget-wrap { z-index: 1; }
.wp-block-image img { border-radius: 1rem; }
.prose-invert a { color: var(--sm-accent); }

/* Forms --------------------------------------------------- */
input, select, textarea { color: inherit; }
input::placeholder, textarea::placeholder { color: rgba(255,255,255,.5); }

/* Nav fallback styling ------------------------------------ */
#site-header nav ul a { color: rgba(255,255,255,.85); }
#site-header nav ul a:hover { color: #fff; }
#sm-mobile-menu ul { list-style: none; padding: 0; margin: 0; }
#sm-mobile-menu ul li { border-bottom: 1px solid rgba(255,255,255,.08); }
#sm-mobile-menu ul li:last-child { border-bottom: 0; }
#sm-mobile-menu ul li a { display: block; padding: .75rem .5rem; color: inherit; }