/*
 * PAITHON BOOK: LE POSTILLE
 *
 * Il segno che apre la postilla sta a destra della prima riga del capoverso,
 * nello spazio fra la colonna e l'indice della pagina: sul sito ce ne sono
 * almeno 32px a ogni larghezza, e il segno col suo stacco ne usa 29. Dove non
 * li trova, il capoverso si stringe e il segno gli sta dentro
 * (`pt-con-postilla--stretto`, lo decide lo script). Col mouse si vede
 * quando ci si passa sopra; con le dita quando il capoverso attraversa la riga
 * di lettura (lo decide `pt-postille.js`), e solo allora si puo' toccare: un
 * segno invisibile non deve prendersi un tocco.
 *
 * Premuto il segno, il capoverso sfuma (il testo diventa un'ombra sfocata) e
 * la postilla si scrive al suo posto, una lettera dopo l'altra, in Fraunces
 * corsivo: niente si sposta, la pagina resta ferma. L'`<aside>` resta nella
 * pagina per i lettori di schermo, e a vista non si vede.
 */
.pt-con-postilla {
  position: relative;
}

.pt-postilla__segno {
  position: absolute;
  z-index: 1;
  /* una pressione lunga col dito: niente selezione, niente menu */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  left: calc(100% + 5px);
  top: calc((var(--pt-postilla-riga, 1.7em) - 24px) / 2);
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--pt-fg-subtle);
  background: var(--pt-bg-elev);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--pt-transition-fast),
              border-color var(--pt-transition-fast);
}

/* Dove fra la colonna e il bordo dello schermo non c'e' posto per il segno. */
.pt-con-postilla--stretto {
  padding-right: 29px;
}

.pt-con-postilla--stretto > .pt-postilla__segno {
  left: auto;
  right: 0;
}

/* Il margine a zero contro la regola del sito che ne da' uno a ogni immagine
   dell'articolo: senza, il marchio scende sotto il suo cerchio. */
.pt-postilla__segno img {
  display: block;
  width: 14px;
  height: 14px;
  margin: 0;
}

@media (hover: hover) {
  .pt-con-postilla:hover > .pt-postilla__segno {
    opacity: 1;
  }
}

@media (hover: none) {
  .pt-postilla__segno {
    pointer-events: none;
  }

  .pt-con-postilla.pt-in-lettura > .pt-postilla__segno,
  .pt-postilla__segno[aria-expanded="true"] {
    pointer-events: auto;
  }
}

.pt-postilla__segno:focus-visible,
.pt-postilla__segno[aria-expanded="true"],
.pt-postilla-attiva > .pt-postilla__segno,
.pt-con-postilla.pt-in-lettura > .pt-postilla__segno {
  opacity: 1;
}

.pt-postilla__segno[aria-expanded="true"] {
  border-color: var(--pt-accent-3);
}

.pt-postilla__segno:focus-visible {
  outline: 2px solid var(--pt-accent-3);
  outline-offset: 2px;
}

/* Il capoverso che sfuma: le lettere diventano un'ombra sfocata del loro
   colore. Il testo diretto del capoverso e quello dei figli (un link, un
   neretto, una formula) insieme; la scritta e il segno no. */
.pt-con-postilla,
.pt-con-postilla *:not(.pt-postilla__scritta):not(.pt-postilla__scritta *) {
  transition: color var(--pt-transition-slow), text-shadow var(--pt-transition-slow),
              opacity var(--pt-transition-slow);
}

/* Col capoverso sfumato non si seleziona: sul telefono la pressione lunga
   che ha scritto la postilla non deve anche selezionare il testo sotto. */
.pt-postilla-attiva {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.pt-postilla-attiva,
.pt-postilla-attiva *:not(.pt-postilla__segno):not(.pt-postilla__segno *):not(.pt-postilla__scritta):not(.pt-postilla__scritta *) {
  color: transparent !important;
  text-shadow: 0 0 5px color-mix(in srgb, var(--pt-fg) 28%, transparent);
}

/* Cio' che non ha testo da sfocare (le formule disegnate, le immagini)
   si attenua e basta. */
.pt-postilla-attiva :is(img, svg, mjx-container):not(.pt-postilla__segno *) {
  opacity: 0.15;
}

/* La scritta: sopra il capoverso, nel suo riquadro, senza spostare niente. */
.pt-postilla__scritta {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1em;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

.pt-postilla__scritta > span {
  max-width: 34ch;
  font-family: var(--pt-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.3em;
  line-height: 1.35;
  text-align: center;
  color: var(--pt-fg);
  text-shadow: none;
}

.pt-postilla__parola {
  white-space: nowrap;
}

.pt-postilla__parola > span {
  display: inline-block;
}

.pt-postilla-attiva > .pt-postilla__scritta {
  opacity: 1;
  visibility: visible;
}

/* Si scrive piano: ogni lettera compare dopo la precedente, come sotto una
   penna, dopo che il capoverso ha cominciato a sfumare. */
.pt-postilla__scritta.pt-scrive .pt-postilla__parola > span {
  animation: pt-scrivi 420ms var(--pt-ease-out) both;
  animation-delay: calc(160ms + var(--i) * 30ms);
}

@keyframes pt-scrivi {
  from {
    opacity: 0;
    transform: translateY(0.18em);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* L'<aside> della postilla: per il lettore di schermo, non per la vista. */
aside.pt-postilla {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

aside.pt-postilla[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .pt-postilla__segno,
  .pt-con-postilla,
  .pt-con-postilla * {
    transition: none !important;
  }

  .pt-postilla__scritta.pt-scrive .pt-postilla__parola > span {
    animation: none;
  }
}

/* Il segno in linea, dove la pagina d'apertura spiega le postille. */
.pt-postilla-inline img {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin: 0;
  vertical-align: -0.15em;
}

@media print {
  .pt-postilla__segno,
  .pt-postilla__scritta,
  aside.pt-postilla {
    display: none !important;
  }
}