/* ═══════════════════════════════════════════════════════════════════════════════
   AstroKamya™ EDITORIAL ELEVATION v1.0
   ═══════════════════════════════════════════════════════════════════════════════
   
   Elevates the entire site to Editorial Luxury tier — inspired by the Shop V3
   design system. Applies across Home, About, Blog, and all pages.
   
   Load AFTER page-specific CSS and AFTER color-bridge.css.
   
   PHASES:
     §1  Typography — Cormorant Garamond serif accents
     §2  Warm Gold Accents — Aggressive gold DNA injection
     §3  Editorial Dividers — Gradient luxury separators
     §4  Card & Surface Elevation — Warm glow hover states
     §5  Button & CTA Refinement — Shop-style pill transitions
     §6  Section Transitions — Smooth editorial flow
     §7  Micro-Interactions — Premium hover & reveal effects
     §8  Mobile Refinements — Responsive luxury polish
   ═══════════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════
   §1 — TYPOGRAPHY: Cormorant Garamond Serif Accents
   
   Injects editorial luxury serif into ALL em tags inside
   headings, pull-quotes, section titles, and accent text.
   ═══════════════════════════════════════════════════════ */

/* — Editorial Serif Variable — */
:root {
  --font-editorial: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --editorial-weight-light: 300;
  --editorial-weight-regular: 400;
  --editorial-weight-medium: 500;
}

/* All <em> inside headings → editorial serif italic */
body:not(.v3-shop) h1 em,
body:not(.v3-shop) h2 em,
body:not(.v3-shop) h3 em {
  font-family: var(--font-editorial) !important;
  font-style: italic;
  font-weight: var(--editorial-weight-light);
  letter-spacing: 0.01em;
  /* Subtle warm gold shimmer on italic accent words */
  background: linear-gradient(135deg, 
    rgba(200,169,110,0.9), 
    rgba(255,184,0,0.85),
    rgba(200,169,110,0.9)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* FAQ section accent text — Cormorant serif */
body:not(.v3-shop) .faq2-accent {
  font-family: var(--font-editorial) !important;
  font-style: italic;
  font-weight: var(--editorial-weight-light);
}

/* Footer tagline → editorial serif */
.ak-unified-footer .foot-tagline {
  font-family: var(--font-editorial) !important;
  font-size: 14px !important;
  font-style: italic;
  font-weight: var(--editorial-weight-regular);
  color: rgba(245,239,224,0.35) !important;
  letter-spacing: 0.02em;
  line-height: 1.6 !important;
}

/* About page — quotes use Cormorant */
body:not(.v3-shop) .about-quote p,
body:not(.v3-shop) blockquote,
body:not(.v3-shop) .about-quote {
  font-family: var(--font-editorial) !important;
  font-style: italic;
  font-weight: var(--editorial-weight-regular);
  letter-spacing: 0.01em;
}

/* Section eyebrow labels → refined spacing */
body:not(.v3-shop) .about-section-eyebrow,
body:not(.v3-shop) .sec-label,
body:not(.v3-shop) .faq2-tag,
body:not(.v3-shop) .h9-eyebrow {
  letter-spacing: 0.18em !important;
}

/* Hero subtitle — slightly larger, more editorial */
body:not(.v3-shop) .h9-hero-title em {
  font-size: 1.05em;
  line-height: 1.15;
}

/* Blog titles — editorial serif accent */
body:not(.v3-shop) .ak-text-gradient {
  font-family: var(--font-editorial) !important;
  font-style: italic;
  font-weight: var(--editorial-weight-medium);
}

/* Pull-quote styling for any page */
body:not(.v3-shop) .editorial-quote,
body:not(.v3-shop) .about-quote p {
  font-family: var(--font-editorial) !important;
  font-size: clamp(18px, 2.5vw, 26px);
  font-style: italic;
  font-weight: var(--editorial-weight-light);
  line-height: 1.5;
  color: rgba(240,234,255,0.85);
  border-left: 2px solid rgba(200,169,110,0.4);
  padding-left: 20px;
  margin: 24px 0;
}


/* ═══════════════════════════════════════════════════════
   §2 — WARM GOLD ACCENTS: Aggressive Gold DNA
   
   Injects warm editorial gold tones deeper into the
   cosmic palette. Goes beyond color-bridge.css subtlety.
   ═══════════════════════════════════════════════════════ */

/* Hero insight card — warm gold border accent */
body:not(.v3-shop) .h9-insight-card {
  border-color: rgba(200,169,110,0.15) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3), 
              inset 0 0 0 1px rgba(200,169,110,0.06) !important;
}
body:not(.v3-shop) .h9-insight-card:hover {
  border-color: rgba(200,169,110,0.25) !important;
}

/* CTA buttons — warm gold glow on hover */
body:not(.v3-shop) .h9-btn-primary:hover {
  box-shadow: 0 8px 32px rgba(200,169,110,0.25), 
              0 0 0 1px rgba(200,169,110,0.15) !important;
}

/* Ephemeris bar — warm gold accent */
body:not(.v3-shop) .h9-ephemeris-bar {
  border-top: 1px solid rgba(200,169,110,0.1) !important;
  border-bottom: 1px solid rgba(200,169,110,0.1) !important;
}

/* Intent cards — warm gold hover glow */
body:not(.v3-shop) .intent-card:hover {
  border-color: rgba(200,169,110,0.2) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3), 
              0 0 24px rgba(200,169,110,0.06) !important;
}

/* Concern panels — warm gold border accent */
body:not(.v3-shop) .cp-concern-card {
  border-color: rgba(200,169,110,0.06) !important;
}
body:not(.v3-shop) .cp-concern-card.open {
  border-color: rgba(200,169,110,0.15) !important;
}

/* FAQ cards — warm border accent */
body:not(.v3-shop) .faq2-card {
  border-color: rgba(200,169,110,0.06) !important;
}
body:not(.v3-shop) .faq2-item.faq2-open .faq2-card {
  border-color: rgba(200,169,110,0.12) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3), 
              0 0 20px rgba(200,169,110,0.04) !important;
}

/* FAQ node dots — warm gold pulse */
body:not(.v3-shop) .faq2-item.faq2-open .faq2-node::after {
  background: rgba(200,169,110,0.7) !important;
  box-shadow: 0 0 8px rgba(200,169,110,0.4) !important;
}

/* Pricing card recommended — warm gold glow */
body:not(.v3-shop) .pc.recommended {
  border-color: rgba(200,169,110,0.2) !important;
  box-shadow: 0 8px 48px rgba(200,169,110,0.08),
              0 0 0 1px rgba(200,169,110,0.1) !important;
}

/* Testimonial cards — warm border */
body:not(.v3-shop) .t-card {
  border-color: rgba(200,169,110,0.06) !important;
}
body:not(.v3-shop) .t-card:hover {
  border-color: rgba(200,169,110,0.15) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3),
              0 0 16px rgba(200,169,110,0.05) !important;
}

/* About page — warm gold pillar icons */
body:not(.v3-shop) .about-pillar-icon.gold {
  border-color: rgba(200,169,110,0.2) !important;
  box-shadow: 0 0 24px rgba(200,169,110,0.08) !important;
}

/* About page tech cards — warm hover */
body:not(.v3-shop) .about-tech-card:hover {
  border-color: rgba(200,169,110,0.15) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3),
              0 0 20px rgba(200,169,110,0.05) !important;
}

/* About philosophy cards — warm hover */
body:not(.v3-shop) .about-philosophy-card:hover {
  border-color: rgba(200,169,110,0.12) !important;
}

/* Blog cards — warm gold hover glow */
body:not(.v3-shop) .ak-card:hover {
  box-shadow: 0 12px 48px rgba(0,0,0,0.35),
              0 0 24px rgba(200,169,110,0.06),
              inset 0 0 0 1px rgba(200,169,110,0.08) !important;
}

/* About stat values — editorial serif treatment */
body:not(.v3-shop) .about-stat-value {
  font-family: var(--font-editorial) !important;
  font-weight: var(--editorial-weight-medium) !important;
}


/* ═══════════════════════════════════════════════════════
   §3 — EDITORIAL DIVIDERS: Gradient Luxury Separators
   
   Replaces plain borders with warm-to-cosmic gradient
   lines inspired by the Shop's v3-divider treatment.
   ═══════════════════════════════════════════════════════ */

/* About page dividers — gradient gold */
body:not(.v3-shop) .about-divider {
  height: 1px !important;
  border: none !important;
  background: linear-gradient(90deg, 
    transparent 5%, 
    rgba(200,169,110,0.2) 25%, 
    rgba(124,58,237,0.08) 50%, 
    rgba(200,169,110,0.2) 75%, 
    transparent 95%
  ) !important;
  margin: 0 !important;
}

/* Section divider stars — warm gold shimmer */
body:not(.v3-shop) .section-divider {
  background: linear-gradient(90deg, 
    transparent, 
    rgba(200,169,110,0.15) 30%, 
    rgba(200,169,110,0.25) 50%, 
    rgba(200,169,110,0.15) 70%, 
    transparent
  ) !important;
}

/* FAQ ornament line — warm gold gradient */
body:not(.v3-shop) .faq2-ornament-line {
  background: linear-gradient(90deg, 
    transparent, 
    rgba(200,169,110,0.3)
  ) !important;
}
body:not(.v3-shop) .faq2-ornament-line:last-child {
  background: linear-gradient(90deg, 
    rgba(200,169,110,0.3), 
    transparent
  ) !important;
}

/* Blog section lines */
body:not(.v3-shop) .ak-section-line {
  background: linear-gradient(90deg, 
    rgba(200,169,110,0.3), 
    rgba(124,58,237,0.15), 
    transparent
  ) !important;
}


/* ═══════════════════════════════════════════════════════
   §4 — CARD & SURFACE ELEVATION
   
   Adds warm glass morphism and refined hover states
   to all card surfaces across the site.
   ═══════════════════════════════════════════════════════ */

/* Universal card warm glass base */
body:not(.v3-shop) .about-tech-card,
body:not(.v3-shop) .about-philosophy-card,
body:not(.v3-shop) .about-pillar {
  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* Hover lift — consistent 6px across all cards */
body:not(.v3-shop) .about-tech-card:hover,
body:not(.v3-shop) .about-philosophy-card:hover,
body:not(.v3-shop) .about-pillar:hover {
  transform: translateY(-6px) !important;
}

/* Blog card hover — refined warm lift */
body:not(.v3-shop) .ak-card {
  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
body:not(.v3-shop) .ak-card:hover {
  transform: translateY(-6px) !important;
}


/* ═══════════════════════════════════════════════════════
   §5 — BUTTON & CTA REFINEMENT
   
   Applies Shop-style pill transition aesthetics to
   all CTAs across the site.
   ═══════════════════════════════════════════════════════ */

/* About page CTA — editorial pill style */
body:not(.v3-shop) .about-cta-btn {
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
}
body:not(.v3-shop) .about-cta-btn:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 32px rgba(200,169,110,0.2), 
              0 4px 16px rgba(0,0,0,0.2) !important;
}

/* Hero CTA — refined warm shadow on hover */
body:not(.v3-shop) .h9-btn-primary {
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
body:not(.v3-shop) .h9-btn-primary:hover {
  transform: translateY(-3px) !important;
}

/* Blog filter buttons — warm gold active state */
body:not(.v3-shop) .ak-filter-btn.active {
  background: linear-gradient(135deg, #0A0810, #1A0A3E) !important;
  border-color: rgba(200,169,110,0.15) !important;
  box-shadow: 0 2px 16px rgba(200,169,110,0.08) !important;
  color: #FFFFFF !important;
}

/* Blog submit button — warm gold hover */
body:not(.v3-shop) .ak-submit-btn:hover {
  box-shadow: 0 8px 24px rgba(200,169,110,0.2) !important;
}


/* ═══════════════════════════════════════════════════════
   §6 — NEWSLETTER / SUBSCRIBE ELEVATION
   
   Upgrades newsletter sections on all pages to match
   the Shop's dark-with-gold subscribe aesthetic.
   ═══════════════════════════════════════════════════════ */

/* Unified Global Newsletter — Shop-style dark-with-gold + wave transition */
.ak-global-newsletter {
  position: relative;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0 !important;           /* Override global section { padding: 100px 0 } */
  background: transparent !important; /* Seamless blending with the page background */
}

/* Layout spacing overrides to close the gap above the global newsletter section */
.about-origin {
  padding-bottom: 60px !important; /* Elegant natural breathing room */
}
.ak-latest-section {
  margin-bottom: 50px !important;  /* Balanced margin between cards and wave */
}
.faq2-section {
  padding-bottom: 60px !important; /* Comfortable spacing for Home page */
}

.ak-global-nl-wave {
  position: relative;
  width: 100%;
  height: 45px;
  margin-top: 0; /* Align directly under content without artificial overlapping */
  margin-bottom: -2px; /* Small sub-pixel overlap to avoid rendering seams */
  overflow: hidden;
  z-index: 2;
  pointer-events: none;
  background: transparent !important; /* No straight-line background seam */
}
.ak-global-nl-wave .ak-wave-svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 45px;
  max-height: 45px;
}
.ak-global-nl-wave .ak-wave-layers > use {
  animation: ak-wave-flow 35s cubic-bezier(.55,.5,.45,.5) infinite; /* Even slower, more static flow */
  stroke: none !important;
}
.ak-global-nl-wave .ak-wave-layers > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 16s;
}
.ak-global-nl-wave .ak-wave-layers > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 22s;
}
.ak-global-nl-wave .ak-wave-layers > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 28s;
}
.ak-global-nl-wave .ak-wave-layers > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 38s;
}
@keyframes ak-wave-flow {
  0% { transform: translate3d(-90px, 0, 0); }
  100% { transform: translate3d(85px, 0, 0); }
}
.ak-global-nl-inner {
  text-align: center;
  background: linear-gradient(180deg, #0A0810 0%, #0E0820 50%, #06030F 100%);
  padding: 100px 20px 80px;
  color: #F5EFE0;
  position: relative;
  width: 100%;
  max-width: 100% !important;
}
.ak-global-nl-inner::before {
  display: none; /* Removed the 1px line that conflicted with the wave flow */
}
.ak-global-nl-eyebrow {
  font-family: var(--font-m, 'Plus Jakarta Sans', sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #C8A96E;
  margin-bottom: 16px;
  display: inline-block;
  padding: 6px 16px;
  border-radius: 20px;
  background: rgba(200,169,110,0.06);
  border: 1px solid rgba(200,169,110,0.12);
}
.ak-global-nl-title {
  font-size: clamp(32px, 5vw, 44px);
  margin-bottom: 16px;
  line-height: 1.2;
}
.ak-global-nl-title em {
  font-family: var(--font-editorial, 'Cormorant Garamond', serif);
  font-style: italic;
  font-weight: 300;
  color: #FFB800;
}
.ak-global-nl-sub {
  font-size: 16px;
  color: rgba(245,239,224,0.6);
  max-width: 500px;
  margin: 0 auto 32px;
  line-height: 1.6;
}
.ak-global-nl-form {
  display: flex;
  max-width: 440px;
  margin: 0 auto;
  position: relative;
}
.ak-global-nl-input {
  flex: 1;
  padding: 16px 24px;
  border-radius: 30px;
  border: 1px solid rgba(255,184,0,0.2);
  background: rgba(10,8,16,0.6);
  color: #fff;
  font-family: var(--font-m, 'Plus Jakarta Sans', sans-serif);
  font-size: 15px;
  outline: none;
  transition: all 0.3s ease;
}
.ak-global-nl-input:focus {
  border-color: rgba(255,184,0,0.5);
  box-shadow: 0 0 0 3px rgba(255,184,0,0.1);
}
.ak-global-nl-btn {
  position: absolute;
  right: 6px;
  top: 6px;
  bottom: 6px;
  background: linear-gradient(135deg, #FFB800, #C8A96E);
  color: #0A0810;
  font-family: var(--font-m, 'Plus Jakarta Sans', sans-serif);
  border: none;
  border-radius: 24px;
  padding: 0 24px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.ak-global-nl-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255,184,0,0.3);
}

@media (max-width: 768px) {
  .ak-global-nl-wave { height: 30px; margin-top: 0; }
  .ak-global-nl-wave .ak-wave-svg { height: 30px; min-height: 30px; max-height: 30px; }
  .ak-global-nl-form {
    flex-direction: column;
    gap: 12px;
  }
  .ak-global-nl-btn {
    position: static;
    width: 100%;
    padding: 16px;
  }
}

/* About page CTA section — cosmic + warm gold treatment */
body:not(.v3-shop) .about-cta-section {
  background: linear-gradient(180deg, 
    transparent 0%, 
    rgba(10,8,16,0.3) 30%, 
    rgba(10,8,16,0.6) 100%
  ) !important;
  position: relative;
}
body:not(.v3-shop) .about-cta-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(200,169,110,0.2), 
    transparent
  );
}

/* About CTA button — warm gold gradient */
body:not(.v3-shop) .about-cta-btn {
  background: linear-gradient(135deg, rgba(200,169,110,0.15), rgba(255,184,0,0.1)) !important;
  border: 1px solid rgba(200,169,110,0.25) !important;
  color: rgba(245,239,224,0.9) !important;
}
body:not(.v3-shop) .about-cta-btn:hover {
  background: linear-gradient(135deg, rgba(200,169,110,0.25), rgba(255,184,0,0.2)) !important;
  border-color: rgba(200,169,110,0.4) !important;
}


/* ═══════════════════════════════════════════════════════
   §7 — MICRO-INTERACTIONS: Premium Hover & Reveal
   
   Adds the subtle, alive feel of the Shop page to
   interactive elements across the site.
   ═══════════════════════════════════════════════════════ */

/* Smooth scroll behavior site-wide */
html {
  scroll-behavior: smooth;
}

/* Link hover — warm gold underline animation */
body:not(.v3-shop) .about-section a:not(.about-cta-btn):hover,
body:not(.v3-shop) .ak-read-btn:hover {
  color: rgba(200,169,110,0.9) !important;
}

/* Social icon hover — warm gold glow */
.ak-unified-footer .foot-social a:hover {
  box-shadow: 0 0 16px rgba(200,169,110,0.15) !important;
}

/* Footer link columns — warm gold underline on hover */
.ak-unified-footer .foot-cols a:hover {
  color: rgba(245,239,224,0.85) !important;
}

/* Image hover zoom — subtle Ken Burns on all editorial images */
body:not(.v3-shop) .about-story-visual img,
body:not(.v3-shop) .ak-card-img,
body:not(.v3-shop) .ak-featured-img {
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
body:not(.v3-shop) .about-story-visual:hover img,
body:not(.v3-shop) .ak-card:hover .ak-card-img,
body:not(.v3-shop) .ak-featured-card:hover .ak-featured-img {
  transform: scale(1.04) !important;
}

/* Scroll-reveal — editorial fade-up (works with existing IntersectionObserver) */
body:not(.v3-shop) .r:not(.v) {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
body:not(.v3-shop) .r.v {
  opacity: 1;
  transform: translateY(0);
}


/* ═══════════════════════════════════════════════════════
   §8 — WAVE SECTION TRANSITIONS
   
   Adds liquid wave dividers between key sections
   for a premium flow matching the Shop page.
   These use the same SVG pattern as Footer.astro.
   ═══════════════════════════════════════════════════════ */

/* Reusable wave container — for sections that inject waves via JS */
.ak-section-wave {
  position: relative;
  width: 100%;
  height: 80px;
  overflow: hidden;
  margin-bottom: -1px;
  z-index: 3;
}
.ak-section-wave .ak-wave-svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 80px;
  max-height: 80px;
}
@media (max-width: 768px) {
  .ak-section-wave { height: 50px; }
  .ak-section-wave .ak-wave-svg { height: 50px; min-height: 50px; }
}


/* ═══════════════════════════════════════════════════════
   §9 — MOBILE REFINEMENTS: Responsive Luxury
   ═══════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Slightly reduce serif heading size on mobile for readability */
  body:not(.v3-shop) h1 em,
  body:not(.v3-shop) h2 em {
    font-size: 0.98em;
  }
  
  /* Tighter spacing on mobile dividers */
  body:not(.v3-shop) .about-divider {
    margin: 0 !important;
  }
  
  /* Newsletter section — full bleed on mobile */
  body:not(.v3-shop) .ak-newsletter {
    border-radius: 0 !important;
    margin: 0 -20px;
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 480px) {
  /* Even tighter serif treatment */
  body:not(.v3-shop) h1 em,
  body:not(.v3-shop) h2 em {
    font-size: 0.95em;
  }
  
  body:not(.v3-shop) .about-quote p {
    font-size: 16px !important;
  }
}


/* ═══════════════════════════════════════════════════════
   §10 — ENHANCED SELECTION & FOCUS STATES
   
   Premium selection colors and focus outlines
   matching the warm-cosmic editorial palette.
   ═══════════════════════════════════════════════════════ */

::selection {
  background: rgba(200,169,110,0.25);
  color: inherit;
}

::-moz-selection {
  background: rgba(200,169,110,0.25);
  color: inherit;
}

/* Focus outlines — warm gold ring */
body:not(.v3-shop) button:focus-visible,
body:not(.v3-shop) a:focus-visible,
body:not(.v3-shop) input:focus-visible {
  outline: 2px solid rgba(200,169,110,0.5);
  outline-offset: 3px;
}


/* ═══════════════════════════════════════════════════════
   §11 — ANTI-ALIASING & RENDERING POLISH
   
   Ensures silky-smooth text rendering and hardware
   acceleration on all animated elements.
   ═══════════════════════════════════════════════════════ */

body:not(.v3-shop) {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Hardware-accelerated transforms on hover elements */
body:not(.v3-shop) .about-tech-card,
body:not(.v3-shop) .about-philosophy-card,
body:not(.v3-shop) .about-pillar,
body:not(.v3-shop) .ak-card,
body:not(.v3-shop) .t-card,
body:not(.v3-shop) .faq2-card {
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ═══════════════════════════════════════════════════════
   §12 — GLOBAL GLOWING SPOTLIGHT CARDS (GlowCard)
   ═══════════════════════════════════════════════════════ */

.about-glass-card[data-glow],
.ak-card[data-glow],
.ak-featured-card[data-glow] {
  --base: 220;
  --spread: 200;
  --radius: 20;
  --border: 1.5;
  --backdrop: rgba(10, 8, 16, 0.45);
  --backup-border: rgba(255, 255, 255, 0.08);
  --size: 250;
  --outer: 1;
  --border-size: calc(var(--border, 1.5) * 1px);
  --spotlight-size: calc(var(--size, 250) * 1px);
  --saturation: 100;
  --lightness: 70;
  --bg-spot-opacity: 0.1;
  --border-spot-opacity: 1;
  --border-light-opacity: 1;
  --hue: calc(var(--base) + (var(--xp, 0) * var(--spread, 0)));
  
  position: relative;
  background-image: radial-gradient(
    var(--spotlight-size) var(--spotlight-size) at
    calc(var(--x, 0) * 1px)
    calc(var(--y, 0) * 1px),
    hsl(var(--hue, 210) calc(var(--saturation) * 1%) calc(var(--lightness) * 1%) / var(--bg-spot-opacity)), transparent
  ) !important;
  background-color: var(--backdrop) !important;
  background-size: calc(100% + (2 * var(--border-size))) calc(100% + (2 * var(--border-size))) !important;
  background-position: 50% 50% !important;
  background-attachment: fixed !important;
  border: var(--border-size) solid var(--backup-border) !important;
  box-shadow: 0 1rem 2rem -1rem black !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* Custom card radii */
.about-glass-card[data-glow] { --radius: 20; }
.ak-card[data-glow] { --radius: 20; }
.ak-featured-card[data-glow] { --radius: 24; }

/* Spotlight Border Masking pseudo-elements */
.about-glass-card[data-glow]::before,
.about-glass-card[data-glow]::after,
.ak-card[data-glow]::before,
.ak-card[data-glow]::after,
.ak-featured-card[data-glow]::before,
.ak-featured-card[data-glow]::after {
  pointer-events: none;
  content: "" !important;
  position: absolute;
  inset: calc(var(--border-size) * -1);
  border: var(--border-size) solid transparent;
  border-radius: calc(var(--radius) * 1px) !important;
  background-attachment: fixed !important;
  background-size: calc(100% + (2 * var(--border-size))) calc(100% + (2 * var(--border-size))) !important;
  background-repeat: no-repeat !important;
  background-position: 50% 50% !important;
  
  /* Masking styles for border outline */
  mask: linear-gradient(transparent, transparent), linear-gradient(white, white);
  mask-clip: padding-box, border-box;
  mask-composite: intersect;
  -webkit-mask: linear-gradient(transparent, transparent), linear-gradient(white, white);
  -webkit-mask-clip: padding-box, border-box;
  -webkit-mask-composite: source-in;
  z-index: 5;
}

/* Primary border color gradient */
.about-glass-card[data-glow]::before,
.ak-card[data-glow]::before,
.ak-featured-card[data-glow]::before {
  background-image: radial-gradient(
    calc(var(--spotlight-size) * 0.75) calc(var(--spotlight-size) * 0.75) at
    calc(var(--x, 0) * 1px)
    calc(var(--y, 0) * 1px),
    hsl(var(--hue, 210) calc(var(--saturation) * 1%) calc(var(--lightness) - 10 * 1%) / var(--border-spot-opacity)), transparent 100%
  ) !important;
  filter: brightness(2) !important;
}

/* Secondary white shine overlay */
.about-glass-card[data-glow]::after,
.ak-card[data-glow]::after,
.ak-featured-card[data-glow]::after {
  background-image: radial-gradient(
    calc(var(--spotlight-size) * 0.5) calc(var(--spotlight-size) * 0.5) at
    calc(var(--x, 0) * 1px)
    calc(var(--y, 0) * 1px),
    hsl(0 100% 100% / var(--border-light-opacity)), transparent 100%
  ) !important;
}

/* Inner glow element (glow-backdrop) */
.about-glass-card[data-glow] .glow-backdrop,
.ak-card[data-glow] .glow-backdrop,
.ak-featured-card[data-glow] .glow-backdrop {
  position: absolute;
  inset: 0;
  will-change: filter;
  opacity: var(--outer, 1);
  border-radius: calc(var(--radius) * 1px);
  filter: blur(25px) !important;
  background: none !important;
  pointer-events: none;
  border: none !important;
  z-index: 0;
}

.about-glass-card[data-glow] .glow-backdrop::before,
.ak-card[data-glow] .glow-backdrop::before,
.ak-featured-card[data-glow] .glow-backdrop::before {
  content: "" !important;
  position: absolute;
  inset: -10px;
  border-radius: calc(var(--radius) * 1px);
  background-attachment: fixed !important;
  background-size: calc(100% + 20px) calc(100% + 20px) !important;
  background-repeat: no-repeat !important;
  background-position: 50% 50% !important;
  background-image: radial-gradient(
    calc(var(--spotlight-size) * 0.8) calc(var(--spotlight-size) * 0.8) at
    calc(var(--x, 0) * 1px)
    calc(var(--y, 0) * 1px),
    hsl(var(--hue, 210) calc(var(--saturation) * 1%) calc(var(--lightness) - 15 * 1%) / 0.18), transparent 100%
  ) !important;
}

/* Hue color mappings based on card classes */
[data-glow].gold-glow, 
[data-glow].cat-gemstones, 
[data-glow].cat-remedies {
  --base: 35;
  --spread: 50;
  --bg-spot-opacity: 0.08;
}
[data-glow].violet-glow, 
[data-glow].cat-vedic {
  --base: 275;
  --spread: 70;
  --bg-spot-opacity: 0.12;
}
[data-glow].rose-glow, 
[data-glow].cat-love {
  --base: 335;
  --spread: 60;
  --bg-spot-opacity: 0.12;
}
[data-glow].teal-glow {
  --base: 180;
  --spread: 60;
  --bg-spot-opacity: 0.1;
}
[data-glow].green-glow {
  --base: 120;
  --spread: 50;
  --bg-spot-opacity: 0.08;
}