/* Cinema layer — loaded after styles.css. Premium card treatment with
   gradient borders, staggered card reveals, ghost roman numerals behind
   chapters, hairline dividers and a hero title shimmer. */

/* ───── staggered card reveal (uses `translate`, not `transform`,
       so it never fights the pointer-tilt transform) ───── */
.chapter:not(.is-in) .list a.card { opacity: 0; }
.chapter.is-in .list a.card {
  animation: card-in 900ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: calc(var(--i, 0) * 90ms);
}
@keyframes card-in {
  from { opacity: 0; translate: 0 26px; }
}

/* ───── gradient border slabs ──────────────────────────── */
a.card {
  border-color: transparent;
  background:
    linear-gradient(135deg, rgba(95,180,196,0.05), rgba(0,0,0,0.20)) padding-box,
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(150deg,
      rgba(95,180,196,0.35),
      rgba(220,230,245,0.08) 38%,
      rgba(220,230,245,0.05) 62%,
      rgba(227,106,77,0.30)) border-box;
}
a.card:hover {
  border-color: transparent;
  background:
    linear-gradient(135deg, rgba(95,180,196,0.10), rgba(0,0,0,0.18)) padding-box,
    linear-gradient(var(--surface-hi), var(--surface-hi)) padding-box,
    conic-gradient(from var(--card-a, 0deg),
      rgba(95,180,196,0.60),
      rgba(220,230,245,0.10) 28%,
      rgba(227,106,77,0.50) 52%,
      rgba(220,230,245,0.10) 74%,
      rgba(95,180,196,0.60)) border-box;
}
@property --card-a {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@supports (background: conic-gradient(from 0deg, red, blue)) {
  a.card:hover { animation: card-spin 4.5s linear infinite; }
}
@keyframes card-spin { to { --card-a: 360deg; } }
a.card.coming, a.card.coming:hover {
  background:
    linear-gradient(135deg, rgba(95,180,196,0.04), rgba(0,0,0,0.18)) padding-box,
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(150deg, rgba(220,230,245,0.10), rgba(220,230,245,0.05)) border-box;
  animation: none;
}

/* ───── ghost roman numerals behind chapters ───────────── */
.chapter { position: relative; z-index: 0; }
.chapter::before {
  content: attr(data-num);
  position: absolute;
  top: -64px;
  right: -20px;
  z-index: -1;
  font-family: 'Cinzel', serif;
  font-weight: 400;
  font-size: clamp(110px, 16vw, 190px);
  line-height: 1;
  color: rgba(220, 230, 245, 0.05);
  pointer-events: none;
  user-select: none;
  opacity: 0;
  translate: 0 40px;
  transition: opacity 1400ms ease 150ms, translate 1400ms cubic-bezier(0.2, 0.7, 0.2, 1) 150ms;
}
.chapter:nth-of-type(odd)::before { right: auto; left: -20px; }
.chapter.is-in::before { opacity: 1; translate: 0 0; }

/* ───── hairline divider under chapter heads ───────────── */
.chapter-head { position: relative; }
.chapter-head::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -12px;
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg,
    rgba(95,180,196,0.45), rgba(220,230,245,0.07) 55%, transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1300ms cubic-bezier(0.2, 0.7, 0.2, 1) 250ms;
}
.chapter.is-in .chapter-head::after { transform: scaleX(1); }

/* ───── hero title — slow breathing glow over the serif ── */
.hero-title {
  animation: title-glow 9s ease-in-out 3.2s infinite;
}
@keyframes title-glow {
  0%, 100% {
    text-shadow:
      0 0 40px rgba(95, 180, 196, 0.25),
      0 0 80px rgba(95, 180, 196, 0.12);
  }
  50% {
    text-shadow:
      0 0 46px rgba(95, 180, 196, 0.42),
      0 0 110px rgba(95, 180, 196, 0.20),
      0 0 170px rgba(227, 106, 77, 0.10);
  }
}

/* ───── legibility over bright water ───────────────────── */
.whisper, .epigraph {
  text-shadow: 0 1px 14px rgba(6, 8, 11, 0.85), 0 0 36px rgba(6, 8, 11, 0.6);
}

/* ───── small screens — ghost numerals stay inside view ── */
@media (max-width: 540px) {
  .chapter::before { font-size: 110px; top: -52px; right: -6px; }
  .chapter:nth-of-type(odd)::before { left: -6px; }
}

/* ───── reduced motion ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .chapter .list a.card { opacity: 1 !important; translate: none; animation: none !important; }
  .chapter::before { opacity: 1; translate: none; transition: none; }
  .chapter-head::after { transform: none; transition: none; }
  .hero-title { animation: none; }
}