/* Text reveal, driven by text-fx.js. Nothing applies until the script adds .fx, so no-JS and reduced-motion get plain text. */
:root {
  --fx-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

.fx-wait {
  opacity: 0;
}
.fx-w {
  display: inline-block;
}
/* Underlines do not propagate into inline-blocks. */
a .fx-w {
  text-decoration: inherit;
}
.fx:not(.fx-wait) :is(.fx-w, .fx-a) {
  animation: 0.91s var(--fx-ease) var(--d, 0ms) both fx-fly;
}
@keyframes fx-fly {
  from {
    opacity: 0;
    transform: translateY(0.4em);
  }
}
@keyframes fx-fade {
  from {
    opacity: 0;
  }
}

/* Blocks whose text reveals itself only fade (rules, list markers), instead of the block-level rise. */
:is(.home-copy > *, .writing-index > section, .page-copy > *, .page-media > *, .content-frame > *, .timeline-step, [data-bio-panel].is-entering):is(.fx, :has(.fx)) {
  animation: 0.5s ease calc(var(--i, 0) * 30ms) both fx-fade;
}

@media (hover: hover) and (pointer: fine) {
  .content-frame :is(p, li) a {
    transition: color 0.3s ease-in-out, text-decoration-color 0.3s ease-in-out, text-underline-offset 0.35s var(--fx-ease), transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .content-frame :is(p, li) a:hover {
    text-decoration-color: color-mix(in srgb, var(--text-secondary) 75%, transparent);
    text-underline-offset: 0.3em;
  }
}

@media print, (prefers-reduced-motion: reduce) {
  .fx-wait {
    opacity: 1;
  }
}