/* Basic Setup & Fonts */


/* Main Section Wrapper */
.impact-section {
    width: 100%;
    max-width: 1450px;
    margin: auto;
}

/* Container for the animation canvas */
.animation-container {
    position: relative;
    width: 100%;
    height: 900px; /* Adjust height as needed */
    max-height: 900px;
}

/* Central Static Element - simplified */
.impact-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 59%;
    max-width: 678px;
    min-width: 400px;
    aspect-ratio: 1 / 1;
    z-index: 10;
    pointer-events: none;
    /* This div is now just a positioning container for the SVG image */
}

.impact-center img {
    width: 100%;
    height: 100%;
    /* filter: drop-shadow is often better for complex SVG shapes than box-shadow */
    filter: drop-shadow(0 10px 20px rgba(0, 44, 95, 0.2));
}

/* Floating Bubbles */
.bubble {
    position: absolute;
    /* JS will set width, height, and transform */
    cursor: pointer;
    transition: transform 0.2s ease-out, filter 0.2s ease-out;
    filter: drop-shadow(0 4px 8px rgba(0, 44, 95, 0.15));
}

.bubble.is-hovered {
    z-index: 20;
    filter: drop-shadow(0 8px 16px rgba(0, 44, 95, 0.25));
}

.bubble img {
    width: 100%;
    height: 100%;
    display: block;
    user-select: none; /* Prevents image dragging */
    -webkit-user-drag: none;
}


@media (max-width: 768px) {
    .impact-section {
        display: none;
    }
}