@font-face {
  font-family: "Loader Display";
  src: url("/fonts/womby-rus-by-daymarius.ttf") format("truetype");
  font-display: swap;
}

.site-loader {
  --loader-paper: #f4f1e8;
  --loader-ink: #1c1b17;
  --loader-reveal-duration: 1800ms;
  --loader-reveal-ease: cubic-bezier(.55, 0, .2, 1);
  position: fixed;
  inset: 0;
  z-index: 99999;
  overflow: hidden;
  color: var(--loader-ink);
  font-family: "Manrope", Arial, sans-serif;
  isolation: isolate;
}

.site-loader__curtain,
.site-loader__sheet { position: absolute; inset: 0; }
.site-loader__curtain { background: var(--loader-ink); will-change: transform; }
.site-loader__panel {
  position: absolute;
  background: var(--loader-paper);
  will-change: transform;
}
.site-loader__panel--top { inset: 0 0 16%; }
.site-loader__panel--bottom { inset: 84% 0 0; }
.site-loader__panel--left { inset: 0 90% 0 0; }
.site-loader__panel--right { inset: 0 0 0 90%; }
.site-loader__sheet {
  display: grid;
  place-items: center;
}

.site-loader__brand {
  display: flex;
  align-items: center;
  gap: 22px;
  width: 230px;
  height: 64px;
  max-width: calc(100% - 48px);
  transform: translateY(-10px);
}
.site-loader__mark {
  position: relative;
  display: block;
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  overflow: hidden;
  background: var(--loader-paper);
  isolation: isolate;
  will-change: transform, opacity;
  animation: loader-mark-in 1000ms cubic-bezier(.22, 1, .36, 1) both;
}
.site-loader__mark img {
  position: absolute;
  inset: 0 auto auto 0;
  display: block;
  width: 142.276px;
  height: 64px;
  max-width: none;
  mix-blend-mode: multiply;
}
.site-loader__name { flex: 0 0 144px; overflow: hidden; }
.site-loader__name-inner {
  display: block;
  animation: loader-name-in 850ms cubic-bezier(.22, 1, .36, 1) 450ms both;
}
.site-loader__word {
  display: block;
  font-family: "Loader Display", sans-serif;
  font-size: 27px;
  line-height: 1.25;
  white-space: nowrap;
  letter-spacing: -.035em;
}
.site-loader__period { color: #c06a3c; }
.site-loader__caption {
  display: block;
  margin-top: 7px;
  color: #a95831;
  font-size: 9px;
  line-height: 1.5;
  letter-spacing: .36em;
  text-transform: uppercase;
}
.site-loader__track {
  position: absolute;
  top: 84%;
  left: 10%;
  right: 10%;
  height: 1px;
  background: rgb(28 27 23 / 12%);
}
.site-loader__track span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--loader-ink);
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}
.site-loader__footer {
  position: absolute;
  inset: auto 10% max(32px, env(safe-area-inset-bottom));
  display: flex;
  justify-content: center;
  align-items: center;
  color: #625d55;
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: .03em;
}
.site-loader__counter {
  color: var(--loader-ink);
  display: block;
  min-width: 5ch;
  text-align: center;
  font-family: "Manrope", Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  letter-spacing: -.04em;
}
.site-loader.is-ready .site-loader__panel {
  animation-duration: var(--loader-reveal-duration);
  animation-timing-function: var(--loader-reveal-ease);
  animation-delay: 240ms;
  animation-fill-mode: both;
}
.site-loader.is-ready .site-loader__panel--top { animation-name: loader-panel-up; }
.site-loader.is-ready .site-loader__panel--bottom { animation-name: loader-panel-down; }
.site-loader.is-ready .site-loader__panel--left { animation-name: loader-panel-left; }
.site-loader.is-ready .site-loader__panel--right { animation-name: loader-panel-right; }
.site-loader.is-ready .site-loader__curtain {
  animation: loader-panel-up var(--loader-reveal-duration) var(--loader-reveal-ease) 440ms both;
}
.site-loader.is-ready .site-loader__brand {
  opacity: 0;
  transition: opacity 420ms ease 280ms;
}
.site-loader.is-ready .site-loader__footer {
  opacity: 0;
  transform: translate3d(0, 48px, 0);
  transition: opacity 400ms ease 550ms, transform 900ms var(--loader-reveal-ease) 240ms;
}
.site-loader.is-ready .site-loader__track { opacity: 0; transition: opacity 120ms ease 280ms; }

@keyframes loader-mark-in {
  from { opacity: 0; transform: translate3d(83px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes loader-name-in {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes loader-panel-up {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, -100%, 0); }
}
@keyframes loader-panel-down {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, 100%, 0); }
}
@keyframes loader-panel-left {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-100%, 0, 0); }
}
@keyframes loader-panel-right {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(100%, 0, 0); }
}

@media (max-width: 600px) {
  .site-loader__brand { width: 200px; height: 54px; gap: 17px; }
  .site-loader__name { flex-basis: 129px; }
  .site-loader__mark { flex-basis: 54px; width: 54px; height: 54px; }
  .site-loader__mark img { width: 120.045px; height: 54px; }
  .site-loader__word { font-size: 24px; }
  .site-loader__caption { font-size: 8px; }

}

.site-loader.is-reduced.is-ready { opacity: 0; transition: opacity 150ms ease; }

.site-loader.is-returning {
  --loader-reveal-duration: 300ms;
}
.site-loader.is-returning .site-loader__curtain,
.site-loader.is-returning .site-loader__panel,
.site-loader.is-returning .site-loader__track,
.site-loader.is-returning .site-loader__counter,
.site-loader.is-returning .site-loader__footer {
  display: none !important;
}
.site-loader.is-returning .site-loader__brand {
  opacity: 1;
}
.site-loader.is-returning.is-ready {
  opacity: 0;
  transition: opacity 200ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .site-loader *, .site-loader.is-ready * { animation: none !important; transition: none !important; }
}
