/* Minimal Custom CSS for GSAP Animations and Performance Optimization */

/* CSS Variables for consistency */
:root {
    --primary-black: #000000;
    --primary-white: #ffffff;
    --gray-light: #f5f5f5;
    --gray-medium: #e0e0e0;
    --gray-dark: #666666;
    --gray-darker: #333333;
    --text-white: #ffffff;
    --text-gray: #cccccc;
    --border-dark: #333333;
}

/* Animation performance optimization */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Image performance optimization for GSAP animations */
img {
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* Animation-ready classes for GSAP */
.hero-banner-image,
.banner-img,
.banner-img-large,
.accessories-hero-img,
.shades-hero-img,
.blog-img,
.product-img,
.accessory-img,
.product-img-dark {
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

.collection-banner,
.collection-banner-large,
.accessory-item,
.blog-card,
.product-card-dark {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

/* Carousel specific styles */
.carousel-item {
    min-width: 280px;
    flex-shrink: 0;
}

.carousel-track {
    transition: transform 0.5s ease;
    will-change: transform;
}

/* Loading spinner animation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-spinner-dark {
    animation: spin 1s linear infinite;
}

/* GSAP animation classes - these are used by animations.js */
.hero-banner-title,
.section-heading,
.banner-title,
.banner-title-large,
.accessories-title,
.shades-title,
.blog-title,
.product-name,
.product-price {
    /* GSAP will handle these animations */
}

/* Cart badge animation */
.cart-badge {
    transition: transform 0.3s ease;
}

.cart-badge:empty {
    display: none;
}

/* Ensure carousel buttons are visible */
.carousel-btn {
    z-index: 10;
}

/* Custom scrollbar for webkit browsers (optional) */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--primary-black);
}

::-webkit-scrollbar-thumb {
    background: var(--border-dark);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gray-dark);
}