/* ===================================================
   Astrayudh Theme — Professional Neumorphism
   Load after style.css
   =================================================== */

:root {
  /* Neumorphic surface system */
  --neo-bg: #2a2d35;
  --neo-bg-deep: #24272e;
  --neo-surface: #2a2d35;
  --neo-surface-raised: #30343d;

  --neo-light: rgba(255, 255, 255, 0.07);
  --neo-light-strong: rgba(255, 255, 255, 0.11);
  --neo-dark: rgba(0, 0, 0, 0.42);
  --neo-dark-strong: rgba(0, 0, 0, 0.58);

  /* Brand accent — restrained for professional tone */
  --accent: #9e3348;
  --accent2: #c04d62;
  --accent-soft: rgba(158, 51, 72, 0.14);
  --accent-glow: rgba(192, 77, 98, 0.22);

  --text: #eceef3;
  --muted: #a3a9b8;

  --neo-radius-sm: 12px;
  --neo-radius: 18px;
  --neo-radius-lg: 24px;
  --neo-radius-pill: 999px;

  --neo-raised-sm: 4px 4px 10px var(--neo-dark), -4px -4px 10px var(--neo-light);
  --neo-raised: 8px 8px 18px var(--neo-dark), -8px -8px 18px var(--neo-light);
  --neo-raised-lg: 12px 12px 28px var(--neo-dark), -12px -12px 28px var(--neo-light);
  --neo-inset: inset 4px 4px 10px var(--neo-dark), inset -4px -4px 10px var(--neo-light);
  --neo-inset-sm: inset 2px 2px 6px var(--neo-dark), inset -2px -2px 6px var(--neo-light);
  --neo-flat: 2px 2px 6px var(--neo-dark), -2px -2px 6px var(--neo-light);

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---- Base canvas ---- */
body.theme-active {
  background: var(--neo-bg) !important;
  color: var(--text);
  position: relative;
}

body.theme-active::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.35;
  background:
    radial-gradient(circle at 15% 10%, rgba(255, 255, 255, 0.04), transparent 42%),
    radial-gradient(circle at 85% 90%, rgba(0, 0, 0, 0.12), transparent 45%);
}

body.theme-active > * {
  position: relative;
  z-index: 1;
}

.theme-orbs {
  display: none !important;
}

/* ---- Shared neumorphic surface ---- */
.neo-surface,
.card,
.content-card,
.feature-box,
.cta-box,
.contact-box,
.privacy-box,
.blogs-controls,
.reader-card,
.chapters-panel,
.story-reader,
.skeleton-card,
.empty-state,
.results-count,
.mobile-menu {
  background: var(--neo-surface) !important;
  border: none !important;
  border-radius: var(--neo-radius-lg) !important;
  box-shadow: var(--neo-raised) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition:
    transform 0.35s var(--ease-out-expo),
    box-shadow 0.35s ease,
    background 0.35s ease !important;
}

/* ---- Navbar ---- */
.navbar {
  background: var(--neo-bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: none !important;
  box-shadow: var(--neo-flat) !important;
}

.navbar--scrolled {
  background: var(--neo-bg-deep) !important;
  box-shadow: var(--neo-raised-sm) !important;
}

.logo a {
  background: none !important;
  -webkit-text-fill-color: var(--text) !important;
  color: var(--text) !important;
  animation: none !important;
  letter-spacing: 0.4px;
}

.nav-links a {
  color: var(--muted) !important;
  padding: 8px 14px;
  border-radius: var(--neo-radius-pill);
  transition: color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease !important;
}

.nav-links a::after {
  display: none !important;
}

.nav-links a:hover {
  color: var(--text) !important;
  background: var(--neo-surface);
  box-shadow: var(--neo-inset-sm);
}

.nav-links a.active {
  color: var(--text) !important;
  background: var(--neo-surface);
  box-shadow: var(--neo-raised-sm);
}

.nav-btn {
  background: var(--neo-surface) !important;
  color: var(--text) !important;
  border: none !important;
  box-shadow: var(--neo-raised-sm) !important;
  font-weight: 600;
}

.nav-btn::after {
  display: none !important;
}

.nav-btn:hover {
  box-shadow: var(--neo-raised) !important;
  transform: translateY(-1px);
  background: var(--neo-surface-raised) !important;
}

.nav-btn:active {
  box-shadow: var(--neo-inset) !important;
  transform: translateY(0);
}

/* ---- Hero ---- */
.hero {
  background-size: cover !important;
  background-position: center !important;
  border-radius: 0 0 var(--neo-radius-lg) var(--neo-radius-lg);
  overflow: hidden;
}

.hero::before {
  display: none !important;
}

.hero-overlay {
  background: linear-gradient(
    180deg,
    rgba(36, 39, 46, 0.35) 0%,
    rgba(36, 39, 46, 0.62) 55%,
    rgba(42, 45, 53, 0.82) 100%
  ) !important;
}

.hero-content {
  max-width: 760px;
  margin: 0 auto;
  padding: 28px 32px;
  border-radius: var(--neo-radius-lg);
  background: rgba(42, 45, 53, 0.72);
  box-shadow: var(--neo-raised-lg);
}

.hero-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--accent2);
  margin-bottom: 16px;
  padding: 8px 18px;
  border-radius: var(--neo-radius-pill);
  background: var(--neo-surface);
  border: none;
  box-shadow: var(--neo-inset-sm);
  animation: fadeSlideDown 0.8s var(--ease-out-expo) both;
}

.hero-content h1 {
  background: none !important;
  -webkit-text-fill-color: var(--text) !important;
  color: var(--text) !important;
  animation: fadeSlideUp 0.9s var(--ease-out-expo) 0.08s both !important;
  text-shadow: none;
  font-weight: 700;
}

.hero-content p {
  color: var(--muted);
  animation: fadeSlideUp 0.9s var(--ease-out-expo) 0.18s both;
}

.hero-buttons {
  animation: fadeSlideUp 0.9s var(--ease-out-expo) 0.28s both;
}

/* ---- Buttons ---- */
.btn {
  border: none !important;
  border-radius: var(--neo-radius-pill) !important;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.btn.primary,
.mobile-menu-cta {
  background: linear-gradient(145deg, var(--accent2), var(--accent)) !important;
  color: #fff !important;
  box-shadow:
    var(--neo-raised-sm),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset !important;
}

.btn.primary::after,
.nav-btn::after {
  display: none !important;
}

.btn.primary:hover,
.mobile-menu-cta:hover {
  transform: translateY(-2px);
  box-shadow:
    var(--neo-raised),
    0 6px 20px var(--accent-glow) !important;
  filter: brightness(1.04);
}

.btn.primary:active,
.mobile-menu-cta:active {
  transform: translateY(0);
  box-shadow: var(--neo-inset) !important;
}

.btn.secondary {
  background: var(--neo-surface) !important;
  color: var(--text) !important;
  box-shadow: var(--neo-raised-sm) !important;
}

.btn.secondary:hover {
  box-shadow: var(--neo-raised) !important;
  transform: translateY(-1px);
}

.btn.secondary:active {
  box-shadow: var(--neo-inset) !important;
  transform: translateY(0);
}

/* ---- Cards ---- */
.card::before,
.content-card::before {
  display: none !important;
}

.card:hover,
.content-card:hover,
.feature-box:hover,
.cta-box:hover,
.contact-box:hover,
.privacy-box:hover,
.chapters-panel:hover {
  transform: translateY(-4px);
  box-shadow: var(--neo-raised-lg) !important;
  border-color: transparent !important;
}

.card:active,
.content-card:active {
  transform: translateY(-1px);
  box-shadow: var(--neo-raised-sm) !important;
}

.card h3,
.card-title,
.page-title,
.section-heading h2 {
  font-family: "Playfair Display", serif;
  color: var(--text);
}

.section-heading h2 {
  position: relative;
  display: inline-block;
}

.section-heading h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 52px;
  height: 4px;
  border-radius: 4px;
  background: var(--accent2);
  box-shadow: var(--neo-inset-sm);
}

.highlight {
  background: transparent !important;
}

.cta {
  background: transparent !important;
}

.card-category {
  color: var(--accent2) !important;
  background: var(--neo-surface) !important;
  box-shadow: var(--neo-inset-sm) !important;
  border: none !important;
  border-radius: var(--neo-radius-pill) !important;
}

.card-btn {
  background: var(--neo-surface) !important;
  box-shadow: var(--neo-raised-sm) !important;
  border: none !important;
  border-radius: var(--neo-radius-pill) !important;
  transition: all 0.3s var(--ease-out-expo) !important;
}

.content-card:hover .card-btn {
  box-shadow: var(--neo-raised) !important;
  transform: translateX(-2px);
  background: var(--neo-surface-raised) !important;
}

.card-image {
  border-radius: var(--neo-radius) var(--neo-radius) 0 0 !important;
}

.card-image::after {
  background: linear-gradient(180deg, transparent 55%, rgba(42, 45, 53, 0.85)) !important;
}

/* ---- Forms & inputs (inset neumorphic) ---- */
.search-box,
.sort-select,
.contact-form input,
.contact-form textarea {
  background: var(--neo-bg-deep) !important;
  border: none !important;
  border-radius: var(--neo-radius) !important;
  box-shadow: var(--neo-inset) !important;
  color: var(--text) !important;
  transition: box-shadow 0.3s ease !important;
}

.search-box:focus,
.sort-select:focus,
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none !important;
  box-shadow:
    var(--neo-inset),
    0 0 0 2px var(--accent-soft) !important;
  border-color: transparent !important;
}

.load-more-btn {
  box-shadow: var(--neo-raised-sm) !important;
}

.load-more-btn:hover {
  box-shadow: var(--neo-raised) !important;
}

.load-more-btn:active {
  box-shadow: var(--neo-inset) !important;
}

.results-count {
  box-shadow: var(--neo-inset-sm) !important;
}

/* ---- Footer ---- */
.footer {
  border-top: none !important;
  background: var(--neo-bg-deep) !important;
  box-shadow: inset 0 8px 18px rgba(0, 0, 0, 0.18);
  margin-top: 24px;
}

.footer-links a::after {
  background: var(--accent2);
}

/* ---- Blog / story reader ---- */
.page-hero-image {
  border-bottom: none !important;
  box-shadow: var(--neo-raised-lg);
  border-radius: 0 0 var(--neo-radius-lg) var(--neo-radius-lg);
  animation: fadeSlideUp 1s var(--ease-out-expo) both;
}

.reader-card,
.story-reader,
.chapters-panel {
  padding: 28px;
}

.chapter-link {
  background: var(--neo-surface) !important;
  border: none !important;
  box-shadow: var(--neo-raised-sm) !important;
  border-radius: var(--neo-radius) !important;
}

.chapter-link:hover,
.chapter-link.active {
  box-shadow: var(--neo-inset-sm) !important;
  color: var(--accent2) !important;
}

.reader-actions,
.chapter-controls {
  border-top: none !important;
  box-shadow: inset 0 6px 12px rgba(0, 0, 0, 0.08);
  padding-top: 24px;
}

#progressBar,
.reading-progress #progressBar {
  background: linear-gradient(90deg, var(--accent), var(--accent2)) !important;
  box-shadow: var(--neo-inset-sm);
  border-radius: var(--neo-radius-pill);
}

.reading-progress {
  background: var(--neo-bg-deep) !important;
  box-shadow: var(--neo-inset-sm) !important;
}

/* ---- Mobile menu ---- */
.mobile-menu {
  background: var(--neo-bg) !important;
  border: none !important;
  box-shadow: var(--neo-raised-lg) !important;
  animation: dropIn 0.35s var(--ease-out-expo) !important;
}

.mobile-menu-link {
  border-radius: var(--neo-radius);
  margin: 4px 0;
}

.mobile-menu-link:hover,
.mobile-menu-link.active {
  background: var(--neo-surface);
  box-shadow: var(--neo-inset-sm);
}

.hamburger {
  background: var(--neo-surface) !important;
  box-shadow: var(--neo-raised-sm) !important;
  border: none !important;
}

.hamburger:hover {
  box-shadow: var(--neo-raised) !important;
}

.hamburger.active {
  box-shadow: var(--neo-inset) !important;
}

/* ---- Skeleton loading ---- */
.skeleton-card {
  animation: fadeSlideUp 0.75s var(--ease-out-expo) both;
}

.skeleton-line {
  background: var(--neo-bg-deep) !important;
  box-shadow: var(--neo-inset-sm) !important;
}

/* ---- Staggered entrance ---- */
.cards > .card,
.premium-grid-layout > .content-card,
.loading-grid > .skeleton-card {
  animation: fadeSlideUp 0.75s var(--ease-out-expo) both;
}

.header-divider,
.section-heading h2::after {
  animation: scaleIn 0.7s var(--ease-out-expo) 0.25s both;
}

/* ---- Scroll reveal ---- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo);
}

.reveal.reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }

/* ---- Empty state ---- */
.empty-state {
  border: none !important;
}

/* ---- Keyframes ---- */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeSlideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
  from { transform: scaleX(0); opacity: 0; }
  to { transform: scaleX(1); opacity: 1; }
}

@keyframes dropIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes pageFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 768px) {
  .hero-content {
    padding: 22px 20px;
    margin: 0 12px;
    box-shadow: var(--neo-raised);
  }

  .hero-content h1 {
    font-size: clamp(28px, 8vw, 40px);
  }

  .card:hover,
  .content-card:hover {
    transform: translateY(-2px);
  }
}