/* ============================================================
   urbangt | style.css
   Estilos complementarios: scroll, seleccion, animaciones
   ============================================================ */

/* -----------------------------------------------------------
   Base
   ----------------------------------------------------------- */
html {
    scroll-behavior: smooth;
}

::selection {
    background-color: #DC143C;
    color: #0b192c;
}

/* -----------------------------------------------------------
   Scrollbar personalizada (estilo urbano minimalista)
   ----------------------------------------------------------- */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #DC143C;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #b8102e;
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #DC143C transparent;
}

/* -----------------------------------------------------------
   Animaciones globales
   ----------------------------------------------------------- */

/* Entrada del badge del carrito */
@keyframes badge-pop {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.3);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

#cart-badge:not(.hidden) {
    animation: badge-pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Fade-in sutil para elementos */
@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fade-in-up 0.5s ease-out forwards;
}

/* -----------------------------------------------------------
   Mejoras del Navbar
   ----------------------------------------------------------- */

/* Sombra sutil al hacer scroll (se activa via JS en fases futuras) */
#navbar.scrolled {
    box-shadow: 0 1px 20px rgba(0, 0, 0, 0.08);
}

:root.dark #navbar.scrolled {
    box-shadow: 0 1px 20px rgba(0, 0, 0, 0.25);
}

/* Transicion suave para el backdrop-blur */
#navbar {
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* -----------------------------------------------------------
   Mobile menu: capa de overlay con transicion
   ----------------------------------------------------------- */
#mobile-menu-overlay {
    transition: opacity 0.3s ease;
}

#mobile-menu-overlay:not(.hidden) {
    opacity: 1;
}

#mobile-menu-panel {
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

footer .border-dashed,
#mobile-menu-panel .border-dashed {
    transition: opacity 0.3s ease, border-color 0.3s ease;
}

footer .border-dashed:hover,
#mobile-menu-panel .border-dashed:hover {
    opacity: 0.6 !important;
    border-color: #DC143C !important;
}

/* -----------------------------------------------------------
   Formularios: estilos de focus
   ----------------------------------------------------------- */
input:focus {
    outline: none;
}

/* -----------------------------------------------------------
   Utilidades responsivas extra
   ----------------------------------------------------------- */
@media (max-width: 640px) {
    footer .grid {
        gap: 2rem;
    }
}