/* Animations — Starfield, Glow Effects, Pulse */

/* Starfield — 3-layer parallax */
.starfield {
    position: relative;
    overflow: hidden;
    background: var(--bg-deep);
}

.starfield::before,
.starfield::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    pointer-events: none;
}

/* Layer 1: distant stars (tiny, slow) */
.starfield::before {
    background-image:
        radial-gradient(1px 1px at 50px 100px, rgba(255,255,255,0.4), transparent),
        radial-gradient(1px 1px at 200px 300px, rgba(255,255,255,0.3), transparent),
        radial-gradient(1px 1px at 400px 50px, rgba(255,255,255,0.35), transparent),
        radial-gradient(1px 1px at 600px 200px, rgba(255,255,255,0.25), transparent),
        radial-gradient(1px 1px at 100px 400px, rgba(255,255,255,0.4), transparent),
        radial-gradient(1px 1px at 350px 500px, rgba(255,255,255,0.3), transparent),
        radial-gradient(1px 1px at 750px 150px, rgba(255,255,255,0.2), transparent),
        radial-gradient(1px 1px at 150px 250px, rgba(255,255,255,0.35), transparent),
        radial-gradient(1px 1px at 500px 350px, rgba(255,255,255,0.3), transparent),
        radial-gradient(1px 1px at 280px 180px, rgba(255,255,255,0.25), transparent),
        radial-gradient(1px 1px at 820px 380px, rgba(255,255,255,0.3), transparent),
        radial-gradient(1px 1px at 680px 450px, rgba(255,255,255,0.2), transparent),
        radial-gradient(1px 1px at 900px 80px, rgba(255,255,255,0.35), transparent),
        radial-gradient(1px 1px at 70px 550px, rgba(255,255,255,0.3), transparent),
        radial-gradient(1px 1px at 430px 620px, rgba(255,255,255,0.25), transparent),
        radial-gradient(1px 1px at 560px 120px, rgba(255,255,255,0.4), transparent),
        radial-gradient(1px 1px at 310px 430px, rgba(255,255,255,0.2), transparent),
        radial-gradient(1px 1px at 840px 520px, rgba(255,255,255,0.3), transparent),
        radial-gradient(1px 1px at 180px 680px, rgba(255,255,255,0.25), transparent),
        radial-gradient(1px 1px at 950px 320px, rgba(255,255,255,0.35), transparent),
        radial-gradient(1px 1px at 620px 580px, rgba(255,255,255,0.2), transparent),
        radial-gradient(1px 1px at 40px 350px, rgba(255,255,255,0.4), transparent),
        radial-gradient(1px 1px at 770px 640px, rgba(255,255,255,0.3), transparent),
        radial-gradient(1px 1px at 480px 250px, rgba(255,255,255,0.25), transparent),
        radial-gradient(1px 1px at 120px 600px, rgba(255,255,255,0.35), transparent),
        radial-gradient(1px 1px at 360px 90px, rgba(255,255,255,0.2), transparent),
        radial-gradient(1px 1px at 880px 210px, rgba(255,255,255,0.3), transparent),
        radial-gradient(1px 1px at 530px 480px, rgba(255,255,255,0.4), transparent),
        radial-gradient(1px 1px at 250px 560px, rgba(255,255,255,0.25), transparent),
        radial-gradient(1px 1px at 700px 30px, rgba(255,255,255,0.3), transparent);
    animation: drift-slow 120s linear infinite;
}

/* Layer 2: mid-range stars (medium, moderate speed) */
.starfield::after {
    background-image:
        radial-gradient(1.5px 1.5px at 80px 150px, rgba(255,255,255,0.5), transparent),
        radial-gradient(1.5px 1.5px at 300px 250px, rgba(255,255,255,0.4), transparent),
        radial-gradient(1.5px 1.5px at 550px 100px, rgba(255,255,255,0.45), transparent),
        radial-gradient(1.5px 1.5px at 170px 400px, rgba(255,255,255,0.5), transparent),
        radial-gradient(1.5px 1.5px at 450px 320px, rgba(255,255,255,0.35), transparent),
        radial-gradient(1.5px 1.5px at 720px 180px, rgba(255,255,255,0.45), transparent),
        radial-gradient(1.5px 1.5px at 90px 520px, rgba(255,255,255,0.4), transparent),
        radial-gradient(1.5px 1.5px at 380px 60px, rgba(255,255,255,0.5), transparent),
        radial-gradient(1.5px 1.5px at 640px 400px, rgba(255,255,255,0.35), transparent),
        radial-gradient(1.5px 1.5px at 230px 330px, rgba(255,255,255,0.45), transparent),
        radial-gradient(1.5px 1.5px at 800px 280px, rgba(255,255,255,0.4), transparent),
        radial-gradient(1.5px 1.5px at 510px 550px, rgba(255,255,255,0.5), transparent),
        radial-gradient(1.5px 1.5px at 130px 200px, rgba(255,255,255,0.35), transparent),
        radial-gradient(1.5px 1.5px at 670px 90px, rgba(255,255,255,0.45), transparent),
        radial-gradient(1.5px 1.5px at 420px 470px, rgba(255,255,255,0.4), transparent),
        radial-gradient(1.5px 1.5px at 860px 350px, rgba(255,255,255,0.35), transparent),
        radial-gradient(1.5px 1.5px at 260px 600px, rgba(255,255,255,0.5), transparent),
        radial-gradient(1.5px 1.5px at 580px 220px, rgba(255,255,255,0.4), transparent),
        radial-gradient(1.5px 1.5px at 40px 450px, rgba(255,255,255,0.45), transparent),
        radial-gradient(1.5px 1.5px at 740px 500px, rgba(255,255,255,0.35), transparent);
    animation: drift-mid 80s linear infinite;
}

/* Layer 3: near stars (larger, faster) — requires a DOM element */
.starfield-near {
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    pointer-events: none;
    background-image:
        radial-gradient(2px 2px at 120px 200px, rgba(255,255,255,0.6), transparent),
        radial-gradient(2px 2px at 400px 150px, rgba(255,255,255,0.55), transparent),
        radial-gradient(2.5px 2.5px at 650px 350px, rgba(255,255,255,0.5), transparent),
        radial-gradient(2px 2px at 200px 500px, rgba(255,255,255,0.6), transparent),
        radial-gradient(2.5px 2.5px at 500px 80px, rgba(255,255,255,0.45), transparent),
        radial-gradient(2px 2px at 800px 250px, rgba(255,255,255,0.55), transparent),
        radial-gradient(2px 2px at 350px 400px, rgba(255,255,255,0.5), transparent),
        radial-gradient(2.5px 2.5px at 100px 300px, rgba(255,255,255,0.6), transparent),
        radial-gradient(2px 2px at 600px 500px, rgba(255,255,255,0.45), transparent),
        radial-gradient(2px 2px at 750px 100px, rgba(255,255,255,0.55), transparent),
        radial-gradient(2.5px 2.5px at 450px 250px, rgba(0, 212, 255, 0.3), transparent),
        radial-gradient(2px 2px at 280px 450px, rgba(255,255,255,0.5), transparent),
        radial-gradient(2px 2px at 900px 400px, rgba(0, 212, 255, 0.25), transparent),
        radial-gradient(2px 2px at 550px 600px, rgba(255,255,255,0.55), transparent),
        radial-gradient(2.5px 2.5px at 180px 120px, rgba(255,255,255,0.6), transparent);
    animation: drift-fast 50s linear infinite;
}

@keyframes drift-slow {
    from { transform: translateY(0); }
    to { transform: translateY(-50%); }
}

@keyframes drift-mid {
    from { transform: translateY(0); }
    to { transform: translateY(-50%); }
}

@keyframes drift-fast {
    from { transform: translateY(0); }
    to { transform: translateY(-50%); }
}

/* Glow effects */
.glow-text {
    text-shadow: 0 0 10px var(--cyan-glow), 0 0 20px var(--cyan-dim);
}

.glow-border {
    transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}

.glow-border:hover {
    border-color: var(--cyan-border-hover);
    box-shadow: 0 0 20px var(--cyan-glow);
    transform: translateY(-2px);
}

/* CTA button pulse */
@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 5px var(--cyan-glow); }
    50% { box-shadow: 0 0 20px var(--cyan-glow), 0 0 40px var(--cyan-subtle); }
}

.btn-cta {
    animation: pulse-glow 3s ease-in-out infinite;
}

/* Global background layers — applied to body via _Layout.cshtml */
.bg-layers {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

/* Starfield layer 1: distant, slow upward drift */
.bg-stars-far {
    position: absolute;
    width: 100%;
    height: 200%;
    opacity: 0.4;
    background-image:
        radial-gradient(1px 1px at 10% 15%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 25% 35%, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 40% 8%, rgba(255,255,255,0.4), transparent),
        radial-gradient(1px 1px at 55% 45%, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 70% 22%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 85% 55%, rgba(255,255,255,0.4), transparent),
        radial-gradient(1px 1px at 15% 65%, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 35% 80%, rgba(255,255,255,0.4), transparent),
        radial-gradient(1px 1px at 60% 70%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 80% 85%, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 5% 90%, rgba(255,255,255,0.3), transparent),
        radial-gradient(1px 1px at 92% 40%, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 48% 52%, rgba(255,255,255,0.4), transparent),
        radial-gradient(1px 1px at 75% 10%, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 20% 48%, rgba(255,255,255,0.6), transparent);
    animation: drift-slow 120s linear infinite;
}

/* Starfield layer 2: mid-range, moderate drift */
.bg-stars-mid {
    position: absolute;
    width: 100%;
    height: 200%;
    opacity: 0.3;
    background-image:
        radial-gradient(1.5px 1.5px at 18% 20%, rgba(200,220,255,0.7), transparent),
        radial-gradient(1px 1px at 42% 38%, rgba(200,220,255,0.5), transparent),
        radial-gradient(1.5px 1.5px at 68% 15%, rgba(200,220,255,0.6), transparent),
        radial-gradient(1px 1px at 30% 60%, rgba(200,220,255,0.5), transparent),
        radial-gradient(1.5px 1.5px at 82% 50%, rgba(200,220,255,0.6), transparent),
        radial-gradient(1px 1px at 55% 75%, rgba(200,220,255,0.4), transparent),
        radial-gradient(1.5px 1.5px at 12% 82%, rgba(200,220,255,0.5), transparent),
        radial-gradient(1px 1px at 90% 70%, rgba(200,220,255,0.6), transparent),
        radial-gradient(1px 1px at 38% 92%, rgba(200,220,255,0.4), transparent),
        radial-gradient(1.5px 1.5px at 65% 42%, rgba(200,220,255,0.5), transparent);
    animation: drift-mid 80s linear infinite;
}

/* Subtle grid overlay */
.bg-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0, 212, 255, 0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 212, 255, 0.015) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* Radial glow */
.bg-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 20%, rgba(0, 212, 255, 0.04) 0%, transparent 50%);
}