@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --glass: rgba(255, 255, 255, 0.05);
    --glass-blur: blur(16px);
    --glass-border: 1px solid rgba(255, 255, 255, 0.08);
    --purple-gradient: linear-gradient(to right, #8b5cf6, #a78bfa);
    --blue-gradient: linear-gradient(to right, #38bdf8, #6366f1);
}

/* Glassmorphism base with enhanced depth */
.glass {
    background: var(--glass);
    border: var(--glass-border);
    backdrop-filter: var(--glass-blur);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    will-change: transform, box-shadow;
}

.glass:hover {
    backdrop-filter: var(--glass-blur) blur(20px);
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* Blog post grid enhancements */
.grid-cols-2 > article {
    transition: all 0.3s ease;
    transform: perspective(1000px) rotateY(0deg);
}

.grid-cols-2 > article:hover {
    transform: perspective(1000px) rotateY(2deg) scale(1.02);
    box-shadow: 0 8px 24px rgba(139, 92, 246, 0.15);
}

/* Button gradients with kinetic energy */
.a:is(.inline-block, button).bg-gradient-to-r {
    transition: all 0.4s ease-in-out;
}

.a:is(.inline-block, button).bg-gradient-to-r:hover {
    box-shadow: 0 0 15px rgba(100, 89, 255, 0.3),
                0 0 30px rgba(79, 70, 227, 0.2);
    transform: translateY(-2px);
}

/* Chart containers with dynamic backgrounds */
canvas#microChart,
canvas#oreChart {
    background: repeating-linear-gradient(
        45deg,
        rgba(255,255,255,0.01),
        rgba(255,255,255,0.01) 10px,
        rgba(0,0,0,0.1) 10px,
        rgba(0,0,0,0.1) 20px
    );
    border: 1px solid rgba(139, 92, 246, 0.1);
}

/* Footer glow effect for legal links */
footer a:hover {
    background: linear-gradient(90deg, #8b5cf6, #a78bfa);
    -webkit-background-clip: text;
    color: transparent;
}

/* Recent blog card animation */
.animate {
    opacity: 0;
    transform: translateY(20px);
}

.animate.active {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.6s ease-out;
}

/* Custom focus ring for input fields */
input:focus,
textarea:focus {
    outline: 0;
    border-color: #a78bfa !important;
    box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.2);
}

@media (max-width: 768px) {
    .md\\:grid-cols-2 {
        grid-template-columns: 1fr !important;
    }
    
    .grid-cols-2 {
        grid-template-columns: 1fr !important;
    }
    
    .glass:hover {
        transform: none;
        box-shadow: none;
    }
}