.elementor-kit-8{--e-global-color-primary:#E300FF;--e-global-color-secondary:#E3FF00;--e-global-color-text:#FFFFFF;--e-global-color-accent:#29FF00;--e-global-color-5c38718:#000000;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;background-color:#000000;background-image:url("https://metamachina.io/wp-content/uploads/2025/07/MMGrid8.webp");background-repeat:no-repeat;background-size:cover;--e-page-transition-entrance-animation:e-page-transition-slide-out-right;--e-page-transition-exit-animation:e-page-transition-fade-in;--e-page-transition-animation-duration:1500ms;--e-preloader-animation-duration:1500ms;--e-preloader-delay:0ms;--e-preloader-color:#FF00DF;--e-preloader-size:20px;}.elementor-kit-8 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-header .site-branding .site-logo img{width:76px;max-width:76px;}@media(min-width:1025px){.elementor-kit-8{background-attachment:fixed;}}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-kit-8{--e-preloader-size:28px;}}/* Start custom CSS *//* Shared base for all buildings */
.building-1, .building-2, .building-3, .building-4 {
    position: absolute;
    z-index: 2;
}
/* Z-Index Layering */
.building-1 { z-index: 1; }
.building-2 { z-index: 2; }
.building-3 { z-index: 3; }
.building-4 { z-index: 4; }
/* Desktop Layout — Progressive Sizes and Positions */
.building-1 {
    width: 50vw !important; /* Largest building */
    top: 0;
    right: -16vw;
}
.building-2 {
    width: 40vw !important; /* Slightly smaller */
    top: 20vh; /* Lower than Building 1 */
    right: 5vw;
}
.building-3 {
    width: 20vw !important; /* Smaller again */
    top: 65vh; /* Lower than Building 2 */
    right: 35vw;
}
.building-4 {
    width: 50vw !important; /* Smallest */
    top: 40vh; /* Lowest position */
    right:70vw;
}
/* ===== WRAP FIX - PAGE LOAD ONLY ===== */

body {
  overflow-x: hidden;
}
/* ===== GLITCH ANIMATION CSS - PAGE LOAD ONLY ===== */
.glitch-text {
    position: relative;
    font-weight: 900;
    color: #FFFFFF;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    user-select: none;
    display: inline-block;
    font-family: inherit;
}

/* Start animation immediately on page load for animate-on-scroll elements */
.glitch-text.animate-on-scroll {
    animation: extreme-glitch-main 2s ease-out forwards;
}

.glitch-text.animate-on-scroll::before {
    animation: extreme-glitch-layer-1 2s ease-out forwards;
}

.glitch-text.animate-on-scroll::after {
    animation: extreme-glitch-layer-2 2s ease-out forwards;
}

/* Create multiple glitch layers */
.glitch-text::before,
.glitch-text::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-family: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    opacity: 0;
}

.glitch-text::before {
    color: #E600FB;
    z-index: -1;
}

.glitch-text::after {
    color: #29FF00;
    z-index: -2;
}

/* Additional text-shadow and color animation for animate-on-scroll elements */
.glitch-text.animate-on-scroll {
    text-shadow: 
        0 0 0 #FFFFFF,
        0 0 0 #FF00D8,
        0 0 0 #29FF00,
        0 0 0 #E600FB;
    animation: extreme-glitch-main 2s ease-out forwards,
               color-chaos 2s ease-out forwards;
}

/* Color variations */
.glitch-green .glitch-text::before,
.glitch-text.glitch-green::before {
    color: #29FF00;
}

.glitch-green .glitch-text::after,
.glitch-text.glitch-green::after {
    color: #00FF7F;
}

/* Size variations */
.glitch-large {
    font-size: clamp(3rem, 8vw, 6rem);
}

.glitch-medium {
    font-size: clamp(2rem, 5vw, 3.5rem);
}

.glitch-small {
    font-size: clamp(1.2rem, 3vw, 2rem);
}

/* MAIN TEXT EXTREME SHAKE ANIMATION */
@keyframes extreme-glitch-main {
    0% {
        opacity: 0;
        transform: translateX(0) scale(1);
        filter: blur(10px) hue-rotate(0deg);
        text-shadow: 0 0 0 #FFFFFF;
    }
    3% {
        opacity: 0.1;
        transform: translateX(-45px) scale(1.08);
        filter: blur(8px) hue-rotate(45deg);
        text-shadow: 
            -8px 0 0 #E600FB,
            8px 0 0 #29FF00,
            -4px 0 0 #FF00D8;
    }
    6% {
        opacity: 0.2;
        transform: translateX(52px) scale(0.92);
        filter: blur(12px) hue-rotate(90deg);
        text-shadow: 
            12px 0 0 #FF00D8,
            -10px 0 0 #29FF00,
            6px 0 0 #E600FB;
    }
    9% {
        opacity: 0.3;
        transform: translateX(-38px) scale(1.12);
        filter: blur(6px) hue-rotate(135deg);
        text-shadow: 
            -15px 0 0 #29FF00,
            10px 0 0 #E600FB,
            -5px 0 0 #FF00D8;
    }
    12% {
        opacity: 0.4;
        transform: translateX(48px) scale(0.88);
        filter: blur(14px) hue-rotate(180deg);
        text-shadow: 
            18px 0 0 #E600FB,
            -12px 0 0 #FF00D8,
            8px 0 0 #29FF00;
    }
    15% {
        opacity: 0.5;
        transform: translateX(-42px) scale(1.10);
        filter: blur(4px) hue-rotate(225deg);
        text-shadow: 
            -20px 0 0 #FF00D8,
            15px 0 0 #29FF00,
            -8px 0 0 #E600FB;
    }
    18% {
        opacity: 0.6;
        transform: translateX(55px) scale(0.85);
        filter: blur(16px) hue-rotate(270deg);
        text-shadow: 
            25px 0 0 #29FF00,
            -18px 0 0 #E600FB,
            12px 0 0 #FF00D8;
    }
    21% {
        opacity: 0.65;
        transform: translateX(-35px) scale(1.15);
        filter: blur(3px) hue-rotate(315deg);
        text-shadow: 
            -12px 0 0 #E600FB,
            8px 0 0 #FF00D8,
            -4px 0 0 #29FF00;
    }
    24% {
        opacity: 0.7;
        transform: translateX(40px) scale(0.9);
        filter: blur(11px) hue-rotate(360deg);
        text-shadow: 
            15px 0 0 #FF00D8,
            -10px 0 0 #29FF00,
            6px 0 0 #E600FB;
    }
    30% {
        opacity: 0.75;
        transform: translateX(-28px) scale(1.06);
        filter: blur(7px) hue-rotate(45deg);
        text-shadow: 
            -8px 0 0 #29FF00,
            5px 0 0 #E600FB,
            -3px 0 0 #FF00D8;
    }
    40% {
        opacity: 0.8;
        transform: translateX(22px) scale(0.95);
        filter: blur(5px) hue-rotate(90deg);
        text-shadow: 
            6px 0 0 #E600FB,
            -4px 0 0 #FF00D8,
            2px 0 0 #29FF00;
    }
    50% {
        opacity: 0.85;
        transform: translateX(-15px) scale(1.03);
        filter: blur(3px) hue-rotate(135deg);
        text-shadow: 
            -4px 0 0 #FF00D8,
            3px 0 0 #29FF00,
            -1px 0 0 #E600FB;
    }
    60% {
        opacity: 0.9;
        transform: translateX(12px) scale(0.97);
        filter: blur(2px) hue-rotate(180deg);
        text-shadow: 
            3px 0 0 #29FF00,
            -2px 0 0 #E600FB,
            1px 0 0 #FF00D8;
    }
    70% {
        opacity: 0.95;
        transform: translateX(-8px) scale(1.01);
        filter: blur(1px) hue-rotate(225deg);
        text-shadow: 
            -2px 0 0 #E600FB,
            1px 0 0 #FF00D8,
            0px 0 0 #29FF00;
    }
    80% {
        opacity: 0.98;
        transform: translateX(4px) scale(0.99);
        filter: blur(0.5px) hue-rotate(270deg);
        text-shadow: 
            1px 0 0 #FF00D8,
            0px 0 0 #29FF00,
            0px 0 0 #E600FB;
    }
    90% {
        opacity: 0.99;
        transform: translateX(-2px) scale(1.005);
        filter: blur(0px) hue-rotate(315deg);
        text-shadow: 0 0 0 #FFFFFF;
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
        filter: blur(0px) hue-rotate(360deg);
        text-shadow: 0 0 0 #FFFFFF;
    }
}

/* LAYER 1 - SKINNY RECTANGLE GLITCHES */
@keyframes extreme-glitch-layer-1 {
    0% {
        opacity: 0;
        transform: translateX(0);
        clip-path: polygon(0 0%, 100% 0%, 100% 100%, 0 100%);
    }
    5% {
        opacity: 0.9;
        transform: translateX(-60px);
        clip-path: polygon(0 0%, 100% 0%, 100% 8%, 0 8%);
    }
    8% {
        opacity: 0.8;
        transform: translateX(65px);
        clip-path: polygon(0 12%, 100% 12%, 100% 18%, 0 18%);
    }
    11% {
        opacity: 0.9;
        transform: translateX(-50px);
        clip-path: polygon(0 22%, 100% 22%, 100% 26%, 0 26%);
    }
    14% {
        opacity: 0.7;
        transform: translateX(58px);
        clip-path: polygon(0 30%, 100% 30%, 100% 36%, 0 36%);
    }
    17% {
        opacity: 0.85;
        transform: translateX(-45px);
        clip-path: polygon(0 40%, 100% 40%, 100% 44%, 0 44%);
    }
    20% {
        opacity: 0.6;
        transform: translateX(52px);
        clip-path: polygon(0 48%, 100% 48%, 100% 54%, 0 54%);
    }
    23% {
        opacity: 0.8;
        transform: translateX(-38px);
        clip-path: polygon(0 58%, 100% 58%, 100% 62%, 0 62%);
    }
    26% {
        opacity: 0.5;
        transform: translateX(42px);
        clip-path: polygon(0 66%, 100% 66%, 100% 72%, 0 72%);
    }
    29% {
        opacity: 0.75;
        transform: translateX(-35px);
        clip-path: polygon(0 76%, 100% 76%, 100% 80%, 0 80%);
    }
    32% {
        opacity: 0.4;
        transform: translateX(48px);
        clip-path: polygon(0 84%, 100% 84%, 100% 90%, 0 90%);
    }
    35% {
        opacity: 0.7;
        transform: translateX(-28px);
        clip-path: polygon(0 94%, 100% 94%, 100% 100%, 0 100%);
    }
    40% {
        opacity: 0.3;
        transform: translateX(25px);
        clip-path: polygon(0 0%, 100% 0%, 100% 15%, 0 15%);
    }
    45% {
        opacity: 0.6;
        transform: translateX(-22px);
        clip-path: polygon(0 25%, 100% 25%, 100% 35%, 0 35%);
    }
    50% {
        opacity: 0.2;
        transform: translateX(18px);
        clip-path: polygon(0 45%, 100% 45%, 100% 55%, 0 55%);
    }
    55% {
        opacity: 0.5;
        transform: translateX(-15px);
        clip-path: polygon(0 65%, 100% 65%, 100% 75%, 0 75%);
    }
    60% {
        opacity: 0.15;
        transform: translateX(12px);
        clip-path: polygon(0 85%, 100% 85%, 100% 95%, 0 95%);
    }
    65% {
        opacity: 0.4;
        transform: translateX(-10px);
        clip-path: polygon(0 5%, 100% 5%, 100% 25%, 0 25%);
    }
    70% {
        opacity: 0.1;
        transform: translateX(8px);
        clip-path: polygon(0 35%, 100% 35%, 100% 55%, 0 55%);
    }
    75% {
        opacity: 0.3;
        transform: translateX(-6px);
        clip-path: polygon(0 65%, 100% 65%, 100% 85%, 0 85%);
    }
    80% {
        opacity: 0.08;
        transform: translateX(4px);
        clip-path: polygon(0 15%, 100% 15%, 100% 45%, 0 45%);
    }
    85% {
        opacity: 0.2;
        transform: translateX(-3px);
        clip-path: polygon(0 55%, 100% 55%, 100% 85%, 0 85%);
    }
    90% {
        opacity: 0.05;
        transform: translateX(2px);
        clip-path: polygon(0 25%, 100% 25%, 100% 75%, 0 75%);
    }
    95% {
        opacity: 0.1;
        transform: translateX(-1px);
        clip-path: polygon(0 0%, 100% 0%, 100% 100%, 0 100%);
    }
    100% {
        opacity: 0;
        transform: translateX(0);
        clip-path: polygon(0 0%, 100% 0%, 100% 100%, 0 100%);
    }
}

/* LAYER 2 - OPPOSITE DIRECTION SKINNY RECTANGLES */
@keyframes extreme-glitch-layer-2 {
    0% {
        opacity: 0;
        transform: translateX(0);
        clip-path: polygon(0 0%, 100% 0%, 100% 100%, 0 100%);
    }
    4% {
        opacity: 0.95;
        transform: translateX(70px);
        clip-path: polygon(0 4%, 100% 4%, 100% 10%, 0 10%);
    }
    7% {
        opacity: 0.85;
        transform: translateX(-62px);
        clip-path: polygon(0 14%, 100% 14%, 100% 20%, 0 20%);
    }
    10% {
        opacity: 0.9;
        transform: translateX(55px);
        clip-path: polygon(0 24%, 100% 24%, 100% 28%, 0 28%);
    }
    13% {
        opacity: 0.75;
        transform: translateX(-48px);
        clip-path: polygon(0 32%, 100% 32%, 100% 38%, 0 38%);
    }
    16% {
        opacity: 0.8;
        transform: translateX(52px);
        clip-path: polygon(0 42%, 100% 42%, 100% 46%, 0 46%);
    }
    19% {
        opacity: 0.65;
        transform: translateX(-40px);
        clip-path: polygon(0 50%, 100% 50%, 100% 56%, 0 56%);
    }
    22% {
        opacity: 0.7;
        transform: translateX(45px);
        clip-path: polygon(0 60%, 100% 60%, 100% 64%, 0 64%);
    }
    25% {
        opacity: 0.55;
        transform: translateX(-35px);
        clip-path: polygon(0 68%, 100% 68%, 100% 74%, 0 74%);
    }
    28% {
        opacity: 0.6;
        transform: translateX(38px);
        clip-path: polygon(0 78%, 100% 78%, 100% 82%, 0 82%);
    }
    31% {
        opacity: 0.45;
        transform: translateX(-32px);
        clip-path: polygon(0 86%, 100% 86%, 100% 92%, 0 92%);
    }
    34% {
        opacity: 0.5;
        transform: translateX(35px);
        clip-path: polygon(0 96%, 100% 96%, 100% 100%, 0 100%);
    }
    38% {
        opacity: 0.35;
        transform: translateX(-28px);
        clip-path: polygon(0 2%, 100% 2%, 100% 18%, 0 18%);
    }
    42% {
        opacity: 0.4;
        transform: translateX(25px);
        clip-path: polygon(0 28%, 100% 28%, 100% 38%, 0 38%);
    }
    46% {
        opacity: 0.25;
        transform: translateX(-22px);
        clip-path: polygon(0 48%, 100% 48%, 100% 58%, 0 58%);
    }
    50% {
        opacity: 0.3;
        transform: translateX(18px);
        clip-path: polygon(0 68%, 100% 68%, 100% 78%, 0 78%);
    }
    54% {
        opacity: 0.2;
        transform: translateX(-15px);
        clip-path: polygon(0 88%, 100% 88%, 100% 98%, 0 98%);
    }
    58% {
        opacity: 0.25;
        transform: translateX(12px);
        clip-path: polygon(0 8%, 100% 8%, 100% 28%, 0 28%);
    }
    62% {
        opacity: 0.15;
        transform: translateX(-10px);
        clip-path: polygon(0 38%, 100% 38%, 100% 58%, 0 58%);
    }
    66% {
        opacity: 0.2;
        transform: translateX(8px);
        clip-path: polygon(0 68%, 100% 68%, 100% 88%, 0 88%);
    }
    70% {
        opacity: 0.12;
        transform: translateX(-6px);
        clip-path: polygon(0 18%, 100% 18%, 100% 48%, 0 48%);
    }
    74% {
        opacity: 0.15;
        transform: translateX(4px);
        clip-path: polygon(0 58%, 100% 58%, 100% 88%, 0 88%);
    }
    78% {
        opacity: 0.08;
        transform: translateX(-3px);
        clip-path: polygon(0 28%, 100% 28%, 100% 78%, 0 78%);
    }
    82% {
        opacity: 0.1;
        transform: translateX(2px);
        clip-path: polygon(0 48%, 100% 48%, 100% 98%, 0 98%);
    }
    86% {
        opacity: 0.05;
        transform: translateX(-1px);
        clip-path: polygon(0 8%, 100% 8%, 100% 88%, 0 88%);
    }
    90% {
        opacity: 0.03;
        transform: translateX(1px);
        clip-path: polygon(0 0%, 100% 0%, 100% 100%, 0 100%);
    }
    95% {
        opacity: 0.01;
        transform: translateX(0);
        clip-path: polygon(0 0%, 100% 0%, 100% 100%, 0 100%);
    }
    100% {
        opacity: 0;
        transform: translateX(0);
        clip-path: polygon(0 0%, 100% 0%, 100% 100%, 0 100%);
    }
}

/* Color chaos animation for text-shadow */
@keyframes color-chaos {
    0% { text-shadow: 0 0 0 #FFFFFF; }
    10% { text-shadow: -8px 0 0 #E600FB, 8px 0 0 #29FF00, -4px 0 0 #FF00D8; }
    20% { text-shadow: 12px 0 0 #FF00D8, -10px 0 0 #29FF00, 6px 0 0 #E600FB; }
    30% { text-shadow: -15px 0 0 #29FF00, 10px 0 0 #E600FB, -5px 0 0 #FF00D8; }
    40% { text-shadow: 18px 0 0 #E600FB, -12px 0 0 #FF00D8, 8px 0 0 #29FF00; }
    50% { text-shadow: -20px 0 0 #FF00D8, 15px 0 0 #29FF00, -8px 0 0 #E600FB; }
    60% { text-shadow: 3px 0 0 #29FF00, -2px 0 0 #E600FB, 1px 0 0 #FF00D8; }
    70% { text-shadow: -2px 0 0 #E600FB, 1px 0 0 #FF00D8, 0px 0 0 #29FF00; }
    80% { text-shadow: 1px 0 0 #FF00D8, 0px 0 0 #29FF00, 0px 0 0 #E600FB; }
    90% { text-shadow: 0 0 0 #FFFFFF; }
    100% { text-shadow: 0 0 0 #FFFFFF; }
}

/* Mobile keyframes - defined outside media query */
@keyframes extreme-glitch-main-mobile {
    0% { 
        opacity: 0;
        transform: translateX(0) scale(1);
        filter: blur(8px);
        text-shadow: 0 0 0 #FFFFFF;
    }
    10% { 
        opacity: 0.3;
        transform: translateX(-25px) scale(1.05);
        filter: blur(6px);
        text-shadow: -6px 0 0 #E600FB, 6px 0 0 #29FF00;
    }
    20% { 
        opacity: 0.5;
        transform: translateX(30px) scale(0.95);
        filter: blur(4px);
        text-shadow: 8px 0 0 #FF00D8, -4px 0 0 #29FF00;
    }
    30% { 
        opacity: 0.7;
        transform: translateX(-20px) scale(1.03);
        filter: blur(3px);
        text-shadow: -5px 0 0 #29FF00, 3px 0 0 #E600FB;
    }
    40% { 
        opacity: 0.8;
        transform: translateX(15px) scale(0.97);
        filter: blur(2px);
        text-shadow: 4px 0 0 #E600FB, -2px 0 0 #FF00D8;
    }
    50% { 
        opacity: 0.85;
        transform: translateX(-10px) scale(1.01);
        filter: blur(1px);
        text-shadow: -3px 0 0 #FF00D8, 2px 0 0 #29FF00;
    }
    60% { 
        opacity: 0.9;
        transform: translateX(8px) scale(0.99);
        filter: blur(1px);
        text-shadow: 2px 0 0 #29FF00, -1px 0 0 #E600FB;
    }
    70% { 
        opacity: 0.95;
        transform: translateX(-5px) scale(1.005);
        filter: blur(0.5px);
        text-shadow: -1px 0 0 #E600FB, 1px 0 0 #FF00D8;
    }
    80% { 
        opacity: 0.98;
        transform: translateX(3px) scale(0.995);
        filter: blur(0px);
        text-shadow: 1px 0 0 #FF00D8, 0px 0 0 #29FF00;
    }
    90% { 
        opacity: 0.99;
        transform: translateX(-1px) scale(1.001);
        filter: blur(0px);
        text-shadow: 0 0 0 #FFFFFF;
    }
    100% { 
        opacity: 1;
        transform: translateX(0) scale(1);
        filter: blur(0px);
        text-shadow: 0 0 0 #FFFFFF;
    }
}

/* Mobile responsive styles */
@media (max-width: 768px) {
    .glitch-large {
        font-size: clamp(2rem, 10vw, 4rem);
    }
    
    .glitch-medium {
        font-size: clamp(1.5rem, 8vw, 2.5rem);
    }
    
    .glitch-small {
        font-size: clamp(1rem, 5vw, 1.5rem);
    }
    
    /* Use mobile-optimized animation on page load for animate-on-scroll elements */
    .glitch-text.animate-on-scroll {
        animation: extreme-glitch-main-mobile 2s ease-out forwards,
                   color-chaos 2s ease-out forwards;
    }
}

/* Optional: Add delay variations for staggered effects */
.glitch-delay-1 { animation-delay: 0.2s; }
.glitch-delay-2 { animation-delay: 0.4s; }
.glitch-delay-3 { animation-delay: 0.6s; }
.glitch-delay-4 { animation-delay: 0.8s; }
.glitch-delay-5 { animation-delay: 1s; }/* End custom CSS */