/*
 * Tela de carregamento entre paginas dos paineis Throne (V136).
 * Simbolo do Throne com luz neon roxa em camadas: halo que respira, anel de
 * luz girando em volta e brilho fixo no simbolo. So transform/opacity sao
 * animados (sem filtro animado nem desfoque de fundo, que custavam quadros).
 * Aparece no instante do clique e some assim que a pagina nova entra.
 */
.tl-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    background:
        radial-gradient(42% 42% at 50% 50%, rgba(58, 20, 120, 0.42) 0%, rgba(58, 20, 120, 0) 100%),
        radial-gradient(120% 120% at 50% 50%, rgba(10, 5, 20, 0.80) 0%, rgba(6, 3, 13, 0.92) 70%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s cubic-bezier(0.6, 0.01, 0.05, 0.95), visibility 0s 0.18s;
    contain: layout paint style;
}
.tl-overlay.is-on {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.14s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
}

.tl-stage {
    position: relative;
    width: 188px;
    height: 188px;
    display: grid;
    place-items: center;
}
.tl-overlay.is-on .tl-stage {
    animation: tl-in 0.34s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Halo: a luz principal, larga e suave */
.tl-halo {
    position: absolute;
    inset: -34px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(176, 124, 255, 0.62) 0%,
        rgba(138, 72, 245, 0.34) 24%,
        rgba(104, 52, 220, 0.14) 46%,
        rgba(91, 47, 203, 0) 68%);
    animation: tl-breathe 1.7s cubic-bezier(0.6, 0.01, 0.05, 0.95) infinite alternate;
    will-change: transform, opacity;
}

/* Trilho fino do anel (fica parado, da o desenho do circulo) */
.tl-track {
    position: absolute;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    box-shadow:
        inset 0 0 0 1px rgba(176, 124, 255, 0.16),
        0 0 18px rgba(138, 72, 245, 0.10);
}

/* Anel de luz que gira: um arco neon com ponta clara */
.tl-ring {
    position: absolute;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
        rgba(176, 124, 255, 0) 0deg,
        rgba(176, 124, 255, 0) 150deg,
        rgba(176, 124, 255, 0.55) 260deg,
        rgba(214, 190, 255, 0.95) 330deg,
        #ffffff 352deg,
        rgba(176, 124, 255, 0) 360deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
    filter: drop-shadow(0 0 6px rgba(176, 124, 255, 0.95)) drop-shadow(0 0 14px rgba(138, 72, 245, 0.7));
    animation: tl-spin 1.15s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
    will-change: transform;
}

/* O simbolo, com brilho neon fixo e proporcao original */
.tl-mark {
    position: relative;
    display: block;
    height: 78px;
    width: auto;
    filter:
        drop-shadow(0 0 2px rgba(225, 205, 255, 0.85))
        drop-shadow(0 0 12px rgba(150, 90, 255, 0.85))
        drop-shadow(0 0 30px rgba(124, 58, 237, 0.55));
    animation: tl-float 1.7s cubic-bezier(0.6, 0.01, 0.05, 0.95) infinite alternate;
    will-change: transform;
}

/* Escondida: nada anima (nao gasta processamento) */
.tl-overlay:not(.is-on) .tl-halo,
.tl-overlay:not(.is-on) .tl-ring,
.tl-overlay:not(.is-on) .tl-mark {
    animation-play-state: paused;
}

@keyframes tl-in {
    from { opacity: 0; transform: scale(0.94); }
    to   { opacity: 1; transform: none; }
}
@keyframes tl-breathe {
    from { opacity: 0.55; transform: scale(0.9); }
    to   { opacity: 1;    transform: scale(1.08); }
}
@keyframes tl-spin {
    to { transform: rotate(360deg); }
}
@keyframes tl-float {
    from { transform: translateY(1px) scale(0.985); }
    to   { transform: translateY(-2px) scale(1.015); }
}

@media (prefers-reduced-motion: reduce) {
    .tl-overlay,
    .tl-overlay.is-on { transition: none; }
    .tl-overlay.is-on .tl-stage,
    .tl-halo,
    .tl-ring,
    .tl-mark { animation: none; }
    .tl-halo { opacity: 0.85; }
    .tl-ring { opacity: 0.6; }
}