/* Tailwind CSS will be loaded via script tag in the template */

/* General utility styles that may be used elsewhere */
.container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.background-grid {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(74, 123, 252, 0.05) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(74, 123, 252, 0.05) 1px, transparent 1px);
    background-size: 50px 50px;
    z-index: -10;
    pointer-events: none;
}

/* Font Awesome icon styles */
.fas, .fa, .far, .fab {
    font-size: 1rem;
    vertical-align: middle;
}

/* ---------------------------- */
/* Section background utilities */
/* ---------------------------- */
.section-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -10;
}

.bg-grid-blue {
    background-image: linear-gradient(to right, rgba(74,123,252,0.05) 1px, transparent 1px),
                      linear-gradient(to bottom, rgba(74,123,252,0.05) 1px, transparent 1px);
    background-size: 80px 80px;
}

.bg-grid-compact {
    background-image: linear-gradient(to right, rgba(6,182,212,0.05) 1px, transparent 1px),
                      linear-gradient(to bottom, rgba(6,182,212,0.05) 1px, transparent 1px);
    background-size: 60px 60px;
}

.gradient-top {
    background: linear-gradient(to bottom, rgba(2,6,23,0.0) 0%, rgba(2,6,23,0.6) 40%, rgba(2,6,23,0.0) 100%);
}

.diag-sheen {
    background: linear-gradient(135deg, rgba(59,130,246,0.10), rgba(6,182,212,0.10) 35%, rgba(2,6,23,0.0) 60%);
}

.vignette {
    background: radial-gradient(1200px 600px at 50% 120%, rgba(2,6,23,0.85), rgba(2,6,23,0.0) 60%),
                radial-gradient(800px 400px at 0% 0%, rgba(2,6,23,0.65), rgba(2,6,23,0.0) 50%);
}

.spot-tr {
    background: radial-gradient(500px 500px at 90% 10%, rgba(6,182,212,0.18), rgba(6,182,212,0.0) 60%);
}

.spot-bl {
    background: radial-gradient(500px 500px at 10% 90%, rgba(59,130,246,0.18), rgba(59,130,246,0.0) 60%);
}

/* Alternating background color tokens */
.bg-alt-1 { background-color: #0b1220; }
.bg-alt-2 { background-color: #0a111d; }
.bg-alt-3 { background-color: #0a0f19; }
.bg-alt-4 { background-color: #070e18; }

/* Additional overlay patterns */
.mesh-tl {
    background: radial-gradient(600px 600px at 0% 0%, rgba(59,130,246,0.15), rgba(59,130,246,0.0) 60%),
                radial-gradient(800px 800px at 100% 100%, rgba(6,182,212,0.10), rgba(6,182,212,0.0) 55%);
}

.stripes-diag {
    background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.0) 2px, rgba(255,255,255,0.0) 10px);
}

.divider-gradient-top {
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 96px;
    background: linear-gradient(to bottom, rgba(2,6,23,0.0) 0%, rgba(6,182,212,0.08) 30%, rgba(2,6,23,0.0) 100%);
}


/* Reveal Animations */
[data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 600ms ease, transform 600ms ease;
}

[data-reveal].reveal-in {
    opacity: 1;
    transform: translateY(0);
}

[data-reveal][data-reveal-delay="100"] { transition-delay: 100ms; }
[data-reveal][data-reveal-delay="150"] { transition-delay: 150ms; }
[data-reveal][data-reveal-delay="200"] { transition-delay: 200ms; }
[data-reveal][data-reveal-delay="250"] { transition-delay: 250ms; }
[data-reveal][data-reveal-delay="300"] { transition-delay: 300ms; }
[data-reveal][data-reveal-delay="400"] { transition-delay: 400ms; }
[data-reveal][data-reveal-delay="500"] { transition-delay: 500ms; }