/* Volcano Plot Animation Fix */

/* Fix container position to be within hero section */
.volcano-plot {
    position: absolute !important;
    top: 85% !important; /* Impact point */
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 0 !important; /* Start from center point */
    height: 0 !important;
    z-index: 10 !important;
    pointer-events: none !important;
    /* Remove border for production */
    border: none !important;
}

/* Fix impact point to match EXACTLY with volcano plot */
.impact-point {
    position: absolute !important;
    top: 85% !important; /* Same as volcano plot */
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 0 !important;
    height: 0 !important;
    z-index: 15 !important; /* Above volcano plot */
}

/* Allow particles to be visible throughout hero section */
#hero {
    overflow: visible !important;
}

/* But hide overflow on parent to prevent scrollbars */
cobx-hero-section {
    overflow: hidden !important;
    position: relative !important;
}

/* Adjust meteor impact position */
.meteor.falling {
    animation: meteorFallHero 3.1s ease-in forwards !important;
}

@keyframes meteorFallHero {
    0% {
        top: -250px;
        transform: translateX(-50%);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    95% {
        top: calc(85% - 250px); /* Impact at 85% of hero section */
        transform: translateX(-50%);
        opacity: 1;
        filter: brightness(2) blur(0px);
    }
    100% {
        top: calc(85% - 250px);
        transform: translateX(-50%);
        opacity: 0;
        visibility: hidden;
    }
}

/* Override the problematic animation */
.protein-particle.erupt {
    animation: volcanoTrajectory 3s cubic-bezier(0.23, 1, 0.32, 1) forwards !important;
}

@keyframes volcanoTrajectory {
    0% {
        transform: translate(0, 0) scale(0);
        opacity: 0;
        filter: blur(0px) brightness(2);
    }
    5% {
        transform: translate(0, 0) scale(0.8);
        opacity: 1;
        filter: blur(0px) brightness(1.8);
    }
    15% {
        transform: translate(calc(var(--x-end) * 0.3), calc(var(--y-end) * 0.3)) scale(1.2);
        opacity: 1;
        filter: blur(0px) brightness(1.5);
    }
    60% {
        opacity: 0.8;
        filter: blur(0px) brightness(1.2);
    }
    90% {
        opacity: calc(var(--final-opacity) * 1.5);
        filter: blur(0.3px) brightness(1);
    }
    100% {
        transform: 
            translateX(var(--x-end)) 
            translateY(var(--y-end))
            scale(var(--final-scale));
        opacity: var(--final-opacity);
        filter: blur(0.5px) brightness(1);
    }
}

/* After eruption, apply final positions */
.protein-particle.settled {
    opacity: var(--final-opacity) !important;
    transform: 
        translateX(var(--x-end)) 
        translateY(var(--y-end))
        scale(var(--final-scale)) !important;
    animation: starTwinkle 6s ease-in-out infinite !important;
    animation-delay: calc(var(--star-delay) * 1s) !important;
}

/* Twinkling effect for settled particles */
@keyframes starTwinkle {
    0% { 
        opacity: var(--final-opacity);
        filter: brightness(0.6) blur(0.5px);
        transform: 
            translateX(var(--x-end)) 
            translateY(var(--y-end))
            scale(var(--final-scale));
    }
    20% {
        opacity: calc(var(--final-opacity) * 0.4);
        filter: brightness(0.4) blur(1px);
    }
    40% { 
        opacity: calc(var(--final-opacity) * 1.3);
        filter: brightness(1.4) blur(0px);
        transform: 
            translateX(var(--x-end)) 
            translateY(var(--y-end))
            scale(calc(var(--final-scale) * 1.3));
    }
    60% {
        opacity: calc(var(--final-opacity) * 0.6);
        filter: brightness(0.7) blur(0.8px);
    }
    80% {
        opacity: calc(var(--final-opacity) * 1.1);
        filter: brightness(1.2) blur(0.2px);
        transform: 
            translateX(var(--x-end)) 
            translateY(var(--y-end))
            scale(calc(var(--final-scale) * 1.1));
    }
    100% { 
        opacity: var(--final-opacity);
        filter: brightness(0.6) blur(0.5px);
        transform: 
            translateX(var(--x-end)) 
            translateY(var(--y-end))
            scale(var(--final-scale));
    }
}