/* ============================================================ */
/* == RBR EXPRESS — SISTEMA DE ANIMAÇÕES SPA                  == */
/* == Substitui AOS. Controlado pelo showSection() via JS.    == */
/* ============================================================ */

/* ------------------------------------------------------------
   CONFIGURAÇÃO BASE
   Todos os elementos animáveis começam invisíveis.
   A classe .anim-ready é adicionada pelo JS após a seção ficar
   visível, disparando as transições via CSS.
   ------------------------------------------------------------ */

/* Previne FOUC (flash of unstyled content) nos elementos filhos */
[data-anim] {
    opacity: 0;
    will-change: opacity, transform;
}

/* Estado ativo — aplicado pelo JS com delay escalonado */
[data-anim].anim-ready {
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); /* ease-out-expo */
    animation-duration: 0.65s;
}

/* ------------------------------------------------------------
   TIPOS DE ANIMAÇÃO
   ------------------------------------------------------------ */

[data-anim="fade-up"].anim-ready {
    animation-name: anim-fade-up;
}

[data-anim="fade-down"].anim-ready {
    animation-name: anim-fade-down;
}

[data-anim="fade-left"].anim-ready {
    animation-name: anim-fade-left;
}

[data-anim="fade-right"].anim-ready {
    animation-name: anim-fade-right;
}

[data-anim="scale-in"].anim-ready {
    animation-name: anim-scale-in;
}

[data-anim="scale-up"].anim-ready {
    animation-name: anim-scale-up;
    animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); /* back */
}

[data-anim="fade-in"].anim-ready {
    animation-name: anim-fade-in;
}

/* Linha revelada da esquerda para direita (para dividers, underlines) */
[data-anim="reveal-line"].anim-ready {
    animation-name: anim-reveal-line;
}

/* ------------------------------------------------------------
   KEYFRAMES
   ------------------------------------------------------------ */

@keyframes anim-fade-up {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes anim-fade-down {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes anim-fade-left {
    from {
        opacity: 0;
        transform: translateX(28px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes anim-fade-right {
    from {
        opacity: 0;
        transform: translateX(-28px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes anim-scale-in {
    from {
        opacity: 0;
        transform: scale(0.94);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes anim-scale-up {
    from {
        opacity: 0;
        transform: scale(0.88);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes anim-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes anim-reveal-line {
    from { transform: scaleX(0); opacity: 0; }
    to   { transform: scaleX(1); opacity: 1; }
}

/* ------------------------------------------------------------
   DELAYS ESCALONADOS (STAGGER)
   Aplicados via atributo data-anim-delay no HTML.
   O JS lê esse atributo e injeta animation-delay no elemento.

   Valores disponíveis (em ms):
   0 | 80 | 160 | 240 | 320 | 400 | 480 | 560 | 640 | 800
   ------------------------------------------------------------ */

/* Alternativa: classes estáticas de delay para uso direto */
[data-anim-delay="0"]   { animation-delay: 0ms !important; }
[data-anim-delay="80"]  { animation-delay: 80ms !important; }
[data-anim-delay="160"] { animation-delay: 160ms !important; }
[data-anim-delay="240"] { animation-delay: 240ms !important; }
[data-anim-delay="320"] { animation-delay: 320ms !important; }
[data-anim-delay="400"] { animation-delay: 400ms !important; }
[data-anim-delay="480"] { animation-delay: 480ms !important; }
[data-anim-delay="560"] { animation-delay: 560ms !important; }
[data-anim-delay="640"] { animation-delay: 640ms !important; }
[data-anim-delay="800"] { animation-delay: 800ms !important; }

/* ------------------------------------------------------------
   TRANSIÇÃO DA SEÇÃO — CONTAINER
   A própria seção entra com fade + leve subida.
   ------------------------------------------------------------ */

.section:not(.hidden) {
    animation: section-enter 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes section-enter {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Saída suave da seção anterior */
.section.section-exiting {
    animation: section-exit 0.3s cubic-bezier(0.4, 0, 1, 1) both;
    pointer-events: none;
}

@keyframes section-exit {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

/* ------------------------------------------------------------
   STAGGER AUTOMÁTICO PARA FILHOS DIRETOS
   Quando um pai tem data-anim-group, seus filhos recebem
   delay crescente automaticamente via JS.
   ------------------------------------------------------------ */

/* Garante que filhos de grupos comecem invisíveis */
[data-anim-group] > * {
    opacity: 0;
}

[data-anim-group] > *.anim-ready {
    animation-name: anim-fade-up;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    animation-duration: 0.6s;
    animation-fill-mode: both;
}

/* ------------------------------------------------------------
   RESPEITA PREFERÊNCIA DE MOVIMENTO REDUZIDO
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    [data-anim],
    [data-anim-group] > * {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .section:not(.hidden),
    .section.section-exiting {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ------------------------------------------------------------
   COMPATIBILIDADE — .fade-in-element existente no projeto
   Mantido para não quebrar código do main.js que usa essa classe.
   ------------------------------------------------------------ */

/* Não sobrescreve — deixa o styles.css original gerenciar */

/* ============================================================ */
/* == MICROINTERAÇÕES — CARDS E TABELAS                       == */
/* ============================================================ */

/* ------------------------------------------------------------
   TABELAS — LINHAS COM ENTRADA ESCALONADA E HOVER PREMIUM
   ------------------------------------------------------------ */

/* Entrada escalonada das linhas */
#ranking-table-body tr,
#relatorio-table-body tr,
#history-table-body tr,
#frota-table-body tr,
#fuel-history-table-body tr {
    animation: row-enter 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
    opacity: 0;
    position: relative;
}

@keyframes row-enter {
    from { opacity: 0; transform: translateX(-10px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Delay escalonado — primeiras 10 linhas */
#ranking-table-body tr:nth-child(1),
#relatorio-table-body tr:nth-child(1),
#history-table-body tr:nth-child(1),
#frota-table-body tr:nth-child(1)  { animation-delay: 0.05s; }

#ranking-table-body tr:nth-child(2),
#relatorio-table-body tr:nth-child(2),
#history-table-body tr:nth-child(2),
#frota-table-body tr:nth-child(2)  { animation-delay: 0.10s; }

#ranking-table-body tr:nth-child(3),
#relatorio-table-body tr:nth-child(3),
#history-table-body tr:nth-child(3),
#frota-table-body tr:nth-child(3)  { animation-delay: 0.15s; }

#ranking-table-body tr:nth-child(4),
#relatorio-table-body tr:nth-child(4),
#history-table-body tr:nth-child(4),
#frota-table-body tr:nth-child(4)  { animation-delay: 0.20s; }

#ranking-table-body tr:nth-child(5),
#relatorio-table-body tr:nth-child(5),
#history-table-body tr:nth-child(5),
#frota-table-body tr:nth-child(5)  { animation-delay: 0.25s; }

#ranking-table-body tr:nth-child(6),
#relatorio-table-body tr:nth-child(6),
#history-table-body tr:nth-child(6),
#frota-table-body tr:nth-child(6)  { animation-delay: 0.30s; }

#ranking-table-body tr:nth-child(7),
#relatorio-table-body tr:nth-child(7),
#history-table-body tr:nth-child(7),
#frota-table-body tr:nth-child(7)  { animation-delay: 0.33s; }

#ranking-table-body tr:nth-child(n+8),
#relatorio-table-body tr:nth-child(n+8),
#history-table-body tr:nth-child(n+8),
#frota-table-body tr:nth-child(n+8) { animation-delay: 0.36s; }

/* Hover premium nas linhas — linha amarela lateral */
#ranking-table-body tr,
#relatorio-table-body tr,
#history-table-body tr,
#frota-table-body tr,
#fuel-history-table-body tr {
    transition: background 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

#ranking-table-body tr td:first-child,
#relatorio-table-body tr td:first-child,
#history-table-body tr td:first-child,
#frota-table-body tr td:first-child,
#fuel-history-table-body tr td:first-child {
    position: relative;
}

#ranking-table-body tr td:first-child::before,
#relatorio-table-body tr td:first-child::before,
#history-table-body tr td:first-child::before,
#frota-table-body tr td:first-child::before,
#fuel-history-table-body tr td:first-child::before {
    content: '';
    position: absolute;
    left: 0; top: 15%; bottom: 15%;
    width: 2px;
    background: var(--theme-color);
    border-radius: 2px;
    transform: scaleY(0);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: center;
}

#ranking-table-body tr:hover td:first-child::before,
#relatorio-table-body tr:hover td:first-child::before,
#history-table-body tr:hover td:first-child::before,
#frota-table-body tr:hover td:first-child::before,
#fuel-history-table-body tr:hover td:first-child::before {
    transform: scaleY(1);
}

/* Top 3 do ranking — destaque especial */
#ranking-table-body tr:nth-child(1) td:first-child { color: #facc15; font-size: 1.05rem; }
#ranking-table-body tr:nth-child(2) td:first-child { color: #d1d5db; }
#ranking-table-body tr:nth-child(3) td:first-child { color: #d97706; }

/* Linha selecionada */
#ranking-table-body tr.row-selected,
#relatorio-table-body tr.row-selected,
#history-table-body tr.row-selected {
    background: rgba(250, 204, 21, 0.06) !important;
    box-shadow: inset 3px 0 0 var(--theme-color);
}

/* ------------------------------------------------------------
   HALL DA FAMA — CARDS PREMIUM
   ------------------------------------------------------------ */

#hall-of-fame-container > div {
    position: relative;
    overflow: hidden;
    transition:
        transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.3s ease,
        box-shadow 0.35s ease !important;
}

/* Linha dourada no topo — revela no hover */
#hall-of-fame-container > div::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--theme-color), transparent);
    transform: scaleX(0);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

#hall-of-fame-container > div:hover::before { transform: scaleX(1); }

/* Shimmer sutil no card ao hover */
#hall-of-fame-container > div::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 40%, rgba(250,204,21,0.04) 60%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

#hall-of-fame-container > div:hover::after { opacity: 1; }

#hall-of-fame-container > div:hover {
    transform: translateY(-8px) scale(1.02) !important;
    border-color: rgba(250, 204, 21, 0.5) !important;
    box-shadow:
        0 20px 50px rgba(0,0,0,0.6),
        0 0 30px rgba(250, 204, 21, 0.1) !important;
}

/* Foto do motorista — zoom suave no hover */
#hall-of-fame-container > div img {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

#hall-of-fame-container > div:hover img {
    transform: scale(1.08);
    box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.35);
}

/* Entrada escalonada dos cards do Hall da Fama */
#hall-of-fame-container > div {
    animation: card-pop 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

#hall-of-fame-container > div:nth-child(1) { animation-delay: 0.05s; }
#hall-of-fame-container > div:nth-child(2) { animation-delay: 0.12s; }
#hall-of-fame-container > div:nth-child(3) { animation-delay: 0.19s; }
#hall-of-fame-container > div:nth-child(4) { animation-delay: 0.26s; }
#hall-of-fame-container > div:nth-child(n+5) { animation-delay: 0.32s; }

@keyframes card-pop {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ------------------------------------------------------------
   LOJA — TURBO + NEON RACE
   ------------------------------------------------------------ */

/* Suporte à propriedade animada --angle (neon race) */
@property --store-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

@keyframes store-neon-race {
    to { --store-angle: 360deg; }
}

/* Base do card */
#store-categories-container .rounded-lg.border {
    position: relative;
    overflow: hidden;
    transition:
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.4s ease,
        border-color 0.3s ease !important;
}

/* Hover — levita + sombra profunda */
#store-categories-container .rounded-lg.border:hover {
    transform: translateY(-10px) scale(1.025) !important;
    border-color: rgba(250, 204, 21, 0.35) !important;
    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.8),
        0 0 40px rgba(250, 204, 21, 0.12) !important;
}

/* NEON RACE — borda correndo ao redor */
#store-categories-container .rounded-lg.border::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: conic-gradient(
        from var(--store-angle),
        transparent 70%,
        rgba(250, 204, 21, 0.9) 80%,
        #fff 88%,
        rgba(250, 204, 21, 0.9) 93%,
        transparent 100%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
    animation: store-neon-race 1.8s linear infinite paused;
    z-index: 0;
}

#store-categories-container .rounded-lg.border:hover::before {
    opacity: 1;
    animation-play-state: running;
}

/* Máscara interna — faz aparecer só a borda */
#store-categories-container .rounded-lg.border::after {
    content: '';
    position: absolute;
    inset: 1px;
    background: var(--card-bg-color, #111);
    border-radius: calc(inherit - 1px);
    z-index: 1;
    pointer-events: none;
}

/* Garante que conteúdo fique acima da máscara */
#store-categories-container .rounded-lg.border > * {
    position: relative;
    z-index: 2;
}

/* SCAN VERTICAL — luz percorre o card */
#store-categories-container .store-v-scan {
    position: absolute;
    top: 0; bottom: 0;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(250, 204, 21, 0.6), transparent);
    left: -5%;
    opacity: 0;
    z-index: 3;
    pointer-events: none;
    transition: opacity 0.1s ease;
}

#store-categories-container .rounded-lg.border:hover .store-v-scan {
    opacity: 1;
    animation: store-vscan 1.3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes store-vscan {
    from { left: -5%; }
    to   { left: 105%; }
}

/* CANTOS DOURADOS */
#store-categories-container .store-corner {
    position: absolute;
    width: 12px; height: 12px;
    opacity: 0;
    pointer-events: none;
    z-index: 4;
    transition: opacity 0.3s ease;
}

#store-categories-container .rounded-lg.border:hover .store-corner { opacity: 1; }

#store-categories-container .store-corner-tl {
    top: 6px; left: 6px;
    border-top: 2px solid #facc15;
    border-left: 2px solid #facc15;
}

#store-categories-container .store-corner-tr {
    top: 6px; right: 6px;
    border-top: 2px solid #facc15;
    border-right: 2px solid #facc15;
}

#store-categories-container .store-corner-bl {
    bottom: 6px; left: 6px;
    border-bottom: 2px solid #facc15;
    border-left: 2px solid #facc15;
}

#store-categories-container .store-corner-br {
    bottom: 6px; right: 6px;
    border-bottom: 2px solid #facc15;
    border-right: 2px solid #facc15;
}

/* ZOOM NA IMAGEM com glow */
#store-categories-container .lazy-image-container img,
#store-categories-container .lazy-image-loading,
#store-categories-container .lazy-image-loaded {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease !important;
}

#store-categories-container .rounded-lg.border:hover .lazy-image-loaded,
#store-categories-container .rounded-lg.border:hover .lazy-image-placeholder {
    transform: scale(1.08);
    filter: brightness(1.08);
}

/* NOME DO ITEM — ilumina */
#store-categories-container .rounded-lg.border:hover h3 {
    color: #ffffff;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.15);
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

/* PREÇO — pop animado */
#store-categories-container .rounded-lg.border:hover .text-yellow-400,
#store-categories-container .rounded-lg.border:hover .line-through {
    animation: store-price-pop 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

@keyframes store-price-pop {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.12); filter: brightness(1.3); }
    100% { transform: scale(1); }
}

/* BOTÃO DE COMPRA — sobe do rodapé */
#store-categories-container .buy-btn {
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease !important;
}

#store-categories-container .buy-btn:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

#store-categories-container .buy-btn:not(:disabled):active {
    transform: scale(0.96);
}

/* ------------------------------------------------------------
   FEED DE ENTREGAS — CARDS COM HOVER E ENTRADA
   ------------------------------------------------------------ */

#real-time-feed > div {
    position: relative;
    border: 1px solid rgba(75, 85, 99, 0.3);
    border-radius: 12px;
    transition:
        transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.3s ease,
        box-shadow 0.3s ease;
    overflow: hidden;
}

/* Linha lateral colorida — revela no hover */
#real-time-feed > div::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--theme-color), rgba(250,204,21,0.3));
    transform: scaleY(0);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: top;
    border-radius: 3px 0 0 3px;
}

#real-time-feed > div:hover::before { transform: scaleY(1); }

#real-time-feed > div:hover {
    transform: translateX(4px);
    border-color: rgba(250, 204, 21, 0.25);
    box-shadow: 0 8px 32px rgba(0,0,0,0.4), -2px 0 16px rgba(250,204,21,0.06);
}

/* Foto do motorista no feed — zoom no hover */
#real-time-feed > div img {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

#real-time-feed > div:hover img { transform: scale(1.08); }

/* ------------------------------------------------------------
   BOTÕES DE SORT E FILTRO — FEEDBACK DE CLICK
   ------------------------------------------------------------ */

.ranking-sort-btn,
.history-sort-btn,
.mercado-sort-btn,
.feed-sort-btn,
.store-filter-btn,
.store-sort-btn {
    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.12s ease,
        box-shadow 0.2s ease !important;
}

.ranking-sort-btn:active,
.history-sort-btn:active,
.mercado-sort-btn:active,
.feed-sort-btn:active,
.store-filter-btn:active,
.store-sort-btn:active {
    transform: scale(0.94) !important;
}

/* ------------------------------------------------------------
   CARDS DE STATS (relatorio, sistemaFiscal)
   ------------------------------------------------------------ */

#relatorio-geral-container > div,
#history-summary-container > div,
#sistemaFiscal .grid > div {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
    border: 1px solid transparent;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
}

#relatorio-geral-container > div::before,
#history-summary-container > div::before,
#sistemaFiscal .grid > div::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--theme-color), transparent);
    transform: scaleX(0);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

#relatorio-geral-container > div:hover::before,
#history-summary-container > div:hover::before,
#sistemaFiscal .grid > div:hover::before { transform: scaleX(1); }

#relatorio-geral-container > div:hover,
#history-summary-container > div:hover,
#sistemaFiscal .grid > div:hover {
    transform: translateY(-5px);
    border-color: rgba(250, 204, 21, 0.2);
    box-shadow: 0 12px 36px rgba(0,0,0,0.45), 0 0 18px rgba(250,204,21,0.07);
}

/* ------------------------------------------------------------
   RESPEITA PREFERÊNCIA DE MOVIMENTO REDUZIDO
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    #ranking-table-body tr,
    #relatorio-table-body tr,
    #history-table-body tr,
    #frota-table-body tr,
    #fuel-history-table-body tr,
    #hall-of-fame-container > div,
    #real-time-feed > div,
    #store-categories-container .rounded-lg.border,
    #relatorio-geral-container > div,
    #history-summary-container > div,
    #sistemaFiscal .grid > div {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ============================================================ */
/* == LOJA — NEON RACE + FLIP                                 == */
/* ============================================================ */

/* Suporte para @property (conic-gradient animado) */
@property --neon-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

/* Card base com neon */
/* fim do arquivo */
/* ============================================================ */
/* == NEON RACE — CARDS DA PÁGINA INICIAL                     == */
/* == Variação 1: sempre ativo, acelera no hover              == */
/* ============================================================ */

@property --inicio-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

@keyframes inicio-neon-race {
    to { --inicio-angle: 360deg; }
}

/* ------------------------------------------------------------
   PARCEIROS E STREAMERS
   Os divs filhos de #partners-container e #streamers-container
   ------------------------------------------------------------ */

#partners-container > div,
#streamers-container > div {
    position: relative;
    border-radius: 14px;
    padding: 0.75rem 1rem;
    background: rgba(12, 12, 12, 0.6);
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Borda neon sempre ativa */
#partners-container > div::before,
#streamers-container > div::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 14px;
    background: conic-gradient(
        from var(--inicio-angle),
        transparent 72%,
        rgba(250, 204, 21, 0.9) 80%,
        #fff 87%,
        rgba(250, 204, 21, 0.9) 92%,
        transparent 100%
    );
    animation: inicio-neon-race 2.5s linear infinite;
    z-index: 0;
}

/* Máscara interna */
#partners-container > div::after,
#streamers-container > div::after {
    content: '';
    position: absolute;
    inset: 1px;
    background: rgba(12, 12, 12, 0.85);
    border-radius: 13px;
    z-index: 1;
    pointer-events: none;
}

/* Conteúdo acima da máscara */
#partners-container > div > *,
#streamers-container > div > * {
    position: relative;
    z-index: 2;
}

/* Hover — levita + acelera borda */
#partners-container > div:hover,
#streamers-container > div:hover {
    transform: translateY(-6px) scale(1.04);
}

#partners-container > div:hover::before,
#streamers-container > div:hover::before {
    animation-duration: 1s;
}

/* ------------------------------------------------------------
   STATS (números da empresa)
   ------------------------------------------------------------ */

#inicio > .flex.flex-wrap.justify-center > div {
    position: relative;
    border-radius: 14px;
    padding: 1rem 1.25rem;
    background: rgba(12, 12, 12, 0.6);
    overflow: hidden;
    min-width: 120px;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

#inicio > .flex.flex-wrap.justify-center > div::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 14px;
    background: conic-gradient(
        from var(--inicio-angle),
        transparent 72%,
        rgba(250, 204, 21, 0.9) 80%,
        #fff 87%,
        rgba(250, 204, 21, 0.9) 92%,
        transparent 100%
    );
    animation: inicio-neon-race 2.5s linear infinite;
    z-index: 0;
}

#inicio > .flex.flex-wrap.justify-center > div::after {
    content: '';
    position: absolute;
    inset: 1px;
    background: rgba(12, 12, 12, 0.85);
    border-radius: 13px;
    z-index: 1;
    pointer-events: none;
}

#inicio > .flex.flex-wrap.justify-center > div > * {
    position: relative;
    z-index: 2;
}

#inicio > .flex.flex-wrap.justify-center > div:hover {
    transform: translateY(-6px) scale(1.04);
}

#inicio > .flex.flex-wrap.justify-center > div:hover::before {
    animation-duration: 1s;
}

/* ------------------------------------------------------------
   MOTORISTA DA SEMANA
   Classe .motorista-destaque-card — já tem border-yellow-400
   Sobrescrevemos a borda estática pelo neon race
   ------------------------------------------------------------ */

.motorista-destaque-card {
    position: relative;
    overflow: hidden;
    border: 1px solid transparent !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}

.motorista-destaque-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: conic-gradient(
        from var(--inicio-angle),
        transparent 72%,
        rgba(250, 204, 21, 0.9) 80%,
        #fff 87%,
        rgba(250, 204, 21, 0.9) 92%,
        transparent 100%
    );
    animation: inicio-neon-race 2.5s linear infinite;
    z-index: 0;
}

.motorista-destaque-card::after {
    content: '';
    position: absolute;
    inset: 1px;
    background: var(--card-bg-color, #1a1a1a);
    border-radius: inherit;
    z-index: 1;
    pointer-events: none;
}

.motorista-destaque-card > * {
    position: relative;
    z-index: 2;
}

.motorista-destaque-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.7), 0 0 36px rgba(250, 204, 21, 0.15);
}

.motorista-destaque-card:hover::before {
    animation-duration: 1s;
}

/* Os mini cards internos do motorista da semana também recebem neon */
.driver-inner-card {
    position: relative;
    overflow: hidden;
    border: 1px solid transparent !important;
    transition: transform 0.3s ease;
}

.driver-inner-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: conic-gradient(
        from var(--inicio-angle),
        transparent 74%,
        rgba(250, 204, 21, 0.7) 82%,
        rgba(250, 204, 21, 0.7) 90%,
        transparent 100%
    );
    animation: inicio-neon-race 3.5s linear infinite;
    z-index: 0;
}

.driver-inner-card::after {
    content: '';
    position: absolute;
    inset: 1px;
    background: var(--card-bg-color, #1f2937);
    border-radius: inherit;
    z-index: 1;
    pointer-events: none;
}

.driver-inner-card > * {
    position: relative;
    z-index: 2;
}

/* ------------------------------------------------------------
   RESPEITA PREFERÊNCIA DE MOVIMENTO REDUZIDO
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    #partners-container > div::before,
    #streamers-container > div::before,
    #inicio > .flex.flex-wrap.justify-center > div::before,
    .motorista-destaque-card::before,
    .driver-inner-card::before {
        animation: none !important;
        background: rgba(250, 204, 21, 0.2) !important;
    }
}

/* ============================================================ */
/* == MOTORISTA DA SEMANA — NEON RACE SEMPRE ATIVO            == */
/* ============================================================ */

@property --msemana-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

@keyframes msemana-race {
    to { --msemana-angle: 360deg; }
}

/* Wrapper interno que recebe o neon — não o card raiz,
   pois ele tem overflow:visible por causa do avatar acima */
#motorista-semana-container .motorista-destaque-card .neon-semana-ring {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
}

/* Borda girando via conic-gradient */
#motorista-semana-container .motorista-destaque-card .neon-semana-ring::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: conic-gradient(
        from var(--msemana-angle),
        transparent 70%,
        #facc15 79%,
        #fff 86%,
        #facc15 91%,
        transparent 100%
    );
    animation: msemana-race 2.5s linear infinite;
    z-index: 0;
}

/* Máscara — mantém o fundo do card visível */
#motorista-semana-container .motorista-destaque-card .neon-semana-ring::after {
    content: '';
    position: absolute;
    inset: 1px;
    background: rgba(10, 10, 10, 0.88);
    border-radius: calc(22px - 1px);
    z-index: 1;
    backdrop-filter: blur(24px);
}

/* Todo conteúdo do card acima do ring */
#motorista-semana-container .motorista-destaque-card > *:not(.neon-semana-ring) {
    position: relative;
    z-index: 2;
}

/* Remove a borda estática original — o neon substitui */
#motorista-semana-container .motorista-destaque-card {
    border-color: transparent !important;
}

/* Hover — acelera a borda */
#motorista-semana-container .motorista-destaque-card:hover .neon-semana-ring::before {
    animation-duration: 1s;
}

/* Hover — levita */
#motorista-semana-container .motorista-destaque-card {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
    cursor: default;
}

#motorista-semana-container .motorista-destaque-card:hover {
    transform: translateY(-6px);
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.5),
        0 0 50px rgba(250, 204, 21, 0.18),
        0 28px 70px rgba(0,0,0,0.65) !important;
}

/* Fallback para navegadores sem suporte a @property */
@supports not (background: conic-gradient(from 1turn, red, blue)) {
    #motorista-semana-container .motorista-destaque-card .neon-semana-ring::before {
        display: none;
    }
    #motorista-semana-container .motorista-destaque-card {
        border-color: rgba(250, 204, 21, 0.4) !important;
    }
}

/* Respeita preferência de movimento reduzido */
@media (prefers-reduced-motion: reduce) {
    #motorista-semana-container .motorista-destaque-card .neon-semana-ring::before {
        animation: none !important;
        background: rgba(250, 204, 21, 0.3);
    }
}

/* ============================================================ */
/* == NEON HOVER — CARDS SECUNDÁRIOS                          == */
/* ============================================================ */

@property --hover-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

@keyframes hover-neon-race {
    to { --hover-angle: 360deg; }
}

@keyframes hover-scan-h {
    from { top: -5%; }
    to   { top: 105%; }
}

@keyframes hover-shimmer {
    from { transform: translateX(-150%) skewX(-15deg); }
    to   { transform: translateX(250%) skewX(-15deg); }
}

/* ------------------------------------------------------------
   A — NEON RACE
   Comboio, Mural da Empresa, Comunidade (feed)
   ------------------------------------------------------------ */

/* .news-card já tem position:relative e overflow:hidden no styles.css */
.news-card,
#real-time-feed > div {
    border: 1px solid rgba(255,255,255,.07) !important;
    transition:
        transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.35s ease !important;
}

.news-card::before,
#real-time-feed > div::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: conic-gradient(
        from var(--hover-angle),
        transparent 72%,
        rgba(250, 204, 21, 0.9) 80%,
        #fff 87%,
        rgba(250, 204, 21, 0.9) 92%,
        transparent 100%
    );
    opacity: 0;
    animation: hover-neon-race 1.8s linear infinite paused;
    z-index: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* Máscara interna */
.news-card::after,
#real-time-feed > div::after {
    content: '';
    position: absolute;
    inset: 1px;
    background: var(--card-bg-color, rgba(10,10,10,0.85));
    border-radius: calc(18px - 1px);
    z-index: 1;
    pointer-events: none;
}

/* Conteúdo acima da máscara */
.news-card > *,
#real-time-feed > div > * {
    position: relative;
    z-index: 2;
}

.news-card:hover::before,
#real-time-feed > div:hover::before {
    opacity: 1;
    animation-play-state: running;
}

.news-card:hover,
#real-time-feed > div:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 24px 56px rgba(0,0,0,0.75), 0 0 32px rgba(250,204,21,0.1) !important;
    border-color: transparent !important;
}

/* ------------------------------------------------------------
   B — SCAN HORIZONTAL
   Mercado de Usados
   ------------------------------------------------------------ */

#mercado-anuncios-container .rounded-lg {
    position: relative;
    overflow: hidden;
    transition:
        transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.3s ease,
        box-shadow 0.35s ease !important;
}

/* Linha de scan */
#mercado-anuncios-container .rounded-lg .mercado-scan {
    position: absolute;
    left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(250,204,21,0.85), transparent);
    top: -5%;
    opacity: 0;
    pointer-events: none;
    z-index: 3;
    transition: opacity 0.1s ease;
}

#mercado-anuncios-container .rounded-lg:hover .mercado-scan {
    opacity: 1;
    animation: hover-scan-h 1.3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

#mercado-anuncios-container .rounded-lg:hover {
    transform: translateY(-7px) !important;
    border-color: rgba(250, 204, 21, 0.3) !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.7), 0 0 28px rgba(250,204,21,0.09) !important;
}

/* ------------------------------------------------------------
   C — SHIMMER
   Galeria
   ------------------------------------------------------------ */

.gallery-item {
    position: relative;
    overflow: hidden;
    transition:
        transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.3s ease,
        box-shadow 0.35s ease;
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 10px;
}

/* Camada shimmer */
.gallery-item::before {
    content: '';
    position: absolute;
    top: 0; left: -150%;
    width: 55%; height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(250, 204, 21, 0.15),
        rgba(255, 255, 255, 0.07),
        transparent
    );
    transform: skewX(-15deg);
    opacity: 0;
    z-index: 3;
    pointer-events: none;
    transition: opacity 0.1s ease;
}

.gallery-item:hover::before {
    opacity: 1;
    animation: hover-shimmer 1.1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.gallery-item:hover {
    transform: scale(1.04);
    border-color: rgba(250, 204, 21, 0.25);
    box-shadow: 0 12px 36px rgba(0,0,0,0.6), 0 0 20px rgba(250,204,21,0.08);
}

/* ------------------------------------------------------------
   D — CORNER GLOW
   Operacional: .driver-inner-card
   ------------------------------------------------------------ */

.driver-inner-card {
    position: relative;
    transition:
        transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.3s ease,
        box-shadow 0.3s ease;
    border: 1px solid transparent !important;
}

/* Cantos dourados */
.driver-inner-card::before,
.driver-inner-card::after {
    content: '';
    position: absolute;
    width: 10px; height: 10px;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: scale(0);
    pointer-events: none;
    z-index: 3;
}

/* Canto superior esquerdo */
.driver-inner-card::before {
    top: 5px; left: 5px;
    border-top: 2px solid #facc15;
    border-left: 2px solid #facc15;
    box-shadow: -1px -1px 6px rgba(250,204,21,0.45);
}

/* Canto inferior direito */
.driver-inner-card::after {
    bottom: 5px; right: 5px;
    border-bottom: 2px solid #facc15;
    border-right: 2px solid #facc15;
    box-shadow: 1px 1px 6px rgba(250,204,21,0.45);
    border-radius: 0;
    background: none;
    inset: unset;
    width: 10px; height: 10px;
}

.driver-inner-card:hover::before,
.driver-inner-card:hover::after {
    opacity: 1;
    transform: scale(1);
}

.driver-inner-card:hover {
    transform: translateY(-3px);
    border-color: rgba(250, 204, 21, 0.15) !important;
    box-shadow: 0 8px 28px rgba(0,0,0,0.5), 0 0 18px rgba(250,204,21,0.07);
}

/* ------------------------------------------------------------
   E — SIDE LINE
   Recrutamento (requisitos, bases) e A Empresa (sobre)
   ------------------------------------------------------------ */

#requisitos .text-card-large,
#bases .text-card-large,
#sobre .text-card-large {
    position: relative;
    overflow: hidden;
    transition:
        transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.35s ease,
        border-color 0.3s ease !important;
}

/* Linha lateral */
#requisitos .text-card-large::before,
#bases .text-card-large::before,
#sobre .text-card-large::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, transparent, #facc15, transparent);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    z-index: 3;
    border-radius: 2px 0 0 2px;
}

#requisitos .text-card-large:hover::before,
#bases .text-card-large:hover::before,
#sobre .text-card-large:hover::before {
    transform: scaleY(1);
    box-shadow: 3px 0 14px rgba(250,204,21,0.3);
}

#requisitos .text-card-large:hover,
#bases .text-card-large:hover,
#sobre .text-card-large:hover {
    transform: translateX(6px);
    border-color: rgba(250, 204, 21, 0.2) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5), -4px 0 20px rgba(250,204,21,0.07) !important;
}

/* ------------------------------------------------------------
   RESPEITA PREFERÊNCIA DE MOVIMENTO REDUZIDO
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    .news-card::before,
    #real-time-feed > div::before {
        animation: none !important;
        opacity: 0 !important;
    }
    .news-card:hover,
    #real-time-feed > div:hover,
    #mercado-anuncios-container .rounded-lg:hover,
    .gallery-item:hover,
    .driver-inner-card:hover,
    #requisitos .text-card-large:hover,
    #bases .text-card-large:hover,
    #sobre .text-card-large:hover {
        transform: none !important;
    }
}

/* ============================================================ */
/* == TRANSIÇÕES GLOBAIS                                       == */
/* ============================================================ */

/* ------------------------------------------------------------
   1. TRANSIÇÃO ENTRE SEÇÕES
   Saída: fade + scale. Entrada: desliza da direita com spring
   ------------------------------------------------------------ */

.section:not(.hidden) {
    animation: section-slide-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes section-slide-in {
    from {
        opacity: 0;
        transform: translateX(2%) scale(0.99);
        filter: blur(1px);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
        filter: blur(0);
    }
}

.section.section-exiting {
    animation: section-slide-out 0.32s cubic-bezier(0.4, 0, 1, 1) both;
    pointer-events: none;
}

@keyframes section-slide-out {
    from {
        opacity: 1;
        transform: translateX(0) scale(1);
        filter: blur(0);
    }
    to {
        opacity: 0;
        transform: translateX(-2%) scale(0.99);
        filter: blur(1px);
    }
}

/* ------------------------------------------------------------
   2. MODAIS — OVERLAY + PAINEL
   ------------------------------------------------------------ */

.rbr-modal-overlay {
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
    opacity: 0 !important;
    visibility: hidden !important;
    backdrop-filter: blur(0px) !important;
    transition: opacity 0.3s ease, backdrop-filter 0.3s ease, visibility 0.3s ease !important;
}

.rbr-modal-overlay:not(.hidden) {
    opacity: 1 !important;
    visibility: visible !important;
    backdrop-filter: blur(8px) !important;
}

.rbr-modal-overlay.rbr-modal-open {
    opacity: 1 !important;
    visibility: visible !important;
    backdrop-filter: blur(8px) !important;
}

/* Painel interno do modal — spring de entrada */
.rbr-modal-box {
    transform: translateY(28px) scale(0.96) !important;
    opacity: 0 !important;
    transition:
        transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.35s ease !important;
}

.rbr-modal-overlay.rbr-modal-open .rbr-modal-box,
.rbr-modal-overlay:not(.hidden) .rbr-modal-box {
    transform: translateY(0) scale(1) !important;
    opacity: 1 !important;
}

/* ------------------------------------------------------------
   3. BOTÕES — SHIMMER + RIPPLE + SCALE
   ------------------------------------------------------------ */

/* Shimmer no hover para botões primários */
button:not(:disabled):not(.rbr-no-ripple) {
    position: relative;
    overflow: hidden;
}

/* Ripple de click */
.rbr-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    transform: scale(0);
    animation: rbr-ripple-expand 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    pointer-events: none;
    z-index: 10;
}

@keyframes rbr-ripple-expand {
    from {
        transform: scale(0);
        opacity: 0.5;
    }
    to {
        transform: scale(1);
        opacity: 0;
    }
}

/* Shimmer nos botões primários (fundo amarelo) */
.hero-cta-btn,
button[class*="bg-yellow"],
button[class*="yellow-400"],
.buy-btn:not(:disabled),
.neon-flip-btn:not(:disabled) {
    overflow: hidden;
}

.hero-cta-btn::after,
button[class*="bg-yellow"]::after,
.buy-btn:not(:disabled)::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.22),
        transparent
    );
    transform: skewX(-20deg);
    transition: left 0.5s ease;
    pointer-events: none;
}

.hero-cta-btn:hover::after,
button[class*="bg-yellow"]:not(:disabled):hover::after,
.buy-btn:not(:disabled):hover::after {
    left: 160%;
}

/* Scale no click de todos os botões */
button:not(:disabled):not(.rbr-no-ripple):active {
    transform: scale(0.96) !important;
    transition: transform 0.1s ease !important;
}

/* ------------------------------------------------------------
   4. SCROLL SUAVE
   ------------------------------------------------------------ */

* {
    scroll-behavior: smooth;
}

/* Scrollbar estilizada nos containers internos */
.overflow-y-auto,
.overflow-x-auto,
#real-time-feed,
.scroll-container {
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(250, 204, 21, 0.3) transparent;
}

.overflow-y-auto::-webkit-scrollbar,
.overflow-x-auto::-webkit-scrollbar,
#real-time-feed::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

.overflow-y-auto::-webkit-scrollbar-track,
.overflow-x-auto::-webkit-scrollbar-track {
    background: transparent;
}

.overflow-y-auto::-webkit-scrollbar-thumb,
.overflow-x-auto::-webkit-scrollbar-thumb,
#real-time-feed::-webkit-scrollbar-thumb {
    background: rgba(250, 204, 21, 0.25);
    border-radius: 4px;
    transition: background 0.2s ease;
}

.overflow-y-auto::-webkit-scrollbar-thumb:hover,
.overflow-x-auto::-webkit-scrollbar-thumb:hover {
    background: rgba(250, 204, 21, 0.5);
}

/* ------------------------------------------------------------
   RESPEITA PREFERÊNCIA DE MOVIMENTO REDUZIDO
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    .section:not(.hidden),
    .section.section-exiting,
    .rbr-modal-overlay,
    .rbr-modal-box,
    .rbr-ripple {
        animation: none !important;
        transition: opacity 0.2s ease !important;
        transform: none !important;
        filter: none !important;
    }
}

/* ============================================================ */
/* == SKELETON LOADERS — SHIMMER DOURADO                      == */
/* ============================================================ */

@keyframes skel-shimmer {
    from { background-position: -600px 0; }
    to   { background-position: 600px 0; }
}

/* Base do skeleton */
.rbr-skel {
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0.04) 25%,
        rgba(250,204,21,0.08) 50%,
        rgba(255,255,255,0.04) 75%
    );
    background-size: 1200px 100%;
    animation: skel-shimmer 1.6s ease-in-out infinite;
    border-radius: 6px;
}

/* Linha de texto */
.rbr-skel-line {
    height: 10px;
    margin-bottom: 8px;
}

.rbr-skel-line.w-full  { width: 100%; }
.rbr-skel-line.w-75    { width: 75%; }
.rbr-skel-line.w-55    { width: 55%; }
.rbr-skel-line.w-35    { width: 35%; }

/* Avatar circular */
.rbr-skel-avatar {
    border-radius: 50% !important;
}

/* Card skeleton genérico */
.rbr-skel-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 14px;
    overflow: hidden;
    flex-shrink: 0;
}

.rbr-skel-img {
    width: 100%;
    height: 140px;
    border-radius: 0 !important;
}

.rbr-skel-body {
    padding: .85rem;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Linha de tabela */
.rbr-skel-row td {
    padding: .75rem .6rem;
    border-bottom: 1px solid rgba(255,255,255,.03);
}

.rbr-skel-cell {
    height: 10px;
    border-radius: 5px;
}

/* Reveal ao carregar */
.rbr-skel-reveal {
    animation: skel-reveal 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes skel-reveal {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Stagger nos filhos ao revelar */
.rbr-skel-reveal:nth-child(1) { animation-delay: 0.00s; }
.rbr-skel-reveal:nth-child(2) { animation-delay: 0.07s; }
.rbr-skel-reveal:nth-child(3) { animation-delay: 0.14s; }
.rbr-skel-reveal:nth-child(4) { animation-delay: 0.21s; }
.rbr-skel-reveal:nth-child(5) { animation-delay: 0.28s; }
.rbr-skel-reveal:nth-child(n+6) { animation-delay: 0.32s; }

/* ============================================================ */
/* == TIPOGRAFIA ANIMADA — TÍTULOS DAS SEÇÕES                 == */
/* ============================================================ */

/* Linha revelada de baixo para cima */
.rbr-title-reveal {
    overflow: hidden;
    display: block;
}

.rbr-title-reveal > span {
    display: block;
    animation: title-line-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes title-line-up {
    from { transform: translateY(110%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* Palavra de destaque com sublinhado que revela */
.rbr-title-highlight {
    position: relative;
    display: inline-block;
    color: var(--theme-color);
}

.rbr-title-highlight::after {
    content: '';
    position: absolute;
    bottom: -3px; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--theme-color), rgba(250,204,21,0.3));
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    animation: title-underline 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
}

@keyframes title-underline {
    from { transform: scaleX(0); opacity: 0; }
    to   { transform: scaleX(1); opacity: 1; }
}

/* Segunda linha com delay */
.rbr-title-reveal.delay-1 > span { animation-delay: 0.12s; }
.rbr-title-reveal.delay-2 > span { animation-delay: 0.24s; }

/* Subtítulo fade-up */
.rbr-subtitle-reveal {
    animation: subtitle-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

@keyframes subtitle-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================ */
/* == TOAST NOTIFICATIONS PREMIUM                             == */
/* ============================================================ */

#rbr-toast-container {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    pointer-events: none;
    width: 320px;
}

.rbr-toast {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1rem;
    border-radius: 14px;
    background: rgba(12, 12, 12, 0.96);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 20px 56px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.04);
    pointer-events: all;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transform: translateX(110%) scale(0.95);
    opacity: 0;
    transition:
        transform 0.42s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.35s ease;
}

.rbr-toast--visible {
    transform: translateX(0) scale(1);
    opacity: 1;
}

.rbr-toast--removing {
    transform: translateX(110%) scale(0.95) !important;
    opacity: 0 !important;
    transition: transform 0.32s cubic-bezier(0.4, 0, 1, 1), opacity 0.28s ease !important;
}

/* Ícone */
.rbr-toast__icon {
    width: 32px; height: 32px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: .85rem; font-weight: 800;
    flex-shrink: 0;
}

/* Texto */
.rbr-toast__body { flex: 1; min-width: 0; }
.rbr-toast__title {
    font-size: .75rem; font-weight: 700;
    color: #f3f4f6; margin-bottom: 1px;
}
.rbr-toast__msg {
    font-size: .65rem; color: #6b7280;
    line-height: 1.4; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}

/* Barra de progresso */
.rbr-toast__prog {
    position: absolute;
    bottom: 0; left: 0;
    height: 2px; border-radius: 0 0 0 14px;
    animation: rbr-toast-drain linear forwards;
}

@keyframes rbr-toast-drain {
    from { width: 100%; }
    to   { width: 0%; }
}

/* Tipos */
.rbr-toast--success .rbr-toast__icon { background: rgba(74,222,128,.12); color: #4ade80; }
.rbr-toast--success .rbr-toast__prog { background: #4ade80; box-shadow: 0 0 6px rgba(74,222,128,.4); }
.rbr-toast--success { border-color: rgba(74,222,128,.15); }

.rbr-toast--error .rbr-toast__icon { background: rgba(248,113,113,.12); color: #f87171; }
.rbr-toast--error .rbr-toast__prog { background: #f87171; box-shadow: 0 0 6px rgba(248,113,113,.4); }
.rbr-toast--error { border-color: rgba(248,113,113,.15); }

.rbr-toast--info .rbr-toast__icon { background: rgba(250,204,21,.1); color: #facc15; }
.rbr-toast--info .rbr-toast__prog { background: #facc15; box-shadow: 0 0 6px rgba(250,204,21,.4); }
.rbr-toast--info { border-color: rgba(250,204,21,.12); }

.rbr-toast--warn,
.rbr-toast--warning { border-color: rgba(251,146,60,.15); }
.rbr-toast--warn .rbr-toast__icon,
.rbr-toast--warning .rbr-toast__icon { background: rgba(251,146,60,.12); color: #fb923c; }
.rbr-toast--warn .rbr-toast__prog,
.rbr-toast--warning .rbr-toast__prog { background: #fb923c; box-shadow: 0 0 6px rgba(251,146,60,.4); }

/* ============================================================ */
/* == PILL DESLIZANTE NO MENU                                 == */
/* ============================================================ */

/* Pill de fundo */
#rbr-nav-pill {
    position: absolute;
    height: calc(100% - 10px);
    top: 5px;
    border-radius: 8px;
    background: rgba(250, 204, 21, 0.08);
    border: 1px solid rgba(250, 204, 21, 0.18);
    box-shadow: 0 0 16px rgba(250,204,21,.06);
    pointer-events: none;
    z-index: 0;
    transition: left 0.38s cubic-bezier(0.16, 1, 0.3, 1), width 0.38s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Linha inferior dourada */
#rbr-nav-dot {
    position: absolute;
    bottom: 4px;
    height: 2px;
    border-radius: 2px;
    background: #facc15;
    box-shadow: 0 0 8px rgba(250,204,21,.55);
    pointer-events: none;
    z-index: 2;
    transition: left 0.38s cubic-bezier(0.16, 1, 0.3, 1), width 0.38s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Garante que nav tem position relative */
header.rbr-header nav {
    position: relative !important;
}

/* Botões do nav acima do pill */
header.rbr-header nav > button,
header.rbr-header nav > .group > button {
    position: relative;
    z-index: 1;
}

/* ============================================================ */
/* == PARTÍCULAS FLUTUANTES NO FUNDO                          == */
/* ============================================================ */

#rbr-particles-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.55;
}

/* Garante que o conteúdo fica acima das partículas */
/* Garante que o conteúdo fica acima das partículas */
.content-overlay {
    position: relative;
    z-index: 1;
}

/* preloader: não sobrescrever position:fixed do styles.css */

/* ------------------------------------------------------------
   HERO ROAD SVG — camada de fundo absoluta
   Sem position:absolute o SVG flutua no fluxo e empurra conteúdo
   ------------------------------------------------------------ */
.hero-road-svg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70%;
    opacity: 0.18;
    pointer-events: none;
    z-index: 0;
}

/* Conteúdo do #inicio acima das camadas de fundo */
#inicio > *:not(.hero-road-svg):not(.hero-grid):not(.hero-sideline):not(.hero-truck-strip):not(#hero-particles) {
    position: relative;
    z-index: 1;
}

/* ============================================================ */
/* == RESPEITA PREFERÊNCIA DE MOVIMENTO REDUZIDO              == */
/* ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .rbr-toast,
    .rbr-toast--removing,
    #rbr-nav-pill,
    #rbr-nav-dot {
        transition: none !important;
        animation: none !important;
    }

    #rbr-particles-canvas { display: none; }
}

/* ============================================================ */
/* == PARTÍCULAS FLUTUANTES — #inicio                         == */
/* ============================================================ */

#hero-particles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    animation: particles-fade-in 1.2s ease 0.5s forwards;
}

@keyframes particles-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Garante que o conteúdo do hero fique acima do canvas */
#inicio > *:not(#hero-particles) {
    position: relative;
    z-index: 1;
}