/* ============================================================
   SUTICON — Premium Preloader
   ============================================================ */

/* ── Overlay ─────────────────────────────────────────────── */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  /* Gradiente profundo alinhado com a paleta cyan/navy do site */
  background: linear-gradient(135deg, #060e1a 0%, #0c1f33 45%, #062533 100%);

  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Estado de saída */
#preloader.fade-out {
  opacity: 0;
  transform: scale(1.03);
  pointer-events: none;
}

/* ── Brilho de fundo (radial glow central) ───────────────── */
#preloader::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 50%, rgba(6, 182, 212, 0.12) 0%, transparent 70%),
    radial-gradient(ellipse 40% 30% at 20% 80%, rgba(8, 145, 178, 0.08) 0%, transparent 60%);
  pointer-events: none;
}

/* ── Partículas decorativas (pontos flutuantes CSS) ──────── */
#preloader::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 15% 20%, rgba(6,182,212,0.35) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 80% 15%, rgba(6,182,212,0.25) 0%, transparent 100%),
    radial-gradient(2px   2px   at 55% 75%, rgba(6,182,212,0.20) 0%, transparent 100%),
    radial-gradient(1px   1px   at 35% 60%, rgba(8,145,178,0.30) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 90% 55%, rgba(6,182,212,0.18) 0%, transparent 100%),
    radial-gradient(1px   1px   at 10% 85%, rgba(6,182,212,0.22) 0%, transparent 100%),
    radial-gradient(2px   2px   at 70% 40%, rgba(8,145,178,0.15) 0%, transparent 100%);
  animation: drift 12s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes drift {
  from { transform: translateY(0)   scale(1); }
  to   { transform: translateY(-18px) scale(1.04); }
}

/* ── Conteúdo central ────────────────────────────────────── */
#preloader > div {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0; /* controlamos manualmente com margin */
  animation: contentIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes contentIn {
  from { opacity: 0; transform: translateY(24px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* ── Wrapper do spinner + logo ───────────────────────────── */
.preloader-spinner-wrap {
  position: relative;
  width: 130px;
  height: 130px;
  margin-bottom: 2rem;
}

/* SVG do spinner (arco girando) */
.preloader-spinner-wrap svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: rotateSVG 1.8s linear infinite;
}

@keyframes rotateSVG {
  to { transform: rotate(360deg); }
}

/* Arco do spinner */
.spinner-arc {
  fill: none;
  stroke: url(#spinner-gradient);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 220;
  stroke-dashoffset: 55;
}

/* Trilha do spinner (track) */
.spinner-track {
  fill: none;
  stroke: rgba(6, 182, 212, 0.10);
  stroke-width: 3;
}

/* Logo dentro do spinner */
.preloader-logo {
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 14, 26, 0.70);
  backdrop-filter: blur(4px);
  animation: logoPulse 3s ease-in-out infinite;
}

.preloader-logo img {
  width: 72px;
  height: auto;
  object-fit: contain;
  /* glow sutil na logo */
  filter: drop-shadow(0 0 10px rgba(6, 182, 212, 0.45));
}

@keyframes logoPulse {
  0%, 100% { filter: brightness(1);   }
  50%       { filter: brightness(1.15); }
}

/* ── Texto "Carregando" ──────────────────────────────────── */
.preloader-label {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 0.70rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(6, 182, 212, 0.70);
  margin-bottom: 1.1rem;
  animation: blink 2.4s ease-in-out infinite;
}

@keyframes blink {
  0%, 100% { opacity: 0.55; }
  50%       { opacity: 1;    }
}

/* ── Barra de progresso ──────────────────────────────────── */
.progress-container {
  width: 200px;
  height: 3px;
  background: rgba(6, 182, 212, 0.12);
  border-radius: 99px;
  overflow: hidden;
  position: relative;
}

#progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #0891b2, #06b6d4, #67e8f9);
  border-radius: 99px;
  transition: width 0.25s ease;
  position: relative;
  box-shadow: 0 0 8px rgba(6, 182, 212, 0.7);
}

/* Shimmer passando na barra */
#progress-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
  animation: shimmer 1.6s linear infinite;
}

@keyframes shimmer {
  from { transform: translateX(-200%); }
  to   { transform: translateX(200%);  }
}

/* ── Porcentagem ─────────────────────────────────────────── */
#progress-text {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(6, 182, 212, 0.55);
  margin-top: 0.65rem;
  font-variant-numeric: tabular-nums;
}

/* ── Linha decorativa inferior ───────────────────────────── */
.preloader-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, rgba(6,182,212,0.4), transparent);
  margin-top: 1.4rem;
}

/* ============================================================
   UTILITÁRIOS GERAIS (não remover — usados globalmente)
   ============================================================ */

/* Fix mobile menu + padding */
@layer utilities {
  .pt-mobile-safe {
    padding-top: 5rem;
  }
  @media (min-width: 768px) {
    .pt-mobile-safe {
      padding-top: 0 !important;
    }
  }
  .menu-open .pt-mobile-safe,
  .mobile-menu-open .pt-mobile-safe,
  .overflow-hidden .pt-mobile-safe {
    padding-top: 120px !important;
  }
}

#page-body {
  padding-top: var(--navbar-height, 0);
}