/* ===========================
   CAPTAIN JON - ANIMATIONS
   =========================== */

/* Animation du sous-marin (pulsation) */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

.cell.submarine {
    animation: pulse 2s infinite;
}

/* Animation de déplacement du sous-marin */
@keyframes moveSubmarine {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

.cell.submarine.moving {
    animation: moveSubmarine 0.5s ease-in-out;
}

/* Animation d'apparition */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.5s ease-out;
}

/* Animation de succès */
@keyframes success {
    0% {
        transform: scale(1);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.success-message {
    animation: success 0.6s ease-out;
}

/* Animation d'erreur (shake) */
@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-10px);
    }
    75% {
        transform: translateX(10px);
    }
}

.error-message {
    animation: shake 0.4s ease-out;
}

/* Animation de révélation de la grille */
@keyframes reveal {
    from {
        opacity: 0;
        background: #0a0a0a;
    }
    to {
        opacity: 1;
        background: #1a3a5a;
    }
}

.cell.revealing {
    animation: reveal 0.5s ease-out forwards;
}

/* Animation du chemin tracé */
@keyframes pathDraw {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.cell.path {
    animation: pathDraw 0.3s ease-out;
}

/* Animation de la boussole à l'apparition */
@keyframes compassAppear {
    from {
        opacity: 0;
        transform: scale(0.8) rotate(-45deg);
    }
    to {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

.compass-section.active {
    animation: compassAppear 0.6s ease-out;
}

/* Animation de l'aiguille de la boussole */
@keyframes needleSpin {
    0% {
        transform: translate(-50%, -100%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -100%) rotate(90deg);
    }
}

.compass-needle.spinning {
    animation: needleSpin 1s ease-in-out;
}

/* Animation de glow pour les éléments importants */
@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 15px rgba(58, 90, 143, 0.5);
    }
    50% {
        box-shadow: 0 0 25px rgba(58, 90, 143, 0.9);
    }
}

.cell.submarine,
.compass {
    animation: glow 3s infinite;
}

/* Transition smooth pour toutes les cellules */
.cell {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Animation pour les cases qui se dévoilent progressivement */
@keyframes revealSequence {
    0% {
        opacity: 0;
        transform: scale(0);
        background: #0a0a0a;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Délais pour révélation en cascade */
.cell.reveal-1 { animation: revealSequence 0.4s ease-out 0.1s forwards; opacity: 0; }
.cell.reveal-2 { animation: revealSequence 0.4s ease-out 0.2s forwards; opacity: 0; }
.cell.reveal-3 { animation: revealSequence 0.4s ease-out 0.3s forwards; opacity: 0; }
.cell.reveal-4 { animation: revealSequence 0.4s ease-out 0.4s forwards; opacity: 0; }
.cell.reveal-5 { animation: revealSequence 0.4s ease-out 0.5s forwards; opacity: 0; }

/* Animation des messages console */
@keyframes consoleAppear {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.console-message {
    animation: consoleAppear 0.3s ease-out;
}