@keyframes fade-in-b {
  0% {
    opacity: 0;
    translate: 0 0.5rem;
  }
  100% {
    opacity: 1;
    translate: 0;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: no-preference) {
  main > *:not(h1):not(h2):not(h3) {
    animation: fade-in-b 0.5s cubic-bezier(0.87, 0, 0.13, 1) both;
  }
  
  main h1,
  main h2,
  main h3 {
    animation: fade-in-b 0.625s cubic-bezier(0.87, 0, 0.13, 1) both;
  }

  .linkView li.ticker {
    animation: fade-in 0.5s cubic-bezier(0.87, 0, 0.13, 1) 0.5s both;
  }

  .linkView li:not(.ticker) a {
    display: inline-block;
    transition: opacity 0.25s, translate 0.125s;
  }
  
  .linkView li:not(.ticker) a:hover {
    translate: 0 1px;
  }
  
  .linkView li:not(.ticker) a:active {
    opacity: 0.5;
    translate: 0 2px;
  }
  
  summary::after {
    display: inline-block;
    transition: opacity 0.25s, translate 0.125s;
  }
  
  summary:hover::after {
    translate: 0 -1px;
  }
  
  summary:active::after {
    translate: 0 -2px;
  }
  
  details[open] summary:hover::after {
    translate: 0 1px;
  }
  
  details[open] summary:active::after {
    translate: 0 2px;
  }
}