.has-wavy-dots {
    position: relative;
    overflow: hidden;
}

.has-wavy-dots .container-fluid,
.has-wavy-dots .container,
.has-wavy-dots .narrow-container {
    position: relative;
    z-index: 1;
}

.wavy-dots-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.wavy-dots-pattern__svg {
    position: absolute;
}

.wavy-dots-pattern__svg path {
    transform-box: fill-box;
    transform-origin: center center;
    animation: sineWave 3s ease-in-out infinite;
}

.wavy-dots-pattern__svg path:nth-child(48n+1)  { animation-delay: 0s; }
.wavy-dots-pattern__svg path:nth-child(48n+2)  { animation-delay: -0.0625s; }
.wavy-dots-pattern__svg path:nth-child(48n+3)  { animation-delay: -0.125s; }
.wavy-dots-pattern__svg path:nth-child(48n+4)  { animation-delay: -0.1875s; }
.wavy-dots-pattern__svg path:nth-child(48n+5)  { animation-delay: -0.25s; }
.wavy-dots-pattern__svg path:nth-child(48n+6)  { animation-delay: -0.3125s; }
.wavy-dots-pattern__svg path:nth-child(48n+7)  { animation-delay: -0.375s; }
.wavy-dots-pattern__svg path:nth-child(48n+8)  { animation-delay: -0.4375s; }
.wavy-dots-pattern__svg path:nth-child(48n+9)  { animation-delay: -0.5s; }
.wavy-dots-pattern__svg path:nth-child(48n+10) { animation-delay: -0.5625s; }
.wavy-dots-pattern__svg path:nth-child(48n+11) { animation-delay: -0.625s; }
.wavy-dots-pattern__svg path:nth-child(48n+12) { animation-delay: -0.6875s; }
.wavy-dots-pattern__svg path:nth-child(48n+13) { animation-delay: -0.75s; }
.wavy-dots-pattern__svg path:nth-child(48n+14) { animation-delay: -0.8125s; }
.wavy-dots-pattern__svg path:nth-child(48n+15) { animation-delay: -0.875s; }
.wavy-dots-pattern__svg path:nth-child(48n+16) { animation-delay: -0.9375s; }
.wavy-dots-pattern__svg path:nth-child(48n+17) { animation-delay: -1s; }
.wavy-dots-pattern__svg path:nth-child(48n+18) { animation-delay: -1.0625s; }
.wavy-dots-pattern__svg path:nth-child(48n+19) { animation-delay: -1.125s; }
.wavy-dots-pattern__svg path:nth-child(48n+20) { animation-delay: -1.1875s; }
.wavy-dots-pattern__svg path:nth-child(48n+21) { animation-delay: -1.25s; }
.wavy-dots-pattern__svg path:nth-child(48n+22) { animation-delay: -1.3125s; }
.wavy-dots-pattern__svg path:nth-child(48n+23) { animation-delay: -1.375s; }
.wavy-dots-pattern__svg path:nth-child(48n+24) { animation-delay: -1.4375s; }
.wavy-dots-pattern__svg path:nth-child(48n+25) { animation-delay: -1.5s; }
.wavy-dots-pattern__svg path:nth-child(48n+26) { animation-delay: -1.5625s; }
.wavy-dots-pattern__svg path:nth-child(48n+27) { animation-delay: -1.625s; }
.wavy-dots-pattern__svg path:nth-child(48n+28) { animation-delay: -1.6875s; }
.wavy-dots-pattern__svg path:nth-child(48n+29) { animation-delay: -1.75s; }
.wavy-dots-pattern__svg path:nth-child(48n+30) { animation-delay: -1.8125s; }
.wavy-dots-pattern__svg path:nth-child(48n+31) { animation-delay: -1.875s; }
.wavy-dots-pattern__svg path:nth-child(48n+32) { animation-delay: -1.9375s; }
.wavy-dots-pattern__svg path:nth-child(48n+33) { animation-delay: -2s; }
.wavy-dots-pattern__svg path:nth-child(48n+34) { animation-delay: -2.0625s; }
.wavy-dots-pattern__svg path:nth-child(48n+35) { animation-delay: -2.125s; }
.wavy-dots-pattern__svg path:nth-child(48n+36) { animation-delay: -2.1875s; }
.wavy-dots-pattern__svg path:nth-child(48n+37) { animation-delay: -2.25s; }
.wavy-dots-pattern__svg path:nth-child(48n+38) { animation-delay: -2.3125s; }
.wavy-dots-pattern__svg path:nth-child(48n+39) { animation-delay: -2.375s; }
.wavy-dots-pattern__svg path:nth-child(48n+40) { animation-delay: -2.4375s; }
.wavy-dots-pattern__svg path:nth-child(48n+41) { animation-delay: -2.5s; }
.wavy-dots-pattern__svg path:nth-child(48n+42) { animation-delay: -2.5625s; }
.wavy-dots-pattern__svg path:nth-child(48n+43) { animation-delay: -2.625s; }
.wavy-dots-pattern__svg path:nth-child(48n+44) { animation-delay: -2.6875s; }
.wavy-dots-pattern__svg path:nth-child(48n+45) { animation-delay: -2.75s; }
.wavy-dots-pattern__svg path:nth-child(48n+46) { animation-delay: -2.8125s; }
.wavy-dots-pattern__svg path:nth-child(48n+47) { animation-delay: -2.875s; }
.wavy-dots-pattern__svg path:nth-child(48n+48) { animation-delay: -2.9375s; }

/* ------------------------------------------------------------------
   Block-specific pattern positioning (from Figma)
   ------------------------------------------------------------------ */

/* Image Cards Section -- pattern-01, bottom-right */
.image-buttons .wavy-dots-pattern__svg {
    bottom: 0;
    right: -5%;
    width: 80%;
    height: auto;
}

/* Half Text / Half Standard Media -- pattern-02 flips with media side */
.contained-image-text .wavy-dots-pattern__svg {
    top: -300px;
}

.contained-image-text--media-right .wavy-dots-pattern__svg {
    right: -7%;
    left: auto;
}

.contained-image-text--media-left .wavy-dots-pattern__svg {
    left: -7%;
    right: auto;
    transform: scaleX(-1);
}

/* Contact Info Section -- pattern-01, top-left within the card area */
.contact-info-section .wavy-dots-pattern__svg {
    left: -15%;
    top: -10%;
    width: 60%;
    height: auto;
}

/* WYSIWYG Section -- pattern-01, large and covering broadly */
.wysiwyg-section .wavy-dots-pattern__svg {
    left: -12%;
    top: -10%;
    width: 126%;
    height: auto;
}

/* Small CTA Banner -- pattern-01, right side */
.small-cta .wavy-dots-pattern__svg {
    right: -5%;
    bottom: -10%;
    width: 70%;
    height: auto;
}

/* ------------------------------------------------------------------
   Keyframes
   ------------------------------------------------------------------ */

@keyframes sineWave {
    0% {
        transform: translateY(0);
    }
    25% {
        transform: translateY(-8px);
    }
    50% {
        transform: translateY(0);
    }
    75% {
        transform: translateY(8px);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes sineWaveAlt {
    0% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-8px);
    }
    50% {
        transform: translateX(0);
    }
    75% {
        transform: translateX(8px);
    }
    100% {
        transform: translateX(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .wavy-dots-pattern__svg path {
        animation: none;
    }
}