/* ========================================
   PROGRESS-EFFECTS.CSS - UZAY OYUNU STILI
   ======================================== */

.main-progress {
    overflow: visible !important;
    position: relative;
}

.progress-bar-container {
    overflow: visible !important;
    position: relative;
    filter: drop-shadow(0 0 15px rgba(0, 255, 136, 0.4));
}

/* Progress bar - pulsing energy */
.progress-bar-fill {
    position: relative;
    overflow: hidden;
    animation: energyPulse 1.5s ease-in-out infinite;
}

@keyframes energyPulse {

    0%,
    100% {
        box-shadow:
            0 0 15px rgba(0, 255, 136, 0.6),
            inset 0 0 10px rgba(255, 255, 255, 0.2);
    }

    50% {
        box-shadow:
            0 0 30px rgba(0, 255, 136, 0.9),
            0 0 50px rgba(0, 240, 255, 0.5),
            inset 0 0 15px rgba(255, 255, 255, 0.4);
    }
}

/* SHIMMER - Enerji akışı */
.progress-bar-fill::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(110deg,
            transparent 0%,
            transparent 30%,
            rgba(255, 255, 255, 0.6) 50%,
            rgba(0, 240, 255, 0.8) 55%,
            rgba(255, 255, 255, 0.6) 60%,
            transparent 70%,
            transparent 100%);
    animation: energyFlow 2s linear infinite;
    mix-blend-mode: screen;
}

@keyframes energyFlow {
    0% {
        transform: translateX(-100%) skewX(-15deg);
    }

    100% {
        transform: translateX(200%) skewX(-15deg);
    }
}

/* SCAN LINES - Retro sci-fi */
.progress-bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(0deg,
            transparent,
            transparent 2px,
            rgba(0, 255, 255, 0.05) 2px,
            rgba(0, 255, 255, 0.05) 4px);
    pointer-events: none;
}

/* ENERGY PARTICLES - Bar içinde akan parçacıklar */
.energy-particles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    pointer-events: none;
}

.particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    box-shadow: 0 0 4px #fff, 0 0 8px #00f0ff;
    animation: particleFlow 3s linear infinite;
}

.particle:nth-child(1) {
    top: 20%;
    animation-delay: 0s;
}

.particle:nth-child(2) {
    top: 50%;
    animation-delay: 0.5s;
}

.particle:nth-child(3) {
    top: 80%;
    animation-delay: 1s;
}

.particle:nth-child(4) {
    top: 35%;
    animation-delay: 1.5s;
}

.particle:nth-child(5) {
    top: 65%;
    animation-delay: 2s;
}

@keyframes particleFlow {
    0% {
        left: -5%;
        opacity: 0;
        transform: scale(0);
    }

    10% {
        opacity: 1;
        transform: scale(1);
    }

    90% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        left: 105%;
        opacity: 0;
        transform: scale(0);
    }
}

/* ROCKET ENGINE - Bar ucu roket egzozu */
.rocket-engine {
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 100px;
    height: 100px;
    pointer-events: none;
    z-index: 100;
}

/* Core flame */
.engine-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    background: radial-gradient(circle, #fff 0%, #0ff 40%, transparent 70%);
    border-radius: 50%;
    box-shadow:
        0 0 10px #fff,
        0 0 25px #00f0ff,
        0 0 40px #00ff88,
        0 0 60px #0ff;
    animation: enginePulse 0.08s ease-in-out infinite;
}

@keyframes enginePulse {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(0.95);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.05);
    }
}

/* Exhaust flames */
.exhaust {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 8px #00f0ff, 0 0 15px #00ff88;
}

/* 16 exhaust flames - 360 degrees */
.exhaust:nth-child(1) {
    animation: exhaustOut 0.5s ease-out infinite;
    --angle: 0deg;
    animation-delay: 0s;
}

.exhaust:nth-child(2) {
    animation: exhaustOut 0.5s ease-out infinite;
    --angle: 22.5deg;
    animation-delay: 0.03s;
}

.exhaust:nth-child(3) {
    animation: exhaustOut 0.5s ease-out infinite;
    --angle: 45deg;
    animation-delay: 0.06s;
}

.exhaust:nth-child(4) {
    animation: exhaustOut 0.5s ease-out infinite;
    --angle: 67.5deg;
    animation-delay: 0.09s;
}

.exhaust:nth-child(5) {
    animation: exhaustOut 0.5s ease-out infinite;
    --angle: 90deg;
    animation-delay: 0.12s;
}

.exhaust:nth-child(6) {
    animation: exhaustOut 0.5s ease-out infinite;
    --angle: 112.5deg;
    animation-delay: 0.15s;
}

.exhaust:nth-child(7) {
    animation: exhaustOut 0.5s ease-out infinite;
    --angle: 135deg;
    animation-delay: 0.18s;
}

.exhaust:nth-child(8) {
    animation: exhaustOut 0.5s ease-out infinite;
    --angle: 157.5deg;
    animation-delay: 0.21s;
}

.exhaust:nth-child(9) {
    animation: exhaustOut 0.5s ease-out infinite;
    --angle: 180deg;
    animation-delay: 0.24s;
}

.exhaust:nth-child(10) {
    animation: exhaustOut 0.5s ease-out infinite;
    --angle: 202.5deg;
    animation-delay: 0.27s;
}

.exhaust:nth-child(11) {
    animation: exhaustOut 0.5s ease-out infinite;
    --angle: 225deg;
    animation-delay: 0.30s;
}

.exhaust:nth-child(12) {
    animation: exhaustOut 0.5s ease-out infinite;
    --angle: 247.5deg;
    animation-delay: 0.33s;
}

.exhaust:nth-child(13) {
    animation: exhaustOut 0.5s ease-out infinite;
    --angle: 270deg;
    animation-delay: 0.36s;
}

.exhaust:nth-child(14) {
    animation: exhaustOut 0.5s ease-out infinite;
    --angle: 292.5deg;
    animation-delay: 0.39s;
}

.exhaust:nth-child(15) {
    animation: exhaustOut 0.5s ease-out infinite;
    --angle: 315deg;
    animation-delay: 0.42s;
}

.exhaust:nth-child(16) {
    animation: exhaustOut 0.5s ease-out infinite;
    --angle: 337.5deg;
    animation-delay: 0.45s;
}

@keyframes exhaustOut {
    0% {
        transform: translate(-50%, -50%) rotate(var(--angle, 0deg)) translateX(10px) scale(1);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) rotate(var(--angle, 0deg)) translateX(45px) scale(0.2);
        opacity: 0;
    }
}

/* Expanding energy ring */
.energy-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 3px solid rgba(0, 240, 255, 0.8);
    border-radius: 50%;
    animation: ringBlast 0.6s ease-out infinite;
    box-shadow: 0 0 15px #00f0ff;
}

@keyframes ringBlast {
    0% {
        width: 12px;
        height: 12px;
        opacity: 1;
        border-width: 3px;
    }

    100% {
        width: 70px;
        height: 70px;
        opacity: 0;
        border-width: 1px;
    }
}

/* Milestones - Sci-fi style */
.progress-milestones {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 50;
}

.milestone {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background: rgba(10, 10, 15, 0.9);
    border: 2px solid rgba(0, 240, 255, 0.5);
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 0 5px rgba(0, 240, 255, 0.3);
}

.milestone.reached {
    background: #ffee00;
    border-color: #ffee00;
    box-shadow:
        0 0 15px #ffee00,
        0 0 25px rgba(255, 238, 0, 0.6);
    animation: milestoneGlow 1s ease-in-out infinite;
}

@keyframes milestoneGlow {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.2);
    }
}

.milestone:nth-child(1) {
    left: 25%;
}

.milestone:nth-child(2) {
    left: 50%;
}

.milestone:nth-child(3) {
    left: 75%;
}

.milestone:nth-child(4) {
    left: calc(100% - 5px);
}

/* Confetti */
.confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

.confetti {
    position: absolute;
    width: 12px;
    height: 12px;
    animation: confettiFall 3s ease-out forwards;
}

@keyframes confettiFall {
    0% {
        transform: translateY(-100%) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

.progress-bar-fill.celebrating {
    animation: celebrateGlow 0.4s ease 5;
}

@keyframes celebrateGlow {

    0%,
    100% {
        box-shadow: 0 0 20px #00ff88;
        transform: scaleY(1);
    }

    50% {
        box-shadow: 0 0 50px #00ff88, 0 0 80px #0ff, 0 0 100px #ffee00;
        transform: scaleY(1.1);
    }
}