/**
 * STARFLEET Theme - Advanced Animations & Effects
 * Futuristic sci-fi animations inspired by Star Trek
 */

/* =========================================
   Holographic Effects
   ========================================= */
.holographic-display {
    position: relative;
    transform-style: preserve-3d;
    perspective: 1000px;
}

.holographic-content {
    position: relative;
    animation: hologram-flicker 4s ease-in-out infinite;
    transform-style: preserve-3d;
}

@keyframes hologram-flicker {
    0%, 100% {
        opacity: 0.95;
        transform: rotateY(0deg) translateZ(0);
        filter: brightness(1) contrast(1);
    }
    10% {
        opacity: 0.98;
        transform: rotateY(0.5deg) translateZ(2px);
        filter: brightness(1.1) contrast(1.05);
    }
    20% {
        opacity: 0.92;
        transform: rotateY(-0.5deg) translateZ(-1px);
        filter: brightness(0.95) contrast(0.98);
    }
    30% {
        opacity: 0.96;
        transform: rotateY(0.3deg) translateZ(1px);
        filter: brightness(1.05) contrast(1.02);
    }
    40% {
        opacity: 0.94;
        transform: rotateY(-0.3deg) translateZ(-2px);
        filter: brightness(0.98) contrast(0.99);
    }
    50% {
        opacity: 1;
        transform: rotateY(0.1deg) translateZ(3px);
        filter: brightness(1.15) contrast(1.1);
    }
    60% {
        opacity: 0.93;
        transform: rotateY(-0.2deg) translateZ(-1px);
        filter: brightness(0.96) contrast(0.97);
    }
    70% {
        opacity: 0.97;
        transform: rotateY(0.4deg) translateZ(2px);
        filter: brightness(1.08) contrast(1.03);
    }
    80% {
        opacity: 0.91;
        transform: rotateY(-0.4deg) translateZ(-3px);
        filter: brightness(0.93) contrast(0.95);
    }
    90% {
        opacity: 0.99;
        transform: rotateY(0.2deg) translateZ(1px);
        filter: brightness(1.12) contrast(1.06);
    }
}

.holographic-scanlines {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(100, 200, 255, 0.03) 50%,
        transparent 100%
    );
    background-size: 100% 4px;
    pointer-events: none;
    z-index: 2;
    animation: scanlines-move 8s linear infinite;
}

@keyframes scanlines-move {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(4px);
    }
}

.holographic-glitch {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 3;
}

.holographic-glitch::before,
.holographic-glitch::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: inherit;
    opacity: 0;
}

.holographic-glitch::before {
    animation: glitch-1 6s infinite;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(0, 255, 255, 0.1) 10%, 
        transparent 20%);
}

.holographic-glitch::after {
    animation: glitch-2 6s infinite;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 0, 255, 0.1) 10%, 
        transparent 20%);
}

@keyframes glitch-1 {
    0%, 90%, 100% {
        opacity: 0;
        transform: translateX(0);
    }
    95% {
        opacity: 1;
        transform: translateX(-2px);
    }
}

@keyframes glitch-2 {
    0%, 85%, 100% {
        opacity: 0;
        transform: translateX(0);
    }
    87% {
        opacity: 1;
        transform: translateX(2px);
    }
}

.holographic-particles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.holographic-particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background: rgba(100, 200, 255, 0.8);
    border-radius: 50%;
    animation: particle-rise 10s linear infinite;
}

@keyframes particle-rise {
    0% {
        transform: translateY(100vh) scale(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-100vh) scale(1);
        opacity: 0;
    }
}

/* =========================================
   Warp Core Animation
   ========================================= */
.warp-core-loader {
    position: relative;
    width: 200px;
    height: 400px;
    margin: 0 auto;
}

.warp-core-chamber {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 3px solid var(--lcars-blue);
    border-radius: 100px;
    background: linear-gradient(
        180deg,
        rgba(153, 153, 204, 0.1) 0%,
        rgba(153, 153, 204, 0.3) 50%,
        rgba(153, 153, 204, 0.1) 100%
    );
    overflow: hidden;
}

.warp-core-energy {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 0;
    background: linear-gradient(
        180deg,
        #00FFFF 0%,
        #0099FF 50%,
        #0066CC 100%
    );
    border-radius: 50px;
    animation: warp-core-pulse 2s ease-in-out infinite;
    filter: blur(2px);
}

@keyframes warp-core-pulse {
    0%, 100% {
        height: 20%;
        opacity: 0.8;
    }
    50% {
        height: 80%;
        opacity: 1;
        filter: blur(0) brightness(1.2);
        box-shadow: 0 0 30px #00FFFF,
                    0 0 60px #0099FF,
                    0 0 90px #0066CC;
    }
}

.warp-core-rings {
    position: absolute;
    width: 100%;
    height: 100%;
}

.warp-core-ring {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border: 2px solid var(--lcars-orange);
    border-radius: 50%;
    opacity: 0;
    animation: warp-ring-pulse 2s ease-in-out infinite;
}

.warp-core-ring:nth-child(1) {
    width: 60%;
    height: 15%;
    top: 20%;
    animation-delay: 0s;
}

.warp-core-ring:nth-child(2) {
    width: 70%;
    height: 17%;
    top: 40%;
    animation-delay: 0.5s;
}

.warp-core-ring:nth-child(3) {
    width: 60%;
    height: 15%;
    top: 60%;
    animation-delay: 1s;
}

@keyframes warp-ring-pulse {
    0%, 100% {
        opacity: 0;
        transform: translateX(-50%) scaleY(0.5);
    }
    50% {
        opacity: 1;
        transform: translateX(-50%) scaleY(1);
    }
}

/* =========================================
   Red Alert Animation
   ========================================= */
.red-alert-banner {
    position: relative;
    background: linear-gradient(
        90deg,
        #CC6666 0%,
        #FF6666 50%,
        #CC6666 100%
    );
    background-size: 200% 100%;
    animation: red-alert-sweep 3s linear infinite;
    padding: 1rem 2rem;
    border: 2px solid #FF6666;
    overflow: hidden;
}

@keyframes red-alert-sweep {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 200% 50%;
    }
}

.red-alert-lights {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.red-alert-light {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #FFFFFF;
    border-radius: 50%;
    animation: alert-blink 0.5s ease-in-out infinite alternate;
}

@keyframes alert-blink {
    0% {
        opacity: 0.3;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1.2);
        box-shadow: 0 0 20px #FFFFFF;
    }
}

/* =========================================
   Transporter Effect
   ========================================= */
.transporter-effect {
    position: relative;
    animation: transporter-materialize 2s ease-in-out;
}

@keyframes transporter-materialize {
    0% {
        opacity: 0;
        transform: scale(0.95) translateY(20px);
        filter: brightness(2) contrast(0.5);
    }
    20% {
        opacity: 0.3;
        transform: scale(0.98) translateY(15px);
        filter: brightness(1.5) contrast(0.7);
    }
    40% {
        opacity: 0.6;
        transform: scale(1.02) translateY(10px);
        filter: brightness(1.3) contrast(0.85);
    }
    60% {
        opacity: 0.9;
        transform: scale(0.99) translateY(5px);
        filter: brightness(1.1) contrast(0.95);
    }
    80% {
        opacity: 0.95;
        transform: scale(1.01) translateY(2px);
        filter: brightness(1.05) contrast(0.98);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: brightness(1) contrast(1);
    }
}

.transporter-sparkles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
}

.transporter-sparkle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #FFFFFF;
    border-radius: 50%;
    animation: sparkle-fade 1s ease-out forwards;
}

@keyframes sparkle-fade {
    0% {
        opacity: 1;
        transform: scale(0) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: scale(1) rotate(180deg);
    }
    100% {
        opacity: 0;
        transform: scale(0) rotate(360deg);
    }
}

/* =========================================
   Stardate Clock Animation
   ========================================= */
.stardate-clock {
    position: relative;
    font-family: var(--lcars-font-mono);
    font-size: 2rem;
    color: var(--lcars-yellow);
    text-align: center;
    letter-spacing: 0.1em;
}

.stardate-digits {
    display: inline-block;
    animation: digit-glow 2s ease-in-out infinite;
}

@keyframes digit-glow {
    0%, 100% {
        text-shadow: 0 0 5px currentColor;
    }
    50% {
        text-shadow: 0 0 20px currentColor,
                     0 0 30px currentColor;
    }
}

.stardate-separator {
    display: inline-block;
    animation: separator-blink 1s step-end infinite;
}

@keyframes separator-blink {
    0%, 50% {
        opacity: 1;
    }
    51%, 100% {
        opacity: 0;
    }
}

/* =========================================
   Data Stream Effect
   ========================================= */
.data-stream {
    position: relative;
    overflow: hidden;
    font-family: var(--lcars-font-mono);
}

.data-stream-line {
    position: relative;
    padding: 0.25rem 0;
    opacity: 0;
    animation: data-flow 3s linear infinite;
}

@keyframes data-flow {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    10% {
        opacity: 1;
        transform: translateY(0);
    }
    90% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-20px);
    }
}

/* =========================================
   Shield Effect
   ========================================= */
.shield-effect {
    position: relative;
}

.shield-bubble {
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border: 2px solid rgba(0, 150, 255, 0.3);
    border-radius: 50%;
    animation: shield-pulse 2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes shield-pulse {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05);
        box-shadow: 0 0 30px rgba(0, 150, 255, 0.5),
                    inset 0 0 30px rgba(0, 150, 255, 0.3);
    }
}

.shield-hexagon {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 20px,
            rgba(0, 150, 255, 0.1) 20px,
            rgba(0, 150, 255, 0.1) 21px
        ),
        repeating-linear-gradient(
            60deg,
            transparent,
            transparent 20px,
            rgba(0, 150, 255, 0.1) 20px,
            rgba(0, 150, 255, 0.1) 21px
        ),
        repeating-linear-gradient(
            120deg,
            transparent,
            transparent 20px,
            rgba(0, 150, 255, 0.1) 20px,
            rgba(0, 150, 255, 0.1) 21px
        );
    animation: shield-rotate 20s linear infinite;
    pointer-events: none;
}

@keyframes shield-rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* =========================================
   Phaser Effect
   ========================================= */
.phaser-beam {
    position: relative;
    height: 4px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        #FF0000 10%,
        #FF6600 50%,
        #FF0000 90%,
        transparent 100%
    );
    animation: phaser-shoot 1s ease-out forwards;
    transform-origin: left center;
}

@keyframes phaser-shoot {
    0% {
        transform: scaleX(0);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: scaleX(1);
        opacity: 0;
    }
}

/* =========================================
   Quantum Effect
   ========================================= */
.quantum-flux {
    position: relative;
    animation: quantum-phase 4s ease-in-out infinite;
}

@keyframes quantum-phase {
    0%, 100% {
        filter: hue-rotate(0deg) saturate(1);
    }
    25% {
        filter: hue-rotate(90deg) saturate(1.2);
    }
    50% {
        filter: hue-rotate(180deg) saturate(0.8);
    }
    75% {
        filter: hue-rotate(270deg) saturate(1.1);
    }
}

/* =========================================
   Tractor Beam Effect
   ========================================= */
.tractor-beam {
    position: relative;
    overflow: visible;
}

.tractor-beam::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 200%;
    height: 500px;
    background: linear-gradient(
        180deg,
        rgba(0, 255, 0, 0.3) 0%,
        transparent 100%
    );
    clip-path: polygon(40% 0%, 60% 0%, 100% 100%, 0% 100%);
    animation: tractor-pulse 2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes tractor-pulse {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 0.8;
    }
}