/* Emili glitter / ember particles — shared */

.nt-glitter-layer,
.nt-glitter-ambient,
.nt-glitter-stream {
    position: absolute;
    inset: 0;
    overflow: visible;
    pointer-events: none;
    z-index: 4;
}

.nt-glitter-burst-layer {
    position: fixed;
    width: 0;
    height: 0;
    overflow: visible;
    pointer-events: none;
    z-index: 100010;
}

.nt-glitter-ember {
    position: absolute;
    left: 50%;
    bottom: 0;
    opacity: 0;
    animation: nt-glitter-rise var(--dur, 1.5s) ease-out forwards;
    will-change: transform, opacity;
}

.nt-glitter-ember--dot {
    width: var(--size, 4px);
    height: var(--size, 4px);
    border-radius: 50%;
    background: var(--color, #ff3d72);
    box-shadow: 0 0 8px var(--color, #ff0a54), 0 0 14px rgba(255, 10, 84, 0.4);
}

.nt-glitter-ember--shard {
    width: var(--size, 5px);
    height: var(--size, 5px);
    border-radius: 1px;
    background: linear-gradient(135deg, #fff, var(--color, #ff3d72));
    box-shadow: 0 0 10px var(--color, #ff0a54);
    animation-name: nt-glitter-rise-shard;
}

.nt-glitter-ember--flare {
    width: 2px;
    height: var(--size, 12px);
    border-radius: 999px;
    background: linear-gradient(to top, var(--color, #ff0a54), #fff);
    box-shadow: 0 0 12px var(--color, #ff0a54), 0 0 20px rgba(255, 61, 114, 0.45);
    animation-name: nt-glitter-rise-flare;
}

/* Burst — cząsteczki lecą we wszystkie strony, głównie w górę */
.nt-glitter-burst-layer .nt-glitter-ember,
.nt-glitter-burst-layer .nt-glitter-ember--dot,
.nt-glitter-burst-layer .nt-glitter-ember--shard,
.nt-glitter-burst-layer .nt-glitter-ember--flare {
    animation: nt-glitter-burst var(--dur, 1s) ease-out forwards !important;
}

.nt-glitter-burst-layer .nt-glitter-ember--dot {
    width: var(--size, 6px);
    height: var(--size, 6px);
}

@keyframes nt-glitter-rise {
    0% {
        opacity: 0;
        transform: translate(calc(-50% + var(--x, 0px)), 10px) scale(0.15);
    }
    12% { opacity: 1; }
    75% { opacity: 0.85; }
    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--x, 0px) + var(--drift, 0px)), var(--rise, -120px)) scale(0.45);
    }
}

@keyframes nt-glitter-rise-shard {
    0% {
        opacity: 0;
        transform: translate(calc(-50% + var(--x, 0px)), 8px) scale(0.1) rotate(0deg);
    }
    15% { opacity: 1; }
    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--x, 0px) + var(--drift, 0px)), var(--rise, -120px)) scale(0.9) rotate(240deg);
    }
}

@keyframes nt-glitter-rise-flare {
    0% {
        opacity: 0;
        transform: translate(calc(-50% + var(--x, 0px)), 12px) scaleY(0.15);
    }
    18% { opacity: 1; }
    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--x, 0px) + var(--drift, 0px)), var(--rise, -120px)) scaleY(1.15);
    }
}

@keyframes nt-glitter-burst {
    0% {
        opacity: 0;
        transform: translate(calc(-50% + var(--x, 0px)), 4px) scale(0.25);
    }
    15% { opacity: 1; }
    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--x, 0px) + var(--drift, 0px)), var(--rise, -100px)) scale(0.75);
    }
}

/* Ambient — delikatne tło */
.nt-glitter-ambient {
    z-index: 1;
}

.nt-glitter-ambient .nt-glitter-ember {
    opacity: 0.55;
    animation-name: nt-glitter-ambient-float;
}

@keyframes nt-glitter-ambient-float {
    0% {
        opacity: 0;
        transform: translate(calc(-50% + var(--x, 0px)), 0) scale(0.3);
    }
    20% { opacity: var(--peak, 0.5); }
    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--x, 0px) + var(--drift, 0px)), var(--rise, -180px)) scale(0.6);
    }
}

.nt-home .nt-hero-actions .nt-btn,
.nt-home .vip-actions .nt-btn,
[data-nt-glitter-stream].nt-btn,
[data-nt-glitter-stream].auth-button,
[data-nt-glitter-stream].btn-register,
[data-nt-glitter-stream].vip-btn {
    position: relative;
    z-index: 2;
    overflow: visible;
}

[data-nt-glitter-stream].nt-btn .nt-glitter-stream,
[data-nt-glitter-stream].auth-button .nt-glitter-stream,
[data-nt-glitter-stream].btn-register .nt-glitter-stream,
[data-nt-glitter-stream].vip-btn .nt-glitter-stream {
    inset: -10px -8px 0;
    z-index: 0;
}

[data-nt-glitter-click],
.nt-glitter-click,
.nt-home .nt-hero-actions .nt-btn,
.auth-button,
.btn-register {
    position: relative;
    overflow: visible;
    touch-action: manipulation;
}

@media (prefers-reduced-motion: reduce) {
    .nt-glitter-ember,
    .nt-glitter-burst-layer {
        display: none !important;
    }
}