/* ========================================
   AMBIENT.CSS - Mafla Private Server
   Floating ambient background elements (Nested Structure)
   ======================================== */

.ambient-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

/* Outer container - Handles ONLY the floating path/drift */
.ambient-item {
    position: absolute;
    pointer-events: none;
    user-select: none;
    opacity: 0;
    /* Let animation take over */
    transition: opacity 1s ease;

}

/* Inner container - Handles ONLY the internal "life" (flapping, bobbing) */
.particle-inner {
    width: 48px;
    height: 48px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    image-rendering: pixelated;
    transform-origin: center;
}

/* --- Life Animations --- */

/* Hammer Swinging */
.hammer .particle-inner {
    background-image: url('../assets/particles/hammer.png');
    animation: hammer-swing 0.8s ease-in-out infinite;
}

/* Varian hammer - kiri */
.hammer-left .particle-inner {
    background-image: url('../assets/particles/hammer.png');
    animation: hammer-left-swing 1s ease-in-out infinite;
}

/* Varian hammer - kanan */
.hammer-right .particle-inner {
    background-image: url('../assets/particles/hammer.png');
    animation: hammer-right-swing 0.9s ease-in-out infinite;
}

/* Varian hammer - naik turun */
.hammer-up-down .particle-inner {
    background-image: url('../assets/particles/hammer.png');
    animation: hammer-up-down 0.7s ease-in-out infinite;
}

/* Fork Wiggling */
.fork .particle-inner {
    background-image: url('../assets/particles/fork.png');
    animation: fork-wiggle 2.5s ease-in-out infinite;
}

/* Varian fork - goyang kiri */
.fork-left .particle-inner {
    background-image: url('../assets/particles/fork.png');
    animation: fork-left-wiggle 2.8s ease-in-out infinite;
}

/* Varian fork - goyang kanan */
.fork-right .particle-inner {
    background-image: url('../assets/particles/fork.png');
    animation: fork-right-wiggle 2.3s ease-in-out infinite;
}

/* Varian fork - putar */
.fork-spin .particle-inner {
    background-image: url('../assets/particles/fork.png');
    animation: fork-spin 3s linear infinite;
}

/* Surg (Heart) - Pulsing like heartbeat */
.surg .particle-inner {
    background-image: url('../assets/particles/surg.png');
    animation: heart-beat 1.5s ease-in-out infinite;
}

/* Varian surg - detak cepat */
.surg-fast .particle-inner {
    background-image: url('../assets/particles/surg.png');
    animation: heart-fast-beat 0.8s ease-in-out infinite;
}

/* Varian surg - detak lambat */
.surg-slow .particle-inner {
    background-image: url('../assets/particles/surg.png');
    animation: heart-slow-beat 2s ease-in-out infinite;
}

/* Varian surg - bergetar */
.surg-vibrate .particle-inner {
    background-image: url('../assets/particles/surg.png');
    animation: heart-vibrate 1.2s ease-in-out infinite;
}

/* Fish - Swimming motion */
.fish .particle-inner {
    background-image: url('../assets/particles/fish.png');
    animation: fish-swim 3s ease-in-out infinite;
}

/* Varian fish - berenang cepat */
.fish-fast .particle-inner {
    background-image: url('../assets/particles/fish.png');
    animation: fish-swim-fast 1.5s ease-in-out infinite;
}

/* Varian fish - berenang pelan */
.fish-slow .particle-inner {
    background-image: url('../assets/particles/fish.png');
    animation: fish-swim-slow 4s ease-in-out infinite;
}

/* Varian fish - berenang zigzag */
.fish-zigzag .particle-inner {
    background-image: url('../assets/particles/fish.png');
    animation: fish-swim-zigzag 2.5s ease-in-out infinite;
}

/* Chef Hat - Wiggling like cooking */
.chef .particle-inner {
    background-image: url('../assets/particles/chef.png');
    animation: chef-wiggle 2.8s ease-in-out infinite;
}

/* Varian chef - bouncing */
.chef-bounce .particle-inner {
    background-image: url('../assets/particles/chef.png');
    animation: chef-bounce 1.8s ease-in-out infinite;
}

/* Varian chef - spinning */
.chef-spin .particle-inner {
    background-image: url('../assets/particles/chef.png');
    animation: chef-spin 3.5s linear infinite;
}

/* Varian chef - shaking */
.chef-shake .particle-inner {
    background-image: url('../assets/particles/chef.png');
    animation: chef-shake 1.2s ease-in-out infinite;
}

/* Star - Twinkling like stars */
.star .particle-inner {
    background-image: url('../assets/particles/star.png');
    animation: star-twinkle 3s ease-in-out infinite;
}

/* Varian star - bright twinkling */
.star-bright .particle-inner {
    background-image: url('../assets/particles/star.png');
    animation: star-bright-twinkle 2s ease-in-out infinite;
}

/* Varian star - slow twinkling */
.star-slow .particle-inner {
    background-image: url('../assets/particles/star.png');
    animation: star-slow-twinkle 4s ease-in-out infinite;
}

/* Varian star - shimmering */
.star-shimmer .particle-inner {
    background-image: url('../assets/particles/star.png');
    animation: star-shimmer 1.5s ease-in-out infinite;
}

/* Variasi animasi hammer untuk membuatnya lebih hidup */
@keyframes hammer-swing {
    0% {
        transform: rotate(-15deg) scaleX(1) scaleY(1);
    }
    25% {
        transform: rotate(10deg) scaleX(1.1) scaleY(0.9);
    }
    50% {
        transform: rotate(-5deg) scaleX(0.9) scaleY(1.1);
    }
    75% {
        transform: rotate(15deg) scaleX(1.05) scaleY(0.95);
    }
    100% {
        transform: rotate(-15deg) scaleX(1) scaleY(1);
    }
}

@keyframes hammer-left-swing {
    0% {
        transform: rotate(-20deg) scaleX(1.1) scaleY(0.95);
    }
    30% {
        transform: rotate(5deg) scaleX(0.95) scaleY(1.05);
    }
    60% {
        transform: rotate(-10deg) scaleX(1.05) scaleY(0.98);
    }
    100% {
        transform: rotate(-20deg) scaleX(1.1) scaleY(0.95);
    }
}

@keyframes hammer-right-swing {
    0% {
        transform: rotate(20deg) scaleX(0.95) scaleY(1.05);
    }
    30% {
        transform: rotate(-5deg) scaleX(1.1) scaleY(0.95);
    }
    60% {
        transform: rotate(10deg) scaleX(0.98) scaleY(1.02);
    }
    100% {
        transform: rotate(20deg) scaleX(0.95) scaleY(1.05);
    }
}

@keyframes hammer-up-down {
    0% {
        transform: translateY(0) rotate(-5deg);
    }
    25% {
        transform: translateY(-8px) rotate(5deg);
    }
    50% {
        transform: translateY(0) rotate(-2deg);
    }
    75% {
        transform: translateY(-4px) rotate(3deg);
    }
    100% {
        transform: translateY(0) rotate(-5deg);
    }
}

@keyframes fork-wiggle {
    0% {
        transform: translateY(0) rotate(-3deg);
    }
    25% {
        transform: translateY(-8px) rotate(3deg);
    }
    50% {
        transform: translateY(0) rotate(2deg);
    }
    75% {
        transform: translateY(-5px) rotate(-2deg);
    }
    100% {
        transform: translateY(0) rotate(-3deg);
    }
}

@keyframes fork-left-wiggle {
    0% {
        transform: translateX(-3px) rotate(-5deg);
    }
    25% {
        transform: translateX(0) rotate(5deg);
    }
    50% {
        transform: translateX(-5px) rotate(-2deg);
    }
    75% {
        transform: translateX(-2px) rotate(3deg);
    }
    100% {
        transform: translateX(-3px) rotate(-5deg);
    }
}

@keyframes fork-right-wiggle {
    0% {
        transform: translateX(3px) rotate(5deg);
    }
    25% {
        transform: translateX(0) rotate(-5deg);
    }
    50% {
        transform: translateX(5px) rotate(2deg);
    }
    75% {
        transform: translateX(2px) rotate(-3deg);
    }
    100% {
        transform: translateX(3px) rotate(5deg);
    }
}

@keyframes fork-spin {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(15deg);
    }
    50% {
        transform: rotate(0deg);
    }
    75% {
        transform: rotate(-15deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

@keyframes heart-beat {
    0% {
        transform: scale(1);
    }
    15% {
        transform: scale(1.2);
    }
    30% {
        transform: scale(1);
    }
    45% {
        transform: scale(1.3);
    }
    60% {
        transform: scale(1);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes heart-fast-beat {
    0% {
        transform: scale(1);
    }
    20% {
        transform: scale(1.4);
    }
    40% {
        transform: scale(1);
    }
    60% {
        transform: scale(1.5);
    }
    80% {
        transform: scale(1);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes heart-slow-beat {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.25);
    }
    50% {
        transform: scale(1);
    }
    75% {
        transform: scale(1.35);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes heart-vibrate {
    0% {
        transform: translateX(0) scale(1);
    }
    25% {
        transform: translateX(-2px) scale(1.1);
    }
    50% {
        transform: translateX(2px) scale(1.15);
    }
    75% {
        transform: translateX(-1px) scale(1.1);
    }
    100% {
        transform: translateX(0) scale(1);
    }
}

@keyframes fish-swim {
    0% {
        transform: rotate(-5deg) scaleX(1);
    }
    25% {
        transform: rotate(5deg) scaleX(1.1);
    }
    50% {
        transform: rotate(0) scaleX(0.9);
    }
    75% {
        transform: rotate(-3deg) scaleX(1.05);
    }
    100% {
        transform: rotate(-5deg) scaleX(1);
    }
}

@keyframes fish-swim-fast {
    0% {
        transform: rotate(-8deg) scaleX(1.1);
    }
    20% {
        transform: rotate(10deg) scaleX(1.2);
    }
    40% {
        transform: rotate(0) scaleX(0.95);
    }
    60% {
        transform: rotate(-6deg) scaleX(1.15);
    }
    80% {
        transform: rotate(5deg) scaleX(1.05);
    }
    100% {
        transform: rotate(-8deg) scaleX(1.1);
    }
}

@keyframes fish-swim-slow {
    0% {
        transform: rotate(-3deg) scaleX(1);
    }
    30% {
        transform: rotate(3deg) scaleX(1.05);
    }
    60% {
        transform: rotate(0) scaleX(0.95);
    }
    100% {
        transform: rotate(-3deg) scaleX(1);
    }
}

@keyframes fish-swim-zigzag {
    0% {
        transform: translateX(0) rotate(-5deg);
    }
    25% {
        transform: translateX(5px) rotate(5deg);
    }
    50% {
        transform: translateX(0) rotate(0);
    }
    75% {
        transform: translateX(-5px) rotate(-5deg);
    }
    100% {
        transform: translateX(0) rotate(-5deg);
    }
}

@keyframes chef-wiggle {
    0% {
        transform: translateY(0) rotate(-2deg);
    }
    25% {
        transform: translateY(-5px) rotate(3deg);
    }
    50% {
        transform: translateY(0) rotate(2deg);
    }
    75% {
        transform: translateY(-3px) rotate(-1deg);
    }
    100% {
        transform: translateY(0) rotate(-2deg);
    }
}

@keyframes chef-bounce {
    0% {
        transform: translateY(0) scaleY(1);
    }
    30% {
        transform: translateY(-8px) scaleY(1.1);
    }
    50% {
        transform: translateY(0) scaleY(0.95);
    }
    80% {
        transform: translateY(-4px) scaleY(1.05);
    }
    100% {
        transform: translateY(0) scaleY(1);
    }
}

@keyframes chef-spin {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(10deg);
    }
    50% {
        transform: rotate(0deg);
    }
    75% {
        transform: rotate(-10deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

@keyframes chef-shake {
    0% {
        transform: translateX(0) rotate(0);
    }
    25% {
        transform: translateX(-3px) rotate(-2deg);
    }
    50% {
        transform: translateX(3px) rotate(2deg);
    }
    75% {
        transform: translateX(-2px) rotate(-1deg);
    }
    100% {
        transform: translateX(0) rotate(0);
    }
}

@keyframes star-twinkle {
    0% {
        opacity: 0.3;
        transform: scale(1);
        filter: brightness(1);
    }
    25% {
        opacity: 1;
        transform: scale(1.1);
        filter: brightness(1.5);
    }
    50% {
        opacity: 0.6;
        transform: scale(0.95);
        filter: brightness(1.2);
    }
    75% {
        opacity: 1;
        transform: scale(1.05);
        filter: brightness(1.3);
    }
    100% {
        opacity: 0.3;
        transform: scale(1);
        filter: brightness(1);
    }
}

@keyframes star-bright-twinkle {
    0% {
        opacity: 0.2;
        transform: scale(0.9);
        filter: brightness(0.8);
    }
    30% {
        opacity: 0.9;
        transform: scale(1.2);
        filter: brightness(2);
    }
    60% {
        opacity: 0.4;
        transform: scale(0.95);
        filter: brightness(1.1);
    }
    100% {
        opacity: 0.2;
        transform: scale(0.9);
        filter: brightness(0.8);
    }
}

@keyframes star-slow-twinkle {
    0% {
        opacity: 0.4;
        transform: scale(1);
        filter: brightness(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.15);
        filter: brightness(1.8);
    }
    100% {
        opacity: 0.4;
        transform: scale(1);
        filter: brightness(1);
    }
}

@keyframes star-shimmer {
    0% {
        opacity: 0.7;
        transform: rotate(0deg) scale(1);
        filter: brightness(1.2);
    }
    25% {
        opacity: 1;
        transform: rotate(5deg) scale(1.1);
        filter: brightness(1.5);
    }
    50% {
        opacity: 0.6;
        transform: rotate(0deg) scale(0.95);
        filter: brightness(1);
    }
    75% {
        opacity: 1;
        transform: rotate(-5deg) scale(1.05);
        filter: brightness(1.7);
    }
    100% {
        opacity: 0.7;
        transform: rotate(0deg) scale(1);
        filter: brightness(1.2);
    }
}

/* Firefly-specific styles */
.firefly {
    --firefly-color: hsl(60, 100%, 70%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--firefly-color);
    box-shadow: 0 0 8px 2px var(--firefly-color);
    filter: blur(1px);
    z-index: 2;
}

.firefly .particle-inner {
    display: none;
}

/* Pulsating glow effect for fireflies */
@keyframes firefly-pulse {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
        box-shadow: 0 0 6px 1px var(--firefly-color);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
        box-shadow: 0 0 15px 4px var(--firefly-color);
    }
}

.firefly-pulse {
    animation: firefly-pulse 2s ease-in-out infinite;
}

/* Rainbow color variations for fireflies */
.firefly-rainbow-1 { --firefly-color: hsl(0, 100%, 70%); }      /* Red */
.firefly-rainbow-2 { --firefly-color: hsl(30, 100%, 70%); }     /* Orange */
.firefly-rainbow-3 { --firefly-color: hsl(60, 100%, 70%); }     /* Yellow */
.firefly-rainbow-4 { --firefly-color: hsl(120, 100%, 70%); }    /* Green */
.firefly-rainbow-5 { --firefly-color: hsl(180, 100%, 70%); }    /* Cyan */
.firefly-rainbow-6 { --firefly-color: hsl(240, 100%, 70%); }    /* Blue */
.firefly-rainbow-7 { --firefly-color: hsl(270, 100%, 70%); }    /* Purple */
.firefly-rainbow-8 { --firefly-color: hsl(300, 100%, 70%); }    /* Magenta */

/* --- Floating Path Patterns (Applied to .ambient-item) --- */

@keyframes float-pattern-1 {
    0% {
        transform: translate(0, 0) rotate(var(--base-rotation, 0deg)) scale(1);
        opacity: 0;
    }

    10% {
        opacity: var(--max-opacity, 0.8);
    }

    50% {
        transform: translate(calc(var(--drift-x) * 0.5), calc(var(--drift-y) * -0.5)) rotate(calc(var(--base-rotation, 0deg) + 60deg)) scale(1.3);
    }

    90% {
        opacity: var(--max-opacity, 0.8);
    }

    100% {
        transform: translate(var(--drift-x), var(--drift-y)) rotate(calc(var(--base-rotation, 0deg) - 60deg)) scale(1);
        opacity: 0;
    }
}

@keyframes float-pattern-2 {
    0% {
        transform: translate(var(--start-x), 115vh) scale(0.8) rotate(0deg);
        opacity: 0;
    }

    10% {
        opacity: var(--max-opacity, 0.7);
    }

    50% {
        transform: translate(calc(var(--start-x) + 120px), 50vh) scale(1.5) rotate(35deg);
    }

    90% {
        opacity: var(--max-opacity, 0.7);
    }

    100% {
        transform: translate(calc(var(--start-x) - 120px), -20vh) scale(0.8) rotate(-35deg);
        opacity: 0;
    }
}

/* New pattern for fireflies - more erratic movement */
@keyframes float-pattern-firefly {
    0% {
        transform: translate(0, 0) rotate(var(--base-rotation, 0deg)) scale(1);
        opacity: 0;
    }

    5% {
        opacity: 0.7;
    }

    25% {
        transform: translate(var(--x-move, 100px), var(--y-move, -80px)) rotate(var(--rotation, 0deg));
    }

    50% {
        transform: translate(var(--x-move, 200px), var(--y-move, -150px)) rotate(var(--rotation, 0deg)) scale(1.2);
    }

    75% {
        transform: translate(var(--x-move, 150px), var(--y-move, -100px)) rotate(var(--rotation, 0deg));
    }

    95% {
        opacity: 0.7;
    }

    100% {
        transform: translate(var(--x-end, 300px), var(--y-end, -200px)) rotate(var(--rotation-end, 0deg)) scale(1);
        opacity: 0;
    }
}

.animate-float-1 {
    animation: float-pattern-1 var(--duration, 18s) linear infinite;
    animation-delay: var(--delay, 0s);
}

.animate-float-2 {
    animation: float-pattern-2 var(--duration, 22s) ease-in-out infinite;
    animation-delay: var(--delay, 0s);
}

.animate-firefly {
    animation: float-pattern-firefly var(--duration, 15s) ease-in-out infinite;
    animation-delay: var(--delay, 0s);
}