/* Estilos próprios que o Tailwind não cobre (antes ficavam inline no index_v4.html). */

.bg-notebook-pattern {
  background-size: 32px 32px;
  background-image:
    linear-gradient(to right, rgba(91, 33, 182, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(91, 33, 182, 0.05) 1px, transparent 1px);
}

.clip-asym-1 { clip-path: polygon(0 2%, 98% 0%, 100% 96%, 2% 100%); }
.clip-asym-2 { clip-path: polygon(2% 0%, 100% 3%, 97% 98%, 0% 95%); }

.tape {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(2px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  border-left: 2px dashed rgba(0, 0, 0, 0.15);
  border-right: 2px dashed rgba(0, 0, 0, 0.15);
}

.duotone-img {
  filter: contrast(115%) brightness(95%);
  mix-blend-mode: multiply;
}

/* ===== LEITOR DE ENSAIO ===== */

/* Marca-texto: destaca no corpo a frase-chave do ensaio */
.marca-texto {
  background: linear-gradient(transparent 55%, rgba(16, 185, 129, 0.38) 55%);
  color: inherit;
  padding: 0 0.12em;
}

@keyframes reader-in {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}
.reader-panel { animation: reader-in 0.28s ease-out; }

@keyframes reader-swap {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.reader-swap { animation: reader-swap 0.25s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .reader-panel, .reader-swap { animation: none; }
}