/*
 * PlayTCG 2.0 — Loader "o vencedor avança"
 *
 * O símbolo da marca em movimento: a cadeira que ganha vira tinta cheia, a
 * barra vermelha desce pelo eixo e ocupa a saída, e depois é a vez da cadeira
 * de baixo. Ciclo de 2s, sem gradiente, sem giro, sem sombra.
 *
 * Geometria em em para que um único font-size escale o loader inteiro:
 * a caixa nativa é 48px, então 1em = 48px e todas as medidas do design
 * (5px, 8px, 13px, 21.5px…) viram frações de em.
 *
 *   font-size: 96px  splash
 *   font-size: 48px  cartão / diálogo (padrão)
 *   font-size: 32px  inline
 *   font-size: 20px  botão ocupado
 *
 * Depende de: tcg-tokens.css
 */

/* ========================================
   O LOADER
   ======================================== */

.ptcg-loader {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    font-size: 48px;
    width: 1em;
    height: 1em;
    line-height: 0;
}

.ptcg-loader-lg { font-size: 96px; }
.ptcg-loader-md { font-size: 48px; }
.ptcg-loader-sm { font-size: 32px; }
.ptcg-loader-xs { font-size: 20px; }

.ptcg-loader i {
    position: absolute;
    display: block;
}

/* Cadeiras de entrada */
.ptcg-in {
    left: 0.166667em;
    width: 0.270833em;
    height: 0.104167em;
    background: var(--tcg-neutral-300, #c9c6c4);
}

.ptcg-in.a {
    top: 0.25em;
    animation: ptcgSeatA 2s linear infinite;
}

.ptcg-in.b {
    top: 0.645833em;
    animation: ptcgSeatB 2s linear infinite;
}

/* Eixo do chaveamento */
.ptcg-spine {
    left: 0.4375em;
    top: 0.25em;
    width: 0.104167em;
    height: 0.5em;
    background: var(--tcg-neutral-300, #c9c6c4);
}

/* Trilho de saída */
.ptcg-out {
    left: 0.541667em;
    top: 0.447917em;
    width: 0.291667em;
    height: 0.104167em;
    background: var(--tcg-neutral-200, #e2e0df);
    animation: ptcgOut 2s linear infinite;
}

/* O vencedor */
.ptcg-win {
    left: 0.166667em;
    width: 0.270833em;
    height: 0.104167em;
    background: var(--tcg-accent, #ec3013);
}

.ptcg-win.a {
    top: 0.25em;
    animation: ptcgAdvanceA 2s cubic-bezier(.65, 0, .35, 1) infinite;
}

.ptcg-win.b {
    top: 0.645833em;
    animation: ptcgAdvanceB 2s cubic-bezier(.65, 0, .35, 1) infinite;
}

@keyframes ptcgAdvanceA {
    /* Percorre o traçado, nunca a diagonal. Quatro fases do handoff, num ciclo de 2s:
       0-480ms a cadeira vencedora vira tinta e a barra espera nela; 480-680ms encurta
       para 5px e desliza PARA DENTRO do eixo (só no eixo x); 680-920ms desce PELO eixo
       até a linha de saída (só no eixo y); 920-1120ms estica para 14px ao sair. */
    0%, 6%    { transform: translate(0, 0); width: 0.270833em; opacity: 0; }
    12%       { transform: translate(0, 0); width: 0.270833em; opacity: 1; }
    24%       { transform: translate(0, 0); width: 0.270833em; opacity: 1; }
    34%       { transform: translate(0.270833em, 0); width: 0.104167em; opacity: 1; }
    46%       { transform: translate(0.270833em, 0.197917em); width: 0.104167em; opacity: 1; }
    56%, 88%  { transform: translate(0.375em, 0.197917em); width: 0.291667em; opacity: 1; }
    100%      { transform: translate(0.375em, 0.197917em); width: 0.291667em; opacity: 0; }
}

@keyframes ptcgAdvanceB {
    /* Mesmo percurso a partir da cadeira de baixo, deslocado em 44% do ciclo; a fase
       do eixo sobe em vez de descer. */
    0%, 50%   { transform: translate(0, 0); width: 0.270833em; opacity: 0; }
    56%       { transform: translate(0, 0); width: 0.270833em; opacity: 1; }
    68%       { transform: translate(0, 0); width: 0.270833em; opacity: 1; }
    78%       { transform: translate(0.270833em, 0); width: 0.104167em; opacity: 1; }
    90%       { transform: translate(0.270833em, -0.197917em); width: 0.104167em; opacity: 1; }
    100%      { transform: translate(0.375em, -0.197917em); width: 0.291667em; opacity: 1; }
}

@keyframes ptcgSeatA {
    0%, 24%   { background: var(--tcg-ink, #201e1d); }
    34%, 100% { background: var(--tcg-neutral-300, #c9c6c4); }
}

@keyframes ptcgSeatB {
    0%, 50%   { background: var(--tcg-neutral-300, #c9c6c4); }
    56%, 68%  { background: var(--tcg-ink, #201e1d); }
    78%, 100% { background: var(--tcg-neutral-300, #c9c6c4); }
}

@keyframes ptcgOut {
    0%, 46%   { background: var(--tcg-neutral-200, #e2e0df); }
    56%, 96%  { background: var(--tcg-accent-100, #fdecea); }
    100%      { background: var(--tcg-neutral-200, #e2e0df); }
}

/* ========================================
   VARIANTE EM FUNDO ESCURO (modo Arena)
   ======================================== */

.ptcg-dark .ptcg-in,
.ptcg-dark .ptcg-spine {
    background: var(--tcg-neutral-700, #4a4644);
}

.ptcg-dark .ptcg-out {
    background: var(--tcg-arena-700, #2c2a28);
    animation: none;
}

.ptcg-dark .ptcg-in.a,
.ptcg-dark .ptcg-in.b {
    animation-name: ptcgSeatDark;
}

@keyframes ptcgSeatDark {
    0%, 40%   { background: var(--tcg-neutral-500, #8a8582); }
    55%, 100% { background: var(--tcg-neutral-700, #4a4644); }
}

/* ========================================
   BARRA INDETERMINADA — sincronização e carga de página
   ======================================== */

.ptcg-bar {
    position: relative;
    height: 4px;
    background: var(--tcg-neutral-200, #e2e0df);
    overflow: hidden;
}

.ptcg-bar span {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 34%;
    background: var(--tcg-accent, #ec3013);
    animation: ptcgSweep 1.3s cubic-bezier(.65, 0, .35, 1) infinite;
}

@keyframes ptcgSweep {
    0%   { left: -34%; }
    100% { left: 100%; }
}

/* ========================================
   ESQUELETO DE TABELA
   ======================================== */

.ptcg-skel {
    background: var(--tcg-neutral-200, #e2e0df);
    position: relative;
    overflow: hidden;
}

.ptcg-skel::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
    animation: ptcgShimmer 1.4s linear infinite;
}

@keyframes ptcgShimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ========================================
   MOVIMENTO REDUZIDO
   Desacelera o ciclo em vez de congelar: o usuário ainda vê que algo carrega.
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    .ptcg-loader i,
    .ptcg-bar span,
    .ptcg-skel::after {
        animation-duration: 3.2s !important;
    }
}

/* ========================================
   ANTDESIGN SPIN → LOADER DA MARCA
   ------------------------------------------
   O Spin do AntDesign renderiza .ant-spin-dot com quatro <i>. Somando
   ::before e ::after chegamos às seis barras que o loader precisa:
   i1/i2 são as cadeiras, i3/i4 os vencedores, ::before o eixo e ::after
   o trilho de saída.
   ======================================== */

.ant-spin {
    color: var(--tcg-accent, #ec3013);
}

.ant-spin-dot {
    position: relative;
    display: inline-block;
    font-size: 48px !important;
    width: 1em !important;
    height: 1em !important;
    line-height: 0;
    transform: none !important;
    animation: none !important;
}

.ant-spin-sm .ant-spin-dot { font-size: 32px !important; }
.ant-spin-lg .ant-spin-dot { font-size: 96px !important; }

.ant-spin-dot-item,
.ant-spin-dot::before,
.ant-spin-dot::after {
    position: absolute;
    display: block;
    border-radius: 0;
    opacity: 1;
    transform: none;
    animation: none;
    background: var(--tcg-neutral-300, #c9c6c4);
}

/* Eixo */
.ant-spin-dot::before {
    content: '';
    left: 0.4375em;
    top: 0.25em;
    width: 0.104167em;
    height: 0.5em;
}

/* Trilho de saída */
.ant-spin-dot::after {
    content: '';
    left: 0.541667em;
    top: 0.447917em;
    width: 0.291667em;
    height: 0.104167em;
    background: var(--tcg-neutral-200, #e2e0df);
    animation: ptcgOut 2s linear infinite;
}

/* Cadeiras */
.ant-spin-dot-item:nth-child(1),
.ant-spin-dot-item:nth-child(2) {
    left: 0.166667em;
    width: 0.270833em;
    height: 0.104167em;
}

.ant-spin-dot-item:nth-child(1) {
    top: 0.25em;
    animation: ptcgSeatA 2s linear infinite;
}

.ant-spin-dot-item:nth-child(2) {
    top: 0.645833em;
    animation: ptcgSeatB 2s linear infinite;
}

/* Vencedores */
.ant-spin-dot-item:nth-child(3),
.ant-spin-dot-item:nth-child(4) {
    left: 0.166667em;
    width: 0.270833em;
    height: 0.104167em;
    background: var(--tcg-accent, #ec3013);
}

.ant-spin-dot-item:nth-child(3) {
    top: 0.25em;
    animation: ptcgAdvanceA 2s cubic-bezier(.65, 0, .35, 1) infinite;
}

.ant-spin-dot-item:nth-child(4) {
    top: 0.645833em;
    animation: ptcgAdvanceB 2s cubic-bezier(.65, 0, .35, 1) infinite;
}

.ant-spin-text {
    padding-top: 8px;
    color: var(--tcg-neutral-600, #6b6663);
    font-size: 13px;
}

.ant-spin-nested-loading .ant-spin-spinning {
    min-height: 60px;
}