/* ============================================================
   T-Loader — Spinner tecnológico basado en la letra T
   Uso: incluir tLoader.css + tLoader.js, luego TLoader.show() / hide().
   ============================================================ */

:root {
    --tl-bg:        rgba(15, 23, 42, 0.92);
    --tl-bg-inner:  #1e293b;
    --tl-accent:    #38bdf8;
    --tl-accent-2:  #a78bfa;
    --tl-ink:       #e2e8f0;
    --tl-size:      clamp(140px, 22vmin, 240px);
}

/* --------- Overlay --------- */
.tloader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    background:
        radial-gradient(ellipse at center, var(--tl-bg-inner) 0%, var(--tl-bg) 75%),
        linear-gradient(180deg, #0b1220 0%, #0f172a 100%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .35s ease, visibility 0s linear .35s;
    contain: strict;
}

.tloader.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .35s ease, visibility 0s linear 0s;
}

/* --------- Escenario y marcos orbitales --------- */
.tloader__stage {
    position: relative;
    width: var(--tl-size);
    height: var(--tl-size);
    filter: drop-shadow(0 0 14px rgba(56, 189, 248, 0.55));
}

.tloader__stage::before,
.tloader__stage::after {
    content: "";
    position: absolute;
    inset: -10%;
    border-radius: 18px;
    pointer-events: none;
    border: 1px solid rgba(56, 189, 248, 0.22);
}
.tloader__stage::after {
    inset: -20%;
    border-color: rgba(167, 139, 250, 0.14);
    border-style: dashed;
    animation: tl-rotate 9s linear infinite;
}
.tloader.is-visible .tloader__stage {
    animation: tl-breath 3.2s ease-in-out 1.4s infinite;
}

/* --------- SVG (las dos piezas de la T) --------- */
.tloader__svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    display: block;
}

.tloader__path {
    fill: var(--tl-accent);
    fill-opacity: 0;
    stroke: var(--tl-accent);
    stroke-width: 1.4;
    stroke-linejoin: miter;
    stroke-linecap: square;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

.tloader.is-visible .tloader__path--top {
    animation:
        tl-draw .55s ease-out forwards,
        tl-fill .35s ease-out .50s forwards,
        tl-pulse 2.4s ease-in-out 1.3s infinite;
}

.tloader.is-visible .tloader__path--stem {
    animation:
        tl-draw .65s ease-out .45s forwards,
        tl-fill .35s ease-out 1.05s forwards,
        tl-pulse 2.4s ease-in-out 1.6s infinite;
}

/* --------- Línea de escaneo horizontal --------- */
.tloader__scan {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    mix-blend-mode: screen;
    border-radius: 8px;
}
.tloader.is-visible .tloader__scan {
    animation: tl-scan-appear .3s ease 1.2s forwards;
}
.tloader__scan::before {
    content: "";
    position: absolute;
    left: -15%;
    right: -15%;
    height: 22%;
    top: -30%;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(56, 189, 248, 0.05) 30%,
        rgba(56, 189, 248, 0.75) 50%,
        rgba(56, 189, 248, 0.05) 70%,
        transparent 100%
    );
    filter: blur(4px);
    animation: tl-scan 2.4s ease-in-out infinite;
}

/* --------- Partículas digitales --------- */
.tloader__particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.tloader__particle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--tl-accent);
    box-shadow: 0 0 8px var(--tl-accent);
    opacity: 0;
    will-change: transform, opacity;
}
.tloader__particle--accent {
    background: var(--tl-accent-2);
    box-shadow: 0 0 8px var(--tl-accent-2);
}
.tloader.is-visible .tloader__particle {
    animation: tl-particle 2.6s ease-in infinite;
}

/* --------- Etiqueta --------- */
.tloader__label {
    color: var(--tl-ink);
    font-family: "Segoe UI", Roboto, system-ui, sans-serif;
    font-size: 12px;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    opacity: 0;
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
}
.tloader.is-visible .tloader__label {
    animation: tl-label 1.8s ease-in-out 1s infinite;
}
.tloader__label::after {
    content: "";
    width: 18px;
    text-align: left;
    letter-spacing: 2px;
    color: var(--tl-accent);
    animation: tl-dots 1.2s steps(4, end) infinite;
}

/* --------- Keyframes --------- */
@keyframes tl-draw   { to { stroke-dashoffset: 0; } }
@keyframes tl-fill   { from { fill-opacity: 0; } to { fill-opacity: 1; } }
@keyframes tl-pulse {
    0%, 100% { filter: none; }
    50%      { filter: drop-shadow(0 0 10px var(--tl-accent-2)); }
}
@keyframes tl-breath {
    0%, 100% { transform: scale(1)    rotate(0deg); }
    50%      { transform: scale(1.03) rotate(.8deg); }
}
@keyframes tl-rotate { to { transform: rotate(360deg); } }
@keyframes tl-scan-appear { to { opacity: 1; } }
@keyframes tl-scan {
    0%   { top: -30%; }
    100% { top: 120%; }
}
@keyframes tl-particle {
    0%   { opacity: 0; transform: translate(0, 0) scale(.6); }
    15%  { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--dx, 0), var(--dy, -60px)) scale(1); }
}
@keyframes tl-label {
    0%, 100% { opacity: .55; }
    50%      { opacity: 1; }
}
@keyframes tl-dots {
    0%   { content: ""; }
    25%  { content: "."; }
    50%  { content: ".."; }
    75%  { content: "..."; }
    100% { content: ""; }
}

/* --------- Accesibilidad: reduce motion --------- */
@media (prefers-reduced-motion: reduce) {
    .tloader.is-visible .tloader__path--top,
    .tloader.is-visible .tloader__path--stem {
        animation: none;
        stroke-dashoffset: 0;
        fill-opacity: 1;
    }
    .tloader.is-visible .tloader__stage,
    .tloader__stage::after,
    .tloader__scan::before,
    .tloader__particle,
    .tloader__label::after {
        animation: none;
    }
}