/* ========= FANFICS — fanfics.html ========= */
/* Selo verde "Em breve"/"Grátis" (.book-badge.is-free) agora é global — ver css/styles.css */

.fanfic-empty-state {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  padding: 3rem 2rem;
  border-radius: 20px;
  border: 1.5px dashed rgba(27, 58, 87, 0.3);
  background: var(--bg-soft);
}

.fanfic-empty-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 1.2rem;
  color: var(--primary-soft);
  opacity: 0.8;
}

.fanfic-empty-icon svg {
  width: 100%;
  height: 100%;
}

.fanfic-empty-state h3 {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 1.3rem;
  margin-bottom: 0.6rem;
  color: var(--text);
}

.fanfic-empty-state p {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

.fanfic-empty-state .btn {
  margin-top: 1.3rem;
}

.fanfic-more-note {
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
  margin-top: 2rem;
}

/* Cards de fanfic — flex ao invés de grid fixo, pra não espremer quando há poucos títulos */
.fanfic-featured {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.2rem;
  margin: 0 auto 1rem;
}

.fanfic-featured .book-card {
  max-width: 170px;
}

/* Brilho mágico ao redor da capa — só para títulos em destaque.
   box-shadow no elemento real (não gradiente em pseudo-elemento): cada cor
   fica ancorada no seu canto/lado por offset explícito, então a cobertura
   é sempre simétrica — não depende de porcentagem interna que empurrava
   tudo pra um lado só. */
.book-card-cover.magic-glow {
  position: relative;
  animation: magic-glow-breathe 5s ease-in-out infinite;
}

@keyframes magic-glow-breathe {
  0%, 100% {
    box-shadow:
      -4px -4px 7px 0px rgba(230, 200, 116, 0.55),
       4px -4px 7px 0px rgba(63, 181, 173, 0.55),
       5px   0px 7px 0px rgba(91, 143, 214, 0.5),
       4px   4px 7px 0px rgba(232, 148, 74, 0.55),
      -4px   4px 7px 0px rgba(155, 124, 224, 0.55),
      -5px   0px 7px 0px rgba(225, 123, 160, 0.5);
  }
  50% {
    box-shadow:
      -6px -6px 10px 0px rgba(230, 200, 116, 0.85),
       6px -6px 10px 0px rgba(63, 181, 173, 0.85),
       7px   0px 10px 0px rgba(91, 143, 214, 0.75),
       6px   6px 10px 0px rgba(232, 148, 74, 0.85),
      -6px   6px 10px 0px rgba(155, 124, 224, 0.85),
      -7px   0px 10px 0px rgba(225, 123, 160, 0.75);
  }
}

/* Brilho de reflexo passando sobre a capa, tipo carta foil.
   Elemento real (não ::after) — pseudo-elemento animado com inset nessa
   página especificamente sofre de um bug de renderização que desloca a
   camada; um <span> de verdade não tem esse problema. */
.magic-shine {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
  border-radius: 0;
}

/* Elemento real aninhado (não ::before) — mesmo motivo do comentário acima:
   pseudo-elemento animado nessa página é instável, elemento de verdade não. */
.magic-shine-bar {
  position: absolute;
  top: -30%;
  left: -30%;
  width: 60%;
  height: 160%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: rotate(20deg);
  mix-blend-mode: soft-light;
  animation: magic-shine-sweep 4.5s ease-in-out infinite;
}

@keyframes magic-shine-sweep {
  0%, 15% { left: -40%; opacity: 0; }
  25% { opacity: 1; }
  55% { left: 110%; opacity: 1; }
  70%, 100% { left: 130%; opacity: 0; }
}