/* ============================================================
   É Tri Pedalar — estilos premium (complemento ao Tailwind)
   ============================================================ */

:root {
    --brand: #f97316;
    --brand-dark: #c2410c;
    --graphite-900: #0a0a0b;
}

html { scroll-padding-top: 5rem; }
body { overflow-x: hidden; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #0a0a0b; }
::-webkit-scrollbar-thumb { background: #3a3a42; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand); }

/* Navbar scrolled state */
#navbar.scrolled {
    background: rgba(10, 10, 11, .85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(58, 58, 66, .6);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .4);
}

/* Navbar com menu mobile aberto — tem prioridade sobre :not(.scrolled) */
#navbar.menu-open {
    background: rgba(10, 10, 11, .97) !important;
    backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(58, 58, 66, .6) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .4) !important;
}

/* Navbar transparente no topo (sobre hero com vídeo) */
#navbar:not(.scrolled):not(.menu-open) {
    background: transparent;
    border-bottom: 1px solid transparent;
    box-shadow: none;
}

/* Logo sempre centralizado no mobile */
@media (max-width: 1023px) {
    #navbar nav > div {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
    }
    #navbar nav > div > a:first-child {
        grid-column: 2;
        justify-self: center;
    }
    #navbar nav > div > ul {
        display: none;
    }
    #navbar nav > div > button {
        grid-column: 3;
        justify-self: end;
    }
}

/* Nav links */
.nav-link {
    position: relative;
    color: #d1d5db;
    transition: color .2s ease;
}
.nav-link:hover { color: #fff; }
.nav-link::after {
    content: '';
    position: absolute;
    left: 0; bottom: -6px;
    width: 0; height: 2px;
    background: var(--brand);
    transition: width .25s ease;
}
.nav-link:hover::after, .nav-link.active::after { width: 100%; }
.nav-link.active { color: var(--brand); }

/* Buttons */
.btn-primary {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .65rem 1.4rem;
    border-radius: .85rem;
    font-weight: 600;
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: #fff;
    box-shadow: 0 8px 24px rgba(249, 115, 22, .3);
    transition: transform .2s ease, box-shadow .2s ease;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(249, 115, 22, .45); }

.btn-ghost {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .65rem 1.4rem;
    border-radius: .85rem;
    font-weight: 600;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .04);
    transition: all .2s ease;
}
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); }

/* Section helpers */
.section { padding: 5rem 0; }
.eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .75rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--brand);
}

/* Glass card */
.glass {
    background: linear-gradient(160deg, rgba(38, 38, 43, .7), rgba(18, 18, 20, .7));
    border: 1px solid rgba(58, 58, 66, .6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Hover lift */
.lift { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.lift:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0, 0, 0, .4); border-color: rgba(249, 115, 22, .5); }

/* Faixa de texto sobre um banner de fundo (ex.: página do evento): translúcida e
   desfocada como o .glass, mas sem borda nem cantos arredondados, ocupando a largura
   inteira da tela para garantir contraste sem "flutuar" como um card. Opacidade um
   pouco menor que o .glass para deixar o banner "vazar" por trás do desfoque. */
.hero-textbar {
    background: linear-gradient(160deg, rgba(38, 38, 43, .55), rgba(18, 18, 20, .6));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Hero gradient overlay */
.hero-overlay {
    background:
        radial-gradient(1200px 500px at 70% -10%, rgba(249, 115, 22, .18), transparent 60%),
        linear-gradient(180deg, rgba(10, 10, 11, .35) 0%, rgba(10, 10, 11, .85) 70%, #0a0a0b 100%);
}

/* Animated gradient text */
.text-gradient {
    background: linear-gradient(90deg, #fff, #fdba74, #f97316);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Stat counter */
.counter { font-variant-numeric: tabular-nums; }

/* Difficulty dots */
.diff-dot { width: 8px; height: 8px; border-radius: 9999px; background: #3a3a42; }
.diff-dot.on { background: var(--brand); }

/* Marquee for supporters */
.marquee { display: flex; gap: 3rem; animation: marquee 25s linear infinite; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-wrap:hover .marquee { animation-play-state: paused; }

/* Rank medals */
.medal-1 { background: linear-gradient(135deg, #fde68a, #f59e0b); }
.medal-2 { background: linear-gradient(135deg, #e5e7eb, #9ca3af); }
.medal-3 { background: linear-gradient(135deg, #fcd34d, #d97706); }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}