/* ============================================
   PROMET - Page Loader & Extra Styles
   ============================================ */

/* Page Loader */
#page-loader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--primary);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 24px;
  transition: opacity .5s ease, visibility .5s ease;
}
#page-loader.hidden { opacity: 0; visibility: hidden; }
.loader-logo {
  width: clamp(84px, 9vw, 130px);
  height: auto;
  object-fit: contain;
}
.loader-bar-wrap {
  width: 200px; height: 3px;
  background: rgba(255,255,255,.1);
  border-radius: 100px; overflow: hidden;
}
.loader-bar {
  height: 100%; background: var(--accent);
  border-radius: 100px;
  animation: loadBar 1.4s ease forwards;
}
@keyframes loadBar {
  0%   { width: 0%; }
  60%  { width: 70%; }
  100% { width: 100%; }
}

@media (max-width: 640px) {
  .loader-logo { width: clamp(70px, 26vw, 96px); }
  .loader-bar-wrap { width: 160px; }
}

/* Back to top */
#back-top {
  position: fixed; bottom: 96px; right: 28px; z-index: 999;
  width: 44px; height: 44px;
  background: var(--primary);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--white);
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden;
  transition: var(--transition);
}
#back-top.show { opacity: 1; visibility: visible; }
#back-top:hover { background: var(--accent); color: var(--primary); transform: translateY(-3px); }
#back-top svg { width: 18px; height: 18px; }

/* Active nav section highlight */
.nav-links a.active { color: var(--accent); }
.nav-links a.active::after { width: 100%; }

/* Contact CTA: when active on #contact, show blue text only */
.nav-links a.nav-cta.active {
  background: transparent;
  border-color: transparent;
  color: #3b82f6;
  box-shadow: none;
}
.nav-links a.nav-cta.active::after {
  background: #3b82f6;
}

/* Counter animation */
.count-up { display: inline-block; }
