/* image-particle-style.css */

/* Container holds the image and canvases, enabling relative positioning */
#logo-container {
    position: relative; /* Establishes positioning context for absolute children */
    cursor: pointer; /* Change cursor to pointer to indicate interactivity */
    z-index: 5; /* Ensure it's above the particles.js background and other elements */
    display: inline-block; /* Ensure container only takes up image space */
    pointer-events: auto !important; /* Override parent pointer-events: none */
    overflow: visible; /* Allow particles to overflow */
    width: auto;
    height: auto;
}

/* Canvas where particles are drawn */
#particle-canvas {
    position: absolute; /* Position relative to #logo-container */
    top: 0;
    left: 0;
    /* Prevent the canvas itself from intercepting mouse events */
    pointer-events: none;
    /* Dimensions are set via JavaScript to match the image */
    z-index: 3; /* Above the logo image */
}

/* The visible SVG image */
#logo-img {
   display: block; /* Treat as a block element */
   position: relative; /* Establish stacking context */
   z-index: 1; /* Below the particle canvas */
   /* Optional: Constrain the maximum size of the SVG */
   max-width: 300px;
   height: auto; /* Maintain aspect ratio */
   /* Fix potential small gap below the image */
   vertical-align: bottom;
}

/* Hidden canvas used only for pixel sampling */
#hidden-canvas {
    display: none; /* Make it invisible and remove from layout */
}

/* Ensure the hero image container has proper positioning */
.hero-image {
    position: relative;
    z-index: 2; /* Above the particles.js background */
    /* NOTE: .hero-image has pointer-events: none in modern-home.css */
}

/* Adjust the hero particles background */
.hero-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}