/* Program Animations CSS */

/* Container for animations */
.program-animation-container {
    width: 100%;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 15px;
    overflow: hidden;
    position: relative;
}

/* FOO - Flight Operation Officer Animation */
.foo-animation {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
}

.foo-animation svg {
    width: 300px;
    height: 300px;
}

.airplane-icon {
    animation: flyAcross 8s ease-in-out infinite;
    transform-origin: center;
}

@keyframes flyAcross {
    0%, 100% {
        transform: translateX(-100px) translateY(20px) rotate(-5deg);
    }
    50% {
        transform: translateX(100px) translateY(-20px) rotate(5deg);
    }
}

.route-line {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    animation: drawRoute 4s ease-in-out infinite;
}

@keyframes drawRoute {
    0%, 100% {
        stroke-dashoffset: 500;
    }
    50% {
        stroke-dashoffset: 0;
    }
}

/* Recurrent - Refresh/Repeat Animation */
.recurrent-animation {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.recurrent-animation svg {
    width: 280px;
    height: 280px;
}

.refresh-circle {
    animation: rotateRefresh 3s ease-in-out infinite;
    transform-origin: center;
}

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

.arrow-path {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: drawArrow 2s ease-in-out infinite;
}

@keyframes drawArrow {
    0%, 100% {
        stroke-dashoffset: 200;
    }
    50% {
        stroke-dashoffset: 0;
    }
}

/* Mandatory - Shield Check Animation */
.mandatory-animation {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.mandatory-animation svg {
    width: 280px;
    height: 280px;
}

.shield-icon {
    animation: pulseShield 2s ease-in-out infinite;
}

@keyframes pulseShield {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

.check-mark {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: drawCheck 1.5s ease-in-out infinite;
}

@keyframes drawCheck {
    0%, 100% {
        stroke-dashoffset: 100;
    }
    50%, 80% {
        stroke-dashoffset: 0;
    }
}

/* Dangerous Goods - Warning Triangle Animation */
.dg-animation {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.dg-animation svg {
    width: 280px;
    height: 280px;
}

.warning-triangle {
    animation: warningPulse 1.5s ease-in-out infinite;
}

@keyframes warningPulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 10px rgba(254, 225, 64, 0.5));
    }
    50% {
        transform: scale(1.05);
        filter: drop-shadow(0 0 20px rgba(254, 225, 64, 0.8));
    }
}

.exclamation-mark {
    animation: blinkExclamation 2s ease-in-out infinite;
}

@keyframes blinkExclamation {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.3;
    }
}

/* AvSec - Shield Lock Animation */
.avsec-animation {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.avsec-animation svg {
    width: 280px;
    height: 280px;
}

.security-shield {
    animation: protectPulse 2.5s ease-in-out infinite;
}

@keyframes protectPulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 15px rgba(0, 242, 254, 0.5));
    }
    50% {
        transform: scale(1.08);
        filter: drop-shadow(0 0 25px rgba(0, 242, 254, 0.8));
    }
}

.lock-icon {
    animation: lockUnlock 3s ease-in-out infinite;
    transform-origin: center;
}

@keyframes lockUnlock {
    0%, 100% {
        transform: translateY(0);
    }
    25% {
        transform: translateY(-5px);
    }
    50% {
        transform: translateY(0);
    }
}

/* ToT - Training/People Animation */
.tot-animation {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}

.tot-animation svg {
    width: 280px;
    height: 280px;
}

.person-icon {
    animation: presentFloat 3s ease-in-out infinite;
}

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

.video-waves {
    animation: waveExpand 2s ease-in-out infinite;
    transform-origin: center;
}

@keyframes waveExpand {
    0%, 100% {
        transform: scale(1);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.3;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .program-animation-container {
        height: 300px;
    }
    
    .foo-animation svg,
    .recurrent-animation svg,
    .mandatory-animation svg,
    .dg-animation svg,
    .avsec-animation svg,
    .tot-animation svg {
        width: 200px;
        height: 200px;
    }
}