/* The introduction is isolated from the imported page's layout and typography. */
.fondor-intro {
  --intro-ease: cubic-bezier(.16, 1, .3, 1);
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  background: var(--paper);
  clip-path: inset(0);
}
.fondor-intro[hidden] { display: none; }
.fondor-intro.is-leaving {
  animation: fondor-open-page 850ms var(--intro-ease) forwards;
  pointer-events: none;
}
.fondor-intro-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: -30px;
}
.fondor-assembly {
  position: relative;
  width: 160px;
  height: 146px;
  display: grid;
  place-items: center;
}
.fondor-intro-mark { width: 100px; height: 100px; color: #000; }
.fondor-mark-trace {
  stroke: currentColor;
  stroke-width: 4;
  animation: fondor-outline-out 600ms ease 1450ms forwards;
}
.fondor-mark-trace path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: fondor-draw 1100ms var(--intro-ease) 100ms forwards;
}
.fondor-mark-fill {
  fill: currentColor;
  clip-path: inset(100% 0 0);
  animation: fondor-fill 1100ms var(--intro-ease) 500ms forwards;
}
.fondor-guide {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line);
  transform: scaleX(0);
  animation: fondor-guide-in 850ms var(--intro-ease) forwards,
    fondor-outline-out 700ms ease 1550ms forwards;
}
.fondor-guide-top { top: 25px; }
.fondor-guide-bottom { bottom: 26px; animation-delay: 100ms, 1550ms; }
.fondor-intro-wordmark {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .33em;
  padding-left: .33em;
  margin: 21px 0 25px;
  animation: fondor-wordmark-in 900ms var(--intro-ease) 450ms both;
}
.fondor-intro-track { width: 110px; height: 1px; background: var(--line); overflow: hidden; }
.fondor-intro-track span {
  display: block;
  height: 100%;
  background: #d85a30;
  transform: scaleX(0);
  transform-origin: left;
  animation: fondor-progress 1850ms var(--intro-ease) 100ms forwards;
}
.fondor-intro-caption {
  margin-top: 15px;
  font-size: 11px;
  color: var(--muted);
  animation: fondor-wordmark-in 700ms var(--intro-ease) 800ms both;
}
.intro-enhanced .message { animation: none; }
.intro-pending .message { opacity: 0; }
.intro-revealing .message {
  animation: fondor-page-in 1100ms cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes fondor-draw { to { stroke-dashoffset: 0; } }
@keyframes fondor-fill { to { clip-path: inset(0); } }
@keyframes fondor-guide-in { to { transform: scaleX(1); } }
@keyframes fondor-outline-out { to { opacity: 0; } }
@keyframes fondor-wordmark-in {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fondor-progress { to { transform: scaleX(1); } }
@keyframes fondor-open-page { to { clip-path: inset(0 0 100%); } }
@keyframes fondor-page-in {
  from { opacity: .2; transform: translateY(13px); filter: blur(3px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  .fondor-intro { display: none; }
  .intro-enhanced .message { opacity: 1; animation: none; }
}