/* Premium Upgrade CSS - Glassmorphism, Cursor & Interactions */

/* Enhanced Custom Cursor - Desktop Only */
@media (pointer: fine) {
    .custom-cursor-dot {
        position: fixed;
        top: 0;
        left: 0;
        width: 8px;
        height: 8px;
        background-color: #ffffff;
        border-radius: 50%;
        pointer-events: none;
        z-index: 9999;
        mix-blend-mode: difference;
        transform: translate(-50%, -50%);
        transition: transform 0.1s ease;
    }

    .custom-cursor-ring {
        position: fixed;
        top: 0;
        left: 0;
        width: 40px;
        height: 40px;
        border: 1px solid rgba(255, 255, 255, 0.5);
        border-radius: 50%;
        pointer-events: none;
        z-index: 9998;
        mix-blend-mode: difference;
        transform: translate(-50%, -50%);
        transition: width 0.3s, height 0.3s, background-color 0.3s, border-color 0.3s;
    }

    /* Hover state for cursor */
    .custom-cursor-ring.hover {
        width: 60px;
        height: 60px;
        background-color: rgba(255, 255, 255, 0.1);
        border-color: transparent;
        backdrop-filter: grayscale(1);
    }
}

/* Refined Glassmorphism Panel */
.glass-panel {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3) !important;
}

/* Magnetic Button Reset for Smoothness */
.btn-primary, .about-cta-btn {
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; /* Remove transform from transition as it conflicts with JS */
    will-change: transform;
}

/* Spline Container tweaks */
spline-viewer {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

/* Parallax Depth enhancement */
.bento-card {
    transform-style: preserve-3d;
    perspective: 1000px;
}
.bento-bg {
    transition: transform 0.5s ease-out;
}
.bento-card:hover .bento-bg {
    transform: scale(1.05) translateZ(-20px);
}
/* Page Transition Overlay */
.page-transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #02140D;
    z-index: 100000;
    pointer-events: none;
    opacity: 0;
}

/* Accessibility Focus States for Keyboard Navigation (WCAG 2.2) */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid #10b981 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.25) !important;
}