/* ==========================================================================
   PRELOADER GLOBAL - EUROFREETOUR
   --------------------------------------------------------------------------
   Componente ligero, accesible y reutilizable.
   ========================================================================== */


/* ==========================================================================
   01. CONTENEDOR PRINCIPAL
   ========================================================================== */

.eft-preloader {
    position: fixed;
    inset: 0;
    z-index: 99999;

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

    width: 100%;
    min-height: 100dvh;

    overflow: hidden;

    background:
        #ffffff;

    opacity: 1;
    visibility: visible;

    transition:
        opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.eft-preloader.is-leaving {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.eft-preloader.is-hidden {
    display: none;
}


/* ==========================================================================
   02. FONDO DECORATIVO
   ========================================================================== */

.eft-preloader__background {
    position: absolute;
    inset: 0;

    overflow: hidden;

    pointer-events: none;
}

.eft-preloader__background::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 50% 46%,
            rgba(244, 37, 79, 0.075),
            transparent 34%
        );
}

.eft-preloader__glow {
    position: absolute;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    filter: blur(20px);

    opacity: 0.34;
}

.eft-preloader__glow--one {
    top: -240px;
    right: -170px;

    background:
        rgba(244, 37, 79, 0.18);

    animation:
        eftPreloaderFloatOne
        5s
        ease-in-out
        infinite;
}

.eft-preloader__glow--two {
    bottom: -270px;
    left: -180px;

    background:
        rgba(62, 10, 15, 0.12);

    animation:
        eftPreloaderFloatTwo
        6s
        ease-in-out
        infinite;
}


/* ==========================================================================
   03. CONTENIDO
   ========================================================================== */

.eft-preloader__content {
    position: relative;
    z-index: 2;

    width: min(
        calc(100% - 40px),
        460px
    );

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

    text-align: center;

    transform:
        translateY(-8px);
}

.eft-preloader__brand {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 18px;
}


/* ==========================================================================
   04. MARCA
   ========================================================================== */

.eft-preloader__mark {
    width: 88px;
    height: 88px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid rgba(244, 37, 79, 0.16);
    border-radius: 28px;

    background:
        rgba(255, 255, 255, 0.84);

    color:
        #f4254f;

    box-shadow:
        0 22px 60px rgba(244, 37, 79, 0.13);

    animation:
        eftPreloaderMark
        1.9s
        cubic-bezier(0.22, 1, 0.36, 1)
        infinite;
}

.eft-preloader__mark svg {
    width: 48px;
    height: 48px;

    stroke:
        currentColor;
    stroke-width:
        2;
    stroke-linecap:
        round;
    stroke-linejoin:
        round;
}

.eft-preloader__name {
    color:
        #171d2b;

    font-family:
        "Poppins",
        sans-serif;

    font-size:
        clamp(
            1.25rem,
            4vw,
            1.65rem
        );

    font-weight:
        700;

    line-height:
        1;

    letter-spacing:
        0.12em;
}


/* ==========================================================================
   05. LÍNEA DE PROGRESO
   ========================================================================== */

.eft-preloader__progress {
    position: relative;

    width: min(
        100%,
        260px
    );

    height: 3px;

    margin-top:
        30px;

    overflow: hidden;

    border-radius:
        999px;

    background:
        rgba(23, 29, 43, 0.08);
}

.eft-preloader__progress-line {
    position: absolute;
    inset: 0;

    width: 42%;

    border-radius:
        inherit;

    background:
        linear-gradient(
            90deg,
            rgba(244, 37, 79, 0),
            #f4254f,
            rgba(244, 37, 79, 0)
        );

    animation:
        eftPreloaderProgress
        1.15s
        cubic-bezier(0.65, 0, 0.35, 1)
        infinite;
}


/* ==========================================================================
   06. MENSAJE
   ========================================================================== */

.eft-preloader__message {
    margin:
        17px
        0
        0;

    color:
        #7a8497;

    font-size:
        0.78rem;

    font-weight:
        600;

    line-height:
        1.5;

    letter-spacing:
        0.025em;
}


/* ==========================================================================
   07. BLOQUEO TEMPORAL DEL DOCUMENTO
   ========================================================================== */

html.eft-is-loading,
html.eft-is-loading body {
    overflow:
        hidden;
}


/* ==========================================================================
   08. ANIMACIONES
   ========================================================================== */

@keyframes eftPreloaderProgress {

    0% {
        transform:
            translateX(-130%);
    }

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

@keyframes eftPreloaderMark {

    0%,
    100% {
        transform:
            translateY(0)
            scale(1);

        box-shadow:
            0 22px 60px rgba(244, 37, 79, 0.13);
    }

    50% {
        transform:
            translateY(-5px)
            scale(1.025);

        box-shadow:
            0 28px 70px rgba(244, 37, 79, 0.2);
    }
}

@keyframes eftPreloaderFloatOne {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0);
    }

    50% {
        transform:
            translate3d(-24px, 18px, 0);
    }
}

@keyframes eftPreloaderFloatTwo {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0);
    }

    50% {
        transform:
            translate3d(22px, -18px, 0);
    }
}


/* ==========================================================================
   09. RESPONSIVE
   ========================================================================== */

@media (max-width: 520px) {

    .eft-preloader__mark {
        width: 78px;
        height: 78px;

        border-radius:
            24px;
    }

    .eft-preloader__mark svg {
        width: 42px;
        height: 42px;
    }

    .eft-preloader__progress {
        width: min(
            100%,
            220px
        );
    }

    .eft-preloader__message {
        font-size:
            0.73rem;
    }
}


/* ==========================================================================
   10. MOVIMIENTO REDUCIDO
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .eft-preloader,
    .eft-preloader *,
    .eft-preloader *::before,
    .eft-preloader *::after {
        animation:
            none !important;

        transition-duration:
            0.01ms !important;
    }
}