/* ============================================
   LEX & ASSOCIADOS - LOADING SCREEN
   Full-screen loader with animated elements
   ============================================ */

.loader {
  position: fixed;
  inset: 0;
  background-color: var(--color-navy);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: var(--z-loader);
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

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

/* ============================================
   LOADER LOGO
   ============================================ */
.loader__logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.loader__logo-icon {
  width: 80px;
  height: 80px;
  color: var(--color-gold);
  animation: pulse 1.5s ease-in-out infinite;
}

.loader__logo-text {
  font-family: var(--font-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
  letter-spacing: var(--letter-spacing-widest);
  text-transform: uppercase;
}

/* ============================================
   LOADER TEXT
   ============================================ */
.loader__text {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-light);
  color: var(--color-gold);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  animation: fadeInOut 1.5s ease-in-out infinite;
}

@keyframes fadeInOut {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

/* ============================================
   LOADER PROGRESS BAR
   ============================================ */
.loader__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-color: var(--color-navy-light);
}

.loader__progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--color-gold-dark), var(--color-gold), var(--color-gold-light));
  width: 0;
  transition: width 0.1s linear;
  animation: loadProgress 1.8s ease-out forwards;
}

@keyframes loadProgress {
  0% {
    width: 0;
  }
  20% {
    width: 30%;
  }
  50% {
    width: 60%;
  }
  80% {
    width: 85%;
  }
  100% {
    width: 100%;
  }
}

/* ============================================
   PAGE LOADED STATE
   ============================================ */
body.loaded .loader {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Content fade in after load */
body.loaded main {
  animation: contentFadeIn 0.5s ease forwards;
}

@keyframes contentFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}