/* ============================================================
   preloader.css — Pantalla de carga CGK
   Precarga video hero + imágenes críticas antes de revelar.
   ============================================================ */

html.is-preloading,
html.is-preloading body {
  overflow: hidden;
  height: 100%;
}

.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(1100px 520px at 50% 118%, rgba(255, 205, 17, 0.07), transparent 60%),
    var(--graphite-950, #0B0D0F);
  transition: opacity 640ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 640ms;
}

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

/* Rejilla técnica de fondo */
.preloader::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(231, 234, 240, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(231, 234, 240, 0.03) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}

/* Línea de escaneo que barre la pantalla */
.preloader::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  top: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 205, 17, 0.35), transparent);
  animation: pre-scan 2.6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  will-change: transform;
}

@keyframes pre-scan {
  0%   { transform: translateY(-4px); opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translateY(100vh); opacity: 0; }
}

.preloader__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  padding: 24px;
  width: min(420px, 84vw);
}

.preloader__brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.preloader__logo {
  height: 46px;
  width: auto;
  animation: pre-breathe 2.4s ease-in-out infinite;
}

@keyframes pre-breathe {
  0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 0 rgba(255, 205, 17, 0)); }
  50%      { transform: scale(1.04); filter: drop-shadow(0 0 18px rgba(255, 205, 17, 0.25)); }
}

.preloader__name {
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--steel-300, #99A2AB);
}

/* Nube de puntos que se ensambla (12 puntos CSS) */
.preloader__dots {
  position: relative;
  width: 120px;
  height: 66px;
}

.preloader__dots i {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cat-yellow, #FFCD11);
  opacity: 0.25;
  animation: pre-dot 1.8s ease-in-out infinite;
}

.preloader__dots i:nth-child(1)  { left: 4%;  top: 68%; animation-delay: 0ms; }
.preloader__dots i:nth-child(2)  { left: 13%; top: 44%; animation-delay: 120ms; }
.preloader__dots i:nth-child(3)  { left: 22%; top: 24%; animation-delay: 240ms; background: #46E0C8; }
.preloader__dots i:nth-child(4)  { left: 32%; top: 52%; animation-delay: 360ms; }
.preloader__dots i:nth-child(5)  { left: 41%; top: 30%; animation-delay: 480ms; background: #46E0C8; }
.preloader__dots i:nth-child(6)  { left: 50%; top: 62%; animation-delay: 600ms; }
.preloader__dots i:nth-child(7)  { left: 59%; top: 20%; animation-delay: 720ms; background: var(--molten, #FF7A1F); }
.preloader__dots i:nth-child(8)  { left: 68%; top: 46%; animation-delay: 840ms; }
.preloader__dots i:nth-child(9)  { left: 77%; top: 28%; animation-delay: 960ms; background: #46E0C8; }
.preloader__dots i:nth-child(10) { left: 86%; top: 58%; animation-delay: 1080ms; }
.preloader__dots i:nth-child(11) { left: 93%; top: 36%; animation-delay: 1200ms; background: var(--molten, #FF7A1F); }
.preloader__dots i:nth-child(12) { left: 46%; top: 8%;  animation-delay: 1320ms; }

@keyframes pre-dot {
  0%, 100% { opacity: 0.18; transform: translateY(0) scale(1); }
  50%      { opacity: 1;    transform: translateY(-7px) scale(1.35); }
}

/* Barra de progreso */
.preloader__track {
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: rgba(231, 234, 240, 0.10);
  overflow: hidden;
}

.preloader__bar {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cat-yellow-dim, #C99A00), var(--cat-yellow, #FFCD11));
  box-shadow: 0 0 14px rgba(255, 205, 17, 0.45);
  transition: width 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.preloader__meta {
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-mono, monospace);
}

.preloader__status {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--steel-400, #6E7984);
  min-height: 1.2em;
  transition: opacity 260ms ease;
}

.preloader__pct {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--paper, #ECEEF1);
  font-variant-numeric: tabular-nums;
}

.preloader__pct small {
  font-size: 0.65em;
  color: var(--steel-400, #6E7984);
  margin-left: 1px;
}

@media (prefers-reduced-motion: reduce) {
  .preloader::after,
  .preloader__logo,
  .preloader__dots i { animation: none; }
  .preloader { transition-duration: 1ms; }
  .preloader__bar { transition-duration: 1ms; }
}