/**
 * HERMETIKA VISUAL EFFECTS
 * 
 * Ambient animations, particle systems, and advanced light effects
 * Dependencies: tokens.css
 */

/* ==========================================
   AMBIENT BACKGROUNDS
   ========================================== */

.bg-constellation {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
    overflow: hidden;
    pointer-events: none;
    /* Critical fix for unclickable fields */
}

/* Stars generated via CSS/JS or SVG background */
.stars-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(1px 1px at 20px 30px, #fff, rgba(0, 0, 0, 0)),
        radial-gradient(1px 1px at 40px 70px, #fff, rgba(0, 0, 0, 0)),
        radial-gradient(1px 1px at 50px 160px, #fff, rgba(0, 0, 0, 0)),
        radial-gradient(2px 2px at 90px 40px, #fff, rgba(0, 0, 0, 0)),
        radial-gradient(2px 2px at 130px 80px, #fff, rgba(0, 0, 0, 0));
    background-size: 200px 200px;
    opacity: 0.3;
    animation: stars-move 100s linear infinite;
}

.stars-layer-2 {
    background-image:
        radial-gradient(1.5px 1.5px at 100px 150px, #fff, rgba(0, 0, 0, 0)),
        radial-gradient(1.5px 1.5px at 200px 50px, #fff, rgba(0, 0, 0, 0)),
        radial-gradient(2px 2px at 150px 120px, #fff, rgba(0, 0, 0, 0));
    background-size: 300px 300px;
    opacity: 0.2;
    animation: stars-move 150s linear infinite reverse;
}

@keyframes stars-move {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-1000px);
    }
}

canvas.particle-container {
    display: block;
    /* removes inline whitespace issues */
    width: 100%;
    height: 100%;
}

/* ==========================================
   PARTICLE SYSTEMS
   ========================================== */

.particle-container {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--accent-gold);
    border-radius: 50%;
    opacity: 0;
    animation: particle-float 15s infinite;
}

@keyframes particle-float {
    0% {
        transform: translateY(100vh) translateX(0) scale(0);
        opacity: 0;
    }

    20% {
        opacity: 0.6;
        transform: translateY(80vh) translateX(20px) scale(1);
    }

    80% {
        opacity: 0.4;
    }

    100% {
        transform: translateY(-10vh) translateX(-20px) scale(0);
        opacity: 0;
    }
}

/* Randomize particles with child selectors in your HTML generator */

/* ==========================================
   GLOW EFFECTS
   ========================================== */

.glow-text {
    text-shadow: 0 0 10px rgba(199, 164, 74, 0.5), 0 0 20px rgba(199, 164, 74, 0.3);
}

.glow-box {
    box-shadow: 0 0 15px rgba(199, 164, 74, 0.2), inset 0 0 15px rgba(199, 164, 74, 0.1);
}

.glow-interactive {
    position: relative;
    isolation: isolate;
}

.glow-interactive::after {
    content: '';
    position: absolute;
    inset: -20%;
    background: radial-gradient(circle, var(--accent-gold) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
    filter: blur(20px);
    pointer-events: none;
}

.glow-interactive:hover::after {
    opacity: 0.4;
    animation: pulse-glow 3s ease-in-out infinite;
}

@keyframes pulse-glow {

    0%,
    100% {
        opacity: 0.3;
        transform: scale(1);
    }

    50% {
        opacity: 0.6;
        transform: scale(1.1);
    }
}

/* ==========================================
   SHIMMER OVERLAYS
   ========================================== */

.shimmer-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg,
            transparent 40%,
            rgba(255, 255, 255, 0.05) 50%,
            transparent 60%);
    background-size: 200% 200%;
    animation: shimmer-swipe 4s infinite;
    pointer-events: none;
}

@keyframes shimmer-swipe {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* ==========================================
   ORBS & LIGHTS
   ========================================== */

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
    z-index: -1;
    animation: orb-float 20s infinite ease-in-out;
}

.orb-1 {
    width: 300px;
    height: 300px;
    background: var(--accent-purple-mystic);
    top: -50px;
    left: -100px;
}

.orb-2 {
    width: 400px;
    height: 400px;
    background: var(--accent-indigo-deep);
    bottom: -100px;
    right: -100px;
    animation-delay: -5s;
}

.orb-3 {
    width: 200px;
    height: 200px;
    background: var(--accent-gold);
    top: 40%;
    left: 60%;
    opacity: 0.15;
    animation-delay: -10s;
}

@keyframes orb-float {

    0%,
    100% {
        transform: translate(0, 0);
    }

    33% {
        transform: translate(30px, -50px);
    }

    66% {
        transform: translate(-20px, 20px);
    }
}