/* ============================================
   CINEMATIC TERMINAL PRELOADER
   ============================================ */

.preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #050505;
  color: #d4af37;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  padding: 60px;
  overflow: hidden;
  pointer-events: all;
  transition: opacity 0.4s ease;
}

.preloader.hidden {
  pointer-events: none;
}

/* CRT scanlines */
.preloader::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 2px,
    rgba(212, 175, 55, 0.025) 2px,
    rgba(212, 175, 55, 0.025) 3px
  );
  pointer-events: none;
  z-index: 1;
}

/* Vignette */
.preloader::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.4) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Exit animation — split panels */
.preloader__exit-top,
.preloader__exit-bottom {
  position: absolute;
  left: 0;
  right: 0;
  background: #050505;
  z-index: 10;
  transition: transform 0.9s cubic-bezier(0.76, 0, 0.24, 1);
}
.preloader__exit-top {
  top: 0;
  height: 50%;
  transform: translateY(-100%);
}
.preloader__exit-bottom {
  bottom: 0;
  height: 50%;
  transform: translateY(100%);
}
.preloader.exiting .preloader__exit-top    { transform: translateY(0); }
.preloader.exiting .preloader__exit-bottom { transform: translateY(0); }

/* Meta info corners */
.preloader__meta {
  position: absolute;
  bottom: 40px;
  left: 60px;
  right: 60px;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(212, 175, 55, 0.4);
  z-index: 2;
}
.preloader__meta span::before {
  content: '\25C6';
  margin-right: 8px;
  color: #d4af37;
}

/* Terminal window */
.preloader__window {
  position: relative;
  max-width: 720px;
  margin: 80px auto 0;
  border: 1px solid rgba(212, 175, 55, 0.3);
  background: rgba(10, 10, 10, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 0 60px rgba(212, 175, 55, 0.08),
    inset 0 0 30px rgba(212, 175, 55, 0.02);
  z-index: 2;
}

.preloader__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.2);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(212, 175, 55, 0.6);
}

.preloader__dots {
  display: flex;
  gap: 6px;
}
.preloader__dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.preloader__dots span:nth-child(1) { background: #ff5f56; }
.preloader__dots span:nth-child(2) { background: #ffbd2e; }
.preloader__dots span:nth-child(3) { background: #27c93f; }

.preloader__body {
  padding: 28px 30px 36px;
  min-height: 320px;
  font-size: 14px;
  line-height: 1.9;
  direction: ltr;
  text-align: left;
}

.preloader__line {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.preloader__line.show { opacity: 1; }

.preloader__prompt  { color: #5dd87a; }
.preloader__cmd     { color: #f0e6d2; }
.preloader__comment { color: #555; font-style: italic; }
.preloader__key     { color: #d4af37; }
.preloader__string  { color: #b7d489; }
.preloader__num     { color: #e5a86a; }

.preloader__cursor {
  display: inline-block;
  width: 8px;
  height: 16px;
  background: #d4af37;
  margin-left: 4px;
  vertical-align: middle;
  animation: preloader-blink 0.9s steps(2) infinite;
}

@keyframes preloader-blink {
  50% { opacity: 0; }
}

/* Progress bar */
.preloader__progress {
  max-width: 720px;
  margin: 28px auto 0;
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 11px;
  color: rgba(212, 175, 55, 0.6);
  position: relative;
  z-index: 2;
}

.preloader__bracket { color: #d4af37; }

.preloader__bar {
  flex: 1;
  height: 2px;
  background: rgba(212, 175, 55, 0.1);
  position: relative;
  overflow: hidden;
}

.preloader__bar::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -100px;
  width: 100px;
  background: linear-gradient(90deg, transparent, #d4af37, transparent);
  animation: preloader-scan 1.4s linear infinite;
}

@keyframes preloader-scan {
  0%   { left: -100px; }
  100% { left: 100%; }
}

.preloader__pct {
  min-width: 36px;
  color: #d4af37;
  font-weight: 500;
}

/* Mobile */
@media (max-width: 768px) {
  .preloader { padding: 24px; }
  .preloader__window { margin-top: 60px; }
  .preloader__body {
    padding: 20px 18px 24px;
    min-height: 280px;
    font-size: 12px;
    line-height: 1.8;
  }
  .preloader__meta {
    left: 24px;
    right: 24px;
    bottom: 24px;
    font-size: 8px;
    letter-spacing: 0.2em;
  }
  .preloader__header {
    font-size: 8px;
    padding: 8px 12px;
  }
  .preloader__header > div:last-child { display: none; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .preloader__cursor,
  .preloader__bar::after { animation: none; }
  .preloader__line { transition: none; }
}

/* Prevent body scroll while preloader is active */
body.preloader-active {
  overflow: hidden;
}