/* ============================================
   WIN OVERCOME - CUSTOM ROCKET CURSOR
   Component: components/custom_cursor
   Author: Win Overcome Dev Team
   ============================================ */

/* === STEP 1: Override cursor:none from React CursorEffect === */
*, *::before, *::after {
    cursor: none !important;
}

/* === STEP 2: Rocket Cursor Container === */
#rocket-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
    pointer-events: none;
    z-index: 99999;
    transform: translate(-50%, -50%);
    will-change: transform;
    transition: none;
}

/* === STEP 3: Rocket SVG === */
#rocket-cursor .rocket-body {
    position: absolute;
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
    filter: drop-shadow(0 0 6px rgba(255, 106, 0, 0.6));
    transition: transform 0.1s ease-out, filter 0.2s ease;
}

/* Hover state - rocket glows brighter on interactive elements */
#rocket-cursor.cursor-hover .rocket-body {
    filter: drop-shadow(0 0 12px rgba(255, 106, 0, 0.9)) 
            drop-shadow(0 0 20px rgba(255, 60, 0, 0.5));
    transform: scale(1.15);
}

/* === STEP 4: Rocket Flame / Exhaust Glow === */
#rocket-cursor .rocket-flame {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 18px;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    background: radial-gradient(ellipse at center top,
        #fff 0%,
        #ffcc00 20%,
        #ff6a00 50%,
        #ff3300 70%,
        transparent 100%
    );
    opacity: 0.9;
    animation: flameFlicker 0.15s ease-in-out infinite alternate;
    filter: blur(1px);
    will-change: transform, opacity;
}

#rocket-cursor .rocket-flame-inner {
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 10px;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    background: radial-gradient(ellipse at center top,
        #fff 0%,
        #ffe066 40%,
        #ff9900 80%,
        transparent 100%
    );
    opacity: 1;
    animation: flameFlickerInner 0.1s ease-in-out infinite alternate;
    will-change: transform, opacity;
}

/* === STEP 5: Particle Trail Container === */
#cursor-trail {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 99998;
    overflow: hidden;
}

.trail-particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform, opacity;
}

/* === STEP 6: Glow Ring (on hover) === */
#rocket-cursor .glow-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%) scale(0);
    border: 1px solid rgba(255, 106, 0, 0.4);
    border-radius: 50%;
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

#rocket-cursor.cursor-hover .glow-ring {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    animation: glowPulse 1.5s ease-in-out infinite;
}

/* === STEP 7: Click Effect === */
#rocket-cursor .click-burst {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 106, 0, 0.4), transparent);
    opacity: 0;
    pointer-events: none;
}

#rocket-cursor.cursor-click .click-burst {
    animation: clickBurst 0.4s ease-out forwards;
}

/* === ANIMATIONS === */
@keyframes flameFlicker {
    0% {
        transform: translateX(-50%) scaleY(1) scaleX(1);
        opacity: 0.85;
    }
    100% {
        transform: translateX(-50%) scaleY(1.3) scaleX(0.85);
        opacity: 1;
    }
}

@keyframes flameFlickerInner {
    0% {
        transform: translateX(-50%) scaleY(1) scaleX(1);
        opacity: 0.9;
    }
    100% {
        transform: translateX(-50%) scaleY(1.2) scaleX(0.9);
        opacity: 1;
    }
}

@keyframes glowPulse {
    0%, 100% {
        box-shadow: 0 0 8px rgba(255, 106, 0, 0.3);
        border-color: rgba(255, 106, 0, 0.4);
    }
    50% {
        box-shadow: 0 0 16px rgba(255, 106, 0, 0.5);
        border-color: rgba(255, 106, 0, 0.6);
    }
}

@keyframes clickBurst {
    0% {
        width: 0;
        height: 0;
        opacity: 0.6;
    }
    100% {
        width: 60px;
        height: 60px;
        opacity: 0;
    }
}

/* === STEP 8: Responsive - Hide custom cursor on touch devices === */
@media (hover: none) and (pointer: coarse) {
    #rocket-cursor,
    #cursor-trail {
        display: none !important;
    }
    *, *::before, *::after {
        cursor: auto !important;
    }
    a, button, [role="button"], input[type="submit"],
    input[type="button"], select, label[for] {
        cursor: pointer !important;
    }
    input, textarea {
        cursor: text !important;
    }
}

/* === STEP 9: Reduced motion preference === */
@media (prefers-reduced-motion: reduce) {
    #rocket-cursor .rocket-flame,
    #rocket-cursor .rocket-flame-inner {
        animation: none;
        opacity: 0.7;
    }
    .trail-particle {
        display: none;
    }
    #rocket-cursor .glow-ring {
        animation: none;
    }
}