/* ============================================================================
   MacroSolution.BaseFront · play-loader.css
   Loader full-screen com logo PlayCenter — abertura (cortinas fecham + logo
   se desenha via SVG stroke + wordmark sobe) / fechamento (cortinas abrem).
   Servido em _content/MacroSolution.BaseFront/css/play-loader.css
   Paleta PlayCenter heritage: cream #FAFAF7 + clay #C15F3C + ink #1A1A1A.
   ============================================================================ */
.pl-loader {
  /* brand PlayCenter dark/cyan — igual ao kit pre-site/UIUX-Componentes/loaders-skeletons.html */
  --pl-bg: #080B12; --pl-surface: #242A38; --pl-accent: #00E5FF;
  --pl-accent-glow: rgba(0, 229, 255, 0.20); --pl-ink: #F4F6FA; --pl-muted: #7A8294;
  position: fixed; inset: 0; z-index: 99999; pointer-events: none;
  font-family: 'Lato', 'Inter', system-ui, -apple-system, sans-serif;
}
.pl-loader[hidden] { display: none; }

/* cortinas (2 painéis) */
.pl-panel { position: fixed; left: 0; right: 0; height: 51vh; background: var(--pl-bg); z-index: 1; transition: transform 620ms cubic-bezier(0.16, 1, 0.3, 1); will-change: transform; }
.pl-panel-top { top: 0; transform: translateY(-101%); }
.pl-panel-bottom { bottom: 0; transform: translateY(101%); }
.pl-loader.is-active { pointer-events: auto; }
.pl-loader.is-active .pl-panel-top,
.pl-loader.is-active .pl-panel-bottom { transform: translateY(0); }

/* núcleo (logo + wordmark) */
.pl-core { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center; align-content: center; gap: 26px; opacity: 0; transition: opacity 360ms cubic-bezier(0.16, 1, 0.3, 1); }
.pl-loader.is-revealed .pl-core { opacity: 1; }
.pl-glow { position: absolute; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, var(--pl-accent-glow), transparent 65%); filter: blur(6px); opacity: .3; }
.pl-loader.is-revealed .pl-glow { animation: plGlow 2.4s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
@keyframes plGlow { 0%,100% { opacity: .3; transform: scale(.9); } 50% { opacity: .7; transform: scale(1.08); } }

/* logo */
.pl-logo { width: 160px; height: 160px; overflow: visible; }
.pl-logo .pl-lines line { stroke-dasharray: 16; stroke-dashoffset: 16; }
.pl-loader.is-revealed .pl-logo .pl-lines line { animation: plDraw 520ms cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.pl-loader.is-revealed .pl-logo .pl-lines line:nth-child(2) { animation-delay: 90ms; }
.pl-loader.is-revealed .pl-logo .pl-lines line:nth-child(3) { animation-delay: 180ms; }
.pl-loader.is-revealed .pl-logo .pl-lines line:nth-child(4) { animation-delay: 270ms; }
@keyframes plDraw { to { stroke-dashoffset: 0; } }
.pl-logo .pl-nodes circle, .pl-logo .pl-hub, .pl-logo .pl-play { transform-box: fill-box; transform-origin: center; opacity: 0; transform: scale(0); }
.pl-loader.is-revealed .pl-nodes circle { animation: plPop 480ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.pl-loader.is-revealed .pl-nodes circle:nth-child(2) { animation-delay: 80ms; }
.pl-loader.is-revealed .pl-nodes circle:nth-child(3) { animation-delay: 160ms; }
.pl-loader.is-revealed .pl-nodes circle:nth-child(4) { animation-delay: 240ms; }
.pl-loader.is-revealed .pl-hub { animation: plPop 560ms cubic-bezier(0.34, 1.56, 0.64, 1) 380ms forwards; }
.pl-loader.is-revealed .pl-play { animation: plPop 320ms cubic-bezier(0.16, 1, 0.3, 1) 640ms forwards; }
@keyframes plPop { 0% { opacity: 0; transform: scale(0); } 60% { opacity: 1; } 100% { opacity: 1; transform: scale(1); } }

/* wordmark PLAYCENTER (Lato thin) */
.pl-wordmark { display: flex; gap: 3px; font-weight: 300; letter-spacing: .42em; font-size: 20px; color: var(--pl-ink); padding-left: .42em; text-transform: uppercase; }
.pl-wordmark span { opacity: 0; transform: translateY(14px); display: inline-block; }
.pl-loader.is-revealed .pl-wordmark span { animation: plRise 460ms cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.pl-loader.is-revealed .pl-wordmark span:nth-child(1) { animation-delay: .70s; }
.pl-loader.is-revealed .pl-wordmark span:nth-child(2) { animation-delay: .76s; }
.pl-loader.is-revealed .pl-wordmark span:nth-child(3) { animation-delay: .82s; }
.pl-loader.is-revealed .pl-wordmark span:nth-child(4) { animation-delay: .88s; }
.pl-loader.is-revealed .pl-wordmark span:nth-child(5) { animation-delay: .94s; }
.pl-loader.is-revealed .pl-wordmark span:nth-child(6) { animation-delay: 1.00s; }
.pl-loader.is-revealed .pl-wordmark span:nth-child(7) { animation-delay: 1.06s; }
.pl-loader.is-revealed .pl-wordmark span:nth-child(8) { animation-delay: 1.12s; }
.pl-loader.is-revealed .pl-wordmark span:nth-child(9) { animation-delay: 1.18s; }
.pl-loader.is-revealed .pl-wordmark span:nth-child(10) { animation-delay: 1.24s; }
@keyframes plRise { to { opacity: 1; transform: translateY(0); } }

/* progress indeterminado (dura até o MacroFront carregar) */
.pl-progress { width: 180px; height: 2px; background: var(--pl-surface); border-radius: 2px; overflow: hidden; }
.pl-progress-bar { height: 100%; width: 30%; background: var(--pl-accent); border-radius: 2px; }
.pl-loader.is-revealed .pl-progress-bar { animation: plIndet 1.2s ease-in-out infinite; }
@keyframes plIndet { 0% { margin-left: -30%; } 100% { margin-left: 100%; } }

/* cobertura instantânea (chegou do login — sem flash de entrada) */
.pl-loader.is-instant .pl-panel,
.pl-loader.is-instant .pl-core { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  .pl-panel { transition: none; }
  .pl-core { transition: opacity 1ms; }
  .pl-loader.is-revealed .pl-glow,
  .pl-loader.is-revealed .pl-logo .pl-lines line,
  .pl-loader.is-revealed .pl-nodes circle,
  .pl-loader.is-revealed .pl-hub,
  .pl-loader.is-revealed .pl-play,
  .pl-loader.is-revealed .pl-wordmark span,
  .pl-loader.is-revealed .pl-progress-bar { animation: none !important; }
  .pl-nodes circle, .pl-hub, .pl-play, .pl-wordmark span { opacity: 1 !important; transform: none !important; }
  .pl-logo .pl-lines line { stroke-dashoffset: 0 !important; }
  .pl-progress-bar { width: 100%; margin-left: 0; }
}