html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* ======================================================== */
/* PREMIUM HYPNOTIC MESH SKELETON ANIMATION                 */
/* ======================================================== */

.premium-buffer-skeleton {
    position: relative;
    /* 1. Base Layer (Background Color): Deep Blue */
    background-color: #0476bd;
    overflow: hidden;
    /* Force hardware acceleration for smooth 60fps mixing */
    transform: translateZ(0);
}

/* Creating the Wandering Orbs (Brand Cyan) */
.premium-buffer-skeleton::before,
.premium-buffer-skeleton::after {
    content: "";
    position: absolute;
    width: 150%;
    height: 150%;
    top: -25%;
    left: -25%;
    /* 2. Radial Gradient Orbs fading into transparent */
    background: radial-gradient(circle at center, rgba(63, 193, 237, 0.9) 0%, rgba(63, 193, 237, 0.4) 40%, transparent 70%);
    /* 3. The Magic: Massive blur perfectly melts the orbs into the deep blue base */
    filter: blur(40px);
    pointer-events: none;
    /* Fluid mixing animation base */
    animation: hypnoticWander infinite ease-in-out alternate;
}

/* Orb 1: Moves on an 11-second prime timer (matches CMP t1Duration) */
.premium-buffer-skeleton::before {
    animation-duration: 11s;
    transform-origin: 40% 40%;
}

/* Orb 2: Moves on a 9-second prime timer (matches CMP t2Duration) */
.premium-buffer-skeleton::after {
    animation-duration: 9s;
    animation-direction: alternate-reverse;
    transform-origin: 60% 60%;
}

/* Mathematical wandering keyframes simulating sine/cosine paths */
@keyframes hypnoticWander {
    0% {
        transform: translate(-10%, -10%) scale(0.8) rotate(0deg);
    }
    33% {
        transform: translate(20%, 10%) scale(1.1) rotate(45deg);
    }
    66% {
        transform: translate(-5%, 25%) scale(0.9) rotate(90deg);
    }
    100% {
        transform: translate(15%, -15%) scale(1.2) rotate(180deg);
    }
}

.blur-reveal-hidden {
    opacity: 0;
    filter: blur(30px);
    transform: scale(1.1); /* Prevents blurred edges from bleeding inward */
}

.blur-reveal-visible {
    opacity: 1;
    filter: blur(0px);
    transform: scale(1);
    /* The magic perfect color-mix transition */
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                filter 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}