/* ==========================================================================
   RUCA — MELHORIAS VISUAIS (UI ENHANCEMENTS)
   Carregado SOMENTE nas paginas internas (cardapio, produto, checkout,
   rastrear, sucesso, painel do cliente, login, cadastro).
   NAO e carregado na landing page (home.php) — seguro para rollback.
   ========================================================================== */

/* 1. Barra de progresso de rolagem (linha dourada no topo) */
#ruca-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, var(--gold-dark, #9B7B3E), var(--gold, #C5A059));
    z-index: 9999;
    transition: width 0.12s linear;
    pointer-events: none;
    box-shadow: 0 0 8px rgba(197, 160, 89, 0.5);
}

/* 2. Scroll reveal (fade-up ao entrar na viewport) */
.ruca-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}
.ruca-reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* 3. Skeleton shimmer (placeholder de carregamento) */
.ruca-skeleton {
    position: relative;
    overflow: hidden;
    background: #ececec;
    border-radius: 6px;
}
.ruca-skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
    animation: rucaShimmer 1.4s infinite;
}
.ruca-skel-card {
    border: 1px solid rgba(17, 17, 17, 0.06);
    border-radius: 8px;
    overflow: hidden;
    background: var(--secondary, #fff);
}
@keyframes rucaShimmer {
    100% { transform: translateX(100%); }
}

/* 4. Brilho dourado (sheen) nos botoes ao passar o mouse */
.btn {
    position: relative;
    overflow: hidden;
}
.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: skewX(-20deg);
    transition: left 0.6s ease;
    pointer-events: none;
}
.btn:hover::before {
    left: 140%;
}

/* 5. Tipografia responsiva (evita quebras no mobile) */
.page-header h1,
.page-header .section-title {
    font-size: clamp(1.7rem, 4.5vw, 2.6rem) !important;
}
.section-title {
    font-size: clamp(1.6rem, 4vw, 2.3rem);
}

/* 6. Foco acessivel para navegacao por teclado */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.btn:focus-visible {
    outline: 2px solid var(--gold, #C5A059);
    outline-offset: 2px;
    border-radius: 3px;
}

/* 7. Polimento de hover nos cards */
.produto-card,
.sim-card,
.sugestao-card,
.track-card {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.4s ease;
}

/* 8. Respeita usuarios que preferem menos animacao */
@media (prefers-reduced-motion: reduce) {
    .ruca-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    #ruca-scroll-progress { transition: none; }
    .btn::before { display: none; }
}