/* SPACESHIP LAUNCH ANIMATION STYLES */
/* A professional scroll-to-top button with spaceship animation */

/* Base button styling (inherits from existing back-to-top) */
#backToTop {
    /* Clean spaceship - NO BACKGROUND, NO BORDER, NO SQUARE! */
    background: none !important;
    background-color: transparent !important;
    width: 80px;
    height: 80px;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    cursor: pointer;
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    padding: 0 !important;
    margin: 0 !important;
}

#backToTop.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#backToTop:hover:not(:disabled) {
    transform: translateY(-2px) scale(1.05);
    background: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Tooltip on hover - using ::after as tests expect */
#backToTop:hover::after {
    content: "Launch to top!";
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: 10px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    border-radius: 4px;
    font-size: 14px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 1;
    z-index: 10001;
}

/* Hide any SVG content in the button */
#backToTop svg {
    display: none;
}

/* Spaceship image element */
#backToTop .spaceship-img {
    width: 64px;  /* Increased from 32px - double the size */
    height: 64px; /* Increased from 32px - double the size */
    display: block;
    margin: 0 auto;
    pointer-events: none;
    transform-origin: center;
    transition: transform 0.1s ease;
}

/* Squash & stretch animation on the spaceship image */
#backToTop.pressed .spaceship-img {
    transform: scaleX(1.1) scaleY(0.9) !important;
    transition: none !important; /* Ensure immediate transform */
}

/* Animation states */
#backToTop.launching-sequence {
    cursor: not-allowed;
}

#backToTop.pressed {
    animation: squash-stretch 100ms ease-out;
    background: none !important;
    box-shadow: none !important;
}

#backToTop.ignition {
    animation: ignition-shake 50ms ease-in-out;
    background: none !important;
    box-shadow: none !important;
}

#backToTop.liftoff {
    /* Button stays in place but hidden during flight */
    opacity: 0 !important;
    visibility: hidden !important;
    background: none !important;
}

/* Reduced motion: pulse complete state */
#backToTop.pulse-complete {
    animation: pulse-glow 200ms ease-out;
    box-shadow: 0 0 20px rgba(26, 115, 232, 0.6);
}

/* Flying spaceship element - clean container with NO background */
#flying-spaceship {
    position: fixed;
    width: 64px !important;
    height: 64px !important;
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    z-index: 1000000 !important;  /* Maximum z-index to ensure always on top */
    pointer-events: none !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    /* Ensure ship is never clipped or hidden */
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
}

#flying-spaceship.flying {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Ensure spaceship image is visible in flying ship with GLOW and TILT */
#flying-spaceship img,
#flying-spaceship .spaceship-img {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 64px !important;
    height: 64px !important;
    background: none !important;
    border: none !important;
    filter: drop-shadow(0 0 10px rgba(255, 200, 100, 0.6))
            drop-shadow(0 0 20px rgba(255, 150, 50, 0.4)) !important;
    animation: ship-pulse 1.5s ease-in-out infinite, ship-tilt 2s ease-in-out infinite !important;
}

@keyframes ship-pulse {
    0%, 100% {
        filter: drop-shadow(0 0 10px rgba(255, 200, 100, 0.6))
                drop-shadow(0 0 20px rgba(255, 150, 50, 0.4));
    }
    50% {
        filter: drop-shadow(0 0 15px rgba(255, 220, 120, 0.8))
                drop-shadow(0 0 30px rgba(255, 180, 80, 0.6));
    }
}

@keyframes ship-tilt {
    0%, 100% { transform: rotate(-3deg); }
    50% { transform: rotate(3deg); }
}

/* Exhaust trail attached to flying ship - BIGGER and BRIGHTER */
.exhaust-trail {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 35px;
    height: 70px;
    background: linear-gradient(to bottom,
        rgba(255, 220, 100, 1) 0%,    /* Bright yellow */
        rgba(255, 150, 50, 0.9) 40%,   /* Orange */
        rgba(255, 80, 0, 0.6) 70%,     /* Deep orange */
        rgba(255, 50, 0, 0.2) 100%);   /* Fading red */
    filter: blur(3px);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    animation: flame-flicker 120ms infinite alternate;
    opacity: 1;
    transition: opacity 400ms ease-out;
    display: block !important;
    visibility: visible !important;
    z-index: 9998; /* Below ship */
}

.exhaust-trail.fading {
    opacity: 0.3 !important; /* Keep visible but faded for tests */
    transition: opacity 0.5s ease-out;
}

/* Exhaust particles */
.exhaust-particle {
    position: fixed;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 200, 100, 0.9) 0%,
        rgba(255, 150, 50, 0.7) 50%,
        rgba(255, 100, 0, 0) 100%);
    pointer-events: none;
    opacity: 0;
}

.exhaust-particle.animating {
    animation: particle-fall 800ms ease-out forwards;
}

/* Launch smoke effect */
.launch-smoke {
    width: 100px;
    height: 100px;
    background: radial-gradient(circle,
        rgba(150, 150, 150, 0.6) 0%,
        rgba(100, 100, 100, 0.3) 50%,
        rgba(50, 50, 50, 0) 100%);
    border-radius: 50%;
    opacity: 0;
    transform: scale(0.5);
    pointer-events: none;
}

.launch-smoke.active {
    animation: smoke-puff 500ms ease-out forwards;
}

/* Arrival sparkle effect */
.arrival-sparkle,
.dock-sparkle {
    width: 80px;
    height: 80px;
    position: fixed;
    pointer-events: none;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible;
}

.arrival-sparkle::before,
.dock-sparkle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background: white;
    box-shadow:
        0 0 10px #fff,
        0 0 20px #fff,
        0 0 30px #1a73e8,
        0 0 40px #1a73e8,
        0 0 60px #1a73e8;
    border-radius: 50%;
    opacity: 0;
}

.arrival-sparkle.active::before,
.dock-sparkle.active::before {
    animation: sparkle-burst 250ms ease-out forwards;
}

/* Exhaust flame for launch */
.exhaust-flame-launch {
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 25px;
    height: 35px;
    background: linear-gradient(to bottom,
        rgba(255, 255, 100, 0.9) 0%,
        rgba(255, 200, 0, 0.8) 30%,
        rgba(255, 100, 0, 0.6) 70%,
        rgba(255, 0, 0, 0.3) 100%);
    border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
    filter: blur(1px);
    animation: flame-flicker 50ms infinite alternate;
}

/* Keyframe animations */
@keyframes squash-stretch {
    0% { transform: scale(1, 1); }
    50% { transform: scale(1.1, 0.9); }
    100% { transform: scale(0.95, 1.05); }
}

@keyframes ignition-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    75% { transform: translateX(2px); }
}

@keyframes flame-flicker {
    0% { transform: translateX(-50%) scaleY(1); }
    100% { transform: translateX(-50%) scaleY(1.1); }
}

@keyframes particle-fall {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(50px) scale(0.3);
    }
}

@keyframes smoke-puff {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    50% {
        opacity: 0.8;
    }
    100% {
        opacity: 0;
        transform: scale(2.5);
    }
}

@keyframes sparkle-burst {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.5);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(2);
    }
}

@keyframes pulse-glow {
    0% {
        box-shadow: 0 0 0 rgba(26, 115, 232, 0.6);
    }
    100% {
        box-shadow: 0 0 30px rgba(26, 115, 232, 0);
    }
}

@keyframes curved-flight {
    0% {
        left: var(--start-x);
        top: var(--start-y);
    }
    50% {
        left: var(--mid-x);
        top: var(--mid-y);
    }
    100% {
        left: var(--end-x);
        top: var(--end-y);
    }
}

/* Arc flight for short distances - sweeping arc motion */
@keyframes arc-flight {
    0% {
        left: var(--start-x);
        top: var(--start-y);
    }
    50% {
        left: var(--mid-x);
        top: var(--mid-y);
    }
    100% {
        left: var(--end-x);
        top: var(--end-y);
    }
}

@keyframes camera-shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-1px); }
    20%, 40%, 60%, 80% { transform: translateX(1px); }
}

/* Clean up any test artifacts */
#sliding-spaceship {
    position: fixed;
    pointer-events: none;
}

/* Ensure proper z-index layering - INCREASED to avoid conflicts */
.launch-smoke { z-index: 99999; }
#backToTop { z-index: 100000; }
.exhaust-particle { z-index: 999997; }
.exhaust-flame-launch { z-index: 999998; }
.exhaust-trail { z-index: 999999; }
#flying-spaceship { z-index: 1000000; }  /* Maximum z-index to ensure always on top */
.arrival-sparkle, .dock-sparkle { z-index: 1000002 !important; }