.loader {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: var(--alabastro);
  transition: clip-path 1.1s var(--ease-in-out);
  clip-path: inset(0 0 0 0);
}
.loader.is-done { clip-path: inset(0 0 100% 0); }
.loader__inner { text-align: left; }
.loader__word { overflow: hidden; font-family: var(--f-display); font-size: clamp(44px, 9vw, 110px); line-height: .98; }
.loader__word span { display: block; transform: translateY(105%); animation: rise 1s var(--ease) forwards; }
.loader__word--soft { color: var(--topo); }
.loader__word--soft span { animation-delay: .12s; }
.loader__line { height: 1px; background: var(--linea); margin: 22px 0 14px; overflow: hidden; }
.loader__line i { display: block; height: 100%; background: var(--ebano); transform-origin: left; transform: scaleX(0); animation: grow 1.3s .3s var(--ease-in-out) forwards; }
.loader__tag { font-size: 11px; letter-spacing: .4em; text-transform: uppercase; color: var(--topo-oscuro); opacity: 0; animation: fade .8s .6s forwards; }
@keyframes rise { to { transform: translateY(0); } }
@keyframes grow { to { transform: scaleX(1); } }
@keyframes fade { to { opacity: 1; } }

.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 120; pointer-events: none; }
.progress i { display: block; height: 100%; background: var(--ebano); transform-origin: left; transform: scaleX(0); }
.loader.is-skip { display: none; }

.loader__mark { width: 54px; height: 61px; margin-bottom: 26px; background: var(--ebano); -webkit-mask: url(../img/ds-mark.png) center / contain no-repeat; mask: url(../img/ds-mark.png) center / contain no-repeat; opacity: 0; animation: fade .8s .1s forwards; }