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

:root {
    --cirrus-grey: #e8eef2;
    --lightning-color: rgba(255, 255, 255, 0.8);
    --glow-color: rgba(173, 216, 230, 0.15);
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--cirrus-grey);
    transition: background-color 0.3s ease;
}

.bg-cirrus-grey {
    background-color: var(--cirrus-grey);
}

.lightning-bolt {
    position: absolute;
    top: 0;
    left: 0;
    height: 110vh;
    width: 100vw; /* full screen width */
    background: linear-gradient(
        to bottom,
        rgba(200, 230, 255, 1) 0%,
        rgba(160, 210, 255, 0.9) 30%,
        rgba(120, 180, 255, 0.6) 60%,
        rgba(90, 150, 255, 0.3) 100%
    );

    /* polygon now full width, thick at top, thin at bottom */
    clip-path: polygon(
        50% 0%, 
        80% 0%, 
        75% 7%, 
        87% 5%, 
        40% 65%, 
        50% 63%,
        20% 100%, 
        13% 100%, 
        30% 69%, 
        20% 70%, 
        50% 19%, 
        40% 20%,
        50% 0%
    );

    filter:
        drop-shadow(0 0 30px rgba(180, 220, 255, 0.9))
        drop-shadow(0 0 80px rgba(130, 190, 255, 0.6))
        drop-shadow(0 0 160px rgba(90, 150, 255, 0.4));
}


.lightning-glow {
    background: radial-gradient(ellipse at center, var(--glow-color) 0%, transparent 70%);
}

body:hover {
    background-color: #e1e9ed;
}

/* Liquid glass effect */
a, .bg-black {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
    .text-8xl {
        font-size: 4rem;
        line-height: 1;
    }
    .text-4xl {
        font-size: 2rem;
        line-height: 2.5rem;
    }
}
.bg-black {
    border-radius: 16px;
}

a {
    border-radius: 9999px;
}