/* Motion: the light through links on hover, the blur while dots fly between pages, the nudge,
   and the flickers. Loaded after the page styles and before editing.css: the order matters here. */
@media (prefers-reduced-motion: reduce) {
  h1,
  .who,
  .panel,
  .tabs,
  .view-in .fade,
  .dd-list {
    animation: none;
  }
}

/* hover: a cyan light moves through the words, left to right */
.go:hover .t,
.go:focus-visible .t {
  color: transparent;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(100deg, var(--ink) 0 36%, var(--cyan-ink) 50%, var(--ink) 64% 100%) 100% 0/250% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  animation: sweep 1.5s cubic-bezier(0.45, 0.05, 0.4, 1) infinite;
}

@keyframes sweep {
  to {
    background-position: 0 0;
  }
}

/* while the dots fly, the rest of the page blurs out, so two pages never look mixed */
.top,
footer,
footer > *,
.intro,
.stats,
.tl > li,
.tl li > *,
.dd,
.card,
.card > *,
.back,
.dhead > *,
.dsum,
.vis,
.parts,
.detail > .did,
.tools,
.ntext,
.lg > *,
#n-edit,
.edel,
.rs > * {
  transition: filter 0.5s ease, opacity 0.5s ease;
}

#app.mt-on :is(.top, footer, .intro, .stats, .tl > li, .dd, .card, .back, .dhead > *, .dsum, .vis, .parts, .detail > .did, .tools, .ntext, .lg > *, #n-edit, .edel, .rs > *):not(:has(.mt-hide, .mt-src)):not(.mt-hide),
#app.mt-on :is(.tl > li, .card, footer):has(.mt-hide, .mt-src) > :not(:has(.mt-hide, .mt-src)):not(.mt-hide) {
  filter: blur(8px);
  opacity: 0.12;
}

.mt-hide {
  visibility: hidden;
}

/* a wrong entry nudges its field */
@keyframes nudge {
  20%, 60% {
    transform: translateX(-5px);
  }
  40%, 80% {
    transform: translateX(5px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .go .t,
  .role a.kaiel,
  .flow .run i,
  .flow li::before {
    animation: none !important;
  }
}

.nudge,
.view-in .nudge {
  animation: nudge 0.4s ease;
}

/* a short hologram flicker: switching light and dark, publishing an article, a new resume */
#app.thsw {
  animation: pubf 0.55s linear;
}

.note.pub .dhead,
.note.pub .ntext {
  animation: pubf 0.7s linear;
}

.doc.pulse {
  animation: pubf 0.7s linear;
}

@keyframes pubf {
  0% {
    opacity: 0.3;
  }
  10% {
    opacity: 1;
  }
  16% {
    opacity: 0.55;
  }
  24% {
    opacity: 1;
  }
  31% {
    opacity: 0.8;
  }
  38%, 100% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tabs .ob i,
  .note.pub .dhead,
  .note.pub .ntext,
  .doc.pulse {
    animation: none;
  }
}