/* ============================================================
   Stoki · pantalla de carga de la marca (assets/js/carga.js)
   ------------------------------------------------------------
   La animación es la que trajo Jesús el 24-10-2026 (stoki-loader.html y
   stoki-loader-icono.html): los dos trazos de la «✓» del logo que se
   dibujan, con las letras del nombre o sin ellas. Mismos trazos, colores y
   tiempos. Lo que cambia: está ESCONDIDA de serie y la saca carga.js solo
   si algo tarda; y escondida no se anima (no gasta en el TPV).
   ============================================================ */
#marca-carga {
    position: fixed; inset: 0; z-index: 9999;
    background: var(--carga-fondo, #fff);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .3s ease, visibility .3s ease;
}
/* Visible, tapa lo de debajo: así no se pulsa dos veces mientras carga. */
#marca-carga.ver { opacity: 1; visibility: visible; pointer-events: auto; }
/* En las pantallas de los negocios, el fondo de su color. */
body.tn-body #marca-carga { --carga-fondo: var(--tn-fondo, #fff); }

.mc-logo { display: flex; align-items: center; gap: clamp(8px, 2vw, 20px); }
.mc-check { width: clamp(70px, 14vw, 140px); height: auto; overflow: visible; }
.mc-solo .mc-check { width: clamp(90px, 20vw, 160px); }
.mc-check line { fill: none; stroke-linecap: round; stroke-width: 112; stroke-dasharray: 1; stroke-dashoffset: 1; }
.mc-check .s1 { stroke: #5FE9FC; opacity: .9; }
.mc-check .s2 { stroke: #1ED2EF; opacity: .85; }
.mc-nombre {
    font-family: 'Nunito', 'Arial Rounded MT Bold', system-ui, sans-serif; font-weight: 900;
    font-size: clamp(48px, 11vw, 120px); color: #121E2A; letter-spacing: -.02em; line-height: 1; display: flex;
}
.mc-nombre span { display: inline-block; opacity: 0; transform: translateY(30%); white-space: pre; }

/* Solo se anima a la vista: al salir, empieza a dibujarse desde el principio. */
#marca-carga.ver .mc-logo .s1 { animation: mcTrazo1 2.4s cubic-bezier(.65, 0, .35, 1) infinite; }
#marca-carga.ver .mc-logo .s2 { animation: mcTrazo2 2.4s cubic-bezier(.65, 0, .35, 1) infinite; }
#marca-carga.ver .mc-nombre span { animation: mcLetra 2.4s ease infinite; }
/* La «✓» sola: bucle continuo, el trazo entra y sale en la misma dirección (sin salto). */
.mc-solo .mc-check line { stroke-dasharray: 1 1.2; stroke-dashoffset: 1.1; }
#marca-carga.ver .mc-solo .s1 { animation: mcSolo1 2.6s cubic-bezier(.65, 0, .35, 1) infinite; }
#marca-carga.ver .mc-solo .s2 { animation: mcSolo2 2.6s cubic-bezier(.65, 0, .35, 1) infinite; }

@keyframes mcTrazo1  { 0% { stroke-dashoffset: 1; } 20%, 80% { stroke-dashoffset: 0; } 95%, 100% { stroke-dashoffset: 1; } }
@keyframes mcTrazo2 { 0%, 18% { stroke-dashoffset: 1; } 40%, 80% { stroke-dashoffset: 0; } 95%, 100% { stroke-dashoffset: 1; } }
@keyframes mcLetra {
    0% { opacity: 0; transform: translateY(30%); }
    15%, 55% { opacity: 1; transform: translateY(0); }
    70%, 100% { opacity: 0; transform: translateY(-20%); }
}
@keyframes mcSolo1 { 0% { stroke-dashoffset: 1.1; } 22%, 58% { stroke-dashoffset: 0; } 80%, 100% { stroke-dashoffset: -1.1; } }
@keyframes mcSolo2 { 0%, 16% { stroke-dashoffset: 1.1; } 40%, 68% { stroke-dashoffset: 0; } 92%, 100% { stroke-dashoffset: -1.1; } }

/* Quien pide menos movimiento ve el logo quieto, entero. */
@media (prefers-reduced-motion: reduce) {
    #marca-carga .mc-check line, #marca-carga.ver .mc-check line { animation: none; stroke-dashoffset: 0; }
    #marca-carga .mc-nombre span, #marca-carga.ver .mc-nombre span { animation: none; opacity: 1; transform: none; }
}