/*
 * RAVEL / Trazo · preloader 2.0.0
 * Scoped styles; no changes to the existing website, truck images or layout.
 * --rv-intro-* values affect only the temporary intro.
 */
#ravel-preloader {
  --rv-intro-yellow: #ebc341;
  --rv-intro-white: #fff;
  --rv-intro-muted: #b6b5af;
  --rv-intro-ease: cubic-bezier(.22, .72, .22, 1);
  isolation: isolate;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
#ravel-preloader *, #ravel-preloader *::before, #ravel-preloader *::after {
  box-sizing: border-box;
}
#ravel-preloader .rv-intro-signature {
  position: relative;
  transform: translateY(-12px);
}
#ravel-preloader .rv-intro-logo {
  overflow: visible;
  color: var(--rv-intro-white);
  animation: rv-intro-mark 600ms var(--rv-intro-ease) both;
}
#ravel-preloader .rv-intro-route {
  position: relative;
  height: 1px;
  width: 100%;
  margin-top: 29px;
  background: #ffffff24;
  overflow: hidden;
  animation: rv-intro-track 500ms 140ms var(--rv-intro-ease) both;
}
#ravel-preloader .rv-intro-route::before,
#ravel-preloader .rv-intro-route::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--rv-intro-yellow);
}
#ravel-preloader .rv-intro-route::before {
  width: 32%;
  transform: translateX(-110%);
  animation: rv-intro-travel 1500ms 100ms cubic-bezier(.55, .05, .35, .95) infinite;
}
#ravel-preloader .rv-intro-route::after {
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
  transition: transform 200ms var(--rv-intro-ease), opacity 200ms ease;
}
#ravel-preloader .rv-intro-caption {
  animation: rv-intro-caption 420ms 200ms ease both;
}
html[data-ravel-intro="ready"] #ravel-preloader .rv-intro-route::after,
html[data-ravel-intro="leaving"] #ravel-preloader .rv-intro-route::after {
  transform: scaleX(1);
  opacity: 1;
}
html[data-ravel-intro="ready"] #ravel-preloader .rv-intro-route::before,
html[data-ravel-intro="leaving"] #ravel-preloader .rv-intro-route::before {
  animation-play-state: paused;
  opacity: 0;
}
html[data-ravel-intro="leaving"] #ravel-preloader .rv-intro-signature {
  transform: translateY(-19px);
  transition: transform 400ms var(--rv-intro-ease);
}
@keyframes rv-intro-mark {
  from { opacity: 0; transform: translateY(5px); clip-path: inset(-8px 100% -8px 0); }
  to { opacity: 1; transform: translateY(0); clip-path: inset(-8px -2px -8px 0); }
}
@keyframes rv-intro-track {
  from { opacity: 0; transform: scaleX(.92); }
  to { opacity: 1; transform: scaleX(1); }
}
@keyframes rv-intro-travel {
  from { transform: translateX(-110%); }
  to { transform: translateX(425%); }
}
@keyframes rv-intro-caption {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (max-width: 600px) {
  #ravel-preloader .rv-intro-signature { width: min(224px, 66vw); }
  #ravel-preloader .rv-intro-route { margin-top: 25px; }
  #ravel-preloader .rv-intro-caption { font-size: 9px; letter-spacing: .22em; }
}
@media (max-height: 450px) {
  #ravel-preloader .rv-intro-signature { width: min(224px, 60vw); transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  #ravel-preloader *, #ravel-preloader *::before, #ravel-preloader *::after {
    animation: none !important; transition: none !important;
  }
}