/* ==================== Hero diamond sparkle particles ==================== */
.banner-section--sparkle,
.lg-hero--sparkle {
    overflow: hidden;
    max-width: 100%;
}

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

/* LUXE full-bleed hero: diamonds above image, below text */
.lg-hero--sparkle .lg-hero__slide .lg-hero__bg-gradient,
.lg-hero--sparkle .lg-hero__slide .lg-hero__image {
    z-index: 1;
}

.lg-hero--sparkle .lg-hero__slide .lg-hero__overlay {
    z-index: 2;
}

.lg-hero--sparkle .hero-particles--lg {
    z-index: 5;
}

.lg-hero--sparkle .lg-hero__slide .lg-hero__content-wrap {
    z-index: 6;
}

.lg-hero--sparkle .lg-hero__arrow,
.lg-hero--sparkle .lg-hero__dots,
.lg-hero--sparkle .lg-hero__scroll {
    z-index: 20;
}

.banner-section__inner {
    position: relative;
    z-index: 3;
}

.banner-section--sparkle .banner-left__content {
    position: relative;
    z-index: 6;
}

.banner-section--sparkle .banner-right-wrap {
    position: relative;
    z-index: 2;
}

.hero-particle {
    position: absolute;
    bottom: -12%;
    left: var(--x, 50%);
    width: var(--size, 6px);
    height: var(--size, 6px);
    margin-left: calc(var(--size, 6px) / -2);
    transform: rotate(45deg) scale(var(--scale, 1));
    opacity: 0;
    will-change: transform, opacity;
    animation:
        hero-particle-rise var(--duration, 9s) var(--delay, 0s) linear infinite,
        hero-particle-twinkle var(--twinkle, 2.4s) ease-in-out infinite;
}

.hero-particle--gold {
    background: linear-gradient(145deg, #fff9e6 0%, #f5d76e 35%, #d4af37 65%, #b8860b 100%);
    box-shadow:
        0 0 6px rgba(212, 175, 55, 0.75),
        0 0 14px rgba(255, 230, 150, 0.35);
}

.lg-hero--sparkle .hero-particle--gold {
    background: linear-gradient(145deg, #fff9e6 0%, hsl(var(--base-l-200, 42 54% 75%)) 40%, hsl(var(--base, 42 54% 54%)) 100%);
    box-shadow:
        0 0 8px hsl(var(--base, 42 54% 54%) / 0.65),
        0 0 18px rgba(255, 230, 160, 0.4);
}

.hero-particle--white {
    background: linear-gradient(145deg, #ffffff 0%, #f8f8f8 50%, #e8e8e8 100%);
    box-shadow:
        0 0 8px rgba(255, 255, 255, 0.95),
        0 0 16px rgba(255, 255, 255, 0.45);
}

/* Unicode diamond ◆ — floats upward with sparkle */
.hero-particle--glyph {
    background: none !important;
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
    margin-left: 0;
    transform: none;
    font-size: var(--size, 10px);
    line-height: 1;
    animation:
        hero-particle-rise-glyph var(--duration, 9s) var(--delay, 0s) linear infinite,
        hero-particle-twinkle var(--twinkle, 2.4s) ease-in-out infinite;
}

.hero-particle--glyph.hero-particle--gold {
    color: hsl(var(--base-l-200, 42 54% 75%));
    text-shadow:
        0 0 10px hsl(var(--base, 42 54% 54%) / 0.9),
        0 0 20px rgba(255, 240, 200, 0.5);
}

.hero-particle--glyph.hero-particle--white {
    color: #ffffff;
    text-shadow:
        0 0 12px rgba(255, 255, 255, 1),
        0 0 22px rgba(255, 255, 255, 0.55);
}

.hero-particle--glyph::before {
    content: "◆";
    display: block;
}

@keyframes hero-particle-rise-glyph {
    0% {
        transform: translate3d(0, 0, 0) scale(var(--scale, 1));
        opacity: 0;
    }
    8% {
        opacity: var(--peak-opacity, 0.95);
    }
    55% {
        opacity: calc(var(--peak-opacity, 0.95) * 0.85);
    }
    92% {
        opacity: 0.15;
    }
    100% {
        transform: translate3d(var(--drift, 0px), -115vh, 0) scale(calc(var(--scale, 1) * 0.75));
        opacity: 0;
    }
}

.hero-particle--soft {
    opacity: 0.65;
    filter: blur(0.3px);
}

@keyframes hero-particle-rise {
    0% {
        transform: rotate(45deg) translate3d(0, 0, 0) scale(var(--scale, 1));
        opacity: 0;
    }
    8% {
        opacity: var(--peak-opacity, 0.95);
    }
    55% {
        opacity: calc(var(--peak-opacity, 0.95) * 0.85);
    }
    92% {
        opacity: 0.15;
    }
    100% {
        transform: rotate(45deg) translate3d(var(--drift, 0px), -115vh, 0) scale(calc(var(--scale, 1) * 0.6));
        opacity: 0;
    }
}

@keyframes hero-particle-twinkle {
    0%,
    100% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(1.45);
    }
}

@media (max-width: 767px) {
    .hero-particle--soft {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-particles {
        display: none;
    }
}