:root {
  --preloader-bg: #f6f2eb;
  --preloader-ink: #171717;
  --preloader-muted: #8b877f;
  --preloader-line: #d9d4cc;
  --preloader-accent: #c92a22;
}

html.is-preloading,
html.is-preloading body {
  overflow: hidden;
}

.site-preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  background: var(--preloader-bg);
  opacity: 1;
  visibility: visible;
  transition:
    opacity .38s cubic-bezier(.22,1,.36,1),
    visibility .38s linear;
}

.site-preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.site-preloader__inner {
  width: min(290px, calc(100vw - 44px));
  text-align: center;
  transform: translateY(-2vh);
}

.site-preloader__brand {
  margin: 0 0 22px;
  color: var(--preloader-accent);
  font: 600 10px/1.2 Arial, sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.site-preloader__stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 132px;
  height: 112px;
  margin: 0 auto;
}

.site-preloader__icon {
  width: 112px;
  height: 92px;
  overflow: visible;
}

.site-preloader__icon * {
  vector-effect: non-scaling-stroke;
}

.site-preloader__base {
  fill: none;
  stroke: var(--preloader-ink);
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-preloader__accent {
  fill: none;
  stroke: var(--preloader-accent);
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-preloader__soft {
  fill: none;
  stroke: var(--preloader-muted);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .55;
}

.site-preloader__title {
  margin: 15px 0 0;
  color: var(--preloader-ink);
  font: 400 17px/1.25 Arial, sans-serif;
  letter-spacing: 0;
}

.site-preloader__progress {
  position: relative;
  width: 96px;
  height: 1px;
  margin: 19px auto 0;
  overflow: hidden;
  background: rgba(23,23,23,.13);
}

.site-preloader__progress::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--preloader-accent);
  transform: translateX(-100%);
  animation: preloader-progress .82s .05s cubic-bezier(.65,0,.35,1) forwards;
}

.site-preloader [data-draw] {
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  animation: preloader-draw .72s cubic-bezier(.65,0,.35,1) forwards;
}

.site-preloader [data-draw-late] {
  stroke-dasharray: 160;
  stroke-dashoffset: 160;
  animation: preloader-draw .28s .52s ease-out forwards;
}

/* Portfolio */
.preloader--portfolio .pencil {
  transform-origin: 89px 18px;
  animation: pencil-mark .72s cubic-bezier(.65,0,.35,1) forwards;
}

/* Cleaning */
.preloader--cleaning .spark {
  transform-origin: center;
  opacity: 0;
  animation: spark-in .25s .5s ease-out forwards;
}

/* Grooming */
.preloader--grooming .collar {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: preloader-draw .25s .48s ease-out forwards;
}

/* Language */
.preloader--language .cursor {
  animation: cursor-blink .42s step-end 2;
}
.preloader--language .word {
  clip-path: inset(0 100% 0 0);
  animation: type-word .56s .08s steps(6,end) forwards;
}

/* Tea */
.preloader--tea .leaf-line {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  animation: preloader-draw .3s .46s ease-out forwards;
}

/* Lawyer */
.preloader--lawyer .pin {
  transform-origin: 56px 25px;
  opacity: 0;
  animation: pin-drop .28s .42s cubic-bezier(.22,1,.36,1) forwards;
}

/* Detailing */
.preloader--detailing .scan {
  stroke-dasharray: 130;
  stroke-dashoffset: 130;
  animation: preloader-draw .32s .42s ease-out forwards;
}

/* Beauty */
.preloader--beauty .beauty-line {
  stroke-dasharray: 180;
  stroke-dashoffset: 180;
  animation: preloader-draw .3s .46s ease-out forwards;
}

/* Bakery */
.preloader--bakery .cherry {
  opacity: 0;
  transform-origin: center;
  animation: cherry-in .24s .48s ease-out forwards;
}

/* Automation */
.preloader--automation .gear-left {
  transform-origin: 34px 48px;
  animation: gear-left .9s cubic-bezier(.65,0,.35,1) forwards;
}
.preloader--automation .gear-mid {
  transform-origin: 58px 48px;
  animation: gear-mid .9s cubic-bezier(.65,0,.35,1) forwards;
}
.preloader--automation .gear-right {
  transform-origin: 82px 48px;
  animation: gear-right .9s cubic-bezier(.65,0,.35,1) forwards;
}

@keyframes preloader-draw { to { stroke-dashoffset: 0; } }
@keyframes preloader-progress { to { transform: translateX(0); } }
@keyframes pencil-mark {
  0% { transform: translate(10px,-8px) rotate(-8deg); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translate(0,0) rotate(0); opacity: 1; }
}
@keyframes spark-in {
  from { opacity: 0; transform: scale(.55) rotate(-10deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes cursor-blink { 50% { opacity: 0; } }
@keyframes type-word { to { clip-path: inset(0 0 0 0); } }
@keyframes pin-drop {
  from { opacity: 0; transform: translateY(-9px) scale(.92); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes cherry-in {
  from { opacity: 0; transform: translateY(-7px) scale(.8); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes gear-left { to { transform: rotate(28deg); } }
@keyframes gear-mid { to { transform: rotate(-28deg); } }
@keyframes gear-right { to { transform: rotate(28deg); } }

@media (max-width: 640px) {
  .site-preloader__inner { width: min(250px, calc(100vw - 36px)); }
  .site-preloader__stage { width: 116px; height: 98px; }
  .site-preloader__icon { width: 100px; height: 82px; }
  .site-preloader__title { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-preloader *,
  .site-preloader *::before,
  .site-preloader *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
  }
}