/* =====================================================================
   LOADING SCREEN
   ===================================================================== */
.aldi-loading-screen {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: -webkit-fill-available;
  background: var(--loading-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999;
  visibility: visible !important;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}
.aldi-loading-screen.fade-out { opacity: 0; pointer-events: none; }

.aldi-loading-container { display: flex; align-items: center; justify-content: center; width: 100%; padding: 0 5vw; }

.heading {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: clamp(2rem, 5vw, 3.2rem);
  color: var(--loading-text);
  text-transform: uppercase;
  line-height: 1.2;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: fit-content;
  min-width: min(55vw, 400px);
  margin: 0 auto;
}
.heading-line { display: flex; justify-content: space-between; width: 100%; }
.creative-line { font-size: 0.28em; margin-top: 0.3em; color: var(--loading-text-sec); letter-spacing: var(--ls-tight); }
.heading-line span { display: inline-block; opacity: 0; animation: charIn 2s var(--ease-standard) forwards; }

@media (max-height: 500px) {
  .heading { font-size: clamp(1.2rem, 4.5vw, 2rem); }
}
@media (min-width: 481px) and (max-width: 1024px) {
  .heading { font-size: clamp(2rem, 5.5vw, 3rem); min-width: unset; width: 33vw; }
}
@media (max-width: 480px) {
  .aldi-loading-container { padding: 0 6vw; }
  .heading { font-size: clamp(1.8rem, 10vw, 2.8rem); letter-spacing: var(--ls-tight); width: 52vw; min-width: unset; }
  .heading-line { width: 100%; }
  .heading-line span { letter-spacing: var(--ls-tight); }
  .creative-line { font-size: 0.36em; letter-spacing: var(--ls-tight); margin-top: 0.25em; }
}