/* =====================================================================
   18. AVISO DE LEITURA
   Primeira visita. Uma carta sobre a mesa: Arcano 0, O Leitor.
   ===================================================================== */
body.aviso-aberto{ overflow: hidden; }
.aviso-leitura{
  position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; overflow-y: auto; padding: 16px;
  background: var(--ruido), rgba(46,11,13,.9);
}
.av-carta{
  position: relative; width: min(100%, 520px); margin: auto;
  background: var(--ruido), var(--paper-light); border: 2px solid var(--ink); box-shadow: 12px 12px 0 rgba(0,0,0,.35);
  padding: 26px 24px 20px;
}
.av-carta::before{ content: ""; position: absolute; inset: 6px; pointer-events: none; border: 1px solid var(--arcane-gold); background: var(--cantos); }
.av-carta > *{ position: relative; }
.av-topo{ display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.av-rotulos p{ margin: 0; }
.av-selo{
  margin-left: auto; flex: none; transform: rotate(-6deg); color: var(--wine); border: 2px solid var(--wine); outline: 1px solid var(--wine); outline-offset: 2px;
  padding: 4px 10px; font-family: var(--f-mono); font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; background: var(--paper-light);
}
.aviso-leitura h2{ font-weight: 900; text-transform: uppercase; font-size: clamp(1.7rem, 7vw, 2.5rem); line-height: .95; letter-spacing: -.01em; margin: 16px 0 12px; }
.av-lide{ font-family: var(--f-display); font-style: italic; font-size: 1.12rem; line-height: 1.3; margin: 0 0 12px; }
.av-lista{ list-style: none; margin: 0 0 14px; padding: 0; counter-reset: av; }
.av-lista li{ counter-increment: av; display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 8px; padding: 7px 0; border-top: 1px solid var(--rule); font-size: .95rem; line-height: 1.4; }
.av-lista li::before{ content: counter(av, upper-roman); font-family: var(--f-display); font-weight: 700; color: var(--wine); }
.av-termo{ font-family: var(--f-mono); font-size: .72rem; letter-spacing: .03em; line-height: 1.55; border-left: 3px solid var(--wine); padding: 4px 0 4px 12px; margin: 0 0 16px; }
.av-ok{ width: 100%; }
.av-rodape{ margin: 12px 0 0; text-align: center; font-family: var(--f-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }

/* Telas baixas ou estreitas: versão compacta; em 320×640 a carta inteira, botão incluído, cabe sem rolar */
@media (max-height: 740px), (max-width: 359px){
  .aviso-leitura{ padding: 10px; }
  .av-carta{ padding: 18px 16px 14px; }
  .aviso-leitura h2{ font-size: 1.5rem; margin: 10px 0 8px; }
  .av-lide{ font-size: 1rem; margin-bottom: 8px; }
  .av-lista{ margin-bottom: 10px; }
  .av-lista li{ font-size: .86rem; padding: 5px 0; grid-template-columns: 28px minmax(0,1fr); }
  .av-termo{ font-size: .66rem; margin-bottom: 12px; }
  .av-rodape{ display: none; }
}
@media (max-height: 660px){
  .av-topo{ padding-bottom: 8px; }
  .av-topo .num-mini{ width: 26px; height: 34px; }
  .aviso-leitura h2{ font-size: 1.32rem; margin: 8px 0 6px; }
  .av-lide{ font-size: .92rem; line-height: 1.25; }
  .av-lista li{ font-size: .8rem; line-height: 1.32; padding: 4px 0; }
  .av-termo{ font-size: .62rem; line-height: 1.45; margin-bottom: 10px; }
  .av-ok{ min-height: 44px; padding: .5rem 1rem; }
}

/* Entrada: a carta é posta na mesa, o selo carimba, a lista entra em sequência */
.aviso-leitura.entrando{ animation: av-fundo .35s ease both; }
.aviso-leitura.entrando .av-carta{ animation: av-mesa .7s cubic-bezier(.2,.8,.25,1) both; }
.aviso-leitura.entrando .av-selo{ animation: av-carimbo .45s cubic-bezier(.3,1.6,.5,1) .7s both; }
.aviso-leitura.entrando .av-lista li{ animation: av-item .4s ease both; }
.aviso-leitura.entrando .av-lista li:nth-child(1){ animation-delay: .45s; }
.aviso-leitura.entrando .av-lista li:nth-child(2){ animation-delay: .55s; }
.aviso-leitura.entrando .av-lista li:nth-child(3){ animation-delay: .65s; }
.aviso-leitura.entrando .av-lista li:nth-child(4){ animation-delay: .75s; }
/* Saída: a carta vira de lado e o fundo some */
.aviso-leitura.saindo{ animation: av-fundo .5s ease reverse both; }
.aviso-leitura.saindo .av-carta{ animation: av-vira .5s cubic-bezier(.6,0,.4,1) both; }
@keyframes av-fundo{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes av-mesa{ from{ opacity: 0; transform: translateY(60px) rotate(-6deg) scale(.94); } to{ opacity: 1; transform: none; } }
@keyframes av-carimbo{ from{ opacity: 0; transform: rotate(-6deg) scale(1.9); } to{ opacity: 1; transform: rotate(-6deg) scale(1); } }
@keyframes av-item{ from{ opacity: 0; transform: translateY(8px); } }
@keyframes av-vira{ to{ opacity: 0; transform: perspective(900px) rotateY(80deg); } }
@media (prefers-reduced-motion: reduce){ .aviso-leitura, .aviso-leitura *{ animation: none !important; } }
@media print{ .aviso-leitura{ display: none !important; } }