/**
 * Mothership Widget Styles
 *
 * Interactive spaceship with mouse-based rotation and idle animations.
 */

/* =============================================================================
   Container
   ============================================================================= */

.mothership-widget {
    position: absolute;
    display: flex;
    width: 100%;
    padding: 5rem 0;
    perspective: 1000px;
    z-index: var(--mothership-z-index, 100);
    pointer-events: none;
}

/* Alignment variations */
.mothership-align-left {
    justify-content: flex-start;
}

.mothership-align-center {
    justify-content: center;
}

.mothership-align-right {
    justify-content: flex-end;
}

/* =============================================================================
   Image
   ============================================================================= */

.mothership-image {
    display: block;
    max-width: 100%;
    height: auto;
    transform-style: preserve-3d;
    transition: filter 0.3s ease, transform 0.1s ease;
    will-change: transform;
    pointer-events: auto;
    user-select: none;
}

/* =============================================================================
   Idle Animations
   ============================================================================= */

/* Float animation */
@keyframes mothership-float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(calc(var(--mothership-float-amplitude, 10px) * -1));
    }
}

.mothership-idle-float .mothership-image {
    animation: mothership-float var(--mothership-float-duration, 3s) ease-in-out infinite;
}

/* Pulse animation */
@keyframes mothership-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.02);
        opacity: 0.95;
    }
}

.mothership-idle-pulse .mothership-image {
    animation: mothership-pulse var(--mothership-float-duration, 3s) ease-in-out infinite;
}

/* When JS takes over, disable CSS animation */
.mothership-widget.js-active .mothership-image {
    animation: none !important;
}

/* =============================================================================
   Hover Effects
   ============================================================================= */

.mothership-hover-glow .mothership-image:hover {
    filter: drop-shadow(0 0 var(--mothership-glow-intensity, 20px) var(--mothership-glow-color, var(--bs-primary)));
}

/* Hover scale (applied via JS, but CSS fallback) */
.mothership-widget[data-hover-scale]:hover .mothership-image {
    transform: scale(var(--mothership-hover-scale, 1));
}

/* =============================================================================
   Theme Support
   ============================================================================= */

[data-bs-theme="light"] .mothership-image {
    filter: var(--mothership-light-filter, none);
}

[data-bs-theme="dark"] .mothership-image {
    filter: var(--mothership-dark-filter, drop-shadow(0 0 20px rgba(0, 191, 255, 0.3)));
}

/* Preserve glow on hover even with theme filter */
[data-bs-theme="light"] .mothership-hover-glow .mothership-image:hover {
    filter: var(--mothership-light-filter, none) drop-shadow(0 0 var(--mothership-glow-intensity, 20px) var(--mothership-glow-color, var(--bs-primary)));
}

[data-bs-theme="dark"] .mothership-hover-glow .mothership-image:hover {
    filter: var(--mothership-dark-filter, drop-shadow(0 0 20px rgba(0, 191, 255, 0.3))) drop-shadow(0 0 var(--mothership-glow-intensity, 20px) var(--mothership-glow-color, var(--bs-primary)));
}

/* =============================================================================
   Reduced Motion
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
    .mothership-image {
        animation: none !important;
        transition: none !important;
    }

    .mothership-widget.js-active .mothership-image {
        transform: none !important;
    }
}

/* =============================================================================
   Mobile Responsive
   ============================================================================= */

@media (max-width: 768px) {
    .mothership-image {
        max-width: var(--mothership-mobile-width, 250px);
    }

    .mothership-widget {
        padding: 1rem 0;
    }
}

@media (max-width: 480px) {
    .mothership-image {
        max-width: calc(var(--mothership-mobile-width, 250px) * 0.8);
    }
}