:root {
  --loader-bg: #f6f2eb;
  --loader-ink: #171717;
  --loader-accent: #c5231d;
}

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

.portfolio-preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  background: var(--loader-bg);
  opacity: 1;
  visibility: visible;
  transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.42s linear;
}

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

.portfolio-preloader__content {
  width: min(330px, calc(100vw - 48px));
  text-align: center;
  transform: translateY(-2vh);
}

.portfolio-preloader__brand {
  margin: 0;
  color: var(--loader-accent);
  font: 650 11px/1.2 var(--sans, Arial, sans-serif);
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.portfolio-preloader__title {
  margin: 20px 0 0;
  color: var(--loader-ink);
  font: 800 clamp(26px, 3vw, 38px)/1.05 var(--display, Georgia, serif);
  letter-spacing: 0;
}

.portfolio-preloader__track {
  position: relative;
  width: min(200px, 62vw);
  height: 1px;
  margin: 25px auto 0;
  background: rgba(23, 23, 23, 0.15);
}

.portfolio-preloader__progress {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--loader-accent);
  animation: portfolioProgress 1.05s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

.portfolio-preloader__dot {
  position: absolute;
  top: 50%;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--loader-accent);
  transform: translate(-50%, -50%);
  animation: portfolioDot 1.05s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

@keyframes portfolioProgress {
  to { width: 100%; }
}

@keyframes portfolioDot {
  to { left: 100%; }
}

@media (max-width: 640px) {
  .portfolio-preloader__content { width: min(270px, calc(100vw - 40px)); }
  .portfolio-preloader__brand { font-size: 10px; }
  .portfolio-preloader__title { margin-top: 17px; font-size: 28px; }
  .portfolio-preloader__track { margin-top: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-preloader__progress,
  .portfolio-preloader__dot { animation-duration: 1ms; }
  .portfolio-preloader { transition-duration: 0.15s; }
}