.svg-hex-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    display: none;            /* hidden by default */
    align-items: center;
    justify-content: center;

    background: rgba(0, 0, 0, 0.15); /* optional transparent overlay */
    backdrop-filter: blur(3px);      /* optional polished blur */

    z-index: 20;
    pointer-events: auto;     /* IMPORTANT — blocks interaction */
}

/* brand color */
:root {
    --brand-blue: #2f3a9b;
}

/* Base style for all polygons */
.hex-stroke {
    stroke: var(--brand-blue);
    fill: transparent;
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
    animation: drawFillCycle 4.5s ease-in-out infinite;
}

/* Slow, staggered sketching order */
#large_outer_hexagon          { animation-delay: 0s; }
#left_center_large_hexagon    { animation-delay: 0.2s; }
#top_small_hexagon            { animation-delay: 0.4s; }
#left_top_medium_hexagon      { animation-delay: 0.6s; }
#center_small_hexagon         { animation-delay: 0.8s; }
#bottom_left_medium_hexagon   { animation-delay: 1s; }
#bottom_left_tiny_hexagon     { animation-delay: 1.2s; }

/* KEYFRAMES for Loop Style 3 */
@keyframes drawFillCycle {
    0% {
        stroke-dashoffset: 600;
        fill: transparent;
        stroke-opacity: 1;
        transform: scale(1);
    }

    /* Line drawing completes */
    45% {
        stroke-dashoffset: 0;
        stroke-opacity: 1;
    }

    /* Fill in logo */
    60% {
        fill: var(--brand-blue);
        transform: scale(1.02);
    }

    /* Hold fully filled */
    75% {
        fill: var(--brand-blue);
        stroke-opacity: 1;
        transform: scale(1.02);
    }

    /* Strokes disappear (loop style 3) */
    88% {
        stroke-opacity: 0;
        fill: var(--brand-blue);
        transform: scale(1);
    }

    /* Reset for redraw in next loop */
    100% {
        stroke-dashoffset: 600;
        stroke-opacity: 0;
        fill: var(--brand-blue);
    }
}

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce) {
    .hex-stroke {
        animation: none !important;
        stroke-dashoffset: 0;
        stroke-opacity: 0;
        fill: var(--brand-blue);
    }
}