.site-preloader {
  --progress:0;
  position:fixed;
  z-index:10000;
  inset:0;
  display:none;
  align-content:center;
  overflow:hidden;
  padding:clamp(28px,6vw,84px);
  color:#321b15;
  background:linear-gradient(122deg,#ead8ba,#e5c9a6 55%,#d8b590);
  isolation:isolate;
  will-change:transform;
}

html[data-preloader="show"] .site-preloader { display:grid; }
html[data-preloader="show"] body { overflow:hidden; }

.site-preloader__card { width:min(920px,88vw); margin:auto; }
.site-preloader__heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:22px;
  margin-bottom:clamp(55px,10vh,110px);
}
.site-preloader__heading p {
  margin:0 0 5px;
  font:500 10px/1.2 "DM Mono",monospace;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.site-preloader__heading h2 {
  margin:0;
  max-width:650px;
  font-family:Montserrat,Arial,sans-serif;
  font-size:clamp(44px,7vw,100px);
  font-weight:700;
  line-height:.86;
  letter-spacing:-.07em;
}
.site-preloader__heading h2 em {
  display:block;
  font-family:"Playfair Display",Georgia,serif;
  font-weight:500;
}
.site-preloader__progress {
  font:500 clamp(18px,2vw,28px)/1 "DM Mono",monospace;
  font-variant-numeric:tabular-nums;
}
.site-preloader__track {
  position:relative;
  height:116px;
  border-bottom:2px solid #321b15;
}
.site-preloader__track::after {
  content:"";
  position:absolute;
  left:0;
  bottom:-2px;
  width:calc(var(--progress) * 1%);
  height:6px;
  background:#ef7f69;
}
.site-preloader__walker {
  --frame-column:0;
  --frame-row:0;
  position:absolute;
  z-index:2;
  left:clamp(0px,calc(var(--progress) * 1% - 56px),calc(100% - 112px));
  bottom:2px;
  width:112px;
  height:112px;
  background:url("assets/coffee-walker/walk.webp") 0 0/1344px 1568px no-repeat;
  background-position:calc(var(--frame-column) * -112px) calc(var(--frame-row) * -112px);
  scale:-1 1;
  filter:drop-shadow(0 9px 7px #70492d3d);
  transition:left .08s linear;
}
.site-preloader__status {
  display:flex;
  justify-content:space-between;
  gap:16px;
  margin-top:15px;
  font:500 10px/1.2 "DM Mono",monospace;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.site-preloader__status span:last-child { color:#765a45; }
.site-preloader__sr {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
}
.site-preloader.is-exiting { animation:site-preloader-away .9s cubic-bezier(.65,0,.25,1) forwards; }
.site-preloader.is-exiting .site-preloader__walker { animation:site-preloader-dash .65s ease-in both; }

@keyframes site-preloader-dash { to { translate:35vw 0; } }
@keyframes site-preloader-away {
  45% { transform:translateY(0); }
  to { transform:translateY(-102%); }
}

@media(max-width:620px) {
  .site-preloader { padding:28px; }
  .site-preloader__heading { display:block; margin-bottom:45px; }
  .site-preloader__progress { display:block; margin-top:22px; }
  .site-preloader__walker { transform:scale(.86); transform-origin:center bottom; }
}

@media(prefers-reduced-motion:reduce) {
  .site-preloader * { animation:none!important; transition:none!important; }
  .site-preloader.is-exiting { opacity:0; }
}