/**
 * Enlaces con paréntesis.
 *
 * Ni subrayado ni color propio: un enlace se lee igual que el resto del
 * texto y sólo se delata al pasar por encima, cuando aparecen los
 * paréntesis que lo rodean.
 *
 * Los paréntesis existen siempre y ocupan su sitio; lo único que cambia
 * es la opacidad. Si se insertaran al hacer hover, la línea entera se
 * recolocaría cada vez que el cursor cruza un enlace.
 *
 * La lista de delante son los tres sitios donde hay enlaces de leer: el
 * menú, el contenido editorial y la introducción del reel. Queda fuera
 * el título del site, que no lleva paréntesis, y las portadas de obra,
 * que son un enlace alrededor de una imagen y se marcan con su propio
 * título al pasar por encima.
 *
 * El menú añade lo suyo encima de esto en nav.css: allí los paréntesis
 * marcan además en qué página estás.
 */
:is(.nav-menu, .block, .reel-introduction) a {
  color: inherit;
  text-decoration: none;

  &::before,
  &::after {
    opacity: 0;
    transition: opacity 120ms ease-in-out;
  }

  &::before {
    content: "(";
  }

  &::after {
    content: ")";
  }

  &:is(:hover, :focus-visible)::before,
  &:is(:hover, :focus-visible)::after {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(.nav-menu, .block, .reel-introduction) a::before,
  :is(.nav-menu, .block, .reel-introduction) a::after {
    transition: none;
  }
}