/* ============================================================
   ALMACENAJES MULTIMODALES — PRELOADER
   Agrega este archivo como: css/preloader.css
   ============================================================ */

/* ── Overlay principal ─────────────────────────────────────── */
#amm-preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: #0a0e14;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Cuadrícula de fondo sutil */
#amm-preloader::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
}

/* Glow central — naranja+azul igual que el logo */
#amm-preloader::after {
  content: "";
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 40% 50%,
    rgba(255,120,20,0.15) 0%,
    rgba(0,160,230,0.10) 55%,
    transparent 75%
  );
  pointer-events: none;
}

/* ── Estado: página cargada ─────────────────────────────────── */
#amm-preloader.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ── Contenedor interior ────────────────────────────────────── */
.amm-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 34px;
}

/* ── Logo ───────────────────────────────────────────────────── */
.amm-logo {
  opacity: 0;
  animation: ammLogoIn 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s forwards;
  filter: drop-shadow(0 0 28px rgba(255,120,20,0.25))
          drop-shadow(0 0 14px rgba(0,160,230,0.20));
}

.amm-logo img {
  width: 230px;
  max-width: 72vw;
  display: block;
}

/* Pulso suave luego de la entrada */
.amm-logo.pulse {
  animation: ammPulse 2.4s ease-in-out infinite;
}

/* ── Barra de progreso ──────────────────────────────────────── */
.amm-bar-wrapper {
  opacity: 0;
  animation: ammFadeUp 0.6s ease 0.9s forwards;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
}

.amm-track {
  width: 230px;
  max-width: 72vw;
  height: 3px;
  background: rgba(255,255,255,0.1);
  border-radius: 99px;
  overflow: hidden;
  position: relative;
}

/* Gradiente naranja → azul, igual que las flechas del logo */
.amm-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg,
    #e85c00 0%,
    #ff8c00 35%,
    #00b4e8 75%,
    #00d4ff 100%
  );
  border-radius: 99px;
  animation: ammFillBar 2.5s cubic-bezier(0.4, 0, 0.2, 1) 0.9s forwards;
  position: relative;
}

/* Destello que recorre la barra */
.amm-fill::after {
  content: "";
  position: absolute;
  top: 0; left: -50px;
  width: 50px;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.65), transparent);
  animation: ammShimmer 1.3s ease 1.6s infinite;
}

/* ── Texto / Dots ───────────────────────────────────────────── */
.amm-label {
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
}

.amm-dots {
  display: flex;
  gap: 6px;
  margin-top: -6px;
}

.amm-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  animation: ammDot 1.4s ease-in-out infinite;
}

.amm-dots span:nth-child(1) { background: rgba(255,120,20,0.6);  animation-delay: 0s;   }
.amm-dots span:nth-child(2) { background: rgba(255,200,80,0.5);  animation-delay: 0.2s; }
.amm-dots span:nth-child(3) { background: rgba(0,180,232,0.6);   animation-delay: 0.4s; }

/* ── Keyframes ──────────────────────────────────────────────── */
@keyframes ammLogoIn {
  0%   { opacity: 0; transform: scale(0.6) translateY(22px); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes ammPulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 28px rgba(255,120,20,0.25))
            drop-shadow(0 0 14px rgba(0,160,230,0.20));
  }
  50% {
    transform: scale(1.05);
    filter: drop-shadow(0 0 42px rgba(255,120,20,0.45))
            drop-shadow(0 0 24px rgba(0,180,232,0.40));
  }
}

@keyframes ammFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes ammFillBar {
  0%   { width: 0%; }
  40%  { width: 48%; }
  70%  { width: 76%; }
  100% { width: 100%; }
}

@keyframes ammShimmer {
  0%   { left: -50px; }
  100% { left: 110%; }
}

@keyframes ammDot {
  0%, 80%, 100% { transform: scale(1);   opacity: 0.3; }
  40%            { transform: scale(1.5); opacity: 1;   }
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 480px) {
  .amm-logo img { width: 170px; }
  .amm-track    { width: 170px; }
}