/* =========================================
   PRO-GAMER ULTIMATE EDITION 
   (Enlarged Dust + Text Glitch + Nav FX + Scrollbar + Footer FX)
   ========================================= */

/* Custom Fonts and Typography Defaults */
body { 
    font-family: 'Inter', sans-serif; 
    position: relative;
    z-index: 0;
    /* Ensure no scrolling side-to-side from particles */
    overflow-x: hidden; 
}

h1, h2, h3, .font-display { 
    font-family: 'Orbitron', sans-serif; 
}

/* =========================================
   CUSTOM CYBER SCROLLBAR
   ========================================= */

/* Firefox Scrollbar Fallback */
html {
    scrollbar-width: thin;
    scrollbar-color: #66fcf1 #0b0c10;
}

/* Chrome, Edge, and Safari Scrollbar */
::-webkit-scrollbar {
    width: 10px; 
    background-color: #0b0c10;
}

::-webkit-scrollbar-track {
    background: #0b0c10;
    border-left: 1px solid rgba(102, 252, 241, 0.1); 
}

::-webkit-scrollbar-thumb {
    background-color: #66fcf1; 
    border-radius: 10px;
    border: 2px solid #0b0c10; 
    transition: background-color 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #ff003c; 
}

/* =========================================
   NAVIGATION BAR EFFECTS
   ========================================= */

header nav a {
    position: relative;
    text-decoration: none;
    transition: text-shadow 0.3s ease;
}

/* The hidden, glowing underline */
header nav a::after {
    content: '';
    position: absolute;
    bottom: -6px; 
    left: 50%;
    width: 0%;
    height: 2px;
    background: #66fcf1;
    box-shadow: 0 0 8px #66fcf1;
    transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1); 
    transform: translateX(-50%); 
}

/* Expand the line and add text glow on hover */
header nav a:hover::after {
    width: 100%;
}

header nav a:hover {
    text-shadow: 0 0 8px rgba(102, 252, 241, 0.6);
}


/* =========================================
   HERO TEXT EFFECTS (Glitch & Neon Pulse)
   ========================================= */

/* Target the main Hero H1 Title */
.max-w-4xl h1 {
    animation: glitchAnim 4s infinite;
}

/* Target the "SALE" span inside the H1 */
.max-w-4xl h1 span {
    display: inline-block;
    animation: neonPulse 2s infinite alternate;
}

/* The Chromatic Aberration Glitch Effect */
@keyframes glitchAnim {
    0%, 90%, 100% {
        text-shadow: none;
        transform: skewX(0deg);
    }
    92% {
        text-shadow: 6px 0px #66fcf1, -6px 0px #ff003c;
        transform: skewX(-15deg);
    }
    94% {
        text-shadow: -6px 0px #66fcf1, 6px 0px #ff003c;
        transform: skewX(15deg);
    }
    96% {
        text-shadow: 3px 0px #66fcf1, -3px 0px #ff003c;
        transform: skewX(-5deg);
    }
}

/* Breathing Neon Glow for "SALE" */
@keyframes neonPulse {
    0% { text-shadow: 0 0 10px rgba(255, 0, 60, 0.5); }
    100% { text-shadow: 0 0 20px rgba(255, 0, 60, 0.9), 0 0 40px rgba(255, 0, 60, 0.6); }
}

/* =========================================
   BACKGROUND EFFECTS (Ambient Glow + Cyber Dust)
   ========================================= */

/* 1. Ambient RGB Underglow */
body::before {
    content: '';
    position: fixed;
    inset: 0; 
    z-index: -2;
    pointer-events: none; 
    background: 
        radial-gradient(circle at 15% 30%, rgba(102, 252, 241, 0.12), transparent 45%),
        radial-gradient(circle at 85% 70%, rgba(255, 0, 60, 0.12), transparent 45%);
    animation: ambientGlow 8s ease-in-out infinite alternate;
}

/* 2. ENLARGED Floating Cyber Dust */
body::after {
    content: '';
    position: fixed;
    top: 100vh;
    left: 0;
    width: 4px; 
    height: 4px; 
    border-radius: 50%; 
    z-index: -1;
    pointer-events: none;
    background: transparent;
    box-shadow: 
        10vw -10vh 3px #66fcf1, 25vw -30vh 5px #ff003c, 
        45vw -50vh 4px #66fcf1, 65vw -80vh 5px #ff003c, 
        85vw -20vh 3px #66fcf1, 95vw -70vh 4px #ff003c,
        5vw -90vh 5px #66fcf1, 55vw -15vh 3px #ff003c,
        75vw -40vh 6px #66fcf1, 35vw -85vh 4px #ff003c;
    animation: floatUp 20s linear infinite;
}

@keyframes ambientGlow {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.1); opacity: 1; }
}

@keyframes floatUp {
    0% { transform: translateY(0); opacity: 0; }
    10% { opacity: 0.7; }
    90% { opacity: 0.7; }
    100% { transform: translateY(-120vh); opacity: 0; }
}

/* =========================================
   PRODUCT CARDS (Glass Swipe + Neon Border)
   ========================================= */

.product-card {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease, border-color 0.4s ease;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Neon Glow and Lift on Hover */
.product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(102, 252, 241, 0.15);
    border-color: rgba(102, 252, 241, 0.5); 
}

/* Premium Glass Swipe Overlay */
.product-card .aspect-square::after {
    content: '';
    position: absolute;
    top: 0; 
    left: -150%; 
    width: 50%; 
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg);
    transition: left 0.6s ease-in-out;
    z-index: 10;
    pointer-events: none;
}

/* Trigger the swipe when the card is hovered */
.product-card:hover .aspect-square::after {
    left: 150%; 
}

/* =========================================
   ANIMATED FLASH SALE BANNER & CSS TIMER
   ========================================= */

.hazard-stripe-animated {
    background: repeating-linear-gradient(
        135deg,
        #ff003c,
        #ff003c 20px,
        #0b0c10 20px,
        #0b0c10 40px
    );
    background-size: 56.57px 56.57px; 
    animation: moveStripes 1.5s linear infinite, flash 1.5s ease-in-out infinite alternate;
}

@keyframes moveStripes {
    0% { background-position: 0 0; }
    100% { background-position: 56.57px 0; }
}

@keyframes flash {
    0% { filter: brightness(0.7); }
    100% { filter: brightness(1.2); }
}

/* CSS Slot Machine Timer Container */
.digit-window {
    height: 1.2em;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
}

.hours-strip, 
.mins-tens-strip, .mins-ones-strip, 
.secs-tens-strip, .secs-ones-strip {
    display: flex;
    flex-direction: column;
}

.digit-window > div > div {
    height: 1.2em;
    line-height: 1.2em;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Slot Machine Timings */
.secs-ones-strip { animation: slideUp 10s steps(10) infinite; }
.secs-tens-strip { animation: slideUp 60s steps(6) infinite; }
.mins-ones-strip { animation: slideUp 600s steps(10) infinite; }
.mins-tens-strip { animation: slideUp 3600s steps(6) infinite; }
.hours-strip { animation: slideUp 172800s steps(48) infinite; }

@keyframes slideUp {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-100%); }
}

/* =========================================
   FOOTER SOCIAL ICONS FX
   ========================================= */

/* Target the social links in the footer */
footer .flex.gap-4 a {
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Lift up and add an inner/outer neon ring on hover */
footer .flex.gap-4 a:hover {
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 0 15px rgba(102, 252, 241, 0.5), inset 0 0 10px rgba(102, 252, 241, 0.3);
    border-color: #66fcf1;
}

/* Make the icon itself glow */
footer .flex.gap-4 a:hover span {
    text-shadow: 0 0 10px #66fcf1;
}