/**
 * @file: styles.css
 * @description: Custom styles for the 3D3 landing page.
 * This file complements Tailwind CSS with specific styles for animations,
 * custom components, and visual effects.
 */

/* --- GENERAL STYLES --- */

body {
    font-family: 'Inter', sans-serif;
    background-color: #000000;
    color: #E2E8F0; /* slate-200 */
    /* Prevents horizontal overflow on all screen sizes */
    overflow-x: hidden;
}

/* --- BACKGROUND CANVAS --- */

#bg-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Places the canvas behind all other content */
}

/* --- HEADER --- */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 50;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
}

/* --- ANIMATIONS & EFFECTS --- */

/* Fade-in-up animation for elements on scroll */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.645, 0.045, 0.355, 1), 
                transform 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.fade-in-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Neon effect button style */
.btn-neon {
    transition: all 0.3s ease;
    border: 2px solid #4ade80; /* green-400 */
}

.btn-neon:hover {
    background-color: #4ade80; /* green-400 */
    color: #000;
    box-shadow: 0 0 25px #4ade80;
}

/* --- 3D CANVAS CONTAINER --- */

#three-canvas-container {
    cursor: grab;
    width: 100%;
    height: 100%;
}

#three-canvas-container:grabbing {
    cursor: grabbing;
}

/* --- SWIPER CAROUSEL STYLES --- */

.product-carousel {
    /* Custom properties for Swiper navigation and pagination colors */
    --swiper-navigation-color: #4ade80; /* green-400 */
    --swiper-pagination-color: #4ade80; /* green-400 */
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0.75rem; /* rounded-lg */
    border: 2px solid rgba(74, 222, 128, 0.2);
}