/* ===== BlessingBliss - Mystical & Divine Design Enhancements ===== */

/* ===== Sacred Geometry Background ===== */
.sacred-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cg fill='none' stroke='%23c9a227' stroke-width='0.5'%3E%3Ccircle cx='200' cy='200' r='180'/%3E%3Ccircle cx='200' cy='200' r='140'/%3E%3Ccircle cx='200' cy='200' r='100'/%3E%3Ccircle cx='200' cy='200' r='60'/%3E%3Ccircle cx='200' cy='20' r='60'/%3E%3Ccircle cx='200' cy='380' r='60'/%3E%3Ccircle cx='20' cy='200' r='60'/%3E%3Ccircle cx='380' cy='200' r='60'/%3E%3Ccircle cx='55' cy='55' r='60'/%3E%3Ccircle cx='345' cy='55' r='60'/%3E%3Ccircle cx='55' cy='345' r='60'/%3E%3Ccircle cx='345' cy='345' r='60'/%3E%3Cpath d='M200 20 L380 200 L200 380 L20 200 Z'/%3E%3Cpath d='M200 60 L340 200 L200 340 L60 200 Z'/%3E%3Cpath d='M200 100 L300 200 L200 300 L100 200 Z'/%3E%3Cpath d='M100 100 L300 100 L300 300 L100 300 Z'/%3E%3Cpath d='M140 140 L260 140 L260 260 L140 260 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 400px 400px;
  animation: sacredDrift 120s linear infinite;
}

@keyframes sacredDrift {
  from { background-position: 0 0; }
  to { background-position: 400px 400px; }
}

/* ===== Starfield Canvas ===== */
#starfield {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* ===== Mystical Fog Layer ===== */
.mystical-fog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  background: 
    radial-gradient(ellipse 600px 300px at 20% 30%, rgba(201, 162, 39, 0.08) 0%, transparent 70%),
    radial-gradient(ellipse 500px 400px at 80% 60%, rgba(176, 141, 87, 0.06) 0%, transparent 70%),
    radial-gradient(ellipse 400px 500px at 50% 90%, rgba(201, 162, 39, 0.05) 0%, transparent 70%);
  animation: fogDrift 20s ease-in-out infinite alternate;
}

@keyframes fogDrift {
  0% { transform: translateX(0) translateY(0); opacity: 0.7; }
  50% { transform: translateX(20px) translateY(-10px); opacity: 1; }
  100% { transform: translateX(-15px) translateY(5px); opacity: 0.8; }
}

/* Ensure content sits above mystical layers */
.hero, .section, .features, .header, .footer, .customize-page, .cart-page, .contact-page, .about-hero, .breadcrumb, .product-detail, .container > * {
  position: relative;
  z-index: 2;
}

/* ===== Enhanced Hero with Divine Light ===== */
.hero {
  background: radial-gradient(ellipse at center, #1a1714 0%, #0d0b08 50%, #050402 100%) !important;
}

.hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, rgba(201, 162, 39, 0.15) 30%, rgba(201, 162, 39, 0.3) 50%, rgba(201, 162, 39, 0.15) 70%, transparent);
  filter: blur(40px);
  z-index: 0;
  animation: divineLight 8s ease-in-out infinite;
}

@keyframes divineLight {
  0%, 100% { opacity: 0.3; transform: translateX(-50%) scaleY(1); }
  50% { opacity: 0.8; transform: translateX(-50%) scaleY(1.05); }
}

/* Hero rotating mandala */
.hero-mandala {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 700px;
  height: 700px;
  z-index: 0;
  opacity: 0.12;
  pointer-events: none;
  animation: rotateSlow 60s linear infinite;
}

.hero-mandala svg {
  width: 100%;
  height: 100%;
}

@keyframes rotateSlow {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Second counter-rotating mandala */
.hero-mandala-2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 500px;
  z-index: 0;
  opacity: 0.10;
  pointer-events: none;
  animation: rotateSlowReverse 80s linear infinite;
}

.hero-mandala-2 svg {
  width: 100%;
  height: 100%;
}

@keyframes rotateSlowReverse {
  from { transform: translate(-50%, -50%) rotate(360deg); }
  to { transform: translate(-50%, -50%) rotate(0deg); }
}

/* ===== Glowing Hero Symbol ===== */
.hero-symbol {
  position: relative;
  animation: floatGently 4s ease-in-out infinite;
}

.hero-symbol::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(201, 162, 39, 0.3) 0%, transparent 70%);
  border-radius: 50%;
  animation: auraPulse 3s ease-in-out infinite;
}

@keyframes floatGently {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes auraPulse {
  0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.3); }
}

/* ===== Shimmering Hero Title ===== */
.hero h1 {
  position: relative;
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 30%, #fff8e0 50%, var(--gold) 70%, var(--brass) 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 6s ease-in-out infinite;
}

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

/* ===== Mystical Quote Section ===== */
.mystical-quote {
  text-align: center;
  padding: 60px 24px;
  position: relative;
  z-index: 2;
}

.mystical-quote::before,
.mystical-quote::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 120px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.mystical-quote::before { left: 10%; }
.mystical-quote::after { right: 10%; }

.quote-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.6rem;
  font-style: italic;
  color: var(--text-secondary);
  max-width: 700px;
  margin: 0 auto 16px;
  line-height: 1.6;
  position: relative;
}

.quote-text::before {
  content: '\201C';
  font-size: 3rem;
  color: var(--gold);
  opacity: 0.3;
  position: absolute;
  top: -20px;
  left: -30px;
}

.quote-author {
  font-size: 0.85rem;
  color: var(--gold);
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ===== Enhanced Product Cards with Mystical Glow ===== */
.product-card {
  position: relative;
}

.product-card::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  background: linear-gradient(135deg, transparent, rgba(201, 162, 39, 0.2), transparent);
  border-radius: var(--radius-lg);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: -1;
}

.product-card:hover::before {
  opacity: 1;
}

.product-image {
  position: relative;
  overflow: hidden;
}

.product-image::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 80%;
  background: radial-gradient(circle, rgba(201, 162, 39, 0.08) 0%, transparent 70%);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 0;
}

.product-card:hover .product-image::before {
  opacity: 1;
  animation: auraPulse 2s ease-in-out infinite;
}

.product-image svg {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 0 8px rgba(201, 162, 39, 0.2));
  transition: filter 0.4s ease, transform 0.4s ease;
}

.product-card:hover .product-image svg {
  filter: drop-shadow(0 0 16px rgba(201, 162, 39, 0.5));
}

/* Mystical rotating ring on product hover */
.product-image::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border: 1px solid rgba(201, 162, 39, 0.3);
  border-radius: 50%;
  opacity: 0;
  transition: all 0.5s ease;
  z-index: 0;
}

.product-card:hover .product-image::after {
  width: 90%;
  height: 90%;
  opacity: 1;
  animation: rotateRing 4s linear infinite;
}

@keyframes rotateRing {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ===== Section Divider with Sacred Symbol ===== */
.sacred-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 40px 0;
  opacity: 0.5;
}

.sacred-divider .line {
  width: 100px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}

.sacred-divider .line:last-child {
  background: linear-gradient(90deg, var(--gold), transparent);
}

.sacred-divider svg {
  width: 24px;
  height: 24px;
  color: var(--gold);
  animation: rotateSlow 10s linear infinite;
}

/* ===== Enhanced Buttons with Mystical Glow ===== */
.btn-primary {
  position: relative;
  overflow: hidden;
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.6s ease;
}

.btn-primary:hover::before {
  left: 100%;
}

/* ===== Mystical Scroll Reveal ===== */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

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

.reveal:nth-child(2) { transition-delay: 0.1s; }
.reveal:nth-child(3) { transition-delay: 0.2s; }
.reveal:nth-child(4) { transition-delay: 0.3s; }
.reveal:nth-child(5) { transition-delay: 0.4s; }
.reveal:nth-child(6) { transition-delay: 0.5s; }

/* ===== Floating Particles ===== */
.particle {
  position: fixed;
  width: 3px;
  height: 3px;
  background: var(--gold);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  box-shadow: 0 0 6px rgba(201, 162, 39, 0.6);
}

/* ===== Constellation Lines ===== */
.constellation-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.15;
}

/* ===== Enhanced Customize Preview ===== */
.preview-card {
  position: relative;
  overflow: hidden;
}

.preview-card::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(201, 162, 39, 0.06) 0%, transparent 70%);
  animation: auraPulse 5s ease-in-out infinite;
  pointer-events: none;
}

.preview-amulet svg {
  animation: floatGently 5s ease-in-out infinite;
}

/* ===== Mystical Badge Animation ===== */
.product-badge {
  position: relative;
  overflow: hidden;
}

.product-badge::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: badgeShine 3s ease-in-out infinite;
}

@keyframes badgeShine {
  0%, 100% { left: -100%; }
  50% { left: 100%; }
}

/* ===== Glowing Section Headers ===== */
.section-header h2 {
  position: relative;
  text-shadow: 0 0 30px rgba(201, 162, 39, 0.15);
}

.section-header .accent {
  position: relative;
  display: inline-block;
}

.section-header .accent::before,
.section-header .accent::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}

.section-header .accent::before {
  right: 100%;
  margin-right: 16px;
}

.section-header .accent::after {
  left: 100%;
  margin-left: 16px;
  background: linear-gradient(90deg, var(--gold), transparent);
}

/* ===== Feature Icons with Divine Glow ===== */
.feature-icon {
  position: relative;
  filter: drop-shadow(0 0 8px rgba(201, 162, 39, 0.3));
  animation: floatGently 5s ease-in-out infinite;
}

.feature-item:nth-child(1) .feature-icon { animation-delay: 0s; }
.feature-item:nth-child(2) .feature-icon { animation-delay: 1s; }
.feature-item:nth-child(3) .feature-icon { animation-delay: 2s; }
.feature-item:nth-child(4) .feature-icon { animation-delay: 3s; }

/* ===== Mystical Loading Effect ===== */
@keyframes mysticAppear {
  0% { opacity: 0; transform: scale(0.8) rotate(-5deg); filter: blur(10px); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); filter: blur(0); }
}

.fade-in {
  animation: mysticAppear 0.8s ease forwards;
}

/* ===== Enhanced Cart Icon ===== */
.cart-btn {
  position: relative;
}

.cart-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  background: radial-gradient(circle, rgba(201, 162, 39, 0.15) 0%, transparent 70%);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.cart-btn:hover::after {
  opacity: 1;
}

/* ===== Value Card Divine Glow ===== */
.value-card {
  position: relative;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.value-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(201, 162, 39, 0.1);
}

.value-card svg {
  filter: drop-shadow(0 0 12px rgba(201, 162, 39, 0.4));
}

/* ===== Custom Amulet Preview Glow ===== */
.preview-amulet svg {
  filter: drop-shadow(0 0 20px rgba(201, 162, 39, 0.4)) drop-shadow(0 8px 24px rgba(201, 162, 39, 0.2));
}

/* ===== Mystical Input Focus Glow ===== */
.text-input:focus,
.form-group input:focus,
.form-group textarea:focus {
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.1), 0 0 20px rgba(201, 162, 39, 0.1);
}

/* ===== Footer Mystical Enhancement ===== */
.footer {
  position: relative;
}

.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.footer-brand .logo {
  text-shadow: 0 0 20px rgba(201, 162, 39, 0.3);
}

/* ===== Option Choice Mystical Active State ===== */
.option-choice.active,
.shape-option.active,
.symbol-option.active,
.finish-option.active {
  box-shadow: 0 0 12px rgba(201, 162, 39, 0.15), inset 0 0 12px rgba(201, 162, 39, 0.05);
}

/* ===== Toast Mystical Enhancement ===== */
.toast {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), 0 0 20px rgba(201, 162, 39, 0.2);
  backdrop-filter: blur(10px);
}

/* ===== Mobile Responsive ===== */
@media (max-width: 768px) {
  .hero-mandala { width: 400px; height: 400px; }
  .hero-mandala-2 { width: 300px; height: 300px; }
  .sacred-divider .line { width: 60px; }
  .mystical-quote::before, .mystical-quote::after { width: 60px; }
  .quote-text { font-size: 1.2rem; }
}