:root {
    --ls-columns-064b0e31: 4;
    --ls-gap-064b0e31: 20px;
    --ls-marquee-speed-064b0e31: 20s;
    --ls-water-color-064b0e31: rgba(0, 150, 255, 0.2);
    --ls-water-color-alt-064b0e31: rgba(0, 255, 255, 0.1);
}

.ls-wrapper-064b0e31 {
    width: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
}

/* Grid Layout */
.ls-grid-064b0e31 {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(var(--ls-columns-064b0e31), 1fr);
    gap: var(--ls-gap-064b0e31);
}

/* Justified Layout */
.ls-justified-064b0e31 {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    gap: var(--ls-gap-064b0e31);
}
.ls-justified-064b0e31 .ls-item-064b0e31 {
    flex: 0 1 auto;
}

/* Marquee Layout */
.ls-marquee-064b0e31 {
    display: flex;
    gap: var(--ls-gap-064b0e31);
    width: 100%;
}
.ls-marquee-track {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: var(--ls-gap-064b0e31);
    min-width: 100%;
    animation: ls-marquee-scroll-064b0e31 var(--ls-marquee-speed-064b0e31) linear infinite;
}
.ls-marquee-pause-yes .ls-marquee-064b0e31:hover .ls-marquee-track {
    animation-play-state: paused !important;
}

@keyframes ls-marquee-scroll-064b0e31 {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-100% - var(--ls-gap-064b0e31))); }
}

/* Base Item Styling (Card) */
.ls-item-064b0e31 {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    background-color: #ffffff; /* Fallback */
    z-index: 1;
}
.ls-link-064b0e31 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    position: relative;
    z-index: 2; /* Keep above effects */
}
.ls-item-064b0e31 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: all 0.4s ease;
}

/* Effect: Grayscale */
.ls-effect-grayscale-064b0e31-yes .ls-item-064b0e31 img {
    filter: grayscale(100%) opacity(0.7);
}
.ls-effect-grayscale-064b0e31-yes .ls-item-064b0e31:hover img {
    filter: grayscale(0%) opacity(1);
}

/* Effect: Glassmorphism */
.ls-effect-glass-064b0e31-yes .ls-item-064b0e31 {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: rgba(255, 255, 255, 0.05);
}

/* Realistic Water Hover Effect */
.ls-water-wave-container-064b0e31 {
    position: absolute;
    top: 100%; /* Start below the card */
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
    transition: top 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    opacity: 0;
}

.ls-effect-water-064b0e31-yes .ls-item-064b0e31:hover .ls-water-wave-container-064b0e31 {
    top: 0; /* Rise up on hover */
    opacity: 1;
}

.ls-water-wave-064b0e31 {
    position: absolute;
    width: 200%;
    height: 200%;
    background-color: var(--ls-water-color-064b0e31);
    border-radius: 40%;
    left: -50%;
    top: 30%;
    animation: ls-water-spin-064b0e31 6s linear infinite;
    mix-blend-mode: multiply; /* Looks better on light backgrounds */
}

.ls-water-wave-064b0e31.wave2 {
    background-color: var(--ls-water-color-alt-064b0e31);
    border-radius: 45%;
    top: 40%;
    animation: ls-water-spin-064b0e31 8s linear infinite reverse;
    opacity: 0.8;
}

@keyframes ls-water-spin-064b0e31 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}