/* style.css - VinWeb Design System & Premium Effects */

/* 1. Global & Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

body {
    background-color: #0b1326;
    color: #dae2fd;
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
}

/* 2. Custom Sleek Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #060e20;
}
::-webkit-scrollbar-thumb {
    background: #573878;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #d0bcff;
}

/* 3. Glassmorphism Design Elements */
.glass-card {
    background: rgba(23, 31, 51, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(208, 188, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card:hover {
    border-color: rgba(208, 188, 255, 0.25);
    box-shadow: 0 12px 40px 0 rgba(160, 120, 255, 0.15);
}

/* 4. Animated Background Glows */
.glow-accent {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
    z-index: 0;
    opacity: 0.15;
    animation: drift 15s ease-in-out infinite alternate;
}

@keyframes drift {
    0% {
        transform: translate(0px, 0px) scale(1);
    }
    50% {
        transform: translate(50px, -30px) scale(1.2);
    }
    100% {
        transform: translate(-30px, 40px) scale(0.9);
    }
}

/* 5. Custom Button Shine Effect */
.btn-premium {
    position: relative;
    overflow: hidden;
}
.btn-premium::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 30%;
    height: 200%;
    background: rgba(255, 255, 255, 0.15);
    transform: rotate(30deg);
    transition: all 0.6s ease;
    opacity: 0;
}
.btn-premium:hover::after {
    left: 130%;
    opacity: 1;
}

/* 6. FAQ Accordion Details Smooth Transition */
.faq-details {
    transition: max-height 0.4s ease-out, background-color 0.3s ease;
    max-height: 72px; /* Closed state height including padding */
}

.faq-details[open] {
    max-height: 500px; /* Open state height - adjusted dynamically in JS */
}

.faq-summary {
    list-style: none;
    outline: none;
}
.faq-summary::-webkit-details-marker {
    display: none;
}

/* 7. Bento Grid Hover Effects */
.bento-item {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease;
}
.bento-item:hover {
    transform: translateY(-5px);
}
.bento-item img {
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.bento-item:hover img {
    transform: scale(1.05);
}

/* 8. Mobile Menu Navigation Slider */
#mobile-menu {
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
#mobile-menu.open {
    transform: translateX(0);
}

/* 9. Contact Form Inputs & Focus Glow */
.form-input {
    background: rgba(255, 255, 255, 0.95); /* Light background for contrast */
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #000000; /* Force black text */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.form-input::placeholder {
    color: rgba(0, 0, 0, 0.45); /* Darker placeholder for contrast */
}
.form-input:focus {
    border-color: #a078ff;
    box-shadow: 0 0 12px rgba(160, 120, 255, 0.3);
    outline: none;
}

/* 10. Toast Notification styling */
.toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    transform: translateY(100px);
    opacity: 0;
    z-index: 100;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
}
.toast.show {
    transform: translateY(0);
    opacity: 1;
}

/* 11. Interactive Glow and 3D Tilt Card Effects */
.glow-card-interactive {
    position: relative;
    overflow: hidden;
    /* Uses a dynamic background that glows around the mouse cursor */
    background: radial-gradient(800px circle at var(--mouse-x, 0px) var(--mouse-y, 0px), rgba(160, 120, 255, 0.1) 0%, transparent 50%), rgba(23, 31, 51, 0.45);
    border: 1px solid rgba(208, 188, 255, 0.12);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.glow-card-interactive:hover {
    border-color: rgba(160, 120, 255, 0.35);
    box-shadow: 0 12px 40px 0 rgba(160, 120, 255, 0.15);
}

.tilt-card {
    transition: transform 0.15s ease-out;
    will-change: transform;
}

/* 12. Scroll Reveal Animations (Intersection Observer) */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}
.reveal-delay-100 { transition-delay: 100ms; }
.reveal-delay-200 { transition-delay: 200ms; }
.reveal-delay-300 { transition-delay: 300ms; }

/* 13. Custom Premium Cursor & Typing Effects */
@media (min-width: 768px) {
    body.custom-cursor-active {
        cursor: none;
    }
    body.custom-cursor-active a,
    body.custom-cursor-active button,
    body.custom-cursor-active input,
    body.custom-cursor-active select,
    body.custom-cursor-active textarea,
    body.custom-cursor-active .faq-summary,
    body.custom-cursor-active [role="button"] {
        cursor: none;
    }
}

.custom-cursor {
    width: 32px;
    height: 32px;
    border: 1.5px solid rgba(160, 120, 255, 0.5);
    background-color: transparent;
    border-radius: 50%;
    position: fixed;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 9999;
    transition: width 0.2s ease, height 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
    will-change: top, left, width, height;
}

.custom-cursor-dot {
    width: 6px;
    height: 6px;
    background-color: #d0bcff;
    border-radius: 50%;
    position: fixed;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 9999;
    transition: transform 0.1s ease;
    will-change: top, left;
}

/* Custom Cursor Hover States */
.custom-cursor.hovered {
    width: 50px;
    height: 50px;
    background-color: rgba(160, 120, 255, 0.12);
    border-color: rgba(208, 188, 255, 0.85);
    box-shadow: 0 0 15px rgba(160, 120, 255, 0.4);
}

.custom-cursor-dot.hovered {
    transform: translate(-50%, -50%) scale(1.5);
    background-color: #ffffff;
}

/* Typing text cursor blink */
#typing-text {
    border-right: 2px solid rgba(219, 184, 255, 0.8);
    animation: blink-caret 0.75s step-end infinite;
}

@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: rgba(219, 184, 255, 0.8); }
}