/**
 * Animated South Asian cultural background patterns
 * — rangoli (India), lotus mandala (Nepal/India), jamdani weave (Bangladesh), alpona curves (Bengal).
 */

.has-cultural-pattern {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.has-cultural-pattern > :not(.cultural-pattern) {
    position: relative;
    z-index: 1;
}

.cultural-pattern {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.cultural-pattern__layer {
    position: absolute;
    inset: -12%;
    background-repeat: repeat;
    will-change: transform, background-position, opacity;
}

/* Jamdani textile weave — Bangladesh */
.cultural-pattern__layer--weave {
    background-image: url('../images/patterns/jamdani-weave.svg');
    background-size: 68px 68px;
    opacity: 0.5;
    animation: culturalWeaveDrift 70s linear infinite;
}

/* Kolam / rangoli dot lattice — South India */
.cultural-pattern__layer--rangoli {
    background-image: url('../images/patterns/rangoli-tile.svg');
    background-size: 250px 250px;
    opacity: 0.42;
    animation: culturalRangoliDrift 95s linear infinite;
}

/* Lotus mandala ring — Nepal / North India */
.cultural-pattern__layer--mandala {
    inset: auto;
    top: 50%;
    left: 50%;
    width: min(92vw, 760px);
    height: min(92vw, 760px);
    transform: translate(-50%, -50%);
    background-image: url('../images/patterns/lotus-mandala.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.36;
    animation: culturalMandalaRotate 160s linear infinite;
}

/* Alpona flowing curves — Bengal / Bangladesh */
.cultural-pattern__layer--alpona {
    background-image: url('../images/patterns/alpona-curve.svg');
    background-size: 400px 400px;
    opacity: 0.32;
    animation: culturalAlponaFloat 110s ease-in-out infinite alternate;
}

/* Dark sections (reviews) */
.cultural-pattern--dark .cultural-pattern__layer--weave {
    opacity: 0.3;
}

.cultural-pattern--dark .cultural-pattern__layer--rangoli {
    opacity: 0.26;
}

.cultural-pattern--dark .cultural-pattern__layer--mandala {
    opacity: 0.34;
}

.cultural-pattern--dark .cultural-pattern__layer--alpona {
    opacity: 0.24;
}

@keyframes culturalWeaveDrift {
    from { background-position: 0 0; }
    to   { background-position: 68px 68px; }
}

@keyframes culturalRangoliDrift {
    from { background-position: 0 0; }
    to   { background-position: 250px 250px; }
}

@keyframes culturalMandalaRotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes culturalAlponaFloat {
    from {
        transform: translate3d(-2%, -1%, 0) scale(1);
        opacity: 0.28;
    }
    to {
        transform: translate3d(2%, 1.5%, 0) scale(1.03);
        opacity: 0.38;
    }
}

@media (max-width: 768px) {
    .cultural-pattern__layer--mandala {
        width: min(120vw, 560px);
        height: min(120vw, 560px);
        opacity: 0.3;
    }

    .cultural-pattern__layer--rangoli {
        background-size: 200px 200px;
        opacity: 0.36;
    }

    .cultural-pattern__layer--alpona {
        background-size: 300px 300px;
        opacity: 0.28;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cultural-pattern__layer {
        animation: none !important;
    }
}