/* ==============================================================================
   INDUSTRUS TECH — PREMIUM ANIMATED LOGO PRELOADER
   Engineered SVG Vector Compass Loader
   ============================================================================== */

:root {
  --industrus-loader-bg: #070B19;
  --industrus-loader-accent: #0261FD;
  --industrus-loader-white: #ffffff;
}

/* Preloader Fixed Overlay */
#industrus-preloader {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
  background-color: var(--industrus-loader-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, visibility;
}

/* Loaded / Dismissal State */
#industrus-preloader.is-loaded {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#industrus-preloader.is-loaded .industrus-loader-svg {
  transform: scale(0.96);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Responsive Logo Sizing */
.industrus-loader-container {
  position: relative;
  width: 104px;
  height: 104px;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}

@media (max-width: 768px) {
  .industrus-loader-container {
    width: 72px;
    height: 72px;
  }
}

/* SVG Base & Centering */
.industrus-loader-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
  transform-origin: 486.32px 486.32px;
  transform-box: view-box;
  animation: indus-settle 0.95s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}

/* Common Piece Rules */
.loader-piece {
  transform-origin: 486.32px 486.32px;
  transform-box: view-box;
  fill: var(--industrus-loader-white);
  will-change: transform, opacity, fill;
}

/* 01. Outer Rings */
.ring-outer-tr {
  animation: indus-outer-tr 0.95s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.ring-outer-bl {
  animation: indus-outer-bl 0.95s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* 02. Inner Rings */
.ring-inner-tr {
  animation: indus-inner-tr 0.95s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.ring-inner-bl {
  animation: indus-inner-bl 0.95s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* 03. Compass Blades (East & West) */
.blade-e {
  animation: indus-blade-e 0.95s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.blade-w {
  animation: indus-blade-w 0.95s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* 04. Directional Compass Pointers */
.pointer-n {
  animation: indus-pointer-n 0.95s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.pointer-s {
  animation: indus-pointer-s 0.95s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.pointer-nw {
  animation: indus-pointer-nw 0.95s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.pointer-se {
  animation: indus-pointer-se 0.95s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* 05. Main Dial Needle */
.needle-main {
  animation: indus-needle 0.95s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* 06. Central Core Subtle Glowing Accent */
.center-core-glow {
  opacity: 0;
  transform-origin: 486.32px 486.32px;
  transform-box: view-box;
  animation: indus-core-glow 0.95s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* ==============================================================================
   MOTION SEQUENCE KEYFRAMES (0.95s Cycle)
   01 — Complete Logo (0.00–0.16s / 0%–17.5%)
   02 — Radial Disassembly (0.16–0.38s / 17.5%–40%)
   03 — Central Loading Core (0.38–0.55s / 40%–57.5%)
   04 — Reassemble (0.55–0.80s / 57.5%–84%)
   05 — Hold & Reveal (0.80–0.95s / 84%–100%)
   ============================================================================== */

/* 00. SVG Container Settling */
@keyframes indus-settle {
  0% {
    opacity: 0;
    transform: scale(0.96);
  }
  10% {
    opacity: 1;
    transform: scale(1);
  }
  85%, 100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Outer Ring Top-Right */
@keyframes indus-outer-tr {
  0%, 17.5% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  40% {
    transform: translate(20px, -20px) scale(1.02);
    opacity: 0.92;
  }
  50% {
    transform: translate(-10px, 10px) scale(0.92);
    opacity: 0.45;
  }
  57.5% {
    transform: translate(-4px, 4px) scale(0.96);
    opacity: 0.6;
  }
  85%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
}

/* Outer Ring Bottom-Left */
@keyframes indus-outer-bl {
  0%, 17.5% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  40% {
    transform: translate(-20px, 20px) scale(1.02);
    opacity: 0.92;
  }
  50% {
    transform: translate(10px, -10px) scale(0.92);
    opacity: 0.45;
  }
  57.5% {
    transform: translate(4px, -4px) scale(0.96);
    opacity: 0.6;
  }
  85%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
}

/* Inner Ring Top-Right */
@keyframes indus-inner-tr {
  0%, 17.5% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  40% {
    transform: translate(12px, -12px) scale(1.03);
    opacity: 0.95;
  }
  50% {
    transform: translate(-8px, 8px) scale(0.88);
    opacity: 0.5;
  }
  57.5% {
    transform: translate(-3px, 3px) scale(0.94);
    opacity: 0.7;
  }
  85%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
}

/* Inner Ring Bottom-Left */
@keyframes indus-inner-bl {
  0%, 17.5% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  40% {
    transform: translate(-12px, 12px) scale(1.03);
    opacity: 0.95;
  }
  50% {
    transform: translate(8px, -8px) scale(0.88);
    opacity: 0.5;
  }
  57.5% {
    transform: translate(3px, -3px) scale(0.94);
    opacity: 0.7;
  }
  85%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
}

/* East Blade */
@keyframes indus-blade-e {
  0%, 17.5% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  40% {
    transform: translateX(32px) scale(1.02);
    opacity: 0.95;
  }
  50% {
    transform: translateX(-22px) scale(0.8);
    opacity: 0.85;
  }
  57.5% {
    transform: translateX(-14px) scale(0.86);
    opacity: 0.9;
  }
  85%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
}

/* West Blade */
@keyframes indus-blade-w {
  0%, 17.5% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  40% {
    transform: translateX(-32px) scale(1.02);
    opacity: 0.95;
  }
  50% {
    transform: translateX(22px) scale(0.8);
    opacity: 0.85;
  }
  57.5% {
    transform: translateX(14px) scale(0.86);
    opacity: 0.9;
  }
  85%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
}

/* North Pointer */
@keyframes indus-pointer-n {
  0%, 17.5% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  40% {
    transform: translateY(-26px) scale(1.02);
    opacity: 0.95;
  }
  50% {
    transform: translateY(20px) scale(0.76);
    opacity: 0.8;
  }
  57.5% {
    transform: translateY(12px) scale(0.84);
    opacity: 0.88;
  }
  85%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
}

/* South Pointer */
@keyframes indus-pointer-s {
  0%, 17.5% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  40% {
    transform: translateY(26px) scale(1.02);
    opacity: 0.95;
  }
  50% {
    transform: translateY(-20px) scale(0.76);
    opacity: 0.8;
  }
  57.5% {
    transform: translateY(-12px) scale(0.84);
    opacity: 0.88;
  }
  85%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
}

/* Northwest Pointer */
@keyframes indus-pointer-nw {
  0%, 17.5% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  40% {
    transform: translate(-20px, -20px) scale(1.02);
    opacity: 0.95;
  }
  50% {
    transform: translate(14px, 14px) scale(0.76);
    opacity: 0.8;
  }
  57.5% {
    transform: translate(8px, 8px) scale(0.84);
    opacity: 0.88;
  }
  85%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
}

/* Southeast Pointer */
@keyframes indus-pointer-se {
  0%, 17.5% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  40% {
    transform: translate(20px, 20px) scale(1.02);
    opacity: 0.95;
  }
  50% {
    transform: translate(-14px, -14px) scale(0.76);
    opacity: 0.8;
  }
  57.5% {
    transform: translate(-8px, -8px) scale(0.84);
    opacity: 0.88;
  }
  85%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
}

/* Main Needle Dial */
@keyframes indus-needle {
  0%, 17.5% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  40% {
    transform: scale(1.05) rotate(0deg);
    opacity: 0.98;
  }
  50% {
    transform: scale(0.84) rotate(12deg);
    opacity: 0.92;
  }
  57.5% {
    transform: scale(0.9) rotate(-3deg);
    opacity: 0.96;
  }
  85%, 100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* Central Core Subtle Blue Energy Pulse */
@keyframes indus-core-glow {
  0%, 35% {
    opacity: 0;
    transform: scale(0.6);
  }
  45% {
    opacity: 0.85;
    transform: scale(1.1);
  }
  55% {
    opacity: 0.6;
    transform: scale(1.0);
  }
  68% {
    opacity: 0;
    transform: scale(0.7);
  }
  100% {
    opacity: 0;
    transform: scale(0.6);
  }
}

/* ==============================================================================
   ACCESSIBILITY: PREFERS-REDUCED-MOTION
   ============================================================================== */
@media (prefers-reduced-motion: reduce) {
  .industrus-loader-svg,
  .loader-piece,
  .ring-outer-tr,
  .ring-outer-bl,
  .ring-inner-tr,
  .ring-inner-bl,
  .blade-e,
  .blade-w,
  .pointer-n,
  .pointer-s,
  .pointer-nw,
  .pointer-se,
  .needle-main,
  .center-core-glow {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .center-core-glow {
    display: none !important;
  }
}