/* ==========================================================================
   COMPONENT 15: SIGNATURE HIGH-TECH LOADER & 10-BELT PAGE TRANSITION
   Inspired by tissertechnologies.com
   WHAT THIS DOES:
   1. Multi-column shutter belts (.star-transition-belt) sweep vertically.
   2. Precision scan box (#star-loader-box) with 4 animated border laser lines.
   3. 4 corner engineering crosshairs (.star-ch-wrapper).
   4. Animated SVG stroke line-draw for the Star Scrap Parts brand monogram.
   5. Technical percentage HUD counter and godown initialization status.
   ========================================================================== */

/* 10-Column Shutter Page Transition Curtain */
#star-page-transition {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99998;
  display: flex;
  pointer-events: none;
}

.star-transition-belt {
  flex: 1;
  height: 100%;
  background-color: var(--color-dark-bg);
  border-right: 1px solid rgba(51, 65, 85, 0.3);
  transform: translateY(0);
  transition: transform 0.7s cubic-bezier(0.77, 0, 0.175, 1);
}

.star-transition-belt.belt-exit {
  transform: translateY(-101%);
}

/* Central High-Tech Loader Stage */
#star-loader-stage {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

#star-loader-stage.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#star-loader-box {
  position: relative;
  width: 320px;
  min-height: 340px;
  background-color: rgba(15, 23, 42, 0.96);
  border: 1px solid rgba(51, 65, 85, 0.7);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 40px rgba(37, 99, 235, 0.15);
  border-radius: var(--radius-sm);
  padding: var(--space-2xl) var(--space-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}

#star-loader-box.fade-out {
  transform: scale(0.92);
  opacity: 0;
}

/* 4 Laser Scan Border Lines */
.star-border-line {
  position: absolute;
  background: linear-gradient(90deg, #2563EB, #60A5FA);
  z-index: 3;
}

.star-border-line.line-top {
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  animation: animLineTop 1.2s ease forwards;
}

.star-border-line.line-right {
  top: 0;
  right: 0;
  width: 2px;
  height: 0;
  animation: animLineRight 1.2s ease 0.25s forwards;
}

.star-border-line.line-bottom {
  bottom: 0;
  right: 0;
  height: 2px;
  width: 0;
  animation: animLineBottom 1.2s ease 0.5s forwards;
}

.star-border-line.line-left {
  bottom: 0;
  left: 0;
  width: 2px;
  height: 0;
  animation: animLineLeft 1.2s ease 0.75s forwards;
}

@keyframes animLineTop {
  to { width: 100%; }
}
@keyframes animLineRight {
  to { height: 100%; }
}
@keyframes animLineBottom {
  to { width: 100%; }
}
@keyframes animLineLeft {
  to { height: 100%; }
}

/* 4 Engineering Corner Crosshairs */
.star-ch-wrapper {
  position: absolute;
  width: 14px;
  height: 14px;
  z-index: 4;
}

.star-ch-wrapper.ch-tl { top: -7px; left: -7px; }
.star-ch-wrapper.ch-tr { top: -7px; right: -7px; }
.star-ch-wrapper.ch-bl { bottom: -7px; left: -7px; }
.star-ch-wrapper.ch-br { bottom: -7px; right: -7px; }

.star-crosshair {
  position: relative;
  width: 100%;
  height: 100%;
}

.star-crosshair::before,
.star-crosshair::after {
  content: "";
  position: absolute;
  background-color: #60A5FA;
}

.star-crosshair::before {
  top: 6px;
  left: 0;
  width: 14px;
  height: 2px;
}

.star-crosshair::after {
  top: 0;
  left: 6px;
  width: 2px;
  height: 14px;
}

/* Central Animated Brand Logo */
#star-logo-wrapper {
  width: 100px;
  height: 100px;
  margin-bottom: var(--space-md);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

#star-loader-electric-logo {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

#pill-nav-electric-logo {
  width: 38px !important;
  height: 38px !important;
  max-width: 38px !important;
  max-height: 38px !important;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
}

#footer-electric-logo {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 12px;
}

#star-loader-electric-logo canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

#pill-nav-electric-logo canvas {
  width: 38px !important;
  height: 38px !important;
  max-width: 38px !important;
  max-height: 38px !important;
  display: block;
  border-radius: 50%;
}

#footer-electric-logo canvas {
  width: 44px !important;
  height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  display: block;
  border-radius: 12px;
}

.star-svg-outline path,
.star-svg-outline polygon,
.star-svg-outline circle {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: drawStarLogo 1.6s ease forwards;
}

@keyframes drawStarLogo {
  to {
    stroke-dashoffset: 0;
  }
}

/* Progress HUD & Automotive Status */
.star-loader-brand-title {
  font-family: var(--font-tech);
  font-size: 1.125rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  color: var(--color-dark-text-main);
  text-transform: uppercase;
  margin-bottom: 2px;
}

.star-loader-subtitle {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--color-dark-text-muted);
  text-transform: uppercase;
  margin-bottom: var(--space-lg);
}

.star-counter-wrap {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-2xs);
  margin-bottom: var(--space-xs);
}

#star-loader-progress {
  font-family: var(--font-tech);
  font-size: 2.25rem;
  font-weight: var(--fw-bold);
  color: #60A5FA;
  letter-spacing: 0.02em;
  line-height: 1;
}

.star-counter-unit {
  font-family: var(--font-tech);
  font-size: 1rem;
  font-weight: var(--fw-bold);
  color: var(--color-accent);
}

#star-loader-status {
  font-family: var(--font-tech);
  font-size: 0.6875rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  color: var(--color-dark-text-muted);
  text-transform: uppercase;
  min-height: 1.4em;
}

/* Engineering Crosshair Corner Accents on Cards */
.with-crosshairs {
  position: relative;
}

.with-crosshairs .card-ch {
  position: absolute;
  width: 10px;
  height: 10px;
  pointer-events: none;
}
.with-crosshairs .card-ch-tl { top: -1px; left: -1px; border-top: 2px solid var(--color-accent); border-left: 2px solid var(--color-accent); }
.with-crosshairs .card-ch-tr { top: -1px; right: -1px; border-top: 2px solid var(--color-accent); border-right: 2px solid var(--color-accent); }
.with-crosshairs .card-ch-bl { bottom: -1px; left: -1px; border-bottom: 2px solid var(--color-accent); border-left: 2px solid var(--color-accent); }
.with-crosshairs .card-ch-br { bottom: -1px; right: -1px; border-bottom: 2px solid var(--color-accent); border-right: 2px solid var(--color-accent); }