/* =================================================
   CAROUSEL BASE LAYERS
==================================================== */
.carousel-item {
    position: relative;
}

.carousel-item img {
    position: relative;
    z-index: 1;
}


/* =================================================
   SPARKLE POSITIONING (WRAPPERS)
==================================================== */
.sparkle,
.sparkle-trail {
    position: absolute;
    opacity: 0; /* GSAP fades these in */
    pointer-events: none;
    z-index: 5;
}

/* Main sparkle */
.sparkle {
    top: 20%;
    right: 10%;
}

/* Trail sparkles */
.trail-1 {
    top: 28%;
    right: 14%;
}

.trail-2 {
    top: 32%;
    right: 6%;
}


/* =================================================
   DIAMOND SPARKLE VISUAL STYLE
==================================================== */
.sparkle-svg {
    width: 28px;
    height: 28px;
    display: block;

    filter:
        drop-shadow(0 0 3px rgba(255,255,255,1))
        drop-shadow(0 0 6px rgba(210,225,255,0.95))
        drop-shadow(0 0 12px rgba(185,210,255,0.85))
        drop-shadow(0 0 20px rgba(165,200,255,0.55))
        drop-shadow(0 0 32px rgba(150,190,255,0.35));

    pointer-events: none;
}


/* =================================================
   CORE SPARKLE ANIMATIONS
==================================================== */
@keyframes sparklePulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.18); }
    100% { transform: scale(1); }
}

@keyframes sparkleRotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}


/* =================================================
   MICRO‑TWINKLE RANDOMNESS (SVG ONLY)
==================================================== */
.sparkle-trail .sparkle-svg {
    animation:
        sparklePulse 2.4s ease-in-out infinite,
        sparkleRotate 18s linear infinite,
        sparkleTwinkle var(--twinkle-speed) ease-in-out infinite alternate;
}

@keyframes sparkleTwinkle {
    0%   { opacity: 0.35; transform: scale(0.85); }
    20%  { opacity: 1;    transform: scale(1.15); }
    40%  { opacity: 0.55; transform: scale(0.95); }
    60%  { opacity: 1;    transform: scale(1.2); }
    80%  { opacity: 0.45; transform: scale(0.9); }
    100% { opacity: 0.35; transform: scale(0.85); }
}

/* Trail-specific twinkle speeds */
.trail-1 .sparkle-svg { --twinkle-speed: 3.2s; }
.trail-2 .sparkle-svg { --twinkle-speed: 4.6s; }


/* =================================================
   COLUMN SPARKLES
==================================================== */
.column-sparkle {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 28px;
    height: 28px;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity .6s ease, transform .6s ease;
    pointer-events: none;
}

.fade-up.appear .column-sparkle {
    opacity: 1;
    transform: scale(1);
}

.column-sparkle .sparkle-svg {
    width: 100%;
    height: 100%;

    filter:
        drop-shadow(0 0 3px rgba(255,255,255,1))
        drop-shadow(0 0 6px rgba(210,225,255,0.95))
        drop-shadow(0 0 12px rgba(185,210,255,0.85))
        drop-shadow(0 0 20px rgba(165,200,255,0.55))
        drop-shadow(0 0 32px rgba(150,190,255,0.35));

    animation: sparkleColumnTwinkle 2.4s ease-in-out infinite;
}

@keyframes sparkleColumnTwinkle {
    0%   { opacity: 0.4; transform: scale(0.85); }
    50%  { opacity: 1;   transform: scale(1.2); }
    100% { opacity: 0.4; transform: scale(0.85); }
}


/* =================================================
   MICRO SPARKLE DUST LAYER
==================================================== */
.micro-sparkle-dust {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: visible;
    z-index: 4; /* above background, below content */
}

.micro-sparkle-dust::before,
.micro-sparkle-dust::after {
    content: "";
    position: absolute;
    inset: -25%;
    background-image:
        radial-gradient(circle, rgba(255,255,255,0.9) 0%, transparent 60%),
        radial-gradient(circle, rgba(220,235,255,0.8) 0%, transparent 70%),
        radial-gradient(circle, rgba(255,255,255,0.7) 0%, transparent 65%);
    background-size: 4px 4px, 3px 3px, 2px 2px;
    background-repeat: repeat;
    opacity: 0.35;
    animation: sparkleDustDrift 28s linear infinite;
    z-index: 4;
}

.micro-sparkle-dust::after {
    animation-duration: 38s;
    opacity: 0.25;
}

@keyframes sparkleDustDrift {
    0%   { transform: translate3d(0,0,0); }
    100% { transform: translate3d(-10%, -15%, 0); }
}


/* =================================================
   SPARKLE BURST (ON SCROLL)
==================================================== */
.sparkle-burst {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: visible;
    z-index: 20; /* above everything in the section */
    opacity: 0;
}

.sparkle-burst::before {
    content: "";
    position: absolute;
    inset: -20%;
    background-image:
        radial-gradient(circle, rgba(255,255,255,1) 0%, transparent 60%),
        radial-gradient(circle, rgba(210,225,255,0.9) 0%, transparent 70%),
        radial-gradient(circle, rgba(255,255,255,0.8) 0%, transparent 65%);
    background-size: 6px 6px, 4px 4px, 3px 3px;
    background-repeat: repeat;
    transform: scale(0.4);
    opacity: 0;
    filter:
        drop-shadow(0 0 6px rgba(255,255,255,1))
        drop-shadow(0 0 12px rgba(210,225,255,0.9))
        drop-shadow(0 0 22px rgba(180,210,255,0.7));
    transition: opacity 0.6s ease, transform 0.8s ease;
}

/* Burst activation */
.sparkle-burst.active::before {
    opacity: 1;
    transform: scale(1);
}

/* Fade-out after burst */
.sparkle-burst.fade-out::before {
    opacity: 0;
    transform: scale(1.4);
}
section.position-relative {
    overflow: visible;
}