/* ============================================
   LOADER — HUM [image] BE
   Based on steps-loader.md timeline structure
   ============================================ */

.loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--color-primary, #2c319d);
  color: #f4f0e8;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.loader.is--hidden {
  display: none;
}

.loader.is--done {
  pointer-events: none;
}

.loader__h1 {
  white-space: nowrap;
  justify-content: center;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(6rem, 2.5rem + 11vw, 14rem);
  font-weight: 500;
  line-height: 1;
  display: flex;
  position: relative;
}

.loader__h1-start {
  justify-content: flex-end;
  width: auto;
  display: flex;
  overflow: hidden;
}

.loader__h1-end {
  justify-content: flex-start;
  width: auto;
  display: flex;
  overflow: hidden;
}

.loader__letter {
  display: block;
  position: relative;
  height: 1em;
  width: auto;
  object-fit: contain;
  opacity: 0;
}

.loader__box {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 0;
  display: flex;
  position: relative;
}

.loader__box-inner {
  justify-content: center;
  align-items: center;
  min-width: 1.85em;
  height: 0.99em;
  display: flex;
  position: relative;
  top: 0.0em;
}

.loader__growing-image {
  justify-content: center;
  align-items: center;
  width: 0%;
  height: 100%;
  display: flex;
  position: absolute;
  overflow: hidden;
}

.loader__growing-image-wrap {
  width: 100%;
  min-width: 1.85em;
  height: 100%;
  position: absolute;
}

.loader__cover-image,
.loader__cover-image-extra {
  pointer-events: none;
  object-fit: cover;
  user-select: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.loader__cover-image {
  z-index: 0;
}

.loader__cover-image-extra {
  opacity: 0;
}

.loader__cover-image-extra.is--1 {
  z-index: 4;
  opacity: 1;
}

.loader__cover-image-extra.is--2 {
  z-index: 3;
}

.loader__cover-image-extra.is--3 {
  z-index: 2;
}

.loader__cover-image-extra.is--4 {
  z-index: 1;
}

@media (max-width: 768px) {
  .loader__h1 {
    font-size: clamp(4.2rem, 1.8rem + 9vw, 6.8rem);
  }
}