/* 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-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;
}
.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-outline-out { to { opacity: 0; } }
@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; }
}