/* ═══════════════════════════════════════════════════════════════
   AstroKamya™ Color Bridge — "Celestial Warmth" Unification
   
   Creates visual continuity between:
   - Home/Blog (Cosmic Void: #0A0618)
   - Shop (Warm Editorial: #EDD9C8)
   
   Strategy: Introduce warm cream/gold DNA into dark pages,
   and cosmic violet/starfield DNA into the warm shop page.
   
   Load this file on ALL pages AFTER page-specific CSS.
   ═══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════
   PHASE 0: REMOVE BACKGROUND DUST/STARS
   Hides noisy particle overlays from the home page
   ══════════════════════════════════════════════════ */

/* Kill Three.js star canvas */
#stars-canvas {
  display: none !important;
}

/* Kill CSS radial-gradient star dots in hero cosmos */
.h9-cosmos .h9-stars {
  display: none !important;
}

/* Kill film grain overlay */
.h9-grain {
  display: none !important;
}

/* ══════════════════════════════════════════════════
   PHASE 1: HOME PAGE WARMING
   Adds warm gold glass surfaces to the dark cosmic sections
   ══════════════════════════════════════════════════ */



/* Warm accent for trust section headings */
body:not(.v3-shop) .trust-section {
  border-top: 1px solid rgba(200,169,110,0.08);
  border-bottom: 1px solid rgba(200,169,110,0.08);
}
body:not(.v3-shop) .trust-heading-text {
  color: rgba(245,239,224,0.5) !important;
}

/* Warm gold glow on section dividers */
body:not(.v3-shop) .section-divider .divider-star {
  text-shadow: 0 0 12px rgba(200,169,110,0.4);
}

/* Warm cream surface accent for pricing cards */
body:not(.v3-shop) .pricing-card {
  border-color: rgba(200,169,110,0.08) !important;
}
body:not(.v3-shop) .pricing-card:hover {
  border-color: rgba(200,169,110,0.18) !important;
}

/* Subtle warm orb in hero background */
body:not(.v3-shop) .h9-nebula::after {
  content: '';
  position: absolute;
  bottom: -20%;
  right: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(200,169,110,0.03) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
}

/* Warm tint on concern panel hover borders */
body:not(.v3-shop) .cp-concern-card:hover {
  border-color: rgba(200,169,110,0.15) !important;
}

/* ══════════════════════════════════════════════════
   PHASE 2: SHOP PAGE COSMIC GROUNDING
   Adds cosmic violet/starfield undertones to warm shop
   ══════════════════════════════════════════════════ */

/* Cosmic starfield canvas behind hero — REMOVED (user feedback: looks bad) */

/* Cosmic violet glow in hero overlay — subtle blend */
.v3-shop .v3-hero-overlay {
  background: linear-gradient(90deg,
    rgba(245,239,224,0.97) 0%,
    rgba(245,239,224,0.90) 25%,
    rgba(245,239,224,0.55) 45%,
    rgba(245,239,224,0.10) 65%,
    transparent 85%
  ),
  linear-gradient(180deg,
    transparent 60%,
    rgba(124,58,237,0.02) 80%,
    rgba(124,58,237,0.04) 100%
  ) !important;
}

/* Elevate CTAs to Celestial Gold for brand consistency */
.v3-shop .v3-hero-cta:hover {
  background: #FFB800 !important;
  box-shadow: 0 8px 30px rgba(255,184,0,0.3) !important;
}
.v3-shop .v3-card-add:hover {
  background: #FFB800 !important;
}
.v3-shop .v3-reel-buy:hover {
  background: #FFB800 !important;
}
.v3-shop .v3-nl-btn {
  background: #FFB800 !important;
}
.v3-shop .v3-nl-btn:hover {
  background: var(--v3-cream) !important;
}

/* Cosmic gradient under the testimonials section */
.v3-shop .v3-marquee-wrapper {
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent) !important;
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent) !important;
}

/* Cosmic shimmer on active intent pill */
.v3-shop .v3-intent-pill.active {
  background: linear-gradient(135deg, #0A0810, #1A0A3E) !important;
  border-color: rgba(124,58,237,0.2) !important;
  box-shadow: 0 2px 16px rgba(124,58,237,0.1);
}

/* Cosmic accent on journey step icons */
.v3-shop .v3-journey-icon {
  border: 1px solid rgba(124,58,237,0.08);
}
.v3-shop .v3-journey-step:hover .v3-journey-icon {
  border-color: rgba(124,58,237,0.2);
  box-shadow: 0 0 20px rgba(124,58,237,0.06);
}

/* Warm-to-cosmic dividers */
.v3-shop .v3-divider {
  background: linear-gradient(90deg, 
    transparent, 
    rgba(200,169,110,0.2) 20%, 
    rgba(124,58,237,0.08) 50%, 
    rgba(200,169,110,0.2) 80%, 
    transparent
  ) !important;
}

/* Cosmic glow on USP icons */
.v3-shop .v3-usp-icon {
  transition: all 0.4s ease;
}
.v3-shop .v3-usp:hover .v3-usp-icon {
  box-shadow: 0 0 20px rgba(124,58,237,0.08);
  border-color: rgba(124,58,237,0.15);
}

/* Story section quote — use brand violet accent */
.v3-shop .v3-story-quote {
  border-left-color: #8B6DB5 !important;
}

/* Enhanced newsletter section — deeper cosmic transition */
.v3-shop .v3-newsletter {
  background: linear-gradient(180deg, 
    var(--v3-void) 0%, 
    #0E0820 40%, 
    #120A30 100%
  ) !important;
}
.v3-shop .v3-newsletter::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124,58,237,0.2), rgba(255,184,0,0.15), transparent);
}

/* ══════════════════════════════════════════════════
   PHASE 3: BLOG PAGE WARMING
   Adds warm gold surfaces and cream accents to blog
   ══════════════════════════════════════════════════ */

/* Warm gold surface accent on featured post card */
.blog-featured-card {
  border-color: rgba(200,169,110,0.08) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.3), 0 0 0 1px rgba(200,169,110,0.03) inset !important;
}
.blog-featured-card:hover {
  border-color: rgba(200,169,110,0.18) !important;
  box-shadow: 0 16px 56px rgba(0,0,0,0.4), 0 0 40px rgba(200,169,110,0.04) !important;
}

/* Warm cream accent on blog cards */
.blog-card {
  box-shadow: 0 4px 24px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(200,169,110,0.03) !important;
}
.blog-card:hover {
  border-color: rgba(200,169,110,0.15) !important;
  box-shadow: 0 12px 48px rgba(0,0,0,0.35), 0 0 24px rgba(200,169,110,0.05), inset 0 0 0 1px rgba(200,169,110,0.06) !important;
}

/* Warm gold on blog card title hover */
.blog-card:hover .blog-card-body h3 {
  color: #F5EFE0 !important;
}

/* Warm cream badge on hero pill */
.blog-hero-pill {
  border-color: rgba(200,169,110,0.12) !important;
  background: rgba(200,169,110,0.05) !important;
}

/* Warm gradient section divider in blog hero */
.blog-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,169,110,0.15), rgba(124,58,237,0.08), transparent);
}

/* Enhanced blog newsletter warm accent */
.blog-newsletter {
  border-color: rgba(200,169,110,0.1) !important;
}
.blog-newsletter::before {
  background: linear-gradient(90deg, var(--violet), rgba(200,169,110,0.5), var(--gold)) !important;
}

/* Warm section labels */
.blog-section-label::after {
  background: linear-gradient(90deg, rgba(200,169,110,0.25), transparent) !important;
}

/* Warm orb in blog ambient background */
.blog-bg::after {
  content: '';
  position: fixed;
  bottom: 20%;
  left: 30%;
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(200,169,110,0.03) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  filter: blur(100px);
  z-index: 0;
}

/* ══════════════════════════════════════════════════
   PHASE 4: SHARED TRANSITIONS
   Smooth elements that appear on all pages
   ══════════════════════════════════════════════════ */

/* Unified footer cosmic-to-warm gradient bar */
.footer-bottom::before,
.ak-footer::before {
  content: '';
  display: block;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(124,58,237,0.15) 20%, 
    rgba(200,169,110,0.2) 50%, 
    rgba(124,58,237,0.15) 80%, 
    transparent
  );
  margin-bottom: 24px;
}

/* Navbar glass pill — warm gold accent on active state */
#ak-unified-nav .ak-nav-link.active {
  background: rgba(200,169,110,0.06) !important;
  border-color: rgba(200,169,110,0.1) !important;
}

/* Warm shimmer on navbar CTA */
#ak-unified-nav .ak-nav-cta {
  box-shadow: 0 2px 16px rgba(200,169,110,0.2), 0 4px 24px rgba(255,184,0,0.15) !important;
}