/* ============ HERO SHOWCASE (flagship book) ============ */
.hero-showcase {
  position: relative;
  aspect-ratio: 3 / 4;
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
}
.showcase-book {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: var(--cover-url);
  background-size: cover;
  background-position: center;
  box-shadow:
    0 40px 80px rgba(0, 0, 0, 0.6),
    0 0 60px rgba(255, 26, 107, 0.2),
    0 0 120px rgba(0, 229, 255, 0.15);
  transform: perspective(1400px) rotateY(-8deg) rotateX(2deg);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 3;
}
.hero-showcase:hover .showcase-book {
  transform: perspective(1400px) rotateY(-4deg) rotateX(1deg) translateY(-8px);
}
.showcase-book::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0.25) 0%,
    transparent 8%,
    transparent 100%
  );
  pointer-events: none;
}
.showcase-scanline {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(0, 229, 255, 0.3) 50%,
    transparent 100%);
  height: 2px;
  top: 0;
  animation: showcase-scan 4s linear infinite;
  z-index: 4;
  mix-blend-mode: screen;
  pointer-events: none;
}
@keyframes showcase-scan {
  0% { top: 0%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
.showcase-brackets {
  position: absolute;
  inset: -24px;
  pointer-events: none;
  z-index: 2;
}
.showcase-brackets span {
  position: absolute;
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--cyan);
  box-shadow: 0 0 12px var(--cyan-glow);
}
.showcase-brackets .tl { top: 0; left: 0; border-right: none; border-bottom: none; }
.showcase-brackets .tr { top: 0; right: 0; border-left: none; border-bottom: none; }
.showcase-brackets .bl { bottom: 0; left: 0; border-right: none; border-top: none; }
.showcase-brackets .br { bottom: 0; right: 0; border-left: none; border-top: none; }
.showcase-label {
  position: absolute;
  top: -40px;
  left: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 8px;
}
.showcase-label::before {
  content: '';
  width: 8px; height: 8px;
  background: var(--gold);
  box-shadow: 0 0 10px var(--gold-glow);
}
.showcase-tag {
  position: absolute;
  bottom: -44px;
  right: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
}
.showcase-tag em {
  font-style: normal;
  color: var(--pink);
}