/* ==========================================================================
   PRELOADER — Sci-Fi Boot Sequence
   WAR Group — Command Center Interface
   ========================================================================== */

/* --------------------------------------------------------------------------
   Preloader Container — Full Screen Overlay
   -------------------------------------------------------------------------- */
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-preloader, 9999);
  background: #0a0a0a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  perspective: 1200px;
  transform-origin: top center;
  transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 800ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

/* --------------------------------------------------------------------------
   Scanline Overlay — CRT Effect
   -------------------------------------------------------------------------- */
.preloader::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 2px,
    rgba(0, 0, 0, 0.08) 2px,
    rgba(0, 0, 0, 0.08) 4px
  );
  pointer-events: none;
  z-index: 3;
}

/* --------------------------------------------------------------------------
   Screen Flicker Effect
   -------------------------------------------------------------------------- */
.preloader::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  pointer-events: none;
  z-index: 4;
  animation: screenFlicker 4s ease-in-out infinite;
}

@keyframes screenFlicker {
  0%, 95%, 100% {
    opacity: 0;
  }
  96% {
    opacity: 0.03;
    background: rgba(0, 150, 138, 0.05);
  }
  97% {
    opacity: 0;
  }
  98% {
    opacity: 0.02;
    background: rgba(255, 255, 255, 0.02);
  }
  99% {
    opacity: 0;
  }
}

/* --------------------------------------------------------------------------
   Preloader Inner — Content Wrapper
   -------------------------------------------------------------------------- */
.preloader__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
  width: 90%;
  max-width: 420px;
}

/* --------------------------------------------------------------------------
   Logo — Glowing Outline Trace Animation
   -------------------------------------------------------------------------- */
.preloader__logo {
  width: 160px;
  height: auto;
  opacity: 0;
  filter: drop-shadow(0 0 0 transparent);
  animation:
    logoTraceIn 1.5s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards,
    logoGlow 2s ease-in-out 1.8s infinite alternate;
}

@keyframes logoTraceIn {
  0% {
    opacity: 0;
    filter: drop-shadow(0 0 20px rgba(0, 150, 138, 0))
            brightness(0);
    transform: scale(0.9);
  }
  40% {
    opacity: 0.5;
    filter: drop-shadow(0 0 25px rgba(0, 150, 138, 0.6))
            brightness(1.5);
    transform: scale(1.02);
  }
  70% {
    opacity: 0.8;
    filter: drop-shadow(0 0 15px rgba(0, 150, 138, 0.4))
            brightness(1.2);
  }
  100% {
    opacity: 1;
    filter: drop-shadow(0 0 10px rgba(0, 150, 138, 0.2))
            brightness(1);
    transform: scale(1);
  }
}

@keyframes logoGlow {
  0% {
    filter: drop-shadow(0 0 8px rgba(0, 150, 138, 0.15))
            brightness(1);
  }
  100% {
    filter: drop-shadow(0 0 18px rgba(0, 150, 138, 0.35))
            brightness(1.08);
  }
}

/* --------------------------------------------------------------------------
   Logo SVG Outline — Stroke Animation (for inline SVG logos)
   -------------------------------------------------------------------------- */
.preloader__logo-svg {
  width: 160px;
  height: auto;
}

.preloader__logo-svg path {
  fill: none;
  stroke: #00968A;
  stroke-width: 1.5;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: logoStrokeDraw 2s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
}

@keyframes logoStrokeDraw {
  0% {
    stroke-dashoffset: 1000;
    fill: transparent;
  }
  60% {
    stroke-dashoffset: 0;
    fill: transparent;
  }
  100% {
    stroke-dashoffset: 0;
    fill: #00968A;
  }
}

/* --------------------------------------------------------------------------
   Terminal Text — Typing Effect
   -------------------------------------------------------------------------- */
.preloader__terminal {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-self: stretch;
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: 0.625rem;
  line-height: 1.6;
  color: #00968A;
}

.preloader__line {
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  border-right: 1.5px solid #00968A;
  opacity: 0;
}

/* Clean, unified, Safari-friendly sequence for all 6 lines */
.preloader__line:nth-child(1) {
  animation: terminalLineAnim 0.4s steps(30) 0.2s forwards;
}
.preloader__line:nth-child(2) {
  animation: terminalLineAnim 0.4s steps(25) 0.6s forwards;
}
.preloader__line:nth-child(3) {
  animation: terminalLineAnim 0.4s steps(25) 1.0s forwards;
}
.preloader__line:nth-child(4) {
  animation: terminalLineAnim 0.4s steps(25) 1.4s forwards;
}
.preloader__line:nth-child(5) {
  animation: terminalLineAnim 0.4s steps(25) 1.8s forwards;
}
.preloader__line:nth-child(6) {
  animation: terminalLineLastAnim 0.4s steps(20) 2.2s forwards,
             terminalCursorBlink 0.6s steps(1) 2.6s infinite;
  color: #FFFFFF;
}

@keyframes terminalLineAnim {
  from {
    width: 0;
    opacity: 0;
    border-right-color: #00968A;
  }
  1% {
    opacity: 1;
  }
  99% {
    width: 100%;
    opacity: 1;
    border-right-color: #00968A;
  }
  to {
    width: 100%;
    opacity: 1;
    border-right-color: transparent;
  }
}

@keyframes terminalLineLastAnim {
  from {
    width: 0;
    opacity: 0;
    border-right-color: #00968A;
  }
  1% {
    opacity: 1;
  }
  to {
    width: 100%;
    opacity: 1;
    border-right-color: #00968A;
  }
}

@keyframes terminalCursorBlink {
  0%, 100% {
    border-right-color: #00968A;
  }
  50% {
    border-right-color: transparent;
  }
}

/* --------------------------------------------------------------------------
   Progress Bar — Horizontal Fill
   -------------------------------------------------------------------------- */
.preloader__progress {
  width: 100%;
  height: 2px;
  background: rgba(0, 150, 138, 0.15);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

.preloader__progress-bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #005852, #00968A);
  border-radius: 2px;
  position: relative;
  animation: progressFill 2.5s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards;
}

/* Glow effect on progress bar */
.preloader__progress-bar::after {
  content: '';
  position: absolute;
  top: -3px;
  right: 0;
  width: 30px;
  height: 8px;
  background: radial-gradient(ellipse, rgba(0, 150, 138, 0.6) 0%, transparent 70%);
  border-radius: 50%;
}

@keyframes progressFill {
  0% {
    width: 0;
  }
  15% {
    width: 15%;
  }
  30% {
    width: 35%;
  }
  50% {
    width: 50%;
  }
  70% {
    width: 72%;
  }
  85% {
    width: 88%;
  }
  100% {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   Progress Percentage Text
   -------------------------------------------------------------------------- */
.preloader__percent {
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: 0.625rem;
  color: rgba(0, 150, 138, 0.6);
  letter-spacing: 0.1em;
  align-self: flex-end;
  margin-top: -0.25rem;
}

/* --------------------------------------------------------------------------
   Background Grid Pattern
   -------------------------------------------------------------------------- */
.preloader__grid {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(0, 150, 138, 0.03) 0px,
      rgba(0, 150, 138, 0.03) 1px,
      transparent 1px,
      transparent 40px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(0, 150, 138, 0.03) 0px,
      rgba(0, 150, 138, 0.03) 1px,
      transparent 1px,
      transparent 40px
    );
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Exit State
   -------------------------------------------------------------------------- */
.preloader--loaded {
  transform: translateY(-100vh) rotateX(10deg);
  opacity: 0;
  pointer-events: none;
}

/* After exit, remove from flow */
.preloader--loaded.preloader--hidden {
  display: none;
}

/* --------------------------------------------------------------------------
   Responsive — Preloader
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .preloader__logo {
    width: 120px;
  }

  .preloader__inner {
    gap: 2rem;
    max-width: 300px;
  }

  .preloader__terminal {
    font-size: 0.5625rem;
  }
}

/* --------------------------------------------------------------------------
   Reduced Motion — Skip Preloader Animations
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .preloader {
    transition: opacity 0.3s ease;
  }

  .preloader--loaded {
    transform: none;
    opacity: 0;
  }

  .preloader__logo {
    animation: none;
    opacity: 1;
    filter: none;
  }

  .preloader__line {
    animation: none;
    opacity: 1;
    width: 100%;
    border-right: none;
  }

  .preloader__progress-bar {
    animation: none;
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   Print — Hide Preloader Entirely
   -------------------------------------------------------------------------- */
@media print {
  .preloader {
    display: none !important;
  }
}