/* ═══════════════════════════════════════════════════════════
   SOYMAFER — PRELOADER PREMIUM
   Paleta: Violeta #d373ff / Fucsia #a067bb / Dorado #c5a065
   ═══════════════════════════════════════════════════════════ */

/* ── Variables de Marca ─────────────────────────────────── */
#preloader {
    --pl-primary: #d373ff;
    --pl-secondary: #a067bb;
    --pl-accent: #c5a065;
    --pl-glow: rgba(211, 115, 255, 0.45);
    --pl-glow-gold: rgba(197, 160, 101, 0.35);
    --pl-bg: #05030d;
    --pl-bg2: #0d0618;

    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at 30% 20%, rgba(163, 67, 204, 0.18) 0%, transparent 60%),
        radial-gradient(ellipse at 70% 80%, rgba(197, 160, 101, 0.10) 0%, transparent 55%),
        var(--pl-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;
    z-index: 2000000;
    transition: opacity 0.85s cubic-bezier(0.65, 0, 0.35, 1), visibility 0.85s;
    overflow: hidden;
}

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

/* ── Grilla Puntada de Fondo ────────────────────────────── */
#preloader::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(211, 115, 255, 0.08) 1px, transparent 1px);
    background-size: 30px 30px;
    pointer-events: none;
    z-index: 0;
    animation: grid-breathe 6s ease-in-out infinite;
}

@keyframes grid-breathe {

    0%,
    100% {
        opacity: 0.6;
    }

    50% {
        opacity: 1.0;
    }
}

/* ── Líneas de Barrido (Scanlines) ──────────────────────── */
#preloader::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg,
            transparent,
            transparent 2px,
            rgba(0, 0, 0, 0.06) 2px,
            rgba(0, 0, 0, 0.06) 3px);
    pointer-events: none;
    z-index: 0;
}

/* ── Haz de Luz Superior ────────────────────────────────── */
.pl-beam {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 60%;
    background: linear-gradient(to bottom, var(--pl-primary), transparent);
    opacity: 0.15;
    pointer-events: none;
    z-index: 0;
    animation: beam-pulse 4s ease-in-out infinite;
}

@keyframes beam-pulse {

    0%,
    100% {
        opacity: 0.10;
        width: 2px;
    }

    50% {
        opacity: 0.25;
        width: 4px;
    }
}

/* ── Orbes Ambientales ──────────────────────────────────── */
.pl-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    filter: blur(60px);
}

.pl-orb-1 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(211, 115, 255, 0.22) 0%, transparent 70%);
    top: -80px;
    left: -60px;
    animation: orb-float-1 8s ease-in-out infinite;
}

.pl-orb-2 {
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(197, 160, 101, 0.18) 0%, transparent 70%);
    bottom: -60px;
    right: -40px;
    animation: orb-float-2 10s ease-in-out infinite;
}

@keyframes orb-float-1 {

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

    50% {
        transform: translate(30px, 20px) scale(1.1);
    }
}

@keyframes orb-float-2 {

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

    50% {
        transform: translate(-20px, -30px) scale(1.08);
    }
}

/* ── Esquinas HUD ───────────────────────────────────────── */
.hud-c {
    position: absolute;
    width: 18px;
    height: 18px;
    z-index: 2;
    animation: hud-blink 3s ease-in-out infinite;
}

.hud-tl {
    top: 22px;
    left: 22px;
    border-top: 1.5px solid rgba(211, 115, 255, 0.7);
    border-left: 1.5px solid rgba(211, 115, 255, 0.7);
}

.hud-tr {
    top: 22px;
    right: 22px;
    border-top: 1.5px solid rgba(211, 115, 255, 0.7);
    border-right: 1.5px solid rgba(211, 115, 255, 0.7);
}

.hud-bl {
    bottom: 22px;
    left: 22px;
    border-bottom: 1.5px solid rgba(211, 115, 255, 0.7);
    border-left: 1.5px solid rgba(211, 115, 255, 0.7);
}

.hud-br {
    bottom: 22px;
    right: 22px;
    border-bottom: 1.5px solid rgba(211, 115, 255, 0.7);
    border-right: 1.5px solid rgba(211, 115, 255, 0.7);
}

@keyframes hud-blink {

    0%,
    100% {
        opacity: 0.35;
    }

    50% {
        opacity: 1.00;
        box-shadow: 0 0 8px rgba(211, 115, 255, 0.5);
    }
}

/* ── Contenedor Central ─────────────────────────────────── */
.pl-center {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* ── Área del Logo / SVG ────────────────────────────────── */
.logo-area {
    position: relative;
    width: 300px;
    height: 212px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Resplandor bajo el podio */
.logo-area::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 220px;
    height: 24px;
    background: radial-gradient(ellipse, rgba(211, 115, 255, 0.45) 0%, transparent 70%);
    border-radius: 50%;
    animation: glow-pulse 2.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes glow-pulse {

    0%,
    100% {
        opacity: 0.6;
        transform: translateX(-50%) scaleX(1);
    }

    50% {
        opacity: 1.0;
        transform: translateX(-50%) scaleX(1.15);
    }
}

.loader {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* ════════════════════════════════════════════════════════════
   ANIMACIONES DE LOS OBJETOS SVG
   ════════════════════════════════════════════════════════════ */

/* ── Plataforma / Podio ────────────────────────────────── */
#platform {
    animation: platform-breathe 3s ease-in-out infinite;
}

@keyframes platform-breathe {

    0%,
    100% {
        opacity: 0.90;
        filter: drop-shadow(0 0 0px transparent);
    }

    50% {
        opacity: 1.00;
        filter: drop-shadow(0 0 12px rgba(211, 115, 255, 0.3));
    }
}

/* ── Caja de Regalo (caída + rebote) ───────────────────── */
#giftcontain {
    transform-origin: 225px 220px;
    animation: gift-fall 2.8s cubic-bezier(0.23, 1, 0.32, 1) infinite;
}

@keyframes gift-fall {
    0% {
        transform: translateY(-160px) scaleY(1.08);
        opacity: 0;
    }

    35% {
        opacity: 1;
    }

    55% {
        transform: translateY(0px) scaleY(0.88);
    }

    /* choca con el podio */
    65% {
        transform: translateY(-22px) scaleY(1.04);
    }

    /* primer rebote */
    75% {
        transform: translateY(0px) scaleY(0.94);
    }

    /* segundo choque */
    85% {
        transform: translateY(-8px) scaleY(1.02);
    }

    /* mini rebote */
    100% {
        transform: translateY(0px) scaleY(1.00);
        opacity: 1;
    }
}

/* ── Bolsa de Entrega (caída con demora + rebote) ─────── */
#bag {
    transform-origin: 150px 220px;
    animation: bag-fall 2.8s cubic-bezier(0.23, 1, 0.32, 1) 0.45s infinite;
    opacity: 0;
}

@keyframes bag-fall {
    0% {
        transform: translateY(-200px) rotate(-8deg);
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    52% {
        transform: translateY(0px) rotate(3deg) scaleX(0.92);
    }

    /* impacto */
    62% {
        transform: translateY(-18px) rotate(-2deg) scaleX(1.04);
    }

    /* rebote */
    72% {
        transform: translateY(0px) rotate(1deg) scaleX(0.97);
    }

    82% {
        transform: translateY(-6px) rotate(0deg);
    }

    100% {
        transform: translateY(0px) rotate(0deg);
        opacity: 1;
    }
}

/* ── Flecha voladora ───────────────────────────────────── */
#arrow {
    animation: arrow-fly 2.2s ease-in-out infinite;
}

@keyframes arrow-fly {

    0%,
    100% {
        transform: translate(0, 0px);
        filter: drop-shadow(0 0 0 transparent);
    }

    40% {
        transform: translate(6px, -10px);
        filter: drop-shadow(0 0 8px rgba(211, 115, 255, 0.8));
    }

    80% {
        transform: translate(3px, -4px);
    }
}

/* ── Pausa visual antes de reiniciar ciclo ─────────────── */
/* Se controla con la duración + delay de cada keyframe */

/* ════════════════════════════════════════════════════════════
   TEXTOS Y BARRA DE PROGRESO
   ════════════════════════════════════════════════════════════ */

/* ── Nombre de la Marca ─────────────────────────────────── */
.pl-brand-name {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.45em;
    text-transform: uppercase;
    background: linear-gradient(90deg, var(--pl-primary), var(--pl-accent), var(--pl-primary));
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: brand-shine 3s linear infinite;
}

@keyframes brand-shine {
    0% {
        background-position: 0% center;
    }

    100% {
        background-position: 200% center;
    }
}

/* ── Status Line ────────────────────────────────────────── */
.pl-status {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.pl-text {
    position: relative;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
}

.pl-text::before,
.pl-text::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
}

.pl-text::before {
    color: rgba(211, 115, 255, 0.9);
    clip-path: polygon(0 15%, 100% 15%, 100% 45%, 0 45%);
    animation: glitch-a 6s steps(1) infinite;
}

.pl-text::after {
    color: rgba(197, 160, 101, 0.8);
    clip-path: polygon(0 60%, 100% 60%, 100% 85%, 0 85%);
    animation: glitch-b 6s steps(1) infinite;
}

@keyframes glitch-a {

    0%,
    87%,
    89%,
    100% {
        transform: translate(0);
        opacity: 0;
    }

    88% {
        transform: translate(-2px, 1px);
        opacity: 1;
    }
}

@keyframes glitch-b {

    0%,
    91%,
    93%,
    100% {
        transform: translate(0);
        opacity: 0;
    }

    92% {
        transform: translate(2px, -1px);
        opacity: 1;
    }
}

.pl-pct {
    font-size: 10px;
    color: var(--pl-primary);
    letter-spacing: 0.06em;
    min-width: 32px;
    text-shadow: 0 0 8px var(--pl-glow);
}

/* ── Puntos de Carga ────────────────────────────────────── */
.pl-dots {
    display: flex;
    gap: 6px;
    align-items: center;
}

.dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--pl-primary);
    animation: dot-bounce 1.5s ease-in-out infinite;
    box-shadow: 0 0 6px var(--pl-glow);
}

.dot:nth-child(2) {
    animation-delay: 0.25s;
    background: var(--pl-secondary);
}

.dot:nth-child(3) {
    animation-delay: 0.50s;
    background: var(--pl-accent);
}

@keyframes dot-bounce {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.35;
    }

    50% {
        transform: scale(2.4);
        opacity: 1.00;
    }
}

/* ── Barra de Progreso ──────────────────────────────────── */
.pl-bar-wrap {
    width: 200px;
}

.pl-bar-track {
    width: 100%;
    height: 2px;
    background: rgba(211, 115, 255, 0.12);
    border-radius: 99px;
    position: relative;
}

.pl-bar-track::before,
.pl-bar-track::after {
    content: '';
    position: absolute;
    top: -2px;
    width: 1px;
    height: 6px;
    background: rgba(211, 115, 255, 0.30);
}

.pl-bar-track::before {
    left: 0;
}

.pl-bar-track::after {
    right: 0;
}

.pl-bar-fill {
    height: 100%;
    width: 0%;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--pl-secondary), var(--pl-primary), var(--pl-accent));
    background-size: 200% auto;
    animation: bar-shine 2s linear infinite;
    position: relative;
    transition: width 0.35s ease;
    box-shadow: 0 0 10px var(--pl-glow);
}

@keyframes bar-shine {
    0% {
        background-position: 0% center;
    }

    100% {
        background-position: 200% center;
    }
}

.pl-bar-fill::after {
    content: '';
    position: absolute;
    right: -1px;
    top: -3px;
    width: 2px;
    height: 8px;
    border-radius: 99px;
    background: #fff;
    box-shadow: 0 0 10px 3px rgba(211, 115, 255, 0.95);
}

/* ── Panel HUD Inferior ─────────────────────────────────── */
.pl-hud {
    display: flex;
    justify-content: space-between;
    width: 200px;
    font-size: 9px;
    letter-spacing: 0.12em;
    color: rgba(211, 115, 255, 0.35);
    animation: hud-flicker 5s steps(1) infinite;
}

@keyframes hud-flicker {

    0%,
    100% {
        opacity: 1.00;
    }

    39%,
    40% {
        opacity: 0.15;
    }

    68%,
    69% {
        opacity: 0.65;
    }
}

/* ── Ocultar contenido durante precarga ─────────────────── */
body.preloader-active>*:not(#preloader):not(script):not(style):not(link) {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.5s ease;
}