/* =========================================================
   PORTFOLIO ENHANCEMENT PACK — CSS
   ========================================================= */

/* Preloader */
#preloader {
  position: fixed; inset: 0; z-index: 9999;
  background: #ffffff;
  display: flex; align-items: center; justify-content: center;
}
#preloader .loader-ring {
  width: 46px; height: 46px;
  border: 4px solid #e9ebed;
  border-top-color: #4195d1;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Hero Three.js canvas */
#heroCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.header-all { position: relative; z-index: 1; }

/* Custom cursor */
#cursorDot, #cursorRing {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  border-radius: 50%;
  z-index: 10000;
  transform: translate(-50%, -50%);
}
#cursorDot { width: 6px; height: 6px; background: #4195d1; }
#cursorRing { width: 34px; height: 34px; border: 1.5px solid rgba(65,149,209,0.6); }
@media (pointer: coarse) { #cursorDot, #cursorRing { display: none; } }

/* Split text chars */
.header-text .char { display: inline-block; will-change: transform, opacity; }

/* Tech marquee */
.tech-marquee {
  overflow: hidden;
  width: 100%;
  padding: 20px 0;
  background: #f4f8fc;
  margin-top: 32px;
}
.tech-track {
  display: flex;
  gap: 48px;
  width: max-content;
}
.tech-track span {
  font-family: 'Fredoka', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #4b5865;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tech-track span::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #4195d1;
  display: inline-block;
}

/* Scroll progress bar */
#scrollProgress {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #4195d1, #1c7cc0);
  transform-origin: left;
  transform: scaleX(0);
  z-index: 1001;
}