/* ================================= */
/* PRELOADER - SPOONFUL WORDMARK     */
/* ================================= */

#preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background-color: var(--primary-red);
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* ⬅️ MUDOU: flex-start para alinhar à esquerda */
  justify-content: flex-end; /* ⬅️ MUDOU: flex-end para alinhar ao bottom */
  padding: 0;
  pointer-events: all;
  
  /* Performance */
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Container do SVG SPOONFUL - alinhado bottom-left */
.preloader__title {
  display: flex;
  align-items: flex-end; /* ⬅️ Alinha ao bottom */
  justify-content: flex-start; /* ⬅️ Alinha à esquerda */
  width: 100%;
  padding: 0 2rem; /* ⬅️ Padding lateral, sem padding vertical */
  margin-bottom: 8px; /* ⬅️ Gap de 8px da barra */
}

/* Wrapper interno para controle preciso */
.preloader__title-wrapper {
  width: auto; /* ⬅️ MUDOU: auto ao invés de 100% */
  max-width: 50vw;
  display: flex;
  align-items: flex-end; /* ⬅️ Alinha ao baseline da SVG */
  justify-content: flex-start; /* ⬅️ Alinha à esquerda */
  gap: 16px; /* ⬅️ Espaçamento entre SVG e contador */
}

/* SVG ocupa 50vw mantendo aspect ratio */
.preloader__title svg,
.preloader__title-wrapper svg {
  width: 100%;
  height: auto;
  display: block;
  
  /* Performance */
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Cor do SVG - branco (neutral-light) */
.preloader__title svg path,
.preloader__title-wrapper svg path {
  fill: var(--neutral-light);
}

/* Contador de progresso */
.preloader__counter {
  color: var(--neutral-light);
  font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
  font-size: 5.9375rem; /* 95px */
  font-style: normal;
  font-weight: 900;
  line-height: 4.8rem; /* ⬅️ MUDOU: 1 ao invés de 7.3125rem para alinhar ao baseline */
  letter-spacing: -0.05938rem; /* -0.95px */
  white-space: nowrap;
  flex-shrink: 0; /* ⬅️ Não encolhe */
  
  /* ⬅️ NOVO: Width fixo para 3 dígitos (evita jitter) */
  min-width: 3ch; /* 3 caracteres de largura */
  text-align: right; /* Alinha à direita dentro do espaço fixo */
  
  /* ⬅️ NOVO: Tabular numbers para largura consistente */
  font-variant-numeric: tabular-nums;
  
  /* Performance */
  transform: translateZ(0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Container da barra - FIXED BOTTOM com 10px */
.preloader__bar-container {
  width: 100vw;
  height: 10px;
  background-color: rgba(235, 235, 235, 0.2);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

/* Barra de progresso - 10px de altura */
.preloader__bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 10px;
  background-color: var(--neutral-light);
  transition: width 0.3s ease-out;
  
  /* Performance */
  will-change: width;
  transform: translateZ(0);
}

/* Estado de saída - swipe up */
#preloader.preloader--exiting {
  animation: swipeUp 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes swipeUp {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100%);
  }
}

/* Hidden final state */
#preloader.preloader--hidden {
  display: none;
}

/* ================================= */
/* RESPONSIVE                        */
/* ================================= */

/* Desktop Padrão: 1440px - 1919px */
@media (min-width: 1440px) and (max-width: 1919px) {
  .preloader__title-wrapper {
    max-width: 50vw;
    gap: 16px;
  }
  
  .preloader__title {
    padding: 0 1.875rem;
    margin-bottom: 8px;
  }
  
  .preloader__counter {
    font-size: 5.21875rem; /* 87.5% do original */
    line-height: 1;
    letter-spacing: -0.0521875rem;
  }
}

/* Laptop: 1024px - 1439px */
@media (min-width: 1024px) and (max-width: 1439px) {
  .preloader__title-wrapper {
    max-width: 55vw;
    gap: 16px;
  }
  
  .preloader__title {
    padding: 0 1.75rem;
    margin-bottom: 8px;
  }
  
  .preloader__counter {
    font-size: 4.75rem; /* 80% do original */
    line-height: 1;
    letter-spacing: -0.0475rem;
  }
}

/* Tablet Landscape: 768px - 1023px */
@media (max-width: 1023px) and (min-width: 768px) {
  .preloader__title-wrapper {
    max-width: 65vw;
    gap: 16px;
  }
  
  .preloader__title {
    padding: 0 1.5rem;
    margin-bottom: 8px;
  }
  
  .preloader__counter {
    font-size: 3.5625rem; /* 60% do original */
    line-height: 1;
    letter-spacing: -0.035625rem;
  }
}

/* Tablet Portrait: 600px - 767px */
@media (max-width: 767px) {
  .preloader__title-wrapper {
    max-width: 75vw;
    gap: 8px;
  }
  
  .preloader__title {
    padding: 0 1.25rem;
    margin-bottom: 6px;
  }
  
  .preloader__counter {
    font-size: 2.96875rem; /* 50% do original */
    line-height: 1;
    letter-spacing: -0.0296875rem;
  }
}

/* Mobile Large: 480px - 599px */
@media (max-width: 599px) {
  .preloader__title-wrapper {
    max-width: 82vw;
    gap: 12px;
  }
  
  .preloader__title {
    padding: 0 1rem;
    margin-bottom: 6px;
  }
  
  .preloader__counter {
    font-size: 2.375rem; /* 40% do original */
    line-height: 1;
    letter-spacing: -0.02375rem;
  }
}

/* Mobile Padrão: 360px - 479px */
@media (max-width: 479px) {
  .preloader__title-wrapper {
    max-width: 85vw;
    gap: 12px;
  }
  
  .preloader__title {
    padding: 0 0.875rem;
    margin-bottom: 4px;
  }
  
  .preloader__counter {
    font-size: 2.078125rem; /* 35% do original */
    line-height: 1;
    letter-spacing: -0.02078125rem;
  }
}

/* Mobile Small: 375px e abaixo */
@media (max-width: 375px) {
  .preloader__title-wrapper {
    max-width: 88vw;
    gap: 8px;
  }
  
  .preloader__title {
    padding: 0 0.75rem;
    margin-bottom: 4px;
  }
  
  .preloader__counter {
    font-size: 1.78125rem; /* 30% do original */
    line-height: 1;
    letter-spacing: -0.0178125rem;
  }
}

/* ================================= */
/* REDUCED MOTION                    */
/* ================================= */

@media (prefers-reduced-motion: reduce) {
  #preloader.preloader--exiting {
    animation: fadeOut 300ms ease-out forwards;
  }
  
  @keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
  }
}