/* ================= abertura ================= */
.abertura {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-content: center; justify-items: center; gap: 16px;
  background: var(--noite); color: #f5f3ee;
  transition: clip-path 1.2s var(--ease);
  clip-path: inset(0 0 0 0);
}
.abertura.sai { clip-path: inset(0 0 100% 0); }
.abertura .mono { width: 64px; height: 64px; color: #f5f3ee; }
.abertura .mono-letras { opacity: 0; animation: surgir 0.9s var(--ease) 0.1s forwards; }
.abertura .mono-ponto { transform: translateY(-40px) scale(0); animation: pingar 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.55s forwards; }
@keyframes pingar { to { transform: none; } }
.abertura-nome { font: 300 clamp(1.75rem, 7vw, 2.75rem)/1 var(--f-texto); letter-spacing: 0.02em; display: flex; gap: 0.3em; overflow: hidden; }
.abertura-nome b { font-weight: 600; }
.abertura-nome > * { display: inline-block; transform: translateY(110%); animation: letra 0.9s var(--ease) forwards; }
.abertura-nome > :first-child { animation-delay: 0.35s; }
.abertura-nome > :last-child { animation-delay: 0.47s; }
.abertura-linha { width: var(--e6); height: 1px; background: var(--ouro); transform: scaleX(0); animation: linha 1s var(--ease) 0.7s forwards; }
.abertura-sub { font-size: 0.66rem; letter-spacing: 0.32em; text-transform: uppercase; color: rgb(245 243 238 / 0.6); opacity: 0; animation: surgir 0.8s var(--ease) 0.9s forwards; }
@keyframes letra { to { transform: none; } }
@keyframes linha { to { transform: scaleX(1); } }
@keyframes surgir { to { opacity: 1; } }

/* ================= capa: troca em cortina ================= */
.slide { opacity: 1; clip-path: inset(0 0 0 100%); transition: clip-path 1.5s var(--ease); z-index: 0; }
.slide.ativo { clip-path: inset(0 0 0 0); z-index: 2; }
.slide.saindo { clip-path: inset(0 0 0 0); z-index: 1; transition: none; }
.slide.saindo img { transform: scale(1.04); transition: transform 1.5s var(--ease); }
/* o bloco do título fica acima das zonas de toque do carrossel; ele deixa passar o toque (pointer-events: none),
   menos nos botões, que recebem o próprio clique */
.capa-texto { z-index: 6; }
.capa-barras { z-index: 6; }
.capa-toque { z-index: 5; }
.slide-info { z-index: 2; pointer-events: none; }
.slide.ativo .slide-info { z-index: 2; }
.capa-titulo, .capa-rotulo { text-shadow: 0 1px 24px rgb(12 23 38 / 0.35); }
.slide-link { pointer-events: auto; }

/* título da capa: palavra por palavra quando a página fica pronta */
.capa-titulo { opacity: 1; animation: none; }
.capa-rotulo { animation: none; opacity: 0; transition: opacity 1s var(--ease) 0.1s; }
.pronto .capa-rotulo { opacity: 1; }
.capa-titulo .mascara > span { transition-delay: calc(var(--n) * 70ms + 250ms); }
.pronto .capa-titulo .mascara > span { transform: none; }

.capa-contador { position: absolute; z-index: 6; right: var(--gutter); top: calc(var(--e6) - 7px + env(safe-area-inset-top)); font-size: 0.7rem; letter-spacing: 0.24em; color: rgb(245 243 238 / 0.75); }
.capa-contador b { font-weight: 500; color: #f5f3ee; }
.capa-barras { right: calc(var(--gutter) + 64px); }
@media (min-width: 960px) {
  .capa-contador { top: 98px; right: calc(var(--gutter) + 340px); }
  .capa-barras { right: var(--gutter); }
}

/* ================= máscaras de texto ================= */
.mascara { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.mascara > span { display: inline-block; transform: translateY(105%); transition: transform 1.1s var(--ease); transition-delay: calc(var(--n) * 45ms); }
.dividir.visivel .mascara > span { transform: none; }

/* ================= botões ================= */
/* Um só transform: o ímã (--mx/--my, só com mouse) e o aperto (--aperto) se somam em vez de brigar. */
.btn {
  position: relative; overflow: hidden;
  transform: translate(var(--mx, 0px), var(--my, 0px)) scale(var(--aperto, 1));
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease), transform 0.5s var(--ease), filter 0.2s;
}
.btn:active { --aperto: 0.97; transition-duration: 0.35s, 0.35s, 0.12s, 0.2s; }
.rolo { position: relative; display: inline-grid; overflow: hidden; height: 1.3em; line-height: 1.3em; }
.rolo > span { grid-area: 1 / 1; }
.rolo > span + span { visibility: hidden; }
/* o texto só "rola" onde existe hover de verdade (mouse); no toque não há volta */
@media (hover: hover) and (pointer: fine) {
  .rolo > span { transition: transform 0.6s var(--ease); }
  .rolo > span + span { visibility: visible; transform: translateY(100%); }
  .btn:hover .rolo > span:first-child { transform: translateY(-100%); }
  .btn:hover .rolo > span + span { transform: none; }
}
@media (hover: none) {
  .btn:active { filter: brightness(0.88); }
}
.chip:active, .card:active .card-foto { transform: scale(0.98); }
.aba:active, .tipo:active { opacity: 0.6; }
.chip { transition: background-color 0.3s, color 0.3s, border-color 0.3s, transform 0.3s var(--ease); }
.chip:hover { border-color: var(--grafite); }

/* ================= cards ================= */
.card-titulo { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.8s var(--ease); justify-self: start; }
.card:hover .card-titulo { background-size: 100% 1px; }
.card-foto img { transition: transform 1.6s var(--ease), filter 1s var(--ease); }
.grade:hover .card:not(:hover) .card-foto img { filter: saturate(0.6) brightness(0.92); }
@media (hover: none) { .grade:hover .card:not(:hover) .card-foto img { filter: none; } }

/* ================= cursor ================= */
.cursor { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; opacity: 0; transition: opacity 0.3s; mix-blend-mode: difference; }
.cursor.ativo { opacity: 1; }
.cursor span {
  position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%;
  background: #f5f3ee; color: var(--noite);
  display: grid; place-items: center; font: 500 0 var(--f-texto); letter-spacing: 0.16em; text-transform: uppercase;
  transition: width 0.5s var(--ease), height 0.5s var(--ease), left 0.5s var(--ease), top 0.5s var(--ease), font-size 0.3s;
}
.cursor.sobre-link span { width: 34px; height: 34px; left: -17px; top: -17px; background: transparent; border: 1px solid #f5f3ee; }
.cursor.grande { mix-blend-mode: normal; }
.cursor.grande span {
  width: 72px; height: 72px; left: -36px; top: -36px;
  font-size: 0.62rem; color: #f5f3ee;
  background: rgb(12 23 38 / 0.28); border: 1px solid rgb(245 243 238 / 0.7);
  backdrop-filter: blur(6px);
}
.cursor.seta span { font: 300 1.25rem/1 var(--f-texto); letter-spacing: 0; }
@media (hover: hover) and (pointer: fine) { .tem-cursor [data-cursor], .tem-cursor [data-cursor] * { cursor: none; } }

/* ================= progresso de leitura ================= */
.progresso { position: fixed; left: 0; right: 0; top: 0; z-index: 45; height: 2px; background: var(--acento); transform-origin: left; transform: scaleX(0); }

@media (prefers-reduced-motion: reduce) {
  .mascara > span { transform: none !important; }
  .slide { transition: none; }
}