/* ════════════════════════════════════════════════════════════
   MODERN THEME — aurora light beams + full glassmorphism
   Loaded when site_theme = 'modern'. Classic is untouched.

   Signature:
   - Slow-drifting aurora beams (emerald, blue, violet + gold hint)
     behind the page — transform-only, GPU compositor.
   - Sections are transparent so the aurora breathes through the
     entire page, including page headers and split panels.
   - Genesis-style glass cards: white top-sheen gradient,
     blur(20px), 10% white border, 24px radius.
   - Glass buttons, chips, inputs; hover lifts; breathing CTA glow.
   - All motion disabled under prefers-reduced-motion.
   ════════════════════════════════════════════════════════════ */

html.site-theme-modern {
  /* Transparent page bg lets the aurora show through every section;
     translucent surface tokens make even inline-styled blocks
     (var(--dark-2/3), var(--card-bg)) slightly see-through. */
  --page-bg:    transparent;
  --surface-bg: rgba(255, 255, 255, 0.03);
  --card-bg:    rgba(28, 30, 40, 0.42);
  --panel-bg:   rgba(34, 36, 48, 0.46);
  --dark-2:     rgba(24, 26, 36, 0.50);
  --dark-3:     rgba(32, 34, 46, 0.45);
  --dark-border: rgba(255, 255, 255, 0.12);
  --mobile-nav-bg: rgba(10, 10, 14, 0.80);

  background: radial-gradient(1400px 900px at 50% -10%, #14141a 0%, #070709 55%, #050507 100%);
}

body.site-theme-modern {
  --gray: #b0b0b0;
  background: transparent;
}

/* ── Aurora light beams — northern-lights palette ─────────── */
html.site-theme-modern::before,
html.site-theme-modern::after {
  content: "";
  position: fixed;
  inset: -60%;
  z-index: -1;
  pointer-events: none;
  will-change: transform;
}

/* Emerald/teal curtain + brand-gold hint */
html.site-theme-modern::before {
  background:
    linear-gradient(115deg,
      transparent 28%,
      rgba(52, 211, 153, 0.10) 43%,
      rgba(52, 211, 153, 0.20) 50%,
      rgba(52, 211, 153, 0.10) 57%,
      transparent 72%),
    linear-gradient(125deg,
      transparent 58%,
      rgba(var(--accent-rgb), 0.10) 72%,
      transparent 86%);
  animation: modern-beam-a 32s ease-in-out infinite alternate;
}

/* Blue + violet curtains */
html.site-theme-modern::after {
  background:
    linear-gradient(65deg,
      transparent 34%,
      rgba(59, 130, 246, 0.16) 50%,
      transparent 66%),
    linear-gradient(135deg,
      transparent 38%,
      rgba(139, 92, 246, 0.14) 54%,
      transparent 70%);
  animation: modern-beam-b 46s ease-in-out infinite alternate;
}

@keyframes modern-beam-a {
  from { transform: translate3d(-12%, -5%, 0) rotate(5deg); }
  to   { transform: translate3d(12%, 5%, 0) rotate(15deg); }
}
@keyframes modern-beam-b {
  from { transform: translate3d(10%, 6%, 0) rotate(-3deg); }
  to   { transform: translate3d(-10%, -6%, 0) rotate(-13deg); }
}

/* ── Genesis-style glass cards ────────────────────────────── */
/* White top-sheen gradient + blur(20px) + 10% white border + 24px radius */
.site-theme-modern .card,
.site-theme-modern .panel,
.site-theme-modern .surface,
.site-theme-modern .testimonial-card,
.site-theme-modern .plan-card,
.site-theme-modern .product-card,
.site-theme-modern .auth-card,
.site-theme-modern .join-card,
.site-theme-modern .form-section,
.site-theme-modern .account-section,
.site-theme-modern .account-sidebar,
.site-theme-modern .points-card,
.site-theme-modern .tier-progress-card,
.site-theme-modern .stats-bar__item,
.site-theme-modern .earn-info-card,
.site-theme-modern .post-card,
.site-theme-modern .sidebar-card,
.site-theme-modern .composer-card,
.site-theme-modern .group-card,
.site-theme-modern .event-card,
.site-theme-modern .order-summary,
.site-theme-modern .review-form,
.site-theme-modern .bmi-modal__box,
.site-theme-modern #planQuizModal,
.site-theme-modern .page-header,
.site-theme-modern .reward-tile,
.site-theme-modern .plan-mini-card,
.site-theme-modern .plan-hero-banner,
.site-theme-modern .promo-banner,
.site-theme-modern .site-footer__cta {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.03) 100%);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 24px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10),
              0 8px 32px rgba(var(--black-rgb), 0.40);
}

/* Page header spans edge-to-edge — no radius, no frame, bottom line only */
.site-theme-modern .page-header {
  border-radius: 0;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: none;
}

/* About strip: content side stays translucent (aurora shows through)
   without a glass frame that would clash with the photo half */
.site-theme-modern .about-strip__content { background: var(--panel-bg); }

/* Plans section: app.css forces solid black — let the aurora through */
.site-theme-modern .plans-section { background: transparent; }

/* ── Cards: hover lift + soft accent glow ─────────────────── */
.site-theme-modern .product-card,
.site-theme-modern .plan-card,
.site-theme-modern .testimonial-card,
.site-theme-modern .post-card,
.site-theme-modern .group-card,
.site-theme-modern .event-card,
.site-theme-modern .stats-bar__item,
.site-theme-modern .earn-info-card,
.site-theme-modern .points-card,
.site-theme-modern .sidebar-card {
  transition: transform 0.3s var(--ease-out),
              box-shadow 0.3s var(--ease-out),
              border-color 0.3s ease;
}
.site-theme-modern .product-card:hover,
.site-theme-modern .plan-card:hover,
.site-theme-modern .testimonial-card:hover,
.site-theme-modern .post-card:hover,
.site-theme-modern .group-card:hover,
.site-theme-modern .event-card:hover,
.site-theme-modern .stats-bar__item:hover,
.site-theme-modern .earn-info-card:hover,
.site-theme-modern .points-card:hover,
.site-theme-modern .sidebar-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14),
              0 20px 48px rgba(var(--black-rgb), 0.50),
              0 0 30px rgba(var(--accent-rgb), 0.12);
}

/* ── Frosted navbar / topbar / footer / dropdowns ─────────── */
.site-theme-modern .topbar {
  background: rgba(10, 10, 14, 0.65);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
}
.site-theme-modern .navbar,
.site-theme-modern .navbar.scrolled {
  background: rgba(10, 10, 14, 0.72);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.site-theme-modern .site-footer {
  background: rgba(10, 10, 14, 0.75);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.site-theme-modern .nav-dropdown__menu {
  background: rgba(14, 14, 20, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
/* Mobile nav panel: near-solid so links stay readable over the aurora */
@media (max-width: 768px) {
  .site-theme-modern .navbar__nav {
    background: rgba(10, 10, 14, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
}

/* ── Glass buttons ────────────────────────────────────────── */
.site-theme-modern .btn {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.site-theme-modern .btn--primary {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.85), rgba(var(--accent-rgb), 0.55));
  border: 1px solid rgba(var(--accent-rgb), 0.50);
  color: var(--black);
  animation: modern-glow 3.2s ease-in-out infinite;
}
.site-theme-modern .btn--primary:hover {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.95), rgba(var(--accent-rgb), 0.70));
}
@keyframes modern-glow {
  0%, 100% { box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.22); }
  50%      { box-shadow: 0 8px 34px rgba(var(--accent-rgb), 0.42); }
}
.site-theme-modern .btn--outline {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.20);
  color: var(--white);
}
.site-theme-modern .btn--outline:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--accent);
  color: var(--accent);
}

/* ── Frosted badges, chips, pills ─────────────────────────── */
.site-theme-modern .badge,
.site-theme-modern .product-card__badge,
.site-theme-modern .plan-hero-banner__badge,
.site-theme-modern .level-badge,
.site-theme-modern .filter-chip,
.site-theme-modern .filter-btn,
.site-theme-modern .template-pill,
.site-theme-modern .feed-pill,
.site-theme-modern .pq-opt,
.site-theme-modern .hero__dot,
.site-theme-modern .hero__pause {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.site-theme-modern .filter-chip,
.site-theme-modern .filter-btn,
.site-theme-modern .template-pill,
.site-theme-modern .feed-pill,
.site-theme-modern .pq-opt {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

/* ── Flash messages ───────────────────────────────────────── */
.site-theme-modern .flash {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

/* ── Inputs (full frost + focus glow) ─────────────────────── */
.site-theme-modern input,
.site-theme-modern textarea,
.site-theme-modern select {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--white);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.site-theme-modern input:focus,
.site-theme-modern textarea:focus,
.site-theme-modern select:focus {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(var(--accent-rgb), 0.5);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
}

/* ── Section labels: soft accent aura ─────────────────────── */
.site-theme-modern .section-label {
  text-shadow: 0 0 18px rgba(var(--accent-rgb), 0.40);
}

/* ── Mobile performance: flatten heavy glass ──────────────── */
/* backdrop-filter on dozens of elements makes scrolling janky on
   mobile GPUs; swap to near-solid surfaces and drop one beam layer. */
@media (max-width: 768px) {
  .site-theme-modern .card,
  .site-theme-modern .panel,
  .site-theme-modern .surface,
  .site-theme-modern .testimonial-card,
  .site-theme-modern .plan-card,
  .site-theme-modern .product-card,
  .site-theme-modern .auth-card,
  .site-theme-modern .join-card,
  .site-theme-modern .form-section,
  .site-theme-modern .account-section,
  .site-theme-modern .account-sidebar,
  .site-theme-modern .points-card,
  .site-theme-modern .tier-progress-card,
  .site-theme-modern .stats-bar__item,
  .site-theme-modern .earn-info-card,
  .site-theme-modern .post-card,
  .site-theme-modern .sidebar-card,
  .site-theme-modern .composer-card,
  .site-theme-modern .group-card,
  .site-theme-modern .event-card,
  .site-theme-modern .order-summary,
  .site-theme-modern .review-form,
  .site-theme-modern .bmi-modal__box,
  .site-theme-modern #planQuizModal,
  .site-theme-modern .reward-tile,
  .site-theme-modern .plan-mini-card,
  .site-theme-modern .plan-hero-banner,
  .site-theme-modern .promo-banner,
  .site-theme-modern .site-footer__cta,
  .site-theme-modern .btn,
  .site-theme-modern input,
  .site-theme-modern textarea,
  .site-theme-modern select {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .site-theme-modern .card,
  .site-theme-modern .panel,
  .site-theme-modern .surface,
  .site-theme-modern .testimonial-card,
  .site-theme-modern .plan-card,
  .site-theme-modern .product-card,
  .site-theme-modern .auth-card,
  .site-theme-modern .join-card,
  .site-theme-modern .form-section,
  .site-theme-modern .account-section,
  .site-theme-modern .account-sidebar,
  .site-theme-modern .points-card,
  .site-theme-modern .tier-progress-card,
  .site-theme-modern .stats-bar__item,
  .site-theme-modern .earn-info-card,
  .site-theme-modern .post-card,
  .site-theme-modern .sidebar-card,
  .site-theme-modern .composer-card,
  .site-theme-modern .group-card,
  .site-theme-modern .event-card,
  .site-theme-modern .order-summary,
  .site-theme-modern .review-form,
  .site-theme-modern .bmi-modal__box,
  .site-theme-modern #planQuizModal,
  .site-theme-modern .reward-tile,
  .site-theme-modern .plan-mini-card,
  .site-theme-modern .plan-hero-banner,
  .site-theme-modern .promo-banner,
  .site-theme-modern .site-footer__cta {
    background: linear-gradient(180deg, rgba(38, 40, 52, 0.94), rgba(28, 30, 42, 0.96));
  }
  /* One beam layer is enough on phones */
  html.site-theme-modern::after { display: none; }
}

/* ── Reduced motion: kill beams + glow ────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html.site-theme-modern::before,
  html.site-theme-modern::after,
  .site-theme-modern .btn--primary {
    animation: none;
    will-change: auto;
  }
}