/* ============================================
   Elegant Stone — Atmospheric Effects
   "Obsidian Bazaar" signature layer

   These effects create the memorable, context-
   specific visual identity that separates
   Elegant Stone from generic dark templates.
   ============================================ */

/* ── Mosaic Shimmer ───────────────────────────
   Subtle animated color reflections inspired by
   mosaic lamp light in a dark room.
   Used on hero overlays and CTA backgrounds.
   ──────────────────────────────────────────── */

.es-mosaic-shimmer {
  position: relative;
  overflow: hidden;
}

.es-mosaic-shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 200px 200px at 20% 80%, var(--color-effect-glow-gold) 0%, transparent 70%),
    radial-gradient(ellipse 150px 250px at 75% 20%, var(--color-effect-glow-copper) 0%, transparent 70%),
    radial-gradient(ellipse 180px 180px at 50% 60%, var(--color-effect-glow-emerald) 0%, transparent 70%);
  animation: mosaicDrift 12s var(--ease-standard) infinite alternate;
}

@keyframes mosaicDrift {
  0% {
    background-position: 0% 0%, 100% 100%, 50% 50%;
    opacity: 0.6;
  }
  33% {
    opacity: 1;
  }
  66% {
    opacity: 0.7;
  }
  100% {
    background-position: 100% 100%, 0% 0%, 50% 0%;
    opacity: 0.9;
  }
}

/* ── Gemstone Glow ────────────────────────────
   Category cards emit a soft colored glow on
   hover, matching their "gemstone family" color.
   Gives each category a unique identity.
   ──────────────────────────────────────────── */

.es-category-card[data-category="gemstones"]::before,
.es-category-card[data-category="jewelry"]::before,
.es-category-card[data-category="gifts"]::before {
  /* Gold family */
  background: radial-gradient(ellipse at 50% 100%, var(--color-effect-hover-gold) 0%, transparent 70%);
}

.es-category-card[data-category="lamps"]::before,
.es-category-card[data-category="incense"]::before,
.es-category-card[data-category="swords"]::before {
  /* Copper family */
  background: radial-gradient(ellipse at 50% 100%, var(--color-effect-hover-copper) 0%, transparent 70%);
}

.es-category-card[data-category="spiritual"]::before,
.es-category-card[data-category="decor"]::before,
.es-category-card[data-category="clothing"]::before {
  /* Emerald family */
  background: radial-gradient(ellipse at 50% 100%, var(--color-effect-hover-emerald) 0%, transparent 70%);
}

.es-category-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  transition: opacity var(--duration-medium) var(--ease-standard);
  pointer-events: none;
  border-radius: inherit;
}

.es-category-card:hover::before {
  opacity: 1;
}

/* ── Gold Grain Divider ───────────────────────
   A more refined section divider than a plain line.
   Shimmering gold particles that fade at edges.
   ──────────────────────────────────────────── */

.es-divider-grain {
  position: relative;
  height: 1px;
  max-width: 300px;
  margin: var(--space-10) auto;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--md-ref-palette-primary50) 15%,
    var(--md-sys-color-primary) 50%,
    var(--md-ref-palette-primary50) 85%,
    transparent 100%
  );
}

.es-divider-grain::before,
.es-divider-grain::after {
  content: '';
  position: absolute;
  top: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--md-sys-color-primary);
  box-shadow: 0 0 8px var(--md-sys-color-primary);
}

.es-divider-grain::before { left: 50%; transform: translateX(-50%); }
.es-divider-grain::after { display: none; }

/* ── Warm Vignette ────────────────────────────
   Full-page edge darkening for immersive depth.
   Stronger than just a dark background — it's
   the "you're inside the store" feeling.
   ──────────────────────────────────────────── */

.es-vignette {
  position: relative;
}

.es-vignette::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 70% 60% at 50% 50%,
    transparent 40%,
    var(--color-scrim-light) 100%
  );
}

/* ── Floating Light Particles ─────────────────
   CSS-only animated dots mimicking dust motes
   in a beam of light. Used sparingly on hero.
   ──────────────────────────────────────────── */

.es-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.es-particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: var(--md-sys-color-primary);
  border-radius: 50%;
  opacity: 0;
  animation: particleFloat linear infinite;
}

.es-particle:nth-child(1) {
  left: 15%; top: 80%;
  animation-duration: 8s; animation-delay: 0s;
  box-shadow: 0 0 4px var(--color-effect-spark-gold);
}
.es-particle:nth-child(2) {
  left: 45%; top: 90%;
  animation-duration: 10s; animation-delay: 2s;
  width: 3px; height: 3px;
  box-shadow: 0 0 6px var(--color-effect-spark-gold);
}
.es-particle:nth-child(3) {
  left: 70%; top: 85%;
  animation-duration: 7s; animation-delay: 4s;
  box-shadow: 0 0 4px var(--color-effect-spark-copper);
  background: var(--md-sys-color-secondary);
}
.es-particle:nth-child(4) {
  left: 30%; top: 75%;
  animation-duration: 11s; animation-delay: 1s;
  box-shadow: 0 0 3px var(--color-effect-spark-gold);
}
.es-particle:nth-child(5) {
  left: 85%; top: 70%;
  animation-duration: 9s; animation-delay: 3s;
  width: 1px; height: 1px;
  box-shadow: 0 0 3px var(--color-effect-spark-emerald);
  background: var(--md-sys-color-tertiary);
}
.es-particle:nth-child(6) {
  left: 55%; top: 95%;
  animation-duration: 13s; animation-delay: 5s;
  box-shadow: 0 0 5px var(--color-effect-spark-gold);
}

@keyframes particleFloat {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 0.6;
  }
  50% {
    opacity: 0.3;
  }
  90% {
    opacity: 0.5;
  }
  100% {
    transform: translateY(-80vh) translateX(30px);
    opacity: 0;
  }
}

/* ── Hero Title Gradient Text ─────────────────
   Animated gold-to-copper gradient on key headings.
   Subtle and refined, not rainbow chaos.
   ──────────────────────────────────────────── */

.es-text-shimmer {
  background: linear-gradient(
    105deg,
    var(--md-ref-palette-primary80) 0%,
    var(--md-sys-color-primary) 25%,
    var(--md-ref-palette-primary80) 50%,
    var(--md-sys-color-secondary) 75%,
    var(--md-ref-palette-primary80) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textShimmer 6s var(--ease-standard) infinite;
}

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

/* ── Staggered Page Load Choreography ─────────
   The first time a page loads, elements reveal
   in a cinematic sequence from the hero down.
   ──────────────────────────────────────────── */

.es-entrance {
  opacity: 0;
  transform: translateY(30px);
  animation: entranceReveal var(--duration-long) var(--ease-decelerate) forwards;
}

.es-entrance--delay-1 { animation-delay: 100ms; }
.es-entrance--delay-2 { animation-delay: 200ms; }
.es-entrance--delay-3 { animation-delay: 350ms; }
.es-entrance--delay-4 { animation-delay: 500ms; }
.es-entrance--delay-5 { animation-delay: 700ms; }

.es-entrance--scale {
  transform: scale(0.96) translateY(16px);
}

.es-entrance--fade {
  transform: none;
}

@keyframes entranceReveal {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ── Section Ambient Glow ─────────────────────
   Sections can carry a subtle color accent glow
   matching their content's gemstone family.
   ──────────────────────────────────────────── */

.es-section--glow-gold::before {
  content: '';
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 400px;
  background: radial-gradient(ellipse, var(--color-effect-ambient-gold) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.es-section--glow-copper::before {
  content: '';
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 500px;
  height: 350px;
  background: radial-gradient(ellipse, var(--color-effect-ambient-copper) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.es-section--glow-gold,
.es-section--glow-copper {
  position: relative;
}

/* ── Interactive Cursor Trail ─────────────────
   Custom cursor style for the premium feel.
   Only on desktop, non-touch devices.
   ──────────────────────────────────────────── */

@media (hover: hover) and (pointer: fine) {
  .es-category-card,
  .es-gallery-item {
    cursor: none;
  }
}

/* ── Reduced Motion Safety ────────────────── */

@media (prefers-reduced-motion: reduce) {
  .es-mosaic-shimmer::after,
  .es-particle,
  .es-text-shimmer,
  .es-entrance {
    animation: none;
    opacity: 1;
    transform: none;
  }
}