/*
Theme Name: Company Liquidations
Theme URI: https://companyliquidationslimited.com
Author: VARPEC 
Description: E-commerce focused Premium Industrial Cinematic theme.
Version: 2.0
Text Domain: company-liquidations
*/

/* Custom Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #050505; }
::-webkit-scrollbar-thumb { background: #333; }
::-webkit-scrollbar-thumb:hover { background: #dc143c; }

/* Global Typography Fixes */
h1, h2, h3, h4, h5, h6, .font-industrial {
    font-family: 'Teko', sans-serif;
}
body {
    font-family: 'Inter', sans-serif;
}

/* 
=========================================
KINETIC TYPOGRAPHY SECTION
=========================================
*/

/* 1. Hollow/Stroke Text Effect */
.stroke-text {
    /* Creates the dark glass-outline look */
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.15);
    color: transparent;
}

/* On hover, remove the stroke so the solid text color takes over */
.group:hover .stroke-text {
    -webkit-text-stroke: 0px transparent;
}

/* 2. Spotlight Effect (Damping un-hovered items) */
/* When the parent list is hovered, dim the rows that are NOT being hovered */
#kinetic-categories .group\/list:hover .category-row:not(:hover) {
    opacity: 0.3;
    filter: grayscale(100%) blur(2px);
}

/* 3. Infinite Fast Marquee inside hovered row */
@keyframes marqueeFast {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.animate-marquee-fast {
    animation: marqueeFast 12s linear infinite;
    width: max-content;
}

/* E-Commerce specific interactions */
.bento-card {
    cursor: pointer;
}
.bento-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255,255,255,0);
    transition: border-color 0.4s ease;
    z-index: 20;
    pointer-events: none;
}
.bento-card:hover::after {
    border-color: rgba(255,255,255,0.2);
}