/* Animações estilo React / Framer — entrada, stagger e hover */

:root{
    --motion-duration:0.48s;
    --motion-ease:cubic-bezier(0.22, 1, 0.36, 1);
    --motion-stagger:55ms;
    --motion-distance:12px;
    --motion-hover-lift:-3px;
    --motion-hover-scale:1.006;
}

/* Estado inicial (antes de entrar na viewport) */
.motion-reveal{
    opacity:0;
    transform:translate3d(0, var(--motion-distance), 0);
    transition:
        opacity var(--motion-duration) var(--motion-ease),
        transform var(--motion-duration) var(--motion-ease),
        box-shadow 0.28s ease,
        border-color 0.28s ease;
    transition-delay:var(--motion-delay, 0ms);
    will-change:opacity, transform;
}

/* Visível após Intersection Observer */
.motion-reveal.is-motion-visible{
    opacity:1;
    transform:translate3d(0, 0, 0);
}

/* Topo da página — entrada mais rápida */
.page-head.motion-reveal{
    --motion-distance:8px;
    --motion-duration:0.4s;
}

/* Mini-cards dentro de painéis */
.sales-mini-card.motion-reveal,
.category-box-clean.motion-reveal,
.comprador-action-card.motion-reveal,
.comprador-summary-card.motion-reveal,
.pv-janela-card.motion-reveal,
.pv-summary-card.motion-reveal,
.pv-empty-panel.motion-reveal,
.pv-table-panel.motion-reveal,
.cr-hero-card.motion-reveal,
.cr-operadora-card.motion-reveal,
.cr-table-panel.motion-reveal,
.comprador-categories-totals > *.motion-reveal,
.comprador-purchase-categories .category-box-item.motion-reveal,
.team-day-row.motion-reveal,
.campaign-signal.motion-reveal,
.campaign-mini-trend.motion-reveal,
.campaign-prize-slim.motion-reveal,
.ranking-podium-card.motion-reveal,
.ranking-row-clean--premium.motion-reveal,
.preco-product-card.motion-reveal,
.cl-list-row.motion-reveal,
.cl-board-side.motion-reveal,
.cl-vacation-bar.motion-reveal,
.dp-kpi-card.motion-reveal,
.dp-team-tile.motion-reveal,
.redutor-vendedores-panel.motion-reveal{
    --motion-distance:10px;
}

/* Hover premium (após animação de entrada) */
@media (hover:hover) and (pointer:fine){
    .motion-reveal.is-motion-visible:is(
        .card-clean,
        .kpi-card,
        .kpi-card-main,
        .meta-dia-card-v2,
        .sales-panel-card,
        .section-card,
        .summary-card-clean,
        .sales-mini-card,
        .category-box-clean,
        .comprador-action-card,
        .comprador-summary-card,
        .commission-panel-modern,
        .commission-box-clean,
        .team-day-row,
        .dashboard-kpi-card,
        .cg-kpi-card,
        .cv-kpi-card,
        .cv-category-card,
        .cg-table-surface,
        .cg-rules-panel,
        .dashboard-surface,
        .re-panel,
        .re-ranking-panel,
        .re-rankings-subgrupos,
        .re-rankings-produtos,
        .re-rankings-duplo,
        .rx-card,
        .pv-janela-card,
        .pv-summary-card,
        .pv-empty-panel,
        .pv-table-panel,
        .cr-hero-card,
        .cr-operadora-card,
        .cr-table-panel,
        .campaign-signal,
        .campaign-mini-trend,
        .campaign-prize-slim,
        .ranking-podium-card,
        .ranking-row-clean--premium,
        .page-head,
        .preco-product-card,
        .dp-kpi-card,
        .dp-card,
        .dp-team-tile,
        .redutor-vendedores-panel
    ):hover{
        transform:translate3d(0, var(--motion-hover-lift), 0) scale(var(--motion-hover-scale));
        box-shadow:var(--shadow-card);
        border-color:var(--border-soft);
    }

    .motion-reveal.is-motion-visible:active{
        transform:translate3d(0, -1px, 0) scale(0.998);
        transition-duration:0.12s;
    }
}

/* Grids com filhos escalonados */
.motion-stagger > .motion-reveal:nth-child(1){ --motion-delay:calc(var(--motion-stagger) * 0); }
.motion-stagger > .motion-reveal:nth-child(2){ --motion-delay:calc(var(--motion-stagger) * 1); }
.motion-stagger > .motion-reveal:nth-child(3){ --motion-delay:calc(var(--motion-stagger) * 2); }
.motion-stagger > .motion-reveal:nth-child(4){ --motion-delay:calc(var(--motion-stagger) * 3); }
.motion-stagger > .motion-reveal:nth-child(5){ --motion-delay:calc(var(--motion-stagger) * 4); }
.motion-stagger > .motion-reveal:nth-child(6){ --motion-delay:calc(var(--motion-stagger) * 5); }
.motion-stagger > .motion-reveal:nth-child(7){ --motion-delay:calc(var(--motion-stagger) * 6); }
.motion-stagger > .motion-reveal:nth-child(8){ --motion-delay:calc(var(--motion-stagger) * 7); }
.motion-stagger > .motion-reveal:nth-child(9){ --motion-delay:calc(var(--motion-stagger) * 8); }
.motion-stagger > .motion-reveal:nth-child(n+10){ --motion-delay:calc(var(--motion-stagger) * 9); }

/* Sidebar — transição suave nos itens */
.minia-sidebar__link,
.minia-sidebar__sublink,
.minia-sidebar__section-title{
    transition:background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

@media (hover:hover) and (pointer:fine){
    .minia-sidebar__link:hover,
    .minia-sidebar__sublink:hover{
        transform:translateX(2px);
    }
}

/* Sem animação — acessibilidade */
@media (prefers-reduced-motion:reduce){
    :root{
        --motion-duration:0.01ms;
        --motion-stagger:0ms;
        --motion-distance:0;
    }

    .motion-reveal{
        opacity:1;
        transform:none;
        transition:none;
    }

    .minia-sidebar__link:hover,
    .minia-sidebar__sublink:hover{
        transform:none;
    }
}

.re-ranking-row.motion-reveal,
.re-rankings-subgrupos.motion-reveal,
.re-rankings-produtos.motion-reveal,
.re-kpi.motion-reveal,
.re-panel.motion-reveal{
    --motion-distance:10px;
}

body.motion-reduced .motion-reveal{
    opacity:1;
    transform:none;
    transition:none;
}

/* Contadores — leve destaque durante a contagem (estilo React) */
.counter-money,
.counter-money-inline,
.counter-money-plain,
.counter-percent,
.counter-int,
.counter-number{
    font-variant-numeric:tabular-nums;
    transition:color 0.25s ease;
}

.is-counter-animating{
    color:var(--primary, var(--primary));
}

.is-counter-done{
    color:inherit;
}

.comprador-dashboard .comprador-lab-progress span{
    transform-origin:left center;
    transform:scaleX(0);
    transition:transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay:calc(var(--motion-delay, 0ms) + 120ms);
}

.comprador-dashboard .comprador-lab-row.is-motion-visible .comprador-lab-progress span,
.comprador-dashboard .comprador-lab-row:not(.motion-reveal) .comprador-lab-progress span{
    transform:scaleX(1);
}

.comprador-dashboard .category-box-item,
.comprador-dashboard .comprador-action-value-row,
.comprador-dashboard .comprador-categories-totals,
.comprador-dashboard .comprador-value-trend{
    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        background 0.22s ease,
        color 0.22s ease;
}

.comprador-dashboard .comprador-categories-totals > *.motion-reveal,
.comprador-dashboard .comprador-purchase-categories .category-box-item.motion-reveal{
    --motion-distance:6px;
    --motion-duration:0.36s;
}

.comprador-dashboard .comprador-lab-row.motion-reveal{
    opacity:1 !important;
}

@media (hover:hover) and (pointer:fine){
    .comprador-dashboard .category-box-item:hover{
        transform:translate3d(0, -2px, 0);
    }

    .comprador-dashboard .comprador-action-card:hover .comprador-action-value-row,
    .comprador-dashboard .comprador-value-trend:hover{
        transform:translate3d(0, -1px, 0);
    }
}

@media (prefers-reduced-motion:reduce){
    .comprador-dashboard .comprador-lab-progress span{
        transform:scaleX(1);
        transition:none;
    }
}

/* Reforço global — tipografia métrica (carrega após CSS de página) */
.app-main :is(
    .value-md,
    .sales-mini-value,
    .kpi-card-value,
    .dashboard-kpi-value,
    .counter-money,
    .counter-money-inline,
    .counter-money-plain,
    .counter-int,
    .counter-number,
    .counter-percent,
    [class$="__value"],
    [class$="-metric-value"],
    [class$="-metric__value"]
){
    font-size:var(--type-value);
    line-height:var(--value-md-line-height);
}

.app-main .section-card--categories :is(
    .category-box-row strong,
    .category-box-projection strong,
    .category-box-data--desktop .counter-money-plain
){
    font-size:12px;
}

.app-main :is(
    .meta-dia-v3-title,
    .rx-ring__value,
    .campaign-progress-copy > strong,
    [class*="hero"][class$="__value"]
){
    font-size:var(--type-hero);
    line-height:1.15;
}