/* ============================================================
   PAIRAVI — GENRE VIBES
   The book page dresses itself in its genre: atmosphere layer
   (fixed, behind content), themed title typography & accents.
   Applied via body[data-vibe="…"] set by book.js from the book's
   sub-genre. Law & Loksewa intentionally have no vibe (owner rule).
   Pure CSS, honours prefers-reduced-motion and both themes.
   ============================================================ */

/* ---------- the atmosphere canvas ---------- */
.vibe-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.vibe-bg i { position: absolute; font-style: normal; will-change: transform; }
body[data-vibe] .pdp-eyebrow { color: var(--vibe-accent, var(--color-accent)); }
body[data-vibe] .breadcrumbs { position: relative; z-index: 1; }

/* ============================================================
   ✨ FANTASY — a night made of magic
   ============================================================ */
body[data-vibe="fantasy"] { --vibe-accent: #B9933E; }
body[data-vibe="fantasy"] .vibe-bg {
  background:
    radial-gradient(60% 50% at 80% 10%, rgba(124, 92, 255, 0.16), transparent 70%),
    radial-gradient(50% 45% at 12% 30%, rgba(64, 46, 158, 0.14), transparent 70%),
    radial-gradient(2px 2px at 18% 22%, rgba(255, 224, 150, .9), transparent),
    radial-gradient(1.6px 1.6px at 72% 14%, rgba(255, 240, 200, .8), transparent),
    radial-gradient(1.5px 1.5px at 38% 60%, rgba(255, 224, 150, .6), transparent),
    radial-gradient(2px 2px at 88% 48%, rgba(255, 240, 200, .7), transparent),
    radial-gradient(1.4px 1.4px at 55% 32%, rgba(255, 224, 150, .75), transparent);
}
:root[data-theme="dark"] body[data-vibe="fantasy"] .vibe-bg {
  background:
    linear-gradient(180deg, #100b22 0%, #1a1030 55%, #14171A 100%),
    radial-gradient(60% 50% at 80% 10%, rgba(124, 92, 255, 0.35), transparent 70%);
  background-blend-mode: screen;
}
body[data-vibe="fantasy"] .vibe-bg i { color: #E8C465; opacity: 0; animation: vibe-sparkle 5.5s ease-in-out infinite; text-shadow: 0 0 10px rgba(232, 196, 101, .8); }
body[data-vibe="fantasy"] .vibe-bg i::before { content: "✦"; }
body[data-vibe="fantasy"] .vibe-bg i:nth-child(2n)::before { content: "✧"; }
body[data-vibe="fantasy"] .vibe-bg i:nth-child(3n)::before { content: "⋆"; }
@keyframes vibe-sparkle {
  0%, 100% { opacity: 0; transform: translateY(0) scale(.6); }
  40% { opacity: .95; transform: translateY(-34px) scale(1.1); }
  70% { opacity: .35; transform: translateY(-58px) scale(.85); }
}
body[data-vibe="fantasy"] .pdp-title {
  background: linear-gradient(100deg, #6b4fc8 0%, var(--color-text) 35%, #9b7bd4 75%, #c9a44a 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  letter-spacing: 0.01em;
}

/* ============================================================
   ❤ ROMANCE — soft light, a held breath
   ============================================================ */
body[data-vibe="romance"] { --vibe-accent: #C4596B; }
body[data-vibe="romance"] .vibe-bg {
  background:
    radial-gradient(55% 45% at 85% 12%, rgba(231, 130, 152, 0.20), transparent 70%),
    radial-gradient(45% 40% at 8% 55%, rgba(241, 178, 192, 0.18), transparent 70%);
}
:root[data-theme="dark"] body[data-vibe="romance"] .vibe-bg {
  background:
    linear-gradient(180deg, #231016 0%, #2b141d 50%, #14171A 100%),
    radial-gradient(55% 45% at 85% 12%, rgba(231, 130, 152, 0.22), transparent 70%);
}
body[data-vibe="romance"] .vibe-bg i { color: rgba(214, 109, 132, .55); opacity: 0; animation: vibe-drift-up 9s ease-in infinite; }
body[data-vibe="romance"] .vibe-bg i::before { content: "♥"; }
body[data-vibe="romance"] .vibe-bg i:nth-child(2n) { font-size: .7em; color: rgba(231, 160, 176, .45); }
@keyframes vibe-drift-up {
  0% { opacity: 0; transform: translateY(18px) rotate(-8deg) scale(.8); }
  25% { opacity: .8; }
  100% { opacity: 0; transform: translateY(-110px) rotate(10deg) scale(1.05); }
}
body[data-vibe="romance"] .pdp-title { font-style: italic; font-weight: 500; color: #8E3B4B; letter-spacing: 0.005em; }
:root[data-theme="dark"] body[data-vibe="romance"] .pdp-title { color: #E7A0B0; }

/* ============================================================
   🕯 HORROR — don't read it after midnight
   ============================================================ */
body[data-vibe="horror"] { --vibe-accent: #A93226; }
body[data-vibe="horror"] .vibe-bg {
  background:
    radial-gradient(120% 90% at 50% 30%, transparent 45%, rgba(20, 8, 8, 0.20) 100%),
    radial-gradient(40% 30% at 75% 18%, rgba(140, 28, 22, 0.12), transparent 70%);
}
:root[data-theme="dark"] body[data-vibe="horror"] .vibe-bg {
  background:
    linear-gradient(180deg, #120607 0%, #190a0c 60%, #0d0d0f 100%),
    radial-gradient(120% 90% at 50% 30%, transparent 40%, rgba(0, 0, 0, 0.65) 100%);
  animation: vibe-flicker 7s steps(1) infinite;
}
@keyframes vibe-flicker { 0%, 92%, 96%, 100% { opacity: 1; } 93%, 95% { opacity: .82; } }
body[data-vibe="horror"] .pdp-title { color: #8E1F18; text-shadow: 0 2px 18px rgba(142, 31, 24, 0.45); letter-spacing: 0.04em; }
:root[data-theme="dark"] body[data-vibe="horror"] .pdp-title { color: #D4453A; }

/* ============================================================
   🔎 NOIR — mystery, crime, thriller: fog & one streetlight
   ============================================================ */
body[data-vibe="noir"] { --vibe-accent: #8C6A1F; }
body[data-vibe="noir"] .vibe-bg {
  background:
    radial-gradient(45% 35% at 78% 8%, rgba(198, 154, 46, 0.18), transparent 70%),
    radial-gradient(70% 45% at 15% 80%, rgba(60, 64, 72, 0.16), transparent 75%);
}
:root[data-theme="dark"] body[data-vibe="noir"] .vibe-bg {
  background:
    linear-gradient(180deg, #0e1013 0%, #171a1f 55%, #14171A 100%),
    radial-gradient(45% 35% at 78% 8%, rgba(198, 154, 46, 0.22), transparent 70%);
}
body[data-vibe="noir"] .vibe-bg::before, body[data-vibe="noir"] .vibe-bg::after {
  content: ""; position: absolute; width: 55vw; height: 30vh; border-radius: 50%;
  background: rgba(140, 146, 160, 0.10); filter: blur(60px);
  animation: vibe-fog 26s ease-in-out infinite alternate;
}
body[data-vibe="noir"] .vibe-bg::before { top: 58%; left: -12%; }
body[data-vibe="noir"] .vibe-bg::after { top: 20%; right: -18%; animation-delay: -12s; }
@keyframes vibe-fog { from { transform: translateX(0); } to { transform: translateX(9vw); } }
body[data-vibe="noir"] .pdp-eyebrow { letter-spacing: 0.22em; }
body[data-vibe="noir"] .pdp-title { letter-spacing: 0.02em; }

/* ============================================================
   🚀 SCI-FI — deep space, thin light
   ============================================================ */
body[data-vibe="scifi"] { --vibe-accent: #2C7A8C; }
body[data-vibe="scifi"] .vibe-bg {
  background:
    radial-gradient(50% 40% at 82% 10%, rgba(46, 156, 178, 0.16), transparent 70%),
    radial-gradient(1.6px 1.6px at 22% 18%, rgba(120, 200, 220, .8), transparent),
    radial-gradient(1.4px 1.4px at 64% 42%, rgba(160, 220, 235, .6), transparent),
    radial-gradient(2px 2px at 86% 64%, rgba(120, 200, 220, .65), transparent),
    radial-gradient(1.5px 1.5px at 40% 76%, rgba(160, 220, 235, .55), transparent);
}
:root[data-theme="dark"] body[data-vibe="scifi"] .vibe-bg {
  background:
    linear-gradient(180deg, #050c14 0%, #0a1622 55%, #14171A 100%),
    radial-gradient(50% 40% at 82% 10%, rgba(46, 156, 178, 0.30), transparent 70%);
}
body[data-vibe="scifi"] .vibe-bg i { width: 2px; height: 2px; border-radius: 50%; background: #9FDCEB; box-shadow: 0 0 8px #4FB6CE; opacity: .8; animation: vibe-star 7s linear infinite; }
@keyframes vibe-star { from { transform: translateY(0); opacity: .85; } to { transform: translateY(-90px); opacity: 0; } }
body[data-vibe="scifi"] .pdp-title { letter-spacing: 0.03em; color: #1F5360; text-shadow: 0 0 24px rgba(79, 182, 206, 0.35); }
:root[data-theme="dark"] body[data-vibe="scifi"] .pdp-title { color: #BCE9F4; }

/* ============================================================
   🎈 WONDER — children's books: sunshine & confetti
   ============================================================ */
body[data-vibe="wonder"] { --vibe-accent: #D07A2F; }
body[data-vibe="wonder"] .vibe-bg {
  background:
    radial-gradient(45% 40% at 85% 8%, rgba(244, 180, 0, 0.16), transparent 70%),
    radial-gradient(40% 35% at 10% 60%, rgba(78, 160, 220, 0.10), transparent 70%);
}
body[data-vibe="wonder"] .vibe-bg i { border-radius: 50%; width: 9px; height: 9px; opacity: .5; animation: vibe-bob 6s ease-in-out infinite alternate; }
body[data-vibe="wonder"] .vibe-bg i:nth-child(3n)   { background: #E9B44C; }
body[data-vibe="wonder"] .vibe-bg i:nth-child(3n+1) { background: #6FA8DC; }
body[data-vibe="wonder"] .vibe-bg i:nth-child(3n+2) { background: #D5705B; width: 7px; height: 7px; }
@keyframes vibe-bob { from { transform: translateY(0) rotate(0); } to { transform: translateY(-22px) rotate(20deg); } }
body[data-vibe="wonder"] .pdp-title { color: #B4651E; letter-spacing: 0.01em; }
:root[data-theme="dark"] body[data-vibe="wonder"] .pdp-title { color: #F0C46B; }

/* ============================================================
   🌄 ADVENTURE — historical fiction, travel, memoirs
   ============================================================ */
body[data-vibe="adventure"] { --vibe-accent: #3E6B50; }
body[data-vibe="adventure"] .vibe-bg {
  background:
    radial-gradient(55% 45% at 80% 12%, rgba(62, 107, 80, 0.14), transparent 70%),
    radial-gradient(45% 40% at 12% 70%, rgba(166, 124, 64, 0.12), transparent 75%);
}
body[data-vibe="adventure"] .vibe-bg::before {
  content: ""; position: absolute; inset: 0; opacity: .35;
  background-image: repeating-radial-gradient(circle at 78% 22%, transparent 0 38px, rgba(120, 104, 70, 0.10) 38px 39px);
}
body[data-vibe="adventure"] .pdp-title { letter-spacing: 0.015em; }

/* ============================================================
   🕮 LITERARY — Nepali literature, classics, poetry: candlelight
   ============================================================ */
body[data-vibe="literary"] { --vibe-accent: #8C621F; }
body[data-vibe="literary"] .vibe-bg {
  background: radial-gradient(60% 50% at 50% 0%, rgba(198, 143, 46, 0.13), transparent 75%);
}
:root[data-theme="dark"] body[data-vibe="literary"] .vibe-bg {
  background:
    linear-gradient(180deg, #1a1410 0%, #1d1712 55%, #14171A 100%),
    radial-gradient(60% 50% at 50% 0%, rgba(198, 143, 46, 0.18), transparent 75%);
}
body[data-vibe="literary"] .pdp-title { font-weight: 500; }
body[data-vibe="literary"] .pdp-title::after { content: ""; display: block; width: 64px; height: 3px; margin-top: 10px; border-radius: 2px; background: linear-gradient(90deg, var(--wood-500), transparent); }

/* ============================================================
   🌅 GROWTH — self-help, business, psychology: a clean sunrise
   ============================================================ */
body[data-vibe="growth"] { --vibe-accent: #2E7D52; }
body[data-vibe="growth"] .vibe-bg {
  background:
    linear-gradient(180deg, rgba(244, 180, 0, 0.07) 0%, transparent 38%),
    radial-gradient(60% 45% at 50% 0%, rgba(46, 125, 82, 0.10), transparent 70%);
}
body[data-vibe="growth"] .vibe-bg::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 42vh; opacity: .5;
  background: repeating-linear-gradient(90deg, transparent 0 110px, rgba(46, 125, 82, 0.05) 110px 111px);
}
body[data-vibe="growth"] .pdp-title { letter-spacing: -0.01em; }

/* ============================================================
   🏛 SCHOLAR — academic: quiet blueprint
   ============================================================ */
body[data-vibe="scholar"] { --vibe-accent: #2C3A5A; }
body[data-vibe="scholar"] .vibe-bg {
  background: radial-gradient(55% 45% at 80% 8%, rgba(44, 58, 90, 0.10), transparent 70%);
}
body[data-vibe="scholar"] .vibe-bg::before {
  content: ""; position: absolute; inset: 0; opacity: .4;
  background-image: linear-gradient(rgba(44, 58, 90, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(44, 58, 90, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
}

/* ---------- Bookseller's Note (honest from-the-shop praise) ---------- */
.staff-note { position: relative; margin: 0 0 var(--space-5); padding: var(--space-4) var(--space-5); background: color-mix(in srgb, var(--vibe-accent, var(--color-accent)) 8%, var(--color-surface)); border-left: 4px solid var(--vibe-accent, var(--color-accent)); border-radius: var(--radius-md); }
.staff-note .sn-k { display: block; font-family: var(--font-ui); font-size: var(--fs-caption); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--vibe-accent, var(--color-accent-strong)); margin-bottom: 6px; }
.staff-note p { font-family: var(--font-display); font-size: 1.1rem; line-height: 1.5; font-style: italic; margin: 0 0 8px; }
.staff-note footer { font-family: var(--font-ui); font-size: var(--fs-caption); color: var(--color-text-muted); }

/* ---------- shared: calm everything when asked ---------- */
@media (prefers-reduced-motion: reduce) {
  .vibe-bg, .vibe-bg::before, .vibe-bg::after, .vibe-bg i { animation: none !important; }
  .vibe-bg i { opacity: .35; }
}
@media (max-width: 640px) {
  .vibe-bg i:nth-child(n+7) { display: none; }   /* fewer particles on phones */
}