/* Anatoly Todan — preloader, iteration 01. No other site components yet. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background-color: #f0ede7;
}

body {
  min-height: 100vh;
  margin: 0;
}

.site {
  min-height: 100vh;
  min-height: 100svh;
  background: #f0ede7;
}

/* The preloader only appears if JavaScript is available. */
.preloader {
  display: none;
}

.js .preloader {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  overflow: hidden;
  place-items: center;
  background: #eee9e0;
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
}

.preloader__ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 48% 38% at 50% 48%, #f7f4ec, transparent 100%);
}

.preloader__signature {
  position: relative;
  z-index: 2;
  width: min(540px, 90vw);
  transform-origin: center;
  opacity: 1;
}

.preloader__wordmark {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.preloader__letter {
  fill: #354238;
  fill-opacity: 0;
  stroke: #354238;
  stroke-width: 11;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.preloader__mist {
  position: absolute;
  z-index: 3;
  inset: -16%;
  opacity: 0;
  pointer-events: none;
}

.preloader__mist--far {
  background:
    radial-gradient(ellipse 46% 43% at 24% 63%, rgba(249, 247, 242, .84), transparent 80%),
    radial-gradient(ellipse 42% 37% at 80% 37%, rgba(246, 244, 238, .70), transparent 83%);
}

.preloader__mist--near {
  background:
    radial-gradient(ellipse 51% 38% at 30% 60%, rgba(252, 250, 245, .88), transparent 84%),
    radial-gradient(ellipse 45% 35% at 77% 42%, rgba(252, 250, 247, .83), transparent 82%),
    radial-gradient(ellipse 62% 42% at 53% 74%, rgba(244, 241, 235, .61), transparent 89%);
}

/* The calligraphy is drawn only once the component begins playback. */
.preloader.is-playing .preloader__letter {
  animation:
    letter-draw 370ms calc(90ms + var(--letter-index) * 97ms) cubic-bezier(.34, .08, .18, 1) forwards,
    letter-fill 240ms calc(310ms + var(--letter-index) * 97ms) ease-out forwards;
}

/* Exit is one continuous movement, not two movements separated by a hold. */
.preloader.is-exiting .preloader__signature {
  animation: signature-dissolve 1150ms cubic-bezier(.35, .12, .7, .97) both;
}

.preloader.is-exiting .preloader__mist--far {
  animation: mist-far 1120ms ease-out both;
}

.preloader.is-exiting .preloader__mist--near {
  animation: mist-near 1150ms ease-out both;
}

.preloader.is-exiting {
  animation: preloader-release 1150ms linear both;
}

@keyframes letter-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes letter-fill {
  from { fill-opacity: 0; stroke-opacity: 1; }
  to { fill-opacity: 1; stroke-opacity: 0; }
}

@keyframes signature-dissolve {
  0% { transform: translateZ(0) scale(1); opacity: 1; }
  30% { transform: translateZ(0) scale(1.38); opacity: .96; }
  62% { transform: translateZ(0) scale(2.45); opacity: .56; }
  85% { transform: translateZ(0) scale(3.35); opacity: .08; }
  100% { transform: translateZ(0) scale(3.95); opacity: 0; }
}

@keyframes mist-far {
  0% { opacity: 0; transform: translate3d(5%, -4%, 0) scale(.92); }
  30% { opacity: .78; }
  75% { opacity: .42; }
  100% { opacity: 0; transform: translate3d(-5%, 7%, 0) scale(1.26); }
}

@keyframes mist-near {
  0% { opacity: 0; transform: translate3d(-7%, 8%, 0) scale(.92); }
  38% { opacity: .9; }
  72% { opacity: .56; }
  100% { opacity: 0; transform: translate3d(7%, -7%, 0) scale(1.23); }
}

@keyframes preloader-release {
  0% { opacity: 1; visibility: visible; }
  22% { opacity: 1; visibility: visible; }
  92% { opacity: .08; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}

@media (max-width: 600px) {
  .preloader__signature {
    width: min(520px, 94vw);
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .preloader {
    display: none;
  }
}