/* The loader is inert unless its controller authorizes a cold-entry run. */
.cf-loader {
  display: none;
}

html.cf-loading .cf-loader.is-active {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 62%), transparent 360px),
    var(--paper, #faf9f5);
  opacity: 1;
  transition:
    background-color 260ms ease,
    opacity 360ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity;
}

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

.cf-loader.is-clearing {
  background: transparent !important;
}

.cf-loader.is-done {
  opacity: 0;
  pointer-events: none;
}

.cf-loader__stage {
  position: relative;
  display: flex;
  align-items: center;
}

.cf-loader__mark {
  width: clamp(64px, 11vw, 104px);
  height: clamp(64px, 11vw, 104px);
  flex: none;
  opacity: 0;
  transform: scale(0.9);
  will-change: transform, opacity;
}

.cf-mark-svg {
  display: block;
  width: 100%;
  height: 100%;
  shape-rendering: crispEdges;
}

.cf-loader.is-running .cf-loader__mark {
  animation: cf-loader-pop 460ms cubic-bezier(0.2, 0.9, 0.3, 1.25) forwards;
}

@keyframes cf-loader-pop {
  from {
    opacity: 0;
    transform: scale(0.9);
  }

  60% {
    opacity: 1;
    transform: scale(1.04);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.cf-loader__name {
  max-width: 0;
  flex: none;
  overflow: hidden;
}

.cf-loader__nametext {
  display: block;
  padding-left: 22px;
  color: var(--ink, #27221f);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(28px, 5.2vw, 46px);
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
}

.cf-loader.is-running .cf-loader__name {
  animation: cf-loader-grow 640ms cubic-bezier(0.22, 1, 0.36, 1) 420ms forwards;
}

.cf-loader.is-running .cf-loader__nametext {
  animation: cf-loader-shatter 150ms linear 1500ms forwards;
}

@keyframes cf-loader-grow {
  from {
    max-width: 0;
  }

  to {
    max-width: var(--cf-name-w, 320px);
  }
}

@keyframes cf-loader-shatter {
  to {
    opacity: 0;
  }
}

.cf-loader__bits {
  position: absolute;
  top: 50%;
  right: 0;
  width: var(--cf-name-w, 320px);
  height: 0;
  pointer-events: none;
}

.cf-loader__bit {
  position: absolute;
  top: 0;
  opacity: 0;
  color: var(--forest, #4e5e29);
  font: 700 14px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  transform: translate(0, -50%) scale(0.85);
}

.cf-loader__bit:nth-child(3n + 2) {
  color: var(--rust, #b55b39);
}

.cf-loader__bit:nth-child(3n + 3) {
  color: var(--mineral, #294e5e);
}

.cf-loader.is-running .cf-loader__bit {
  animation: cf-loader-burst 640ms cubic-bezier(0.16, 1, 0.3, 1) calc(1480ms + var(--cf-bd, 0ms)) forwards;
}

@keyframes cf-loader-burst {
  0% {
    opacity: 0;
    transform: translate(0, -50%) scale(0.85);
  }

  20% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(var(--cf-dx, 0), calc(-50% + var(--cf-dy, 0))) scale(1.05);
  }
}

.cf-loader.is-flying .cf-loader__mark {
  animation: none !important;
  transition:
    transform 580ms cubic-bezier(0.62, 0.02, 0.28, 1),
    opacity 80ms linear;
}

.brand-mark.is-waiting {
  opacity: 0;
}

@media (max-width: 560px) {
  .cf-loader__nametext {
    padding-left: 16px;
    font-size: clamp(26px, 8vw, 34px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cf-loader {
    display: none !important;
  }
}

@media print {
  .cf-loader {
    display: none !important;
  }
}