/* ========================================================================
   POLISH v2.0 — stellar visual upgrade layer
   Loaded after styles.css; overrides only what needs to change.
   ======================================================================== */

:root {
  --gold: #f5c66a;
  --gold-soft: #e0b050;
  --arcane: #b8a6ff;
  --crimson: #dc143c;
  --crimson-deep: #8b0000;
  --indigo: #6e5cff;
  --ink: #05050a;
}

/* ------------------------------------------------------------------------
   Background — replace flat black with layered vignette + film grain
   ------------------------------------------------------------------------ */
body {
  background: radial-gradient(ellipse at 50% 0%, #1a0014 0%, #08020d 45%, #000 100%);
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  /* Grain noise, pre-multiplied white-on-transparent so we don't need a
     blend-mode. blend-modes force per-scroll repaints and stutter the page. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.35;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  /* Gentler vignette — too-dark stops caused a visible black band at the
     bottom of tall mobile viewports. */
  background: radial-gradient(ellipse 120% 80% at 50% 45%, transparent 55%, rgba(0,0,0,0.38) 100%);
}

/* ------------------------------------------------------------------------
   Hero header — dramatic gradient wordmark
   ------------------------------------------------------------------------ */
header {
  padding: 5rem 1rem 3.5rem;
  border-bottom: none;
  background: transparent;
  backdrop-filter: none;
}

header::before {
  width: 140px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  animation: heroLinePulse 4s ease-in-out infinite;
}

@keyframes heroLinePulse {
  0%, 100% { width: 140px; opacity: 0.4; }
  50% { width: 280px; opacity: 0.9; }
}

.author-name {
  font-size: clamp(2.8rem, 6vw, 4.8rem);
  letter-spacing: 0.18em;
  background: linear-gradient(135deg, #fff 0%, var(--gold) 45%, var(--crimson) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 30px rgba(245, 198, 106, 0.25));
  margin-bottom: 1rem;
}

.tagline {
  font-size: 1.15rem;
  color: #c9b6d9;
  letter-spacing: 0.04em;
  position: relative;
  display: inline-block;
}

.tagline::before,
.tagline::after {
  content: '❦';
  color: var(--gold-soft);
  opacity: 0.7;
  margin: 0 0.9rem;
  font-style: normal;
  display: inline-block;
  transform: translateY(-2px);
}

/* ------------------------------------------------------------------------
   Navigation — unified glass rail, premium CTA for Grimoire
   ------------------------------------------------------------------------ */
nav {
  gap: 0.6rem;
  padding: 1rem 1.5rem 2.5rem;
  max-width: 1300px;
  margin: 0 auto;
}

.nav-btn {
  padding: 0.7rem 1.3rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  transition: all 0.4s cubic-bezier(.2,.8,.2,1);
}

.nav-btn:hover,
.nav-btn.active {
  background: linear-gradient(135deg, rgba(220,20,60,0.18), rgba(139,0,0,0.3));
  border-color: rgba(245,198,106,0.55);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px -8px rgba(220,20,60,0.55), inset 0 0 0 1px rgba(255,255,255,0.04);
}

.nav-btn.active {
  color: var(--gold);
}

.nav-separator {
  width: 1px;
  height: 24px;
  background: linear-gradient(to bottom, transparent, rgba(245,198,106,0.5), transparent);
  margin: 0 0.75rem;
}

.cosmic-nav {
  background: linear-gradient(135deg, #1a0033 0%, #3a1a5d 60%, #1a0033 100%);
  border: 1px solid rgba(245,198,106,0.5);
  border-radius: 999px;
  padding: 0.72rem 1.6rem;
  color: var(--gold);
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  box-shadow:
    0 0 0 1px rgba(184,166,255,0.15),
    0 8px 30px -10px rgba(157,78,221,0.6),
    inset 0 0 20px rgba(157,78,221,0.12);
  text-shadow: 0 0 12px rgba(245,198,106,0.5);
  position: relative;
  overflow: hidden;
}

.cosmic-nav::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(245,198,106,0.35) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.9s cubic-bezier(.2,.8,.2,1);
}

.cosmic-nav:hover::after {
  transform: translateX(120%);
}

.cosmic-nav:hover,
.cosmic-nav:focus,
.cosmic-nav.active {
  background: linear-gradient(135deg, #3a1a5d 0%, #6e3ab5 60%, #3a1a5d 100%);
  color: #fff;
  border-color: var(--gold);
  box-shadow:
    0 0 0 1px rgba(245,198,106,0.6),
    0 12px 40px -6px rgba(157,78,221,0.8),
    inset 0 0 30px rgba(245,198,106,0.2);
}

/* ------------------------------------------------------------------------
   Series section headers — ornamental divider + pill status
   ------------------------------------------------------------------------ */
.series-header {
  margin-bottom: 4rem;
}

.series-decoration { display: none; }

.series-title {
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: 0.08em;
  background: linear-gradient(180deg, #fff 0%, #e8d8b8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.5rem;
  position: relative;
  display: inline-block;
  padding: 0 2.5rem;
}

.series-title::before,
.series-title::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--series-accent, var(--crimson)), transparent);
}

.series-title::before { left: -60px; }
.series-title::after  { right: -60px; }

#esmeralda { --series-accent: var(--crimson); }
#pirates   { --series-accent: var(--indigo); }
#kindred   { --series-accent: #a01030; }
#cosmic    { --series-accent: var(--gold); }

.series-tagline {
  font-size: 1.15rem;
  color: #d4c3ff;
  max-width: 620px;
  margin: 0.5rem auto 1.25rem;
  line-height: 1.55;
}

.series-status {
  display: inline-block;
  padding: 0.4rem 1.1rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--series-accent, rgba(255,255,255,0.2));
  color: #e8d8b8;
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  box-shadow: 0 0 20px -8px var(--series-accent, transparent);
  margin-top: 0;
}

/* ------------------------------------------------------------------------
   Book cards — lift, tilt, color-matched glow
   ------------------------------------------------------------------------ */
.books-grid { gap: 2.5rem; }

.book-card {
  transition: transform 0.5s cubic-bezier(.2,.8,.2,1);
  perspective: 1000px;
}

.book-cover-wrapper {
  border-radius: 8px;
  box-shadow:
    0 10px 30px rgba(0,0,0,0.6),
    0 0 0 1px rgba(255,255,255,0.03);
  transition: all 0.5s cubic-bezier(.2,.8,.2,1);
  transform-style: preserve-3d;
}

.book-card:hover {
  transform: translateY(-14px);
}

.book-card:hover .book-cover-wrapper {
  transform: rotateX(4deg) rotateY(-3deg);
  box-shadow:
    0 30px 60px -15px rgba(0,0,0,0.85),
    0 0 40px -5px var(--series-accent, rgba(220,20,60,0.5)),
    0 0 0 1px rgba(245,198,106,0.3);
}

.book-cover { border-radius: 8px; }

.book-number {
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #9a88a8;
  padding: 0.3rem 0.9rem;
  border: 1px solid rgba(245,198,106,0.15);
  border-radius: 999px;
  background: rgba(10,5,20,0.4);
  backdrop-filter: blur(4px);
}

.book-card:hover .book-number {
  color: var(--gold);
  border-color: rgba(245,198,106,0.5);
  transform: none;
}

.book-card:hover .book-number::before,
.book-card:hover .book-number::after { opacity: 0; }

.coming-soon-banner {
  background: linear-gradient(135deg, var(--crimson-deep) 0%, var(--crimson) 100%);
  border: 1px solid rgba(245,198,106,0.4);
  padding: 0.4rem 0.9rem;
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  box-shadow: 0 6px 20px rgba(139,0,0,0.6), 0 0 0 1px rgba(245,198,106,0.15);
}

/* ------------------------------------------------------------------------
   Grimoire section — shift green → arcane gold, match grimdark brand
   ------------------------------------------------------------------------ */
.grimoire-title {
  background: linear-gradient(135deg, #fff 0%, var(--gold) 45%, var(--arcane) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  letter-spacing: 0.08em;
  text-shadow: none;
  filter: drop-shadow(0 0 25px rgba(245,198,106,0.3));
}

.grimoire-subtitle {
  color: #d4c3ff;
  font-size: 1.2rem;
  letter-spacing: 0.02em;
}

.grimoire-badge {
  background: rgba(245,198,106,0.08);
  border: 1px solid rgba(245,198,106,0.45);
  color: var(--gold);
  padding: 0.55rem 1.4rem;
  border-radius: 999px;
  letter-spacing: 0.18em;
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  box-shadow: 0 0 28px -10px rgba(245,198,106,0.5);
}

.category-btn.active {
  background: linear-gradient(135deg, rgba(157,78,221,0.35), rgba(245,198,106,0.15));
  border-color: var(--gold);
  color: var(--gold);
  box-shadow: 0 0 22px rgba(245,198,106,0.3), inset 0 0 24px rgba(157,78,221,0.25);
}

.category-btn.active .category-icon {
  filter: drop-shadow(0 0 8px rgba(245,198,106,0.7));
}

.category-btn.active .category-label {
  text-shadow: 0 0 10px rgba(245,198,106,0.5);
}

.grimoire-search-input {
  box-sizing: border-box;   /* prevents padding pushing width past viewport on mobile */
  max-width: 100%;
}

.grimoire-search-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(245,198,106,0.2);
}

/* Defensive: similar form controls also border-box so they behave on narrow viewports */
.category-btn {
  box-sizing: border-box;
  max-width: 100%;
}

.grimoire-post {
  background: linear-gradient(180deg, rgba(26,0,51,0.6) 0%, rgba(10,5,20,0.7) 100%);
  border: 1px solid rgba(157,78,221,0.25);
  border-radius: 14px;
  transition: all 0.5s cubic-bezier(.2,.8,.2,1);
}

.grimoire-post:hover {
  border-color: rgba(245,198,106,0.5);
  transform: translateY(-8px);
  box-shadow: 0 18px 50px -12px rgba(157,78,221,0.4), 0 0 0 1px rgba(245,198,106,0.12);
}

.grimoire-post::before {
  background: linear-gradient(90deg, var(--arcane), var(--gold), var(--arcane));
}

.post-title {
  background: linear-gradient(135deg, #fff 0%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.read-more { color: var(--gold); }

/* ------------------------------------------------------------------------
   Footer — upgraded from a thin line to a proper closer
   ------------------------------------------------------------------------ */
footer {
  position: relative;
  margin-top: 6rem;
  padding: 3rem 1.5rem 2.5rem;
  text-align: center;
  color: #8a7a9a;
  font-size: 0.9rem;
}

footer::before {
  content: '❦';
  display: block;
  color: var(--gold-soft);
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
  opacity: 0.6;
}

footer a {
  color: var(--gold);
  text-decoration: none;
  padding: 0.5rem 1.2rem;
  border: 1px solid rgba(245,198,106,0.4);
  border-radius: 999px;
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: all 0.3s ease;
  display: inline-block;
  margin-top: 0.4rem;
}

footer a:hover {
  background: rgba(245,198,106,0.1);
  border-color: var(--gold);
  box-shadow: 0 0 24px -6px rgba(245,198,106,0.5);
}

/* ------------------------------------------------------------------------
   Modal — tighten styling
   ------------------------------------------------------------------------ */
.modal-content {
  border: 1px solid rgba(245,198,106,0.2);
  border-radius: 16px;
  background: linear-gradient(180deg, #140a22 0%, #05020a 100%);
  box-shadow: 0 30px 80px -10px rgba(0,0,0,0.9), 0 0 0 1px rgba(245,198,106,0.08);
}

.modal-title {
  background: linear-gradient(135deg, #fff 0%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-size: 1.8rem;
  letter-spacing: 0.06em;
}

/* ------------------------------------------------------------------------
   Accessibility — respect prefers-reduced-motion
   ------------------------------------------------------------------------ */
/* Shooting star overhaul — variable trajectory via CSS vars, longer tail */
.shooting-star,
.shooting-star-large {
  animation: shootVector var(--shoot-dur, 1.7s) cubic-bezier(.2, .6, .5, 1) forwards !important;
}
.shooting-star-large { --shoot-dur: 2.4s; }

.shooting-star::after,
.shooting-star-large::after {
  width: 90px !important;
  height: 1.5px !important;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(200,220,255,0.45) 30%,
    rgba(255,255,255,0.95) 90%,
    rgba(255,255,255,1) 100%) !important;
  filter: drop-shadow(0 0 6px rgba(200,220,255,0.9));
  transform: translate(-100%, -50%) rotate(var(--shoot-trail-rot, -135deg)) !important;
  transform-origin: 100% 50% !important;
}

.shooting-star-large::after {
  width: 140px !important;
  height: 2.5px !important;
  filter: drop-shadow(0 0 10px rgba(220, 240, 255, 1));
}

@keyframes shootVector {
  0%   { opacity: 0; transform: translate(0, 0); }
  8%   { opacity: 1; }
  88%  { opacity: 0.85; }
  100% { opacity: 0; transform: translate(var(--shoot-dx, 300px), var(--shoot-dy, 300px)); }
}

/* Narrow mobile: hide the decorative ❦ around the tagline — they
   orphan-wrap onto a second line when the tagline itself wraps. */
@media (max-width: 520px) {
  .tagline::before,
  .tagline::after { display: none; }
}

/* Mobile perf: the layered drop-shadow stack on lightning bolts is too
   expensive on mid-range phones — the frame drops looked like slow-mo.
   Halve the halo layers when we're on a coarse pointer or narrow viewport. */
@media (max-width: 768px), (pointer: coarse) {
  .lightning-bolt svg path {
    filter:
      drop-shadow(0 0 3px rgba(255,255,255,1))
      drop-shadow(0 0 12px rgba(180,210,255,0.7)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .rain, .ember, .flame-streak, .particle,
  .lightning-bolt, .shooting-star, .water-glint,
  .lovecraft-tentacle, .abyssal-eye, .ripple {
    display: none !important;
  }
}

/* ------------------------------------------------------------------------
   Focus rings — accessible + on-brand
   ------------------------------------------------------------------------ */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ========================================================================
   Effect refinements — Kindred rain, lightning glow, Pirates eyes
   ======================================================================== */

/* Faviana background — sickly vampire palette (green miasma + blood red),
   differentiates it from Esmeralda's pure-red wash. */
.background.kindred-theme {
  background:
    radial-gradient(ellipse 70% 55% at 22% 18%, rgba(60, 120, 90, 0.22) 0%, transparent 60%),
    radial-gradient(ellipse 80% 60% at 78% 82%, rgba(150, 30, 55, 0.32) 0%, transparent 65%),
    linear-gradient(180deg, #06060f 0%, #170815 45%, #0a0308 100%) !important;
}

/* Blood rain — layered depth, slower droplets, less like stripes */
.rain {
  animation-duration: 0.9s !important;
  height: 22px !important;
  width: 2px !important;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(140, 0, 0, 0.0) 10%,
    rgba(200, 20, 40, 0.85) 55%,
    rgba(255, 60, 80, 0.95) 85%,
    rgba(255, 255, 255, 0.9) 100%
  ) !important;
  border-radius: 40% 40% 50% 50%;
  filter: drop-shadow(0 0 4px rgba(220, 30, 50, 0.6)) drop-shadow(0 0 1px rgba(255, 200, 200, 0.8));
}

.rain:nth-child(3n) {
  animation-duration: 1.3s !important;
  opacity: 0.55 !important;
  filter: blur(0.6px) drop-shadow(0 0 6px rgba(220, 30, 50, 0.4));
  transform: scale(0.7);
}

.rain:nth-child(5n) {
  animation-duration: 1.8s !important;
  opacity: 0.35 !important;
  filter: blur(1.2px);
  transform: scale(0.5);
}

@keyframes rainFall {
  0%   { transform: translateY(-40px) translateX(-30px); opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 0.8; }
  100% { transform: translateY(calc(100vh + 40px)) translateX(80px); opacity: 0; }
}

/* Lightning — richer halo + brighter core so strikes feel volumetric */
.lightning-bolt svg path {
  filter:
    drop-shadow(0 0 2px rgba(255,255,255,1))
    drop-shadow(0 0 10px rgba(190,215,255,0.95))
    drop-shadow(0 0 22px rgba(120,160,255,0.7))
    drop-shadow(0 0 40px rgba(80,120,255,0.35)) !important;
}

.lightning-flash {
  background: radial-gradient(
    ellipse at 50% 30%,
    rgba(230, 240, 255, 0.55) 0%,
    rgba(180, 200, 255, 0.35) 25%,
    rgba(120, 150, 220, 0.2) 55%,
    transparent 80%
  ) !important;
}

/* Pirates — eyes recolored to abyssal cyan-teal glow (deep-sea predator).
   No animation on the eye itself — lets the JS blink in/out cleanly. */
.abyssal-eye {
  width: 30px !important;
  height: 20px !important;
  background: radial-gradient(
    ellipse at center,
    rgba(180, 255, 230, 0.95) 0%,
    rgba(60, 220, 200, 0.85) 25%,
    rgba(20, 140, 140, 0.7) 55%,
    rgba(5, 40, 60, 0.55) 80%,
    rgba(0, 10, 20, 0.3) 100%
  ) !important;
  box-shadow:
    0 0 10px rgba(80, 230, 210, 0.75),
    0 0 22px rgba(40, 180, 200, 0.5),
    inset 0 0 5px rgba(0, 20, 30, 0.6) !important;
  transition: opacity 0.5s ease-in-out !important;
}

.eye-pupil {
  width: 3px !important;
  height: 14px !important;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.9), inset 0 0 1px rgba(255, 255, 255, 0.3);
}

/* Pirates — kill the ugly horizontal "water-line" streaks; we use ripples + glints instead */
.water-line { display: none !important; }

/* Water surface glint — small spark-like highlights that shimmer and fade,
   not straight lines (which were reading as cracks at 1px). */
.water-glint {
  position: absolute;
  height: 3px;
  background: radial-gradient(ellipse 50% 100% at 50% 50%,
    rgba(200, 240, 255, 0.7) 0%,
    rgba(140, 210, 240, 0.3) 40%,
    transparent 80%);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  filter: blur(1.2px);
  animation: glintDrift 7s ease-in-out infinite;
}

@keyframes glintDrift {
  0%   { transform: translateX(-20%) scaleX(0.6); opacity: 0; }
  30%  { opacity: 0.85; }
  70%  { opacity: 0.6; }
  100% { transform: translateX(20%) scaleX(1.2); opacity: 0; }
}

/* Upgraded ripple rings — softer, deeper, dual-ring for depth */
.ripple {
  border: 1.5px solid rgba(140, 200, 230, 0.55) !important;
  box-shadow:
    0 0 8px rgba(100, 180, 220, 0.3),
    inset 0 0 6px rgba(80, 150, 190, 0.2);
  animation: rippleExpand 5s ease-out !important;
}

@keyframes rippleExpand {
  0%   { width: 0; height: 0; opacity: 0.85; border-width: 2px; }
  60%  { opacity: 0.4; }
  100% { width: 480px; height: 480px; opacity: 0; border-width: 0.5px; }
}

/* Tentacles — stronger shadow for depth, subtle wet sheen, scale with viewport.
   Base fade mask so they read as "emerging from dark water" rather than
   clipping abruptly at the bottom edge. */
.tentacle-svg {
  filter:
    drop-shadow(4px 6px 12px rgba(0, 0, 0, 0.9))
    drop-shadow(0 0 28px rgba(10, 40, 60, 0.5)) !important;
  -webkit-mask-image: linear-gradient(to top, transparent 0%, black 10%, black 95%, transparent 100%);
          mask-image: linear-gradient(to top, transparent 0%, black 10%, black 95%, transparent 100%);
}

.lovecraft-tentacle {
  width: clamp(90px, 10vw, 160px) !important;
}

/* Esmeralda flames — restyle only (keep the original `rise` keyframes from
   styles.css). Linear timing prevents ease-out from bunching streaks at
   the top of their travel. */
.flame-streak {
  width: 2px !important;
  height: 100px !important;
  background: linear-gradient(to top,
    rgba(255, 160, 40, 0.95) 0%,
    rgba(255, 90, 0, 0.85) 30%,
    rgba(255, 50, 0, 0.55) 65%,
    transparent 100%
  ) !important;
  border-radius: 2px !important;
  filter: drop-shadow(0 0 5px rgba(255, 140, 40, 0.55)) drop-shadow(0 0 12px rgba(255, 80, 0, 0.3));
  mix-blend-mode: screen;
  animation-timing-function: linear !important;
}

/* Embers — small glowing dots that drift upward */
.ember {
  position: absolute;
  width: 3px;
  height: 3px;
  background: radial-gradient(circle, rgba(255, 220, 120, 1) 0%, rgba(255, 120, 30, 0.8) 50%, transparent 100%);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(255, 160, 60, 0.9);
  animation: emberDrift 5s linear infinite;
  pointer-events: none;
}

@keyframes emberDrift {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: 1; }
  50%  { transform: translateY(-50vh) translateX(20px); opacity: 0.9; }
  90%  { opacity: 0.4; }
  100% { transform: translateY(-100vh) translateX(-10px); opacity: 0; }
}

/* Tentacles — stronger shadow for depth, subtle wet sheen */
.tentacle-svg {
  filter:
    drop-shadow(4px 6px 12px rgba(0, 0, 0, 0.85))
    drop-shadow(0 0 20px rgba(10, 40, 60, 0.4)) !important;
}

/* ========================================================================
   BLOG ARTICLE — 2.0 treatment for individual posts
   ======================================================================== */

/* Back button — convert to gold-rimmed pill like the footer CTA */
.back-button-container {
  background: rgba(10, 5, 20, 0.55) !important;
  border: 1px solid rgba(245, 198, 106, 0.15);
  border-radius: 999px !important;
  padding: 0.35rem !important;
  backdrop-filter: blur(14px);
}

.back-btn {
  background: transparent !important;
  border: 1px solid rgba(245, 198, 106, 0.4) !important;
  border-radius: 999px !important;
  color: var(--gold) !important;
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.55rem 1.2rem !important;
  transition: all 0.4s cubic-bezier(.2,.8,.2,1);
}

.back-btn:hover {
  background: rgba(245, 198, 106, 0.1) !important;
  border-color: var(--gold) !important;
  color: #fff !important;
  box-shadow: 0 0 24px -6px rgba(245, 198, 106, 0.5);
}

.blog-post-article {
  max-width: 820px !important;
}

/* Meta bar — elevate to gold-rimmed pills on a glass rail */
.post-meta-bar {
  gap: 1rem !important;
  padding: 0.9rem 1.4rem;
  background: rgba(10, 5, 20, 0.4);
  border: 1px solid rgba(245, 198, 106, 0.12);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  width: fit-content;
  margin: 0 auto 3rem !important;
}

.category-badge {
  background: rgba(245, 198, 106, 0.1) !important;
  color: var(--gold) !important;
  border-color: rgba(245, 198, 106, 0.45) !important;
  font-family: 'Cinzel', serif;
  font-size: 0.72rem !important;
  letter-spacing: 0.2em !important;
}

.post-meta-bar .post-date,
.post-meta-bar .read-time {
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #9a88a8 !important;
}

/* Article header — dramatic title with gradient */
.article-title {
  font-size: clamp(2.4rem, 5vw, 4rem) !important;
  background: linear-gradient(135deg, #fff 0%, var(--gold) 45%, var(--arcane) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 28px rgba(245, 198, 106, 0.25));
  letter-spacing: 0.06em !important;
  line-height: 1.15 !important;
}

.article-subtitle {
  font-size: 1.25rem !important;
  color: #d4c3ff !important;
  max-width: 640px;
  margin: 0 auto 2rem !important;
  line-height: 1.55 !important;
}

.article-header::after {
  content: '❦';
  display: block;
  color: var(--gold-soft);
  font-size: 1.1rem;
  opacity: 0.55;
  margin: 1.75rem auto 0;
}

.article-tag {
  background: rgba(184, 166, 255, 0.08);
  color: var(--arcane) !important;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(184, 166, 255, 0.2);
  font-size: 0.75rem !important;
  letter-spacing: 0.06em;
  opacity: 1 !important;
  transition: all 0.3s ease;
}

.article-tag:hover {
  background: rgba(245, 198, 106, 0.1);
  border-color: rgba(245, 198, 106, 0.45);
  color: var(--gold) !important;
}

/* Article body — parchment-glass card */
.article-content {
  background: linear-gradient(180deg, rgba(26, 0, 51, 0.55) 0%, rgba(10, 5, 20, 0.7) 100%) !important;
  border: 1px solid rgba(245, 198, 106, 0.12) !important;
  border-radius: 20px !important;
  box-shadow:
    0 30px 80px -20px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(184, 166, 255, 0.05),
    inset 0 0 40px rgba(157, 78, 221, 0.04);
  padding: 3.5rem !important;
  color: #e8dccf !important;
  line-height: 1.85 !important;
}

.article-content h1,
.article-content h2,
.article-content h3 {
  color: transparent !important;
  background: linear-gradient(135deg, #fff 0%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.04em !important;
  position: relative;
}

.article-content h2::before,
.article-content h3::before {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
  margin-bottom: 1rem;
  opacity: 0.7;
}

.article-content strong {
  color: var(--gold) !important;
  font-weight: 600;
}

.article-content em {
  color: var(--arcane) !important;
}

.article-content code {
  background: rgba(0, 0, 0, 0.45) !important;
  color: var(--gold) !important;
  border: 1px solid rgba(245, 198, 106, 0.15);
  border-radius: 6px;
}

.article-content pre {
  background: rgba(0, 0, 0, 0.7) !important;
  border: 1px solid rgba(245, 198, 106, 0.15) !important;
  border-radius: 10px !important;
}

.article-content blockquote {
  border-left: 3px solid var(--gold) !important;
  background: rgba(245, 198, 106, 0.04);
  padding: 1.25rem 1.75rem !important;
  border-radius: 0 10px 10px 0;
  color: #d4c3ff !important;
  position: relative;
}

.article-content blockquote::before {
  content: '❝';
  position: absolute;
  top: -0.5rem;
  left: 0.5rem;
  font-size: 3rem;
  color: var(--gold);
  opacity: 0.25;
  line-height: 1;
  font-family: 'Cinzel', serif;
}

.article-content a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(245, 198, 106, 0.35);
  transition: all 0.3s ease;
}

.article-content a:hover {
  border-bottom-color: var(--gold);
  background: rgba(245, 198, 106, 0.08);
}

/* Share section */
.share-section {
  border-top: 1px solid rgba(245, 198, 106, 0.15) !important;
  padding-top: 2.5rem !important;
}

.share-title {
  color: var(--gold) !important;
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 1.5rem !important;
}

.share-btn {
  background: rgba(10, 5, 20, 0.5) !important;
  border: 1px solid rgba(245, 198, 106, 0.25) !important;
  border-radius: 999px !important;
  color: #d4c3ff !important;
  padding: 0.6rem 1.4rem !important;
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: all 0.35s cubic-bezier(.2,.8,.2,1);
}

.share-btn:hover {
  background: rgba(245, 198, 106, 0.1) !important;
  border-color: var(--gold) !important;
  color: var(--gold) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -6px rgba(245, 198, 106, 0.4);
}

/* Post navigation */
.post-navigation .nav-link {
  background: linear-gradient(180deg, rgba(26, 0, 51, 0.5) 0%, rgba(10, 5, 20, 0.6) 100%) !important;
  border: 1px solid rgba(157, 78, 221, 0.2) !important;
  border-radius: 14px !important;
  transition: all 0.5s cubic-bezier(.2,.8,.2,1);
}

.post-navigation .nav-link:hover {
  border-color: rgba(245, 198, 106, 0.5) !important;
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -12px rgba(157, 78, 221, 0.45), 0 0 0 1px rgba(245, 198, 106, 0.12) !important;
}

.nav-direction {
  color: var(--gold) !important;
  font-family: 'Cinzel', serif;
  font-size: 0.72rem !important;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.nav-title {
  color: #e8dccf !important;
  font-family: 'Cinzel', serif;
  letter-spacing: 0.04em;
}

/* Related posts */
.related-title {
  background: linear-gradient(135deg, #fff 0%, var(--gold) 45%, var(--arcane) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
  filter: drop-shadow(0 0 20px rgba(245, 198, 106, 0.25));
  font-size: 2.2rem !important;
}

.related-card {
  background: linear-gradient(180deg, rgba(26, 0, 51, 0.5) 0%, rgba(10, 5, 20, 0.65) 100%) !important;
  border: 1px solid rgba(157, 78, 221, 0.2) !important;
  border-radius: 14px !important;
  transition: all 0.5s cubic-bezier(.2,.8,.2,1);
  position: relative;
  overflow: hidden;
}

.related-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.related-card:hover {
  border-color: rgba(245, 198, 106, 0.45) !important;
  transform: translateY(-6px);
  box-shadow: 0 20px 50px -15px rgba(157, 78, 221, 0.4), 0 0 0 1px rgba(245, 198, 106, 0.12) !important;
}

.related-card:hover::before { opacity: 1; }

.related-category {
  color: var(--gold) !important;
  font-family: 'Cinzel', serif;
  font-size: 0.72rem !important;
  letter-spacing: 0.2em;
}

.related-card-title {
  font-family: 'Cinzel', serif;
  background: linear-gradient(135deg, #fff 0%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
  letter-spacing: 0.04em;
}

.related-preview {
  color: #c9b6d9 !important;
}

/* Blog footer — match index */
.blog-footer {
  border-top: none !important;
  position: relative;
}

.blog-footer::before {
  content: '❦';
  display: block;
  color: var(--gold-soft);
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
  opacity: 0.6;
}

.blog-footer a {
  color: var(--gold) !important;
  padding: 0.5rem 1.2rem;
  border: 1px solid rgba(245, 198, 106, 0.4);
  border-radius: 999px;
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: inline-block;
  transition: all 0.3s ease;
}

.blog-footer a:hover {
  background: rgba(245, 198, 106, 0.1);
  border-color: var(--gold);
  box-shadow: 0 0 24px -6px rgba(245, 198, 106, 0.5);
}

@media (max-width: 768px) {
  .article-content { padding: 2rem !important; }
  .post-meta-bar { flex-wrap: wrap; justify-content: center; }
  .post-navigation { grid-template-columns: 1fr !important; }
}