#loader {
  position: fixed; inset: 0; z-index: 9000;
  background: #fff7e3;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 24px;
  transition: opacity .9s ease .2s, visibility .9s .2s;
}
#loader.out { opacity: 0; visibility: hidden; }

.l-line {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 0.2em;
  padding: 0.5em 0.3em;
}

.l-name {
  font-family: var(--font-heading);
  font-size: clamp(52px, 12vw, 104px);
  color: #2E2820; line-height: .95; display: block;
}
.l-name.l-amp {
  font-size: clamp(28px, 6vw, 48px);
  color: #C9A96E; line-height: 1.3;
  transform: translateY(150%);
  animation: loaderSlideUp .9s cubic-bezier(.16,1,.3,1) .2s forwards;
  padding: 0px 30px;
}

.l-progress {
  width: 120px; height: 1px;
  background: #E8E2D9; position: relative; overflow: hidden;
}
.l-progress::after {
  content: ""; position: absolute; inset: 0;
  background: #C9A96E;
  transform: translateX(-100%);
  animation: loaderBar 1.3s cubic-bezier(.77,0,.18,1) .4s forwards;
}

@keyframes loaderSlideUp { to { transform: translateY(0); } }
@keyframes loaderBar     { to { transform: translateX(0); } }