/* ==========================================================
   LODC FOOTER GLITCH — transplanted from index-loco.html
   Source: SCRIPT BUILD RGB + GOLD animation
   Image: /images/lodc-footer.png
   Keep existing .lodc-footer-art position, top/right/width/height.
   Loaded after the existing homepage <style>.
   ========================================================== */

.lodc-footer-art {
    overflow: visible;
    isolation: isolate;
}

.lodc-footer-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    user-select: none;
    -webkit-user-drag: none;
}

        /* BASE */
        .lf-base {
            position: relative;
            z-index: 2;
            animation: lfBaseHit 4.2s infinite steps(1, end);
        }
        
        /* COMMON */
        .lf-glitch {
            position: absolute;
            inset: 0;
            width: 100%;
            height: auto;
            opacity: 0;
            pointer-events: none;
        }
        
        /* GOLD BURST */
        .lf-glitch-gold {
            z-index: 6;
            filter:
                brightness(0)
                saturate(100%)
                invert(79%)
                sepia(96%)
                saturate(1220%)
                hue-rotate(357deg)
                brightness(106%)
                contrast(98%);
            animation: lfGoldSlices 4.2s infinite steps(1, end);
        }
        
        /* WHITE SECONDARY */
        .lf-glitch-white {
            z-index: 5;
            filter: brightness(1.2);
            animation: lfWhiteSlices 4.2s infinite steps(1, end);
        }
        
        /* RED EDGE */
        .lf-glitch-red {
            z-index: 4;
            filter:
                brightness(0)
                saturate(100%)
                invert(18%)
                sepia(99%)
                saturate(7427%)
                hue-rotate(356deg)
                brightness(103%)
                contrast(118%);
            mix-blend-mode: screen;
            animation: lfRedEdge 4.2s infinite steps(1, end);
        }
        
        /* CYAN EDGE */
        .lf-glitch-cyan {
            z-index: 3;
            filter:
                brightness(0)
                saturate(100%)
                invert(88%)
                sepia(25%)
                saturate(4774%)
                hue-rotate(146deg)
                brightness(104%)
                contrast(110%);
            mix-blend-mode: screen;
            animation: lfCyanEdge 4.2s infinite steps(1, end);
        }
        
        
        /* =========================================
           BASE SHAKE
        ========================================= */
        @keyframes lfBaseHit {
            0%, 67%, 76%, 88%, 95%, 100% {
                transform: translate(0, 0);
            }
        
            68% { transform: translate(1px, 0); }
            69% { transform: translate(-2px, 1px); }
            70% { transform: translate(2px, -1px); }
            71% { transform: translate(-1px, 0); }
            72% { transform: translate(2px, 1px); }
            73% { transform: translate(-1px, -1px); }
            74% { transform: translate(1px, 0); }
        
            89% { transform: translate(-1px, 0); }
            90% { transform: translate(2px, -1px); }
            91% { transform: translate(-2px, 1px); }
            92% { transform: translate(1px, 0); }
            93% { transform: translate(-1px, 0); }
        }
        
        
        /* =========================================
           GOLD GLITCH
        ========================================= */
        @keyframes lfGoldSlices {
            0%, 66%, 76%, 88%, 95%, 100% {
                opacity: 0;
                transform: translate(0,0) scale(1.03);
                clip-path: inset(0 0 0 0);
            }
        
            67% {
                opacity: .95;
                transform: translate(14px,-1px) scale(1.09);
                clip-path: inset(6% 0 82% 0);
            }
        
            68% {
                opacity: .85;
                transform: translate(-10px,1px) scale(1.07);
                clip-path: inset(20% 0 67% 0);
            }
        
            69% {
                opacity: 1;
                transform: translate(18px,0) scale(1.1);
                clip-path: inset(32% 0 55% 0);
            }
        
            70% {
                opacity: .75;
                transform: translate(-14px,-1px) scale(1.08);
                clip-path: inset(45% 0 42% 0);
            }
        
            71% {
                opacity: .92;
                transform: translate(12px,1px) scale(1.09);
                clip-path: inset(58% 0 29% 0);
            }
        
            72% {
                opacity: .7;
                transform: translate(-8px,0) scale(1.06);
                clip-path: inset(69% 0 18% 0);
            }
        
            73% {
                opacity: .95;
                transform: translate(15px,-1px) scale(1.08);
                clip-path: inset(80% 0 6% 0);
            }
        
            74%, 75% {
                opacity: 0;
            }
        
            89% {
                opacity: .88;
                transform: translate(-12px,0) scale(1.08);
                clip-path: inset(14% 0 73% 0);
            }
        
            90% {
                opacity: 1;
                transform: translate(17px,-1px) scale(1.1);
                clip-path: inset(30% 0 57% 0);
            }
        
            91% {
                opacity: .75;
                transform: translate(-10px,1px) scale(1.07);
                clip-path: inset(50% 0 35% 0);
            }
        
            92% {
                opacity: .92;
                transform: translate(13px,0) scale(1.08);
                clip-path: inset(68% 0 19% 0);
            }
        
            93% {
                opacity: .7;
                transform: translate(-8px,-1px) scale(1.05);
                clip-path: inset(83% 0 5% 0);
            }
        
            94% {
                opacity: 0;
            }
        }
        
        
        /* =========================================
           WHITE GLITCH
        ========================================= */
        @keyframes lfWhiteSlices {
            0%, 67%, 76%, 88%, 95%, 100% {
                opacity: 0;
                transform: translate(0,0);
                clip-path: inset(0 0 0 0);
            }
        
            68% {
                opacity: .55;
                transform: translate(-7px,0);
                clip-path: inset(13% 0 74% 0);
            }
        
            69% {
                opacity: .65;
                transform: translate(8px,-1px);
                clip-path: inset(28% 0 59% 0);
            }
        
            70% {
                opacity: .45;
                transform: translate(-6px,1px);
                clip-path: inset(40% 0 46% 0);
            }
        
            71% {
                opacity: .62;
                transform: translate(7px,0);
                clip-path: inset(55% 0 31% 0);
            }
        
            72% {
                opacity: .4;
                transform: translate(-5px,-1px);
                clip-path: inset(70% 0 17% 0);
            }
        
            73% {
                opacity: .55;
                transform: translate(6px,1px);
                clip-path: inset(82% 0 5% 0);
            }
        
            74%, 75% {
                opacity: 0;
            }
        
            89% {
                opacity: .52;
                transform: translate(7px,-1px);
                clip-path: inset(18% 0 68% 0);
            }
        
            90% {
                opacity: .65;
                transform: translate(-8px,1px);
                clip-path: inset(37% 0 49% 0);
            }
        
            91% {
                opacity: .42;
                transform: translate(6px,0);
                clip-path: inset(59% 0 27% 0);
            }
        
            92% {
                opacity: .58;
                transform: translate(-5px,-1px);
                clip-path: inset(78% 0 9% 0);
            }
        
            93% {
                opacity: 0;
            }
        }
        
        
        /* =========================================
           RED EDGE GLITCH
        ========================================= */
        @keyframes lfRedEdge {
            0%, 66%, 76%, 88%, 95%, 100% {
                opacity: 0;
                transform: translate(0,0);
            }
        
            67% {
                opacity: .75;
                transform: translate(6px, -1px);
                clip-path: inset(4% 0 82% 0);
            }
        
            68% {
                opacity: .9;
                transform: translate(7px, 0);
                clip-path: inset(22% 0 64% 0);
            }
        
            69% {
                opacity: .65;
                transform: translate(5px, 1px);
                clip-path: inset(37% 0 47% 0);
            }
        
            70% {
                opacity: .9;
                transform: translate(8px, -1px);
                clip-path: inset(55% 0 29% 0);
            }
        
            71% {
                opacity: .7;
                transform: translate(6px, 1px);
                clip-path: inset(73% 0 10% 0);
            }
        
            72% {
                opacity: .4;
                transform: translate(4px, 0);
                clip-path: inset(84% 0 3% 0);
            }
        
            73%, 74%, 75% {
                opacity: 0;
            }
        
            89% {
                opacity: .75;
                transform: translate(6px, 0);
                clip-path: inset(17% 0 69% 0);
            }
        
            90% {
                opacity: .95;
                transform: translate(8px, -1px);
                clip-path: inset(36% 0 47% 0);
            }
        
            91% {
                opacity: .7;
                transform: translate(5px, 1px);
                clip-path: inset(62% 0 22% 0);
            }
        
            92% {
                opacity: .45;
                transform: translate(4px, 0);
                clip-path: inset(81% 0 6% 0);
            }
        
            93% {
                opacity: 0;
            }
        }
        
        
        /* =========================================
           CYAN EDGE GLITCH
        ========================================= */
        @keyframes lfCyanEdge {
            0%, 66%, 76%, 88%, 95%, 100% {
                opacity: 0;
                transform: translate(0,0);
            }
        
            67% {
                opacity: .7;
                transform: translate(-6px, 1px);
                clip-path: inset(8% 0 78% 0);
            }
        
            68% {
                opacity: .88;
                transform: translate(-7px, -1px);
                clip-path: inset(25% 0 61% 0);
            }
        
            69% {
                opacity: .6;
                transform: translate(-5px, 0);
                clip-path: inset(42% 0 43% 0);
            }
        
            70% {
                opacity: .86;
                transform: translate(-8px, 1px);
                clip-path: inset(60% 0 25% 0);
            }
        
            71% {
                opacity: .65;
                transform: translate(-6px, -1px);
                clip-path: inset(76% 0 9% 0);
            }
        
            72% {
                opacity: .4;
                transform: translate(-4px, 0);
                clip-path: inset(87% 0 2% 0);
            }
        
            73%, 74%, 75% {
                opacity: 0;
            }
        
            89% {
                opacity: .7;
                transform: translate(-6px, 0);
                clip-path: inset(15% 0 72% 0);
            }
        
            90% {
                opacity: .9;
                transform: translate(-8px, 1px);
                clip-path: inset(34% 0 50% 0);
            }
        
            91% {
                opacity: .68;
                transform: translate(-5px, -1px);
                clip-path: inset(61% 0 23% 0);
            }
        
            92% {
                opacity: .4;
                transform: translate(-4px, 0);
                clip-path: inset(82% 0 5% 0);
            }
        
            93% {
                opacity: 0;
            }
        }
        
        
        /* =========================================
           GOLD SCAN NOISE
        ========================================= */
        .lodc-footer-art::after {
            content: "";
            position: absolute;
            inset: -5% -12%;
            z-index: 7;
            opacity: 0;
            pointer-events: none;
            background:
                repeating-linear-gradient(
                    180deg,
                    transparent 0px,
                    transparent 4px,
                    rgba(242,193,46,.28) 5px,
                    transparent 6px,
                    transparent 11px
                );
            mix-blend-mode: screen;
            animation: lfScanNoise 4.2s infinite steps(1,end);
        }
        
        @keyframes lfScanNoise {
            0%, 66%, 76%, 88%, 95%, 100% {
                opacity: 0;
                transform: translateX(0);
            }
        
            68% {
                opacity: .18;
                transform: translateX(7px);
            }
        
            69% {
                opacity: .11;
                transform: translateX(-4px);
            }
        
            70% {
                opacity: .26;
                transform: translateX(10px);
            }
        
            71% {
                opacity: .08;
                transform: translateX(-6px);
            }
        
            72% {
                opacity: .18;
                transform: translateX(4px);
            }
        
            73% {
                opacity: 0;
            }
        
            89% {
                opacity: .16;
                transform: translateX(-6px);
            }
        
            90% {
                opacity: .24;
                transform: translateX(9px);
            }
        
            91% {
                opacity: .1;
                transform: translateX(-5px);
            }
        
            92% {
                opacity: .18;
                transform: translateX(6px);
            }
        
            93% {
                opacity: 0;
            }
        }
        
        /* =========================================
           SCRIPT BUILD - GLITCH SPEED
        ========================================= */
        
        .lf-base,
        .lf-glitch-gold,
        .lf-glitch-white,
        .lf-glitch-red,
        .lf-glitch-cyan,
        .lodc-footer-art::after {
            animation-duration: 2s !important;
        }
        
        /* =========================================
           SCRIPT BUILD - BROKEN SLICE + RGB EDGES
        ========================================= */
        
        .lodc-footer-art::before {
            content: "";
        
            position: absolute;
            inset: 0;
        
            z-index: 8;
        
            pointer-events: none;
        
            background:
                url("/images/lodc-footer.png")
                center center / 100% 100%
                no-repeat;
        
            opacity: 0;
        
            filter:
                drop-shadow(7px 0 0 rgba(255,0,35,.95))
                drop-shadow(-7px 0 0 rgba(0,245,255,.95))
                drop-shadow(0 0 7px rgba(242,193,46,.35));
        
            -webkit-mask-image:
                linear-gradient(
                    to bottom,
        
                    transparent 0%,
                    transparent 8%,
        
                    #000 8%,
                    #000 14%,
        
                    transparent 14%,
                    transparent 22%,
        
                    #000 22%,
                    #000 29%,
        
                    transparent 29%,
                    transparent 39%,
        
                    #000 39%,
                    #000 47%,
        
                    transparent 47%,
                    transparent 57%,
        
                    #000 57%,
                    #000 64%,
        
                    transparent 64%,
                    transparent 74%,
        
                    #000 74%,
                    #000 81%,
        
                    transparent 81%,
                    transparent 89%,
        
                    #000 89%,
                    #000 95%,
        
                    transparent 95%,
                    transparent 100%
                );
        
            mask-image:
                linear-gradient(
                    to bottom,
        
                    transparent 0%,
                    transparent 8%,
        
                    #000 8%,
                    #000 14%,
        
                    transparent 14%,
                    transparent 22%,
        
                    #000 22%,
                    #000 29%,
        
                    transparent 29%,
                    transparent 39%,
        
                    #000 39%,
                    #000 47%,
        
                    transparent 47%,
                    transparent 57%,
        
                    #000 57%,
                    #000 64%,
        
                    transparent 64%,
                    transparent 74%,
        
                    #000 74%,
                    #000 81%,
        
                    transparent 81%,
                    transparent 89%,
        
                    #000 89%,
                    #000 95%,
        
                    transparent 95%,
                    transparent 100%
                );
        
            animation:
                lfBrokenSlices 2.6s infinite steps(1,end);
        }
        
        
        /* =========================================
           BROKEN MOVEMENT
        ========================================= */
        
        @keyframes lfBrokenSlices {
        
            0%, 65%, 75%, 87%, 94%, 100% {
                opacity: 0;
        
                transform:
                    translate(0,0)
                    skewX(0deg)
                    scaleX(1);
            }
        
        
            /* BURST 1 */
        
            66% {
                opacity: .88;
        
                transform:
                    translate(10px,-1px)
                    skewX(-2deg)
                    scaleX(1.025);
            }
        
            67% {
                opacity: .72;
        
                transform:
                    translate(-8px,1px)
                    skewX(2deg)
                    scaleX(.985);
            }
        
            68% {
                opacity: .95;
        
                transform:
                    translate(14px,0)
                    skewX(-3deg)
                    scaleX(1.04);
            }
        
            69% {
                opacity: .65;
        
                transform:
                    translate(-11px,-1px)
                    skewX(2deg)
                    scaleX(.975);
            }
        
            70% {
                opacity: .92;
        
                transform:
                    translate(9px,1px)
                    skewX(-2deg)
                    scaleX(1.03);
            }
        
            71% {
                opacity: .60;
        
                transform:
                    translate(-7px,0)
                    skewX(1deg)
                    scaleX(.99);
            }
        
            72% {
                opacity: .85;
        
                transform:
                    translate(12px,-1px)
                    skewX(-2deg)
                    scaleX(1.025);
            }
        
            73% {
                opacity: .55;
        
                transform:
                    translate(-5px,1px)
                    skewX(1deg)
                    scaleX(.99);
            }
        
            74% {
                opacity: 0;
            }
        
        
            /* BURST 2 */
        
            88% {
                opacity: .82;
        
                transform:
                    translate(-9px,0)
                    skewX(2deg)
                    scaleX(.98);
            }
        
            89% {
                opacity: .95;
        
                transform:
                    translate(13px,-1px)
                    skewX(-3deg)
                    scaleX(1.035);
            }
        
            90% {
                opacity: .68;
        
                transform:
                    translate(-10px,1px)
                    skewX(2deg)
                    scaleX(.98);
            }
        
            91% {
                opacity: .90;
        
                transform:
                    translate(11px,0)
                    skewX(-2deg)
                    scaleX(1.03);
            }
        
            92% {
                opacity: .58;
        
                transform:
                    translate(-6px,-1px)
                    skewX(1deg)
                    scaleX(.99);
            }
        
            93% {
                opacity: 0;
            }
        }


/* Align all colored slices with the unchanged original PNG. */
.lodc-footer-art .lf-glitch {
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.lodc-footer-art::before {
    background-size: contain;
}

@media (prefers-reduced-motion: reduce) {
    .lodc-footer-art .lf-base { animation: none !important; }
    .lodc-footer-art .lf-glitch,
    .lodc-footer-art::before,
    .lodc-footer-art::after { display: none !important; }
}

/* =========================================
   FOOTER ART - DESKTOP POSITION
========================================= */

@media (min-width: 1001px) {

    .lodc-footer .lodc-footer-art {
        right: 170px !important;

        top: calc((100% - 62px) / 2 - 11px) !important;

        transform: translateY(-50%) !important;
    }

}


/* ==========================================================
   LODC FOOTER - CENTERED DESKTOP LAYOUT
   Final correction based on the current homepage structure.
   - One centered 1580px container for main and bottom rows.
   - 215px reserved on the right for the 180px art + 35px gap.
   - Four social icons fit inside their own 194px grid column.
   - Art aligned to the exact right edge of the same container.
   - Keeps vertical dimensions and ALL glitch animations unchanged.
   ========================================================== */

@media (min-width: 1350px) {
    .lodc-footer .lodc-footer-inner {
        left: 0;
        width: min(1580px, calc(100% - 80px));
        margin-left: auto;
        margin-right: auto;
        padding-right: 215px;

        grid-template-columns:
            minmax(360px, 480px)
            repeat(3, minmax(120px, 1fr))
            194px;
        column-gap: 35px;
    }

    .lodc-footer .lodc-footer-bottom-inner {
        width: min(1580px, calc(100% - 80px));
        margin-left: auto;
        margin-right: auto;
    }

    .lodc-footer .lodc-footer-art {
        right: max(40px, calc((100% - 1580px) / 2)) !important;
        /* Original top/transform and glitch animation remain unchanged. */
    }
}