/* ==========================================================================
    GLOBAL KEYFRAMES / ANIMATIONS
   ========================================================================== */
@keyframes slideDown {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(0); }
}

@keyframes driftX {
  0%, 100% { transform: translateX(0px); }
  50%      { transform: translateX(15px); }
}

@keyframes bobAndZoom {
  0%, 100% { transform: translateY(0px) scale(1); }
  50%      { transform: translateY(-15px) scale(1.03); }
}

@keyframes sparkle-spin {
  0%   { transform: rotate(-8deg) scale(1.5); }
  50%  { transform: rotate(8deg) scale(1.0); }
  100% { transform: rotate(-8deg) scale(1.5); }
}

@keyframes blobMorph {
  0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  50%      { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes floatUp {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

.engines {
    position: absolute;
    bottom: 11%;   
    left: 17%;       
    width: 60px;   
    height: 40px; 
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0;
    pointer-events: none;
    transform-origin: right center; 
    animation: engineFire 30s infinite ease-in-out;
}

@keyframes engineFire {
    0%, 80%, 100% { 
        opacity: 0; 
        transform: scale(0, 0.5) translateX(0); 
        background-image: none; 
    }
 
    82% { 
        opacity: 1; 
        transform: scale(0.7, 0.4) translateX(0); 
        background-image: url('../img/flying-machine/white-flame.png'); 
    }
    
    84% { 
        opacity: 1; 
        transform: scale(0.4, 0.33) translateY(0.5px); 
        background-image: url('../img/flying-machine/blue-flame.png'); 
    }
    85% { 
        opacity: 1; 
        transform: scale(0.5, 0.38) translateY(-0.5px);  
        background-image: url('../img/flying-machine/blue-flame.png'); 
    }
    86% { 
        opacity: 1; 
        transform: scale(0.7, 0.3) translateY(0.5px); 
        background-image: url('../img/flying-machine/blue-flame.png'); 
    }
    87% { 
        opacity: 1; 
        transform: scale(0.4, 0.2) translateY(-0.5); 
        background-image: url('../img/flying-machine/blue-flame.png'); 
    }
    88% { 
        opacity: 1; 
        transform: scale(0.6, 0.32) translateY(0.5px); 
        background-image: url('../img/flying-machine/blue-flame.png'); 
    }
    89% { 
        opacity: 1; 
        transform: scale(0.3, 0.34) translateY(-0.5px); 
        background-image: url('../img/flying-machine/blue-flame.png'); 
    }
    90% { 
        opacity: 1; 
        transform: scale(0.2, 0.12) translateY(0.5); 
        background-image: url('../img/flying-machine/blue-flame.png'); 
    }
    
    92%, 96% { 
        opacity: 1; 
        transform: scale(0.5, 0.35) translateY(-0.5); 
        background-image: url('../img/flying-machine/yellow-flame.png'); 
    }
    94%, 98% { 
        opacity: 1; 
        transform: scale(0.3, 0.2) translateY(0.5); 
        background-image: url('../img/flying-machine/yellow-flame.png'); 
    }
} 

.exhaust-smoke {
    position: absolute;
    z-index: -1;
    bottom: 1%;   
    left: 20%;   
    width: 80px; 
    height: 80px;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0;
    pointer-events: none;
    
    animation: smokeExhaust 30s infinite ease-in-out;
}

@keyframes smokeExhaust {
    0%, 80%, 100% { 
        opacity: 1; 
        transform: translateY(0) scale(0.7); 
        background-image: none; 
    }

    83% { 
        opacity: 0.9; 
        transform: translateY(-5px) scale(0.7); 
        background-image: url('../img/flying-machine/smoke-small.png'); 
        filter: blur(1px);
    }
       87% { 
        opacity: 0.5; 
        transform: translateY(-25px) scale(0.7); 
        background-image: url('../img/flying-machine/smoke-med.png'); 
        filter: blur(2.5px);
    }
   
    93% { 
        opacity: 0.5; 
        transform: translateY(-45px) scale(0.6); 
        background-image: url('../img/flying-machine/smoke-large.png'); 
        filter: blur(4px); 
    } 
    98% { 
        opacity: 0.5; 
        transform: translateY(-65px) scale(0.8); 
    }
}

.speech {
    position: absolute;
    top: 200px;    
    left: 205px;   
    width: 100px;  
    height: 100px; 
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0;
    pointer-events: none;
    z-index: 2; 
    animation: staticCaptionSequence 30s infinite ease-in-out;
    display: none;
}

@keyframes staticCaptionSequence {
    0%, 81%, 100% { 
        opacity: 0; 
        background-image: none;
    }
    
    82% { opacity: 0; background-image: url('../img/flying-machine/come-on.png'); }
    83%, 85% { opacity: 1; }
    86% { opacity: 0; }
    
    87% { opacity: 0; background-image: url('../img/flying-machine/get-onboard.png'); }
    88%, 91% { opacity: 1; }
    92% { opacity: 0; }
    
    93% { opacity: 0; background-image: url('../img/flying-machine/dont-wait.png'); }
    94%, 97% { opacity: 1; }
    98%, 99% { opacity: 0; background-image: none; }
}

/* ==========================================
   MOBILE RESPONSIVE OVERRIDES 
   ========================================== */
@media screen and (max-width: 768px) {
    .engines {
        bottom: 8%;
        left: 5%;   
    }

    .exhaust-smoke {
        top: 80%;   
        left: 7%;   
    }

    .speech {
        top: 275px;  /* Bring it down closer on a smaller screen */
        left: 60px;  /* Pull it left so it doesn't bleed off the screen */
        width: 75px; /* Optional: Scale the bubble down slightly for mobile */
        height: 75px;
    display: none;
      }
    }