/* =====================================
   MEelo PREMIUM SPLASH SCREEN
===================================== */

#meeloSplash {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--splash-bg, #ffffff);
    opacity: 1;
    visibility: visible;
    transition:
        opacity 0.65s ease,
        visibility 0.65s ease;
}

#meeloSplash.splash-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.meelo-splash-content {
    width: 100%;
    max-width: 420px;
    padding: 30px 20px;
    text-align: center;
    animation: meeloSplashEnter 0.8s ease both;
}

.meelo-splash-logo {
    width: 88px;
    height: 88px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 26px;
    background: var(--splash-accent, #e91e63);
    color: #ffffff;
    font-size: 38px;
    font-weight: 800;
    letter-spacing: -3px;
    box-shadow: 0 12px 35px rgba(233, 30, 99, 0.20);
    animation: meeloLogoFloat 2s ease-in-out infinite;
}

.meelo-splash-brand {
    margin: 0;
    color: var(--splash-brand, #171717);
    font-size: 43px;
    font-weight: 800;
    letter-spacing: -2px;
}

.meelo-splash-tagline {
    margin: 9px 0 30px;
    color: #777777;
    font-size: 14px;
    letter-spacing: 1.5px;
}

.meelo-splash-loader {
    width: 145px;
    height: 3px;
    margin: 0 auto 14px;
    overflow: hidden;
    border-radius: 20px;
    background: #eeeeee;
}

.meelo-splash-loader span {
    display: block;
    width: 45%;
    height: 100%;
    border-radius: 20px;
    background: var(--splash-accent, #e91e63);
    animation: meeloLoading 1.2s ease-in-out infinite;
}

.meelo-splash-loading-text {
    margin: 0;
    color: #999999;
    font-size: 12px;
    letter-spacing: 0.5px;
}

@keyframes meeloSplashEnter {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes meeloLogoFloat {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }
}

@keyframes meeloLoading {
    0% {
        transform: translateX(-120%);
    }

    100% {
        transform: translateX(330%);
    }
}

@media (max-width: 480px) {
    .meelo-splash-logo {
        width: 76px;
        height: 76px;
        font-size: 33px;
        border-radius: 22px;
    }

    .meelo-splash-brand {
        font-size: 37px;
    }

    .meelo-splash-tagline {
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #meeloSplash,
    .meelo-splash-content,
    .meelo-splash-logo,
    .meelo-splash-loader span {
        animation: none !important;
        transition: none !important;
    }
}

.meelo-splash-logo-image {
    width: 110px;
    height: 110px;
    object-fit: contain;
    display: block;
    margin: 0 auto 15px;
}

/* =========================================
   MRELO - PREMIUM ANIMATED SPLASH SCREEN
========================================= */

#meeloSplash {
    position: fixed;
    inset: 0;
    z-index: 999999;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    isolation: isolate;

    background: linear-gradient(
        135deg,
        #fff7fa,
        #ffe8f1,
        #ffffff,
        #fce4ec
    );

    background-size: 300% 300%;
    animation: mreloBackground 12s ease infinite;

    opacity: 1;
    transition: opacity 0.7s ease;
}

#meeloSplash.splash-hidden {
    opacity: 0;
    pointer-events: none;
}

/* Animated glowing background */

#meeloSplash::before {
    content: "";
    position: absolute;
    inset: -30%;
    z-index: -1;

    background:
        radial-gradient(
            circle at 20% 30%,
            rgba(233, 30, 99, 0.20),
            transparent 30%
        ),
        radial-gradient(
            circle at 80% 70%,
            rgba(255, 105, 160, 0.20),
            transparent 32%
        ),
        radial-gradient(
            circle at 50% 50%,
            rgba(255, 255, 255, 0.95),
            transparent 50%
        );

    filter: blur(18px);
    animation: mreloGlow 9s ease-in-out infinite alternate;
}

/* Soft floating light particles */

#meeloSplash::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    background-image:
        radial-gradient(circle, rgba(233,30,99,.35) 1px, transparent 2px),
        radial-gradient(circle, rgba(255,255,255,.95) 2px, transparent 3px),
        radial-gradient(circle, rgba(233,30,99,.20) 2px, transparent 3px);

    background-size: 90px 90px, 140px 140px, 190px 190px;
    background-position: 0 0, 40px 60px, 100px 20px;

    animation: mreloParticles 18s linear infinite;
}

/* Main Content */

.meelo-splash-content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 25px 20px;
    text-align: center;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    animation: mreloEntrance 1.1s ease both;
}

/* Brand Logo */

.meelo-splash-logo-image {
    width: 180px !important;
    height: 180px !important;
    max-width: 75vw;
    max-height: 180px;

    object-fit: contain;
    display: block;

    margin: 0 auto 18px;
    padding: 0;

    background: transparent;
    border: none;

    filter: drop-shadow(
        0 12px 22px rgba(233, 30, 99, 0.18)
    );

    animation: mreloLogo 3s ease-in-out infinite;
}

/* Brand Name */

.meelo-splash-brand {
    margin: 0;
    padding: 0;

    color: var(--splash-brand, #21151c);

    font-size: clamp(34px, 8vw, 48px);
    font-weight: 800;
    letter-spacing: 2px;

    text-align: center;

    animation: mreloText 1.2s ease both;
}

/* Tagline */

.meelo-splash-tagline {
    margin: 10px 0 25px;

    color: #80616f;

    font-size: 14px;
    font-weight: 500;
    letter-spacing: 2px;

    animation: mreloText 1.5s ease both;
}

/* Loading Bar */

.meelo-splash-loader {
    width: 150px;
    height: 4px;

    margin: 5px auto 14px;

    overflow: hidden;
    border-radius: 20px;

    background: rgba(233, 30, 99, 0.13);
}

.meelo-splash-loader span {
    display: block;
    width: 45%;
    height: 100%;

    border-radius: 20px;

    background: linear-gradient(
        90deg,
        #f8a1bf,
        #e91e63,
        #ff80ab
    );

    animation: mreloLoading 1.5s ease-in-out infinite;
}

/* Loading Text */

.meelo-splash-loading-text {
    margin: 0;

    color: #967987;
    font-size: 11px;
    letter-spacing: 1px;
}

/* =========================================
   ANIMATIONS
========================================= */

@keyframes mreloBackground {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes mreloGlow {
    0% {
        transform: translate(-3%, -2%) scale(1);
    }
    100% {
        transform: translate(3%, 2%) scale(1.12);
    }
}

@keyframes mreloParticles {
    from {
        background-position: 0 0, 40px 60px, 100px 20px;
    }
    to {
        background-position: 0 -300px, 40px -240px, 100px -360px;
    }
}

@keyframes mreloEntrance {
    from {
        opacity: 0;
        transform: translateY(25px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes mreloLogo {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-7px) scale(1.035);
    }
}

@keyframes mreloText {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes mreloLoading {
    0% {
        transform: translateX(-120%);
    }
    100% {
        transform: translateX(230%);
    }
}

/* Mobile Responsive */

@media (max-width: 480px) {
    .meelo-splash-logo-image {
        width: 155px !important;
        height: 155px !important;
    }

    .meelo-splash-brand {
        font-size: 36px;
    }

    .meelo-splash-tagline {
        font-size: 12px;
    }
}

/* Accessibility */

@media (prefers-reduced-motion: reduce) {
    #meeloSplash,
    #meeloSplash::before,
    #meeloSplash::after,
    .meelo-splash-content,
    .meelo-splash-logo-image,
    .meelo-splash-brand,
    .meelo-splash-tagline,
    .meelo-splash-loader span {
        animation: none !important;
    }
}