/* ==========================================================================
   STEVE PEREIRA WEBSITE - MULTI-THEME DESIGN SYSTEM (THEMES.CSS)
   ========================================================================== */

/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800;900&family=Cinzel:wght@600;700;800;900&family=JetBrains+Mono:wght@400;600;700&display=swap');

/* ==========================================================================
   8 BOLD & DISTINCT THEME DEFINITIONS
   ========================================================================== */

/* 1. EDITORIAL STUDIO LIGHT (User Favorite: Crisp Day Gallery) */
[data-theme="editorial-light"] {
  --bg-main: #f8fafc;
  --bg-nav: rgba(255, 255, 255, 0.92);
  --bg-card: rgba(255, 255, 255, 0.78);
  --border-card: rgba(15, 23, 42, 0.12);
  --text-main: #0f172a;
  --text-muted: #334155;
  --accent-gold: #d97706;
  --accent-spotlight: #eab308;
  --accent-rose: #be123c;
  --accent-emerald: #059669;
  --accent-glow: rgba(217, 119, 6, 0.3);
  --font-heading: 'Cinzel', serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
  --bg-overlay: linear-gradient(to bottom, rgba(248, 250, 252, 0.35), rgba(248, 250, 252, 0.60));
}

/* 2. WARM LINEN & TERRACOTTA (Vogue Luxury / Sand Beige) */
[data-theme="warm-linen"] {
  --bg-main: #f5ede0;
  --bg-nav: rgba(245, 237, 224, 0.94);
  --bg-card: rgba(254, 250, 243, 0.78);
  --border-card: rgba(194, 65, 12, 0.2);
  --text-main: #271810;
  --text-muted: #573a2e;
  --accent-gold: #c2410c;
  --accent-spotlight: #d97706;
  --accent-rose: #9f1239;
  --accent-emerald: #15803d;
  --accent-glow: rgba(194, 65, 12, 0.35);
  --font-heading: 'Cinzel', serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
  --bg-overlay: linear-gradient(to bottom, rgba(245, 237, 224, 0.35), rgba(245, 237, 224, 0.60));
}

/* 3. NORDIC GLACIER & ARCTIC TEAL (Ice Blue / Crisp Modern) */
[data-theme="nordic-frost"] {
  --bg-main: #eef6fb;
  --bg-nav: rgba(238, 246, 251, 0.94);
  --bg-card: rgba(255, 255, 255, 0.78);
  --border-card: rgba(2, 132, 199, 0.22);
  --text-main: #082f49;
  --text-muted: #1e4f73;
  --accent-gold: #0284c7;
  --accent-spotlight: #0ea5e9;
  --accent-rose: #e11d48;
  --accent-emerald: #0d9488;
  --accent-glow: rgba(2, 132, 199, 0.35);
  --font-heading: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
  --bg-overlay: linear-gradient(to bottom, rgba(238, 246, 251, 0.35), rgba(238, 246, 251, 0.62));
}

/* 4. MIAMI NEON SUNSET (Synthwave / Electric Magenta & Cyan) */
[data-theme="neon-sunset"] {
  --bg-main: #0d041c;
  --bg-nav: rgba(13, 4, 28, 0.82);
  --bg-card: rgba(28, 10, 56, 0.52);
  --border-card: rgba(244, 63, 94, 0.45);
  --text-main: #ffffff;
  --text-muted: #fed7aa;
  --accent-gold: #f97316;
  --accent-spotlight: #f43f5e;
  --accent-rose: #ec4899;
  --accent-emerald: #06b6d4;
  --accent-glow: rgba(244, 63, 94, 0.55);
  --font-heading: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
  --bg-overlay: linear-gradient(to bottom, rgba(13, 4, 28, 0.25), rgba(13, 4, 28, 0.55));
}

/* 5. OXFORD ROYAL NAVY & CHAMPAGNE GOLD (Executive Prestige) */
[data-theme="royal-navy"] {
  --bg-main: #071426;
  --bg-nav: rgba(7, 20, 38, 0.85);
  --bg-card: rgba(15, 32, 58, 0.55);
  --border-card: rgba(251, 191, 36, 0.35);
  --text-main: #ffffff;
  --text-muted: #cbd5e1;
  --accent-gold: #fbbf24;
  --accent-spotlight: #f59e0b;
  --accent-rose: #f43f5e;
  --accent-emerald: #38bdf8;
  --accent-glow: rgba(251, 191, 36, 0.45);
  --font-heading: 'Cinzel', serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
  --bg-overlay: linear-gradient(to bottom, rgba(7, 20, 38, 0.25), rgba(7, 20, 38, 0.55));
}

/* 6. CYBER MATRIX EMERALD (Pitch Black & Electric Matrix Lime) */
[data-theme="emerald-matrix"] {
  --bg-main: #010d06;
  --bg-nav: rgba(1, 13, 6, 0.85);
  --bg-card: rgba(2, 28, 14, 0.58);
  --border-card: rgba(0, 255, 102, 0.4);
  --text-main: #ffffff;
  --text-muted: #a7f3d0;
  --accent-gold: #00ff66;
  --accent-spotlight: #10b981;
  --accent-rose: #f43f5e;
  --accent-emerald: #4ade80;
  --accent-glow: rgba(0, 255, 102, 0.5);
  --font-heading: 'JetBrains Mono', monospace;
  --font-body: 'Plus Jakarta Sans', sans-serif;
  --bg-overlay: linear-gradient(to bottom, rgba(1, 13, 6, 0.25), rgba(1, 13, 6, 0.55));
}

/* 7. HOLLYWOOD CRIMSON VELVET (Dramatic Theatre & Ruby Embers) */
[data-theme="crimson-stage"] {
  --bg-main: #1c0409;
  --bg-nav: rgba(28, 4, 9, 0.85);
  --bg-card: rgba(45, 8, 16, 0.58);
  --border-card: rgba(225, 29, 72, 0.45);
  --text-main: #ffffff;
  --text-muted: #fecdd3;
  --accent-gold: #f43f5e;
  --accent-spotlight: #fbbf24;
  --accent-rose: #e11d48;
  --accent-emerald: #10b981;
  --accent-glow: rgba(225, 29, 72, 0.55);
  --font-heading: 'Cinzel', serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
  --bg-overlay: linear-gradient(to bottom, rgba(28, 4, 9, 0.25), rgba(28, 4, 9, 0.55));
}

/* 8. PURE CINEMA NOIR (Signature Obsidian & Amber Gold - Default) */
:root, [data-theme="noir"] {
  --bg-main: #030712;
  --bg-nav: rgba(3, 7, 18, 0.72);
  --bg-card: rgba(10, 15, 28, 0.48);
  --border-card: rgba(255, 255, 255, 0.18);
  --text-main: #ffffff;
  --text-muted: #cbd5e1;
  --accent-gold: #f59e0b;
  --accent-spotlight: #ffcc00;
  --accent-rose: #e11d48;
  --accent-emerald: #10b981;
  --accent-glow: rgba(245, 158, 11, 0.35);
  --font-heading: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
  --font-serif: 'Cinzel', serif;
  --font-code: 'JetBrains Mono', monospace;
  --bg-overlay: linear-gradient(to bottom, rgba(3, 7, 18, 0.18), rgba(3, 7, 18, 0.45));
}

/* ==========================================================================
   LIGHT MODE CONTRAST & TYPOGRAPHY OVERRIDES
   ========================================================================== */
[data-theme="editorial-light"] .glass-card,
[data-theme="warm-linen"] .glass-card,
[data-theme="nordic-frost"] .glass-card {
  background: var(--bg-card) !important;
  border-color: var(--border-card) !important;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.08) !important;
}

[data-theme="editorial-light"] .text-white,
[data-theme="warm-linen"] .text-white,
[data-theme="nordic-frost"] .text-white {
  color: var(--text-main) !important;
}

[data-theme="editorial-light"] .text-slate-200,
[data-theme="editorial-light"] .text-slate-300,
[data-theme="editorial-light"] .text-slate-400,
[data-theme="warm-linen"] .text-slate-200,
[data-theme="warm-linen"] .text-slate-300,
[data-theme="warm-linen"] .text-slate-400,
[data-theme="nordic-frost"] .text-slate-200,
[data-theme="nordic-frost"] .text-slate-300,
[data-theme="nordic-frost"] .text-slate-400 {
  color: var(--text-muted) !important;
}

[data-theme="editorial-light"] p, [data-theme="editorial-light"] h1, [data-theme="editorial-light"] h2, [data-theme="editorial-light"] h3, [data-theme="editorial-light"] h4, [data-theme="editorial-light"] span,
[data-theme="warm-linen"] p, [data-theme="warm-linen"] h1, [data-theme="warm-linen"] h2, [data-theme="warm-linen"] h3, [data-theme="warm-linen"] h4, [data-theme="warm-linen"] span,
[data-theme="nordic-frost"] p, [data-theme="nordic-frost"] h1, [data-theme="nordic-frost"] h2, [data-theme="nordic-frost"] h3, [data-theme="nordic-frost"] h4, [data-theme="nordic-frost"] span {
  text-shadow: none !important;
}

[data-theme="editorial-light"] .nav-btn,
[data-theme="warm-linen"] .nav-btn,
[data-theme="nordic-frost"] .nav-btn {
  background: var(--bg-card) !important;
  border-color: var(--border-card) !important;
  color: var(--text-main) !important;
}

[data-theme="editorial-light"] .nav-btn.active,
[data-theme="warm-linen"] .nav-btn.active,
[data-theme="nordic-frost"] .nav-btn.active {
  border-color: var(--accent-gold) !important;
  background: rgba(217, 119, 6, 0.12) !important;
  color: var(--accent-gold) !important;
}

/* Base Styles */
body {
  background-color: var(--bg-main);
  color: var(--text-main);
  font-family: var(--font-body);
  transition: background-color 0.4s ease, color 0.4s ease;
}

.font-cinzel {
  font-family: var(--font-serif);
}

.font-mono-code {
  font-family: var(--font-code);
}

/* Dynamic Photographic Background Layer with Infinite Repeating Seamless Tiles */
.bw-dynamic-bg {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background-size: var(--bg-scale, 680px auto);
  background-position: center top;
  background-repeat: repeat;
  filter: contrast(var(--bg-contrast, 100%)) brightness(var(--bg-brightness, 0.95));
  will-change: background-position;
  pointer-events: none;
  transition: background-image 0.4s ease-in-out, filter 0.2s ease, opacity 0.3s ease;
}

.bg-color-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  transition: background 0.4s ease, opacity 0.3s ease;
}

/* Glassmorphic Card Transparency Controller */
:root {
  --glass-opacity: 0.48;
  --bg-brightness: 0.95;
  --bg-contrast: 100%;
  --bg-overlay-opacity: 0.30;
}

/* High Translucency See-Through Glassmorphism Cards */
.glass-card {
  background: rgba(10, 15, 28, var(--glass-opacity));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border-card);
  box-shadow: 0 12px 40px -10px rgba(0, 0, 0, 0.6);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

/* Hero Portrait Photo Positioning (Head Framed Higher Up) */
.hero-portrait-img {
  object-fit: cover;
  object-position: center 8%;
}

/* === METALLIC PIN SVG ICON WRAPPERS (self-contained SVG files) === */
.social-pin-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 0;
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  flex-shrink: 0 !important;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.social-pin-btn img {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  display: block !important;
  object-fit: contain;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.3s ease;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.65));
}

.social-pin-btn:hover img {
  transform: translateY(-5px) scale(1.22);
}

.social-pin-btn.instagram:hover img {
  filter: drop-shadow(0 0 16px rgba(228,64,95,1)) drop-shadow(0 6px 12px rgba(0,0,0,0.6));
}
.social-pin-btn.twitter:hover img {
  filter: drop-shadow(0 0 16px rgba(29,161,242,1)) drop-shadow(0 6px 12px rgba(0,0,0,0.6));
}
.social-pin-btn.facebook:hover img {
  filter: drop-shadow(0 0 16px rgba(24,119,242,1)) drop-shadow(0 6px 12px rgba(0,0,0,0.6));
}
.social-pin-btn.spotlight:hover img {
  filter: drop-shadow(0 0 16px rgba(245,158,11,1)) drop-shadow(0 6px 12px rgba(0,0,0,0.6));
}

/* === AUTHENTIC PHOENIX EMBLEM RADIANT GOLDEN GLOW ON HOVER ONLY === */
.phoenix-gold-glow {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
  transition: filter 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.group:hover .phoenix-gold-glow,
.nav-btn:hover .phoenix-gold-glow,
.phoenix-gold-glow:hover {
  filter: drop-shadow(0 0 10px rgba(245, 158, 11, 1)) drop-shadow(0 0 20px rgba(251, 191, 36, 0.85)) drop-shadow(0 0 30px rgba(245, 158, 11, 0.55));
}

.nav-btn .phoenix-nav-icon {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}

/* === NAV BUTTON DOUBLE-LINE SIZING & VIVID GLOW HOVER === */
.nav-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.45rem 0.75rem !important;
  border-radius: 0.75rem !important;
  font-size: 0.70rem !important;
  line-height: 1.18 !important;
  font-weight: 800 !important;
  white-space: normal !important;
  text-align: left !important;
  position: relative !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  background: rgba(15, 23, 42, 0.70) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  color: #cbd5e1 !important;
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.nav-btn span {
  display: inline-block !important;
  line-height: 1.18 !important;
  text-align: left !important;
}

.nav-btn i[data-lucide],
.nav-btn svg {
  width: 1.25rem !important;
  height: 1.25rem !important;
  flex-shrink: 0 !important;
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.25s ease !important;
}

/* Active State */
.nav-btn.active,
.nav-btn[data-active="true"] {
  border-color: #f59e0b !important;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.24) 0%, rgba(225, 29, 72, 0.18) 100%) !important;
  color: #fbbf24 !important;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.4), 0 3px 10px rgba(0,0,0,0.5), inset 0 1px 2px rgba(255, 255, 255, 0.2) !important;
}

.nav-btn.active i[data-lucide],
.nav-btn.active svg {
  filter: drop-shadow(0 0 8px #f59e0b) !important;
}

/* Vivid, High-Contrast Glow Hover State */
.nav-btn:hover {
  transform: translateY(-2.5px) scale(1.03) !important;
  border-color: #f59e0b !important;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.38) 0%, rgba(99, 102, 241, 0.38) 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 0 22px rgba(245, 158, 11, 0.65), 0 8px 24px rgba(0, 0, 0, 0.7), inset 0 1px 2px rgba(255, 255, 255, 0.4) !important;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}

.nav-btn:hover i[data-lucide],
.nav-btn:hover svg {
  transform: scale(1.22) rotate(-4deg) !important;
  filter: drop-shadow(0 0 12px #f59e0b) drop-shadow(0 0 18px currentColor) !important;
}

.nav-btn:active {
  transform: translateY(0px) scale(0.98) !important;
}

/* ==========================================================================
   SSB PILL ("Steve's Spotlight Badge" / SSB Pill)
   Reusable Spotlight Badge Component with Menu-Grade Vivid Glow Hover
   ========================================================================== */
.ssb-pill {
  display: inline-flex !important;
  align-items: center;
  gap: 0.625rem;
  background: rgba(0, 0, 0, 0.65) !important;
  border: 1px solid rgba(245, 158, 11, 0.65) !important;
  color: #ffffff !important;
  border-radius: 0.75rem !important;
  text-decoration: none !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.15) !important;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  cursor: pointer;
}

.ssb-pill:hover {
  transform: translateY(-2.5px) scale(1.03) !important;
  border-color: #f59e0b !important;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.4) 0%, rgba(99, 102, 241, 0.4) 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 0 24px rgba(245, 158, 11, 0.75), 0 8px 24px rgba(0, 0, 0, 0.7), inset 0 1px 2px rgba(255, 255, 255, 0.4) !important;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}

.ssb-pill:hover img {
  transform: scale(1.08);
  filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.85)) !important;
}

.ssb-pill:hover i[data-lucide],
.ssb-pill:hover svg {
  transform: scale(1.2) rotate(-4deg) !important;
  filter: drop-shadow(0 0 12px #f59e0b) !important;
}

.ssb-pill:active {
  transform: translateY(0px) scale(0.98) !important;
}

/* Legacy .social-icon-btn fallback (for any remaining uses) */
.social-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #090a0f;
  border: 2px solid #7c8594;
  color: #ffffff;
  box-shadow: 0 3px 8px rgba(0,0,0,0.6), inset 0 1px 2px rgba(255,255,255,0.3);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  overflow: hidden;
  position: relative;
}
.social-icon-btn:hover {
  transform: translateY(-4px) scale(1.15);
  border-color: #ffffff;
}
.social-icon-btn.imdb { color: #f5c518; }
.social-icon-btn.imdb:hover {
  box-shadow: 0 0 18px rgba(245,197,24,0.75), inset 0 1px 2px rgba(255,255,255,0.3);
}

/* 3D Spin Out & Spread Headshot Deck on Hover */
.deck-container {
  perspective: 1000px;
}

.deck-card {
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  transform-origin: center bottom;
}

.deck-container:hover .deck-card-0 {
  transform: translateX(-240px) rotate(-14deg) scale(1.05) !important;
  z-index: 30 !important;
}
.deck-container:hover .deck-card-1 {
  transform: translateX(-120px) rotate(-7deg) scale(1.05) !important;
  z-index: 31 !important;
}
.deck-container:hover .deck-card-2 {
  transform: translateX(0px) rotate(0deg) scale(1.1) !important;
  z-index: 35 !important;
}
.deck-container:hover .deck-card-3 {
  transform: translateX(120px) rotate(7deg) scale(1.05) !important;
  z-index: 31 !important;
}
.deck-container:hover .deck-card-4 {
  transform: translateX(240px) rotate(14deg) scale(1.05) !important;
  z-index: 30 !important;
}

.deck-card:hover {
  transform: translateY(-20px) scale(1.18) rotate(0deg) !important;
  z-index: 50 !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8), 0 0 20px var(--accent-glow) !important;
}

/* Text Sharpness & Legibility for See-Through Cards */
p, h1, h2, h3, h4, span, td, th {
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

/* Spotlight Glow Button */
.btn-spotlight {
  background: var(--accent-spotlight);
  color: #111111;
  font-weight: 800;
  box-shadow: 0 0 20px var(--accent-glow);
  transition: all 0.25s ease;
  text-shadow: none;
}

.btn-spotlight:hover {
  transform: translateY(-2px);
  filter: brightness(1.15);
  box-shadow: 0 0 30px var(--accent-glow);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-main);
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent-gold);
}

/* Print Styles for CV */
@media print {
  body {
    background: #ffffff !important;
    color: #000000 !important;
  }
  header, footer, .no-print, nav, #globalBgLayer, #globalBgOverlay {
    display: none !important;
  }
  .print-only {
    display: block !important;
  }
}

/* =========================================================
   PREMIUM ADMIN INPUTS & FORM STYLING
   ========================================================= */
.admin-input,
.admin-textarea,
.admin-select {
  width: 100%;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid rgba(148, 163, 184, 0.22);
  border-radius: 0.85rem;
  padding: 0.65rem 1rem;
  color: #f8fafc;
  font-size: 0.8125rem;
  line-height: 1.35;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35);
}

.admin-input::placeholder,
.admin-textarea::placeholder {
  color: #64748b;
}

.admin-input:hover,
.admin-textarea:hover,
.admin-select:hover {
  border-color: rgba(245, 158, 11, 0.45);
  background: rgba(15, 23, 42, 0.95);
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.12), inset 0 2px 4px rgba(0, 0, 0, 0.35);
}

.admin-input:focus,
.admin-textarea:focus,
.admin-select:focus {
  outline: none;
  border-color: #f59e0b;
  background: rgba(10, 15, 30, 0.98);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25), 0 0 20px rgba(245, 158, 11, 0.2);
  color: #ffffff;
}

/* =========================================================
   SITE-WIDE HOVER & MICRO-INTERACTION REFINEMENTS
   ========================================================= */
/* Credits & Filmography hover */
.credit-row, 
#castingWorksGrid > div,
#adminCreditsTableBody tr {
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#castingWorksGrid > div:hover {
  transform: translateY(-4px) scale(1.015);
  border-color: rgba(245, 158, 11, 0.6) !important;
  box-shadow: 0 12px 28px -5px rgba(0, 0, 0, 0.75), 0 0 20px rgba(245, 158, 11, 0.25);
}

/* Timeline Cards Hover */
#aboutTimelineGrid > div .glass-card,
#itTimelineContainer > div .glass-card {
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#aboutTimelineGrid > div .glass-card:hover,
#itTimelineContainer > div .glass-card:hover {
  transform: translateY(-4px) scale(1.02);
  border-color: rgba(245, 158, 11, 0.7) !important;
  box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.8), 0 0 24px rgba(245, 158, 11, 0.3) !important;
  background: rgba(15, 23, 42, 0.85);
}

#aboutTimelineGrid > div:hover .rounded-full,
#itTimelineContainer > div:hover .rounded-full {
  transform: scale(1.22);
  border-color: #f59e0b !important;
  box-shadow: 0 0 18px rgba(245, 158, 11, 0.65);
}

/* General Interactive Glass Cards Hover */
.glass-card-interactive {
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.glass-card-interactive:hover {
  transform: translateY(-3px);
  border-color: rgba(245, 158, 11, 0.5);
  box-shadow: 0 14px 32px -6px rgba(0, 0, 0, 0.7), 0 0 16px rgba(245, 158, 11, 0.18);
}

/* ==========================================================================
   BRIEF CASTING SHEET BUTTON — LUXURY BESPOKE HERO STYLING & SHIMMER HOVER
   ========================================================================== */
.brief-casting-btn {
  position: relative;
  display: block;
  width: 100%;
  border-radius: 14px;
  padding: 1.5px;
  background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 35%, #d97706 70%, #fef08a 100%);
  background-size: 250% 250%;
  animation: gradientShift 6s ease infinite;
  box-shadow: 0 4px 20px -2px rgba(245, 158, 11, 0.25), 0 0 12px rgba(217, 119, 6, 0.15);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.brief-casting-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 32px -4px rgba(245, 158, 11, 0.5), 0 0 28px rgba(251, 191, 36, 0.4);
}

.brief-casting-btn:active {
  transform: translateY(0.5px) scale(0.985);
}

.brief-casting-btn-inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 12.5px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.96) 0%, rgba(8, 12, 22, 0.98) 100%);
  padding: 7px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.brief-casting-btn:hover .brief-casting-btn-inner {
  background: linear-gradient(180deg, rgba(24, 34, 58, 0.92) 0%, rgba(12, 18, 34, 0.96) 100%);
}

.brief-casting-btn-shine {
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), rgba(251, 191, 36, 0.28), transparent);
  transform: skewX(-25deg);
  transition: none;
  pointer-events: none;
}

.brief-casting-btn:hover .brief-casting-btn-shine {
  left: 200%;
  transition: left 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   FULL CASTING SHEET BUTTON — LUXURY EMERALD / TEAL HERO STYLING & SHIMMER HOVER
   ========================================================================== */
.full-casting-btn {
  position: relative;
  display: block;
  width: 100%;
  border-radius: 14px;
  padding: 1.5px;
  background: linear-gradient(135deg, #10b981 0%, #06b6d4 35%, #059669 70%, #6ee7b7 100%);
  background-size: 250% 250%;
  animation: gradientShift 6s ease infinite;
  box-shadow: 0 4px 20px -2px rgba(16, 185, 129, 0.25), 0 0 12px rgba(5, 150, 105, 0.15);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
}

.full-casting-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 32px -4px rgba(16, 185, 129, 0.5), 0 0 28px rgba(6, 182, 212, 0.4);
}

.full-casting-btn:active {
  transform: translateY(0.5px) scale(0.985);
}

.full-casting-btn-inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 12.5px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.96) 0%, rgba(8, 12, 22, 0.98) 100%);
  padding: 7px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.full-casting-btn:hover .full-casting-btn-inner {
  background: linear-gradient(180deg, rgba(16, 38, 48, 0.92) 0%, rgba(8, 22, 28, 0.96) 100%);
}

.full-casting-btn-shine {
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), rgba(110, 231, 183, 0.3), transparent);
  transform: skewX(-25deg);
  transition: none;
  pointer-events: none;
}

.full-casting-btn:hover .full-casting-btn-shine {
  left: 200%;
  transition: left 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Enterprise Backup — Password Hide/Reveal Toggle */
.backup-pw-hidden {
  color: transparent !important;
  text-shadow: 0 0 6px rgba(251, 191, 36, 0.5);
  user-select: none;
}
.backup-pw-hidden:hover {
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.7);
}

/* ==========================================================================
   ABOUT TIMELINE MULTI-COLOR PALETTES & CONTRASTING TAGS
   ========================================================================== */

/* 1. Amber / Gold Box */
.timeline-card-amber {
  background: linear-gradient(135deg, rgba(120, 53, 15, 0.28) 0%, rgba(15, 23, 42, 0.95) 50%, rgba(2, 6, 23, 0.98) 100%);
  border-color: rgba(245, 158, 11, 0.45) !important;
  box-shadow: 0 10px 30px -5px rgba(245, 158, 11, 0.15);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.timeline-card-amber:hover,
.group:hover .timeline-card-amber {
  background: linear-gradient(135deg, rgba(120, 53, 15, 0.42) 0%, rgba(24, 17, 34, 0.96) 50%, rgba(2, 6, 23, 0.98) 100%) !important;
  border-color: #fbbf24 !important;
  box-shadow: 0 16px 45px -5px rgba(245, 158, 11, 0.45), 0 0 25px rgba(245, 158, 11, 0.25), inset 0 0 20px rgba(245, 158, 11, 0.15) !important;
  transform: translateY(-4px) scale(1.01);
}
.timeline-tag-amber {
  background: rgba(244, 63, 94, 0.18);
  color: #fda4af !important;
  border: 1px solid rgba(244, 63, 94, 0.45);
}

/* 2. Emerald / Forest Box */
.timeline-card-emerald {
  background: linear-gradient(135deg, rgba(6, 78, 59, 0.28) 0%, rgba(15, 23, 42, 0.95) 50%, rgba(2, 6, 23, 0.98) 100%);
  border-color: rgba(16, 185, 129, 0.45) !important;
  box-shadow: 0 10px 30px -5px rgba(16, 185, 129, 0.15);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.timeline-card-emerald:hover,
.group:hover .timeline-card-emerald {
  background: linear-gradient(135deg, rgba(6, 78, 59, 0.42) 0%, rgba(15, 28, 38, 0.96) 50%, rgba(2, 6, 23, 0.98) 100%) !important;
  border-color: #34d399 !important;
  box-shadow: 0 16px 45px -5px rgba(16, 185, 129, 0.45), 0 0 25px rgba(16, 185, 129, 0.25), inset 0 0 20px rgba(16, 185, 129, 0.15) !important;
  transform: translateY(-4px) scale(1.01);
}
.timeline-tag-emerald {
  background: rgba(245, 158, 11, 0.18);
  color: #fde68a !important;
  border: 1px solid rgba(245, 158, 11, 0.45);
}

/* 3. Indigo / Royal Blue Box */
.timeline-card-indigo {
  background: linear-gradient(135deg, rgba(49, 46, 129, 0.28) 0%, rgba(15, 23, 42, 0.95) 50%, rgba(2, 6, 23, 0.98) 100%);
  border-color: rgba(99, 102, 241, 0.45) !important;
  box-shadow: 0 10px 30px -5px rgba(99, 102, 241, 0.15);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.timeline-card-indigo:hover,
.group:hover .timeline-card-indigo {
  background: linear-gradient(135deg, rgba(49, 46, 129, 0.42) 0%, rgba(20, 24, 48, 0.96) 50%, rgba(2, 6, 23, 0.98) 100%) !important;
  border-color: #818cf8 !important;
  box-shadow: 0 16px 45px -5px rgba(99, 102, 241, 0.45), 0 0 25px rgba(99, 102, 241, 0.25), inset 0 0 20px rgba(99, 102, 241, 0.15) !important;
  transform: translateY(-4px) scale(1.01);
}
.timeline-tag-indigo {
  background: rgba(16, 185, 129, 0.18);
  color: #a7f3d0 !important;
  border: 1px solid rgba(16, 185, 129, 0.45);
}

/* 4. Rose / Ruby Box */
.timeline-card-rose {
  background: linear-gradient(135deg, rgba(136, 19, 55, 0.28) 0%, rgba(15, 23, 42, 0.95) 50%, rgba(2, 6, 23, 0.98) 100%);
  border-color: rgba(244, 63, 94, 0.45) !important;
  box-shadow: 0 10px 30px -5px rgba(244, 63, 94, 0.15);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.timeline-card-rose:hover,
.group:hover .timeline-card-rose {
  background: linear-gradient(135deg, rgba(136, 19, 55, 0.42) 0%, rgba(32, 17, 30, 0.96) 50%, rgba(2, 6, 23, 0.98) 100%) !important;
  border-color: #fb7185 !important;
  box-shadow: 0 16px 45px -5px rgba(244, 63, 94, 0.45), 0 0 25px rgba(244, 63, 94, 0.25), inset 0 0 20px rgba(244, 63, 94, 0.15) !important;
  transform: translateY(-4px) scale(1.01);
}
.timeline-tag-rose {
  background: rgba(6, 182, 212, 0.18);
  color: #a5f3fc !important;
  border: 1px solid rgba(6, 182, 212, 0.45);
}

/* 5. Cyan / Sky Box */
.timeline-card-cyan {
  background: linear-gradient(135deg, rgba(22, 78, 99, 0.28) 0%, rgba(15, 23, 42, 0.95) 50%, rgba(2, 6, 23, 0.98) 100%);
  border-color: rgba(6, 182, 212, 0.45) !important;
  box-shadow: 0 10px 30px -5px rgba(6, 182, 212, 0.15);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.timeline-card-cyan:hover,
.group:hover .timeline-card-cyan {
  background: linear-gradient(135deg, rgba(22, 78, 99, 0.42) 0%, rgba(15, 28, 42, 0.96) 50%, rgba(2, 6, 23, 0.98) 100%) !important;
  border-color: #22d3ee !important;
  box-shadow: 0 16px 45px -5px rgba(6, 182, 212, 0.45), 0 0 25px rgba(6, 182, 212, 0.25), inset 0 0 20px rgba(6, 182, 212, 0.15) !important;
  transform: translateY(-4px) scale(1.01);
}
.timeline-tag-cyan {
  background: rgba(168, 85, 247, 0.18);
  color: #e9d5ff !important;
  border: 1px solid rgba(168, 85, 247, 0.45);
}

/* 6. Purple / Violet Box */
.timeline-card-purple {
  background: linear-gradient(135deg, rgba(88, 28, 135, 0.28) 0%, rgba(15, 23, 42, 0.95) 50%, rgba(2, 6, 23, 0.98) 100%);
  border-color: rgba(168, 85, 247, 0.45) !important;
  box-shadow: 0 10px 30px -5px rgba(168, 85, 247, 0.15);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.timeline-card-purple:hover,
.group:hover .timeline-card-purple {
  background: linear-gradient(135deg, rgba(88, 28, 135, 0.42) 0%, rgba(25, 18, 44, 0.96) 50%, rgba(2, 6, 23, 0.98) 100%) !important;
  border-color: #c084fc !important;
  box-shadow: 0 16px 45px -5px rgba(168, 85, 247, 0.45), 0 0 25px rgba(168, 85, 247, 0.25), inset 0 0 20px rgba(168, 85, 247, 0.15) !important;
  transform: translateY(-4px) scale(1.01);
}
.timeline-tag-purple {
  background: rgba(245, 158, 11, 0.18);
  color: #fde68a !important;
  border: 1px solid rgba(245, 158, 11, 0.45);
}

/* 7. Orange / Coral Box */
.timeline-card-orange {
  background: linear-gradient(135deg, rgba(124, 45, 18, 0.28) 0%, rgba(15, 23, 42, 0.95) 50%, rgba(2, 6, 23, 0.98) 100%);
  border-color: rgba(249, 115, 22, 0.45) !important;
  box-shadow: 0 10px 30px -5px rgba(249, 115, 22, 0.15);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.timeline-card-orange:hover,
.group:hover .timeline-card-orange {
  background: linear-gradient(135deg, rgba(124, 45, 18, 0.42) 0%, rgba(30, 18, 30, 0.96) 50%, rgba(2, 6, 23, 0.98) 100%) !important;
  border-color: #fb923c !important;
  box-shadow: 0 16px 45px -5px rgba(249, 115, 22, 0.45), 0 0 25px rgba(249, 115, 22, 0.25), inset 0 0 20px rgba(249, 115, 22, 0.15) !important;
  transform: translateY(-4px) scale(1.01);
}
.timeline-tag-orange {
  background: rgba(99, 102, 241, 0.18);
  color: #c7d2fe !important;
  border: 1px solid rgba(99, 102, 241, 0.45);
}

/* 8. Fuchsia / Magenta Box */
.timeline-card-fuchsia {
  background: linear-gradient(135deg, rgba(112, 26, 117, 0.28) 0%, rgba(15, 23, 42, 0.95) 50%, rgba(2, 6, 23, 0.98) 100%);
  border-color: rgba(217, 70, 239, 0.45) !important;
  box-shadow: 0 10px 30px -5px rgba(217, 70, 239, 0.15);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.timeline-card-fuchsia:hover,
.group:hover .timeline-card-fuchsia {
  background: linear-gradient(135deg, rgba(112, 26, 117, 0.42) 0%, rgba(30, 15, 42, 0.96) 50%, rgba(2, 6, 23, 0.98) 100%) !important;
  border-color: #e879f9 !important;
  box-shadow: 0 16px 45px -5px rgba(217, 70, 239, 0.45), 0 0 25px rgba(217, 70, 239, 0.25), inset 0 0 20px rgba(217, 70, 239, 0.15) !important;
  transform: translateY(-4px) scale(1.01);
}
.timeline-tag-fuchsia {
  background: rgba(20, 184, 166, 0.18);
  color: #99f6e4 !important;
  border: 1px solid rgba(20, 184, 166, 0.45);
}

/* ==========================================================================
   CMS ABOUT TIMELINE ROW HOVER GLOWS (MATCHING DATE PILL COLOURS)
   ========================================================================== */
.timeline-cms-row-amber {
  border-left: 4px solid #f59e0b !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.timeline-cms-row-amber:hover {
  background: rgba(120, 53, 15, 0.25) !important;
  border-left-color: #fbbf24 !important;
  box-shadow: 0 4px 24px -2px rgba(245, 158, 11, 0.35), inset 0 0 18px rgba(245, 158, 11, 0.12);
}

.timeline-cms-row-emerald {
  border-left: 4px solid #10b981 !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.timeline-cms-row-emerald:hover {
  background: rgba(6, 78, 59, 0.25) !important;
  border-left-color: #34d399 !important;
  box-shadow: 0 4px 24px -2px rgba(16, 185, 129, 0.35), inset 0 0 18px rgba(16, 185, 129, 0.12);
}

.timeline-cms-row-indigo {
  border-left: 4px solid #6366f1 !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.timeline-cms-row-indigo:hover {
  background: rgba(49, 46, 129, 0.25) !important;
  border-left-color: #818cf8 !important;
  box-shadow: 0 4px 24px -2px rgba(99, 102, 241, 0.35), inset 0 0 18px rgba(99, 102, 241, 0.12);
}

.timeline-cms-row-rose {
  border-left: 4px solid #f43f5e !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.timeline-cms-row-rose:hover {
  background: rgba(136, 19, 55, 0.25) !important;
  border-left-color: #fb7185 !important;
  box-shadow: 0 4px 24px -2px rgba(244, 63, 94, 0.35), inset 0 0 18px rgba(244, 63, 94, 0.12);
}

.timeline-cms-row-cyan {
  border-left: 4px solid #06b6d4 !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.timeline-cms-row-cyan:hover {
  background: rgba(22, 78, 99, 0.25) !important;
  border-left-color: #22d3ee !important;
  box-shadow: 0 4px 24px -2px rgba(6, 182, 212, 0.35), inset 0 0 18px rgba(6, 182, 212, 0.12);
}

.timeline-cms-row-purple {
  border-left: 4px solid #a855f7 !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.timeline-cms-row-purple:hover {
  background: rgba(88, 28, 135, 0.25) !important;
  border-left-color: #c084fc !important;
  box-shadow: 0 4px 24px -2px rgba(168, 85, 247, 0.35), inset 0 0 18px rgba(168, 85, 247, 0.12);
}

.timeline-cms-row-orange {
  border-left: 4px solid #f97316 !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.timeline-cms-row-orange:hover {
  background: rgba(124, 45, 18, 0.25) !important;
  border-left-color: #fb923c !important;
  box-shadow: 0 4px 24px -2px rgba(249, 115, 22, 0.35), inset 0 0 18px rgba(249, 115, 22, 0.12);
}

.timeline-cms-row-fuchsia {
  border-left: 4px solid #d946ef !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.timeline-cms-row-fuchsia:hover {
  background: rgba(112, 26, 117, 0.25) !important;
  border-left-color: #e879f9 !important;
  box-shadow: 0 4px 24px -2px rgba(217, 70, 239, 0.35), inset 0 0 18px rgba(217, 70, 239, 0.12);
}

/* ==========================================================================
   ACTING CREDITS MULTI-COLOR PALETTES & LUXURY HOVER GLOWS
   ========================================================================== */
.credit-row-item {
  position: relative;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Amber Credit (Lead / Head Double / Commercial) */
.credit-row-amber {
  border-left: 4px solid #f59e0b !important;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.credit-row-amber:hover {
  background: linear-gradient(90deg, rgba(120, 53, 15, 0.32) 0%, rgba(15, 23, 42, 0.92) 100%) !important;
  border-left-color: #fbbf24 !important;
  box-shadow: 0 8px 30px -4px rgba(245, 158, 11, 0.35), inset 0 0 20px rgba(245, 158, 11, 0.12);
  transform: translateX(4px);
}

/* Emerald Credit (Supporting / Assistant / Commercial) */
.credit-row-emerald {
  border-left: 4px solid #10b981 !important;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.credit-row-emerald:hover {
  background: linear-gradient(90deg, rgba(6, 78, 59, 0.32) 0%, rgba(15, 23, 42, 0.92) 100%) !important;
  border-left-color: #34d399 !important;
  box-shadow: 0 8px 30px -4px rgba(16, 185, 129, 0.35), inset 0 0 20px rgba(16, 185, 129, 0.12);
  transform: translateX(4px);
}

/* Indigo Credit (Television Drama / Series) */
.credit-row-indigo {
  border-left: 4px solid #6366f1 !important;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.credit-row-indigo:hover {
  background: linear-gradient(90deg, rgba(49, 46, 129, 0.32) 0%, rgba(15, 23, 42, 0.92) 100%) !important;
  border-left-color: #818cf8 !important;
  box-shadow: 0 8px 30px -4px rgba(99, 102, 241, 0.35), inset 0 0 20px rgba(99, 102, 241, 0.12);
  transform: translateX(4px);
}

/* Rose Credit (Film Lead / Named Character Charlie) */
.credit-row-rose {
  border-left: 4px solid #f43f5e !important;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.credit-row-rose:hover {
  background: linear-gradient(90deg, rgba(136, 19, 55, 0.32) 0%, rgba(15, 23, 42, 0.92) 100%) !important;
  border-left-color: #fb7185 !important;
  box-shadow: 0 8px 30px -4px rgba(244, 63, 94, 0.35), inset 0 0 20px rgba(244, 63, 94, 0.12);
  transform: translateX(4px);
}

/* Cyan Credit (Journalist / Senior Professional) */
.credit-row-cyan {
  border-left: 4px solid #06b6d4 !important;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.credit-row-cyan:hover {
  background: linear-gradient(90deg, rgba(22, 78, 99, 0.32) 0%, rgba(15, 23, 42, 0.92) 100%) !important;
  border-left-color: #22d3ee !important;
  box-shadow: 0 8px 30px -4px rgba(6, 182, 212, 0.35), inset 0 0 20px rgba(6, 182, 212, 0.12);
  transform: translateX(4px);
}

/* Purple Credit (Featured / Recurring Television) */
.credit-row-purple {
  border-left: 4px solid #a855f7 !important;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.credit-row-purple:hover {
  background: linear-gradient(90deg, rgba(88, 28, 135, 0.32) 0%, rgba(15, 23, 42, 0.92) 100%) !important;
  border-left-color: #c084fc !important;
  box-shadow: 0 8px 30px -4px rgba(168, 85, 247, 0.35), inset 0 0 20px rgba(168, 85, 247, 0.12);
  transform: translateX(4px);
}

/* Orange Credit (Lowborn / Fantasy / Historical) */
.credit-row-orange {
  border-left: 4px solid #f97316 !important;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.credit-row-orange:hover {
  background: linear-gradient(90deg, rgba(124, 45, 18, 0.32) 0%, rgba(15, 23, 42, 0.92) 100%) !important;
  border-left-color: #fb923c !important;
  box-shadow: 0 8px 30px -4px rgba(249, 115, 22, 0.35), inset 0 0 20px rgba(249, 115, 22, 0.12);
  transform: translateX(4px);
}

/* Fuchsia Credit (Inmate / Court Public / High Intensity) */
.credit-row-fuchsia {
  border-left: 4px solid #d946ef !important;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.credit-row-fuchsia:hover {
  background: linear-gradient(90deg, rgba(112, 26, 117, 0.32) 0%, rgba(15, 23, 42, 0.92) 100%) !important;
  border-left-color: #e879f9 !important;
  box-shadow: 0 8px 30px -4px rgba(217, 70, 239, 0.35), inset 0 0 20px rgba(217, 70, 239, 0.12);
  transform: translateX(4px);
}

/* ==========================================================================
   SNAKING LIFELINE & HEARTBEAT TIMELINE SYSTEM
   ========================================================================== */

/* Lifeline Container with Tighter Vertical Rhythm */
.lifeline-timeline-container {
  position: relative;
  overflow: visible;
}

/* Animated Lifeline ECG Pulse Path */
.lifeline-track-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}

.lifeline-glow-path {
  fill: none;
  stroke: url(#lifelineGradient);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 8px rgba(244, 63, 94, 0.7)) drop-shadow(0 0 3px rgba(251, 191, 36, 0.8));
}

.lifeline-pulse-wave {
  fill: none;
  stroke: #ffffff;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 20 280;
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 10px #ffffff) drop-shadow(0 0 16px rgba(244, 63, 94, 1));
  animation: lifelineWaveAnim 4.5s linear infinite;
}

@keyframes lifelineWaveAnim {
  0% {
    stroke-dashoffset: 1200;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

/* Lifeline Heartbeat Pulse Ring */
.lifeline-node-container {
  position: relative;
  z-index: 10;
}

.lifeline-heartbeat-ring {
  position: absolute;
  inset: -6px;
  border-radius: 9999px;
  border: 2px solid rgba(244, 63, 94, 0.5);
  animation: lifelineHeartbeat 2.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  pointer-events: none;
}

.lifeline-heartbeat-ring-outer {
  position: absolute;
  inset: -12px;
  border-radius: 9999px;
  border: 1px solid rgba(251, 191, 36, 0.35);
  animation: lifelineHeartbeat 2.2s cubic-bezier(0.4, 0, 0.6, 1) 0.5s infinite;
  pointer-events: none;
}

@keyframes lifelineHeartbeat {
  0% {
    transform: scale(0.85);
    opacity: 1;
  }
  50% {
    transform: scale(1.35);
    opacity: 0;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

/* Compact Tighter Timeline Card Styles */
.lifeline-card {
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  background: rgba(10, 15, 30, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.lifeline-card:hover {
  transform: translateY(-2.5px) scale(1.015);
  background: rgba(15, 23, 42, 0.96);
  box-shadow: 0 14px 30px -8px rgba(0, 0, 0, 0.85), 0 0 20px rgba(244, 63, 94, 0.25) !important;
}

/* Horizontal Connector Line from Snake Spine to Card */
.lifeline-connector {
  position: absolute;
  top: 50%;
  height: 2px;
  background: linear-gradient(90deg, rgba(244, 63, 94, 0.6), rgba(251, 191, 36, 0.8));
  filter: drop-shadow(0 0 4px rgba(244, 63, 94, 0.8));
  z-index: 5;
  transition: all 0.3s ease;
}

/* ==========================================================================
   GLOBAL STICKY SUB-MENUS & SEARCH FILTER BARS
   ========================================================================== */
.sticky-page-filter-bar {
  position: sticky;
  top: 106px;
  z-index: 35;
  background: rgba(10, 15, 30, 0.96) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 14px 35px -6px rgba(0, 0, 0, 0.9), 0 0 20px rgba(0, 0, 0, 0.5);
  transition: top 0.2s ease, box-shadow 0.25s ease;
}

@media (min-width: 640px) {
  .sticky-page-filter-bar {
    top: 114px;
  }
}

@media (min-width: 1024px) {
  .sticky-page-filter-bar {
    top: 120px;
  }
}