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

/* ===== BASE ===== */
body {
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.font-display {
    font-family: 'Outfit', sans-serif;
}

/* ===== PARALLAX LAYERS ===== */
.parallax-layer {
    position: absolute;
    inset: 0;
    will-change: transform;
    pointer-events: none;
}

/* ===== HERO BACKGROUNDS ===== */
.hero-stars {
    background-image:
        radial-gradient(1px 1px at 10% 20%, rgba(100, 181, 246, 0.4) 0%, transparent 100%),
        radial-gradient(1px 1px at 25% 50%, rgba(255, 255, 255, 0.2) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 40% 15%, rgba(100, 181, 246, 0.3) 0%, transparent 100%),
        radial-gradient(1px 1px at 55% 70%, rgba(255, 255, 255, 0.15) 0%, transparent 100%),
        radial-gradient(1px 1px at 70% 35%, rgba(100, 181, 246, 0.25) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 85% 60%, rgba(255, 255, 255, 0.2) 0%, transparent 100%),
        radial-gradient(1px 1px at 15% 80%, rgba(100, 181, 246, 0.2) 0%, transparent 100%),
        radial-gradient(1px 1px at 90% 10%, rgba(255, 255, 255, 0.15) 0%, transparent 100%),
        radial-gradient(1px 1px at 50% 90%, rgba(100, 181, 246, 0.2) 0%, transparent 100%),
        radial-gradient(1px 1px at 30% 40%, rgba(255, 255, 255, 0.1) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 65% 85%, rgba(100, 181, 246, 0.15) 0%, transparent 100%),
        radial-gradient(1px 1px at 80% 45%, rgba(255, 255, 255, 0.12) 0%, transparent 100%);
}

.hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(33, 150, 243, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(33, 150, 243, 0.03) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
}

/* ===== PARALLAX BANNER BACKGROUNDS ===== */
.parallax-banner-bg {
    position: absolute;
    inset: 0;
    background-color: #0a1628;
    background-image:
        radial-gradient(circle at 20% 50%, rgba(33, 150, 243, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 30%, rgba(25, 118, 210, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 50% 80%, rgba(100, 181, 246, 0.08) 0%, transparent 50%),
        radial-gradient(2px 2px at 15% 25%, rgba(100, 181, 246, 0.3) 1px, transparent 0),
        radial-gradient(2px 2px at 35% 65%, rgba(255, 255, 255, 0.15) 1px, transparent 0),
        radial-gradient(1.5px 1.5px at 55% 20%, rgba(100, 181, 246, 0.25) 1px, transparent 0),
        radial-gradient(2px 2px at 75% 55%, rgba(255, 255, 255, 0.12) 1px, transparent 0),
        radial-gradient(1.5px 1.5px at 25% 85%, rgba(100, 181, 246, 0.2) 1px, transparent 0),
        radial-gradient(2px 2px at 85% 80%, rgba(255, 255, 255, 0.1) 1px, transparent 0),
        radial-gradient(1.5px 1.5px at 45% 45%, rgba(100, 181, 246, 0.18) 1px, transparent 0),
        radial-gradient(2px 2px at 65% 75%, rgba(33, 150, 243, 0.15) 1px, transparent 0),
        radial-gradient(1.5px 1.5px at 10% 55%, rgba(255, 255, 255, 0.08) 1px, transparent 0),
        radial-gradient(2px 2px at 90% 15%, rgba(100, 181, 246, 0.12) 1px, transparent 0);
    background-attachment: fixed;
}

.parallax-banner-bg-alt {
    position: absolute;
    inset: 0;
    background-color: #0D1117;
    background-image:
        radial-gradient(circle at 30% 40%, rgba(33, 150, 243, 0.12) 0%, transparent 40%),
        radial-gradient(circle at 70% 60%, rgba(100, 181, 246, 0.08) 0%, transparent 40%),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 60px,
            rgba(33, 150, 243, 0.02) 60px,
            rgba(33, 150, 243, 0.02) 61px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 60px,
            rgba(33, 150, 243, 0.02) 60px,
            rgba(33, 150, 243, 0.02) 61px
        );
    background-attachment: fixed;
}

/* ===== SCROLL REVEAL ===== */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #0D1117;
}

::-webkit-scrollbar-thumb {
    background: #2196F3;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #1976D2;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .parallax-banner-bg,
    .parallax-banner-bg-alt {
        background-attachment: scroll;
    }
}