/* 
  VitaGlowing Custom Styles 
  Tailwind CSS is used for utility classes. This file contains custom 
  animations, specific component styles, and overrides.
*/

/* Base Styles */
body {
    scroll-behavior: smooth;
}

/* Animations */
@keyframes float {
    0% { transform: translate(0px, 0px) rotate(0deg); }
    33% { transform: translate(30px, -50px) rotate(5deg); }
    66% { transform: translate(-20px, 20px) rotate(-5deg); }
    100% { transform: translate(0px, 0px) rotate(0deg); }
}

@keyframes float-delayed {
    0% { transform: translate(0px, 0px) rotate(0deg); }
    33% { transform: translate(-30px, 50px) rotate(-5deg); }
    66% { transform: translate(20px, -20px) rotate(5deg); }
    100% { transform: translate(0px, 0px) rotate(0deg); }
}

.float-anim {
    animation: float 20s infinite ease-in-out;
}

.float-anim-delayed {
    animation: float-delayed 25s infinite ease-in-out;
}

/* 3D Product Feel */
.perspective {
    perspective: 1000px;
}

.product-3d {
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    transform-style: preserve-3d;
}

/* Scrollbar customization for a premium feel */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #fff0f1; 
}
::-webkit-scrollbar-thumb {
    background: #ffaaaf; 
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #ff7b83; 
}

/* Appended from index.html */

        html, body {
            background-color: #F9F9F9;
            color: #1A1A1A;
            overflow-x: hidden;
            width: 100vw;
            max-width: 100%;
            position: relative;
        }

        ::selection {
            background-color: #E8D4A2;
            color: #1A1A1A;
        }

        /* Light Glassmorphism utilities */
        .glass-light {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.9);
        }

        .glass-panel {
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(30px);
            border: 1px solid rgba(255, 255, 255, 0.6);
            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.03);
        }

        /* 3D Perspective CSS for Luminous Light */
        .perspective-1000 {
            perspective: 1200px;
        }

        .preserve-3d {
            transform-style: preserve-3d;
        }

        .product-card-3d {
            transform-style: preserve-3d;
            perspective: 1500px;
        }

        .product-card-3d .card-bg {
            transform: translateZ(0px);
            transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.6s, border-color 0.6s;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
        }

        .product-card-3d .card-img {
            transform: translateZ(20px);
            transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        /* Glare effect on hover */
        .product-card-3d .card-bg::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 50%;
            height: 100%;
            background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.8), transparent);
            transform: skewX(-20deg);
            transition: 0.7s;
            pointer-events: none;
        }

        .product-card-3d:hover .card-bg {
            transform: translateZ(15px) rotateX(5deg) rotateY(-5deg);
            box-shadow: -15px 25px 50px rgba(0, 0, 0, 0.06), inset 0 0 0 1px rgba(255, 255, 255, 1);
            border-color: rgba(255, 255, 255, 1);
        }

        .product-card-3d:hover .card-bg::after {
            left: 150%;
        }

        .product-card-3d:hover .card-img {
            transform: translateZ(100px) scale(1.1);
            filter: drop-shadow(0 25px 35px rgba(0, 0, 0, 0.15));
        }

        /* Ambient Light Orbs */
        .orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(90px);
            opacity: 0.6;
            z-index: -1;
            pointer-events: none;
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: #F9F9F9;
        }

        ::-webkit-scrollbar-thumb {
            background: #E0E0E0;
            border-radius: 4px;
        }

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