/* ============================================================
   JIMÉNEZ AUTO REPAIR — PRELOADER CSS
   ============================================================ */

#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #0D0D0D;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}
#preloader.done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Background grid */
.pl-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(245,200,0,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,200,0,0.05) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: plGridMove 3s linear infinite;
}
@keyframes plGridMove {
  from { background-position: 0 0; }
  to   { background-position: 50px 50px; }
}

/* Radial glow */
.pl-glow {
  position: absolute;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(245,200,0,0.12) 0%, transparent 70%);
  border-radius: 50%;
  animation: plGlowPulse 2s ease-in-out infinite;
}
@keyframes plGlowPulse {
  0%,100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.2); opacity: 0.6; }
}

/* Outer ring */
.pl-ring {
  position: relative;
  z-index: 1;
  width: 160px; height: 160px;
  margin-bottom: 40px;
}
.pl-ring-outer, .pl-ring-inner {
  position: absolute;
  border-radius: 50%;
  border: 2px solid transparent;
}
.pl-ring-outer {
  inset: 0;
  border-top-color: #F5C800;
  border-right-color: rgba(245,200,0,0.3);
  animation: spinCW 1.2s linear infinite;
}
.pl-ring-inner {
  inset: 20px;
  border-bottom-color: #F5C800;
  border-left-color: rgba(245,200,0,0.2);
  animation: spinCCW 0.9s linear infinite;
}
.pl-ring-core {
  position: absolute;
  inset: 40px;
  background: rgba(245,200,0,0.08);
  border-radius: 50%;
  border: 1px solid rgba(245,200,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  animation: plCorePulse 1.5s ease-in-out infinite;
}
@keyframes spinCW  { to { transform: rotate(360deg); } }
@keyframes spinCCW { to { transform: rotate(-360deg); } }
@keyframes plCorePulse {
  0%,100% { box-shadow: 0 0 10px rgba(245,200,0,0.2); }
  50%      { box-shadow: 0 0 30px rgba(245,200,0,0.5); }
}

/* Logo & text */
.pl-logo {
  position: relative; z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 36px;
}
.pl-logo img {
  height: 60px;
  filter: drop-shadow(0 0 16px rgba(245,200,0,0.5));
  animation: plLogoGlow 2s ease-in-out infinite;
}
@keyframes plLogoGlow {
  0%,100% { filter: drop-shadow(0 0 16px rgba(245,200,0,0.5)); }
  50%      { filter: drop-shadow(0 0 32px rgba(245,200,0,0.9)); }
}
.pl-company-name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #F5C800;
}

/* Progress bar */
.pl-progress-wrap {
  position: relative; z-index: 1;
  width: min(400px, 80vw);
  text-align: center;
}
.pl-status {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(245,200,0,0.7);
  margin-bottom: 12px;
  min-height: 20px;
  transition: opacity 0.3s;
}
.pl-bar-bg {
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
  height: 4px;
  overflow: hidden;
  position: relative;
}
.pl-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #D4A900, #F5C800, #FFE066);
  border-radius: 999px;
  width: 0%;
  transition: width 0.4s ease;
  position: relative;
}
.pl-bar-fill::after {
  content: '';
  position: absolute;
  right: 0; top: -2px;
  width: 8px; height: 8px;
  background: #FFE066;
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(255,224,102,0.9);
}
.pl-percent {
  font-family: 'Bebas Neue', cursive;
  font-size: 1rem;
  color: rgba(245,200,0,0.5);
  margin-top: 10px;
  letter-spacing: 2px;
}

/* Scanline effect */
.pl-scanline {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(245,200,0,0.01) 3px,
    rgba(245,200,0,0.01) 4px
  );
  pointer-events: none;
  animation: scanline 0.1s linear infinite;
}
@keyframes scanline {
  from { background-position: 0 0; }
  to   { background-position: 0 4px; }
}

/* Corner decorations */
.pl-corner {
  position: absolute;
  width: 30px; height: 30px;
  border-color: rgba(245,200,0,0.4);
  border-style: solid;
}
.pl-corner.tl { top: 20px; left: 20px; border-width: 2px 0 0 2px; }
.pl-corner.tr { top: 20px; right: 20px; border-width: 2px 2px 0 0; }
.pl-corner.bl { bottom: 20px; left: 20px; border-width: 0 0 2px 2px; }
.pl-corner.br { bottom: 20px; right: 20px; border-width: 0 2px 2px 0; }