/* ==================================================================
   DS 5.1 — Tela de carregamento com identidade (stroke SVG do logo)

   Um splash animado mostra o logo do site "se desenhando" com
   stroke-dashoffset enquanto a página carrega. Suave e memorável.
   ================================================================== */

/* Tela de loading */
.splash-loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  background: var(--bg);
  transition: opacity .4s ease, visibility .4s ease;
}
.splash-loader.is-loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Logo SVG animado */
.splash-logo {
  width: clamp(80px, 20vw, 160px);
  height: auto;
}
.splash-logo path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  animation: splash-draw 1.6s var(--ease-out) forwards;
}
.splash-logo path:nth-child(2) { animation-delay: .15s; }
.splash-logo path:nth-child(3) { animation-delay: .3s; }
.splash-logo path:nth-child(4) { animation-delay: .45s; }

@keyframes splash-draw {
  0%   { stroke-dashoffset: 800; fill-opacity: 0; }
  70%  { stroke-dashoffset: 0; fill-opacity: 0; }
  100% { stroke-dashoffset: 0; fill: var(--accent); fill-opacity: 1; stroke-opacity: 0; }
}

/* Barra de progresso fina no topo */
.splash-progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--surface-2, rgba(255,255,255,.06));
  overflow: hidden;
}
.splash-progress__bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--c2, var(--accent)));
  transform-origin: left;
  animation: splash-fill 2s ease-out forwards;
}
@keyframes splash-fill {
  0%   { transform: scaleX(0); }
  60%  { transform: scaleX(.7); }
  100% { transform: scaleX(1); }
}

/* Texto sutil embaixo */
.splash-text {
  position: absolute;
  bottom: var(--sp-6, 24px);
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--fs-xs);
  color: var(--muted);
  opacity: 0;
  animation: splash-fade 1s .8s ease forwards;
}
@keyframes splash-fade {
  to { opacity: 1; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .splash-logo path {
    animation: none;
    stroke-dashoffset: 0;
    fill: var(--accent);
    fill-opacity: 1;
    stroke-opacity: 0;
  }
  .splash-progress__bar { animation-duration: .3s; }
  .splash-loader { transition-duration: .15s; }
}