.hero-visual {
    position: relative;
    isolation: isolate;
}

.mp-webgl-canvas {
    position: absolute;
    inset: -1%;
    z-index: 2;
    width: 102%;
    height: 102%;
    display: block;
    opacity: 0;
    pointer-events: none;
    filter:
        saturate(1.08)
        contrast(1.04);
    transition:
        opacity 1.1s ease,
        filter 0.8s ease;
}

.hero-visual.mp-webgl-ready .mp-webgl-canvas {
    opacity: 1;
}

.hero-visual .house-scene {
    transition:
        opacity 0.9s ease,
        filter 0.9s ease,
        transform 0.9s ease;
}

.hero-visual.mp-webgl-ready .house-scene {
    opacity: 0;
    filter: blur(3px);
    transform: scale(1.025);
    pointer-events: none;
}

.hero-visual.mp-webgl-failed .house-scene {
    opacity: 1;
}

.mp-webgl-badge {
    position: absolute;
    right: 5%;
    bottom: 7%;
    z-index: 9;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 11px;
    border: 1px solid rgba(48, 206, 248, 0.24);
    border-radius: 999px;
    opacity: 0;
    color: #86eaff;
    background: rgba(3, 14, 23, 0.68);
    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.25),
        inset 0 1px rgba(255, 255, 255, 0.035);
    backdrop-filter: blur(12px);
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 0.15em;
    pointer-events: none;
    transform: translateY(5px);
    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}

.hero-visual.mp-webgl-ready .mp-webgl-badge {
    opacity: 0.8;
    transform: none;
}

.mp-webgl-badge i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #43e4a0;
    box-shadow:
        0 0 8px #43e4a0,
        0 0 18px rgba(67, 228, 160, 0.5);
}

.hero-visual.mp-webgl-ready .visual-halo {
    z-index: 1;
    opacity: 0.9;
}

.hero-visual.mp-webgl-ready .system-card {
    z-index: 8;
}

.hero-visual.mp-webgl-ready .mp-v3-particle {
    z-index: 6;
}

@media (max-width: 720px) {
    .mp-webgl-canvas {
        inset: 1% -10% -1% -10%;
        width: 120%;
        height: 100%;
    }

    .mp-webgl-badge {
        right: 4%;
        bottom: 3%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mp-webgl-canvas,
    .hero-visual .house-scene,
    .mp-webgl-badge {
        transition: none;
    }
}

/* MP WEBGL V46 OVERRIDES START */

.mp-webgl-debug-status {
    display: none !important;
}

.mp-webgl-badge {
    display: none !important;
}

.mp-webgl-canvas {
    inset: -2% -3%;
    width: 106%;
    height: 104%;
    filter:
        saturate(1.02)
        contrast(1.025)
        brightness(1.03);
}

.hero-visual.mp-webgl-ready::before {
    opacity: 0.54;
}

@media (min-width: 1021px) {
    .hero-visual.mp-webgl-ready .camera-card {
        top: 13%;
        left: 23%;
    }

    .hero-visual.mp-webgl-ready .access-card {
        top: 31%;
        left: 12%;
    }

    .hero-visual.mp-webgl-ready .alarm-card {
        top: 34%;
        right: -1%;
    }

    .hero-visual.mp-webgl-ready .perimeter-card {
        right: 24%;
        bottom: 11%;
    }
}

@media (max-width: 720px) {
    .mp-webgl-canvas {
        inset: -2% -12%;
        width: 124%;
        height: 104%;
    }
}

/* MP WEBGL V46 OVERRIDES END */