/* ============================================
   TOVARIUM — ПРЕЛОАДЕР
   Крутий екран завантаження з падаючими
   картками лендінгів та неоновим лого
   ============================================ */

#preloader {
  position: fixed;
  inset: 0;
  z-index: var(--z-preloader);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #080918 0%, #12133a 40%, #1a0a2e 70%, #0a0b1e 100%);
  transition: opacity 0.8s var(--ease-out), visibility 0.8s;
}

#preloader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Падаючі картки */
.preloader-falling {
  position: absolute;
  top: -220px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.falling-card {
  position: absolute;
  width: 110px;
  height: 155px;
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.08), rgba(123, 47, 255, 0.08));
  border: 1px solid rgba(0, 212, 255, 0.15);
  border-radius: 12px;
  animation: cardFall 5s linear infinite;
  opacity: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px;
}

.falling-card .card-header {
  width: 70%;
  height: 4px;
  background: rgba(0, 212, 255, 0.2);
  border-radius: 2px;
}

.falling-card .card-img {
  width: 80%;
  height: 40px;
  background: rgba(123, 47, 255, 0.12);
  border-radius: 6px;
}

.falling-card .card-line {
  width: 85%;
  height: 3px;
  background: rgba(255, 0, 229, 0.1);
  border-radius: 2px;
}

.falling-card .card-line.short {
  width: 55%;
}

.falling-card .card-btn {
  width: 60%;
  height: 12px;
  background: rgba(0, 255, 213, 0.15);
  border-radius: 6px;
  margin-top: 4px;
}

@keyframes cardFall {
  0% {
    transform: translateY(-220px) rotate(-5deg);
    opacity: 0;
  }
  5% {
    opacity: 0.5;
  }
  85% {
    opacity: 0.3;
  }
  100% {
    transform: translateY(110vh) rotate(8deg);
    opacity: 0;
  }
}

/* Центральний контент */
.preloader-content {
  position: relative;
  z-index: 2;
  text-align: center;
}

/* Лого */
.preloader-logo {
  font-family: var(--font-heading);
  font-size: clamp(40px, 9vw, 80px);
  font-weight: 900;
  background: var(--gradient-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 6px;
  animation: logoGlow 2.5s ease-in-out infinite;
  text-shadow: none;
}

@keyframes logoGlow {
  0%, 100% {
    filter: drop-shadow(0 0 20px rgba(0, 212, 255, 0.4)) drop-shadow(0 0 60px rgba(123, 47, 255, 0.15));
  }
  50% {
    filter: drop-shadow(0 0 30px rgba(123, 47, 255, 0.5)) drop-shadow(0 0 80px rgba(255, 0, 229, 0.2));
  }
}

/* Підзаголовок */
.preloader-subtitle {
  font-family: var(--font-heading);
  font-size: clamp(11px, 2.2vw, 16px);
  color: rgba(255, 255, 255, 0.5);
  margin-top: 10px;
  font-weight: 300;
  letter-spacing: 2px;
}

.preloader-subtitle .brand-highlight {
  color: var(--neon-cyan);
  font-weight: 600;
}

/* Прогрес-бар */
.preloader-bar-wrap {
  margin-top: 48px;
  width: 260px;
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
}

.preloader-bar {
  height: 100%;
  width: 0%;
  background: var(--gradient-main);
  border-radius: 2px;
  transition: width 0.3s;
  box-shadow: 0 0 12px var(--glow-blue);
}

/* Відсоток */
.preloader-percent {
  color: rgba(255, 255, 255, 0.3);
  font-size: 12px;
  margin-top: 14px;
  font-family: var(--font-heading);
  font-weight: 300;
  letter-spacing: 1px;
}

/* Декоративні кола на фоні */
.preloader-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.12;
  pointer-events: none;
  animation: orbFloat 8s ease-in-out infinite;
}

.preloader-orb.orb-1 {
  width: 400px;
  height: 400px;
  background: var(--neon-blue);
  top: -80px;
  left: -100px;
}

.preloader-orb.orb-2 {
  width: 350px;
  height: 350px;
  background: var(--neon-pink);
  bottom: -60px;
  right: -80px;
  animation-delay: -3s;
}

.preloader-orb.orb-3 {
  width: 200px;
  height: 200px;
  background: var(--neon-purple);
  top: 40%;
  left: 60%;
  animation-delay: -5s;
}

@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(20px, -15px) scale(1.08); }
  66% { transform: translate(-15px, 20px) scale(0.95); }
}