/**
 * Camera Animations CSS
 * Defines CSS animations for camera movements in scene transitions
 */

/* Base camera animation container properties */
.scene-element {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.intro-animation-element,
.outro-animation-element {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1000;
}

/* Pan left animation */
.camera-pan-left .scene-element,
.camera-pan-left.scene-element {
    animation: pan-left 2s ease-out forwards;
}

@keyframes pan-left {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

/* Pan right animation */
.camera-pan-right .scene-element,
.camera-pan-right.scene-element {
    animation: pan-right 2s ease-out forwards;
}

@keyframes pan-right {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

/* Pan up animation */
.camera-pan-up .scene-element,
.camera-pan-up.scene-element {
    animation: pan-up 2s ease-out forwards;
}

@keyframes pan-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

/* Pan down animation */
.camera-pan-down .scene-element,
.camera-pan-down.scene-element {
    animation: pan-down 2s ease-out forwards;
}

@keyframes pan-down {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

/* Zoom in animation */
.camera-zoom-in .scene-element,
.camera-zoom-in.scene-element {
    animation: zoom-in 2s ease-out forwards;
}

@keyframes zoom-in {
    from { transform: scale(0.5); opacity: 0.8; }
    to { transform: scale(1); opacity: 1; }
}

/* Zoom out animation */
.camera-zoom-out .scene-element,
.camera-zoom-out.scene-element {
    animation: zoom-out 2s ease-out forwards;
}

@keyframes zoom-out {
    from { transform: scale(1.5); opacity: 0.8; }
    to { transform: scale(1); opacity: 1; }
}

/* Fade in animation */
.camera-fade-in .scene-element,
.camera-fade-in.scene-element {
    animation: fade-in 1.5s ease-out forwards;
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Fade out animation */
.camera-fade-out .scene-element,
.camera-fade-out.scene-element {
    animation: fade-out 1.5s ease-out forwards;
}

@keyframes fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* Combined animations */
.camera-zoom-in-from-left .scene-element,
.camera-zoom-in-from-left.scene-element {
    animation: zoom-in-from-left 2.5s ease-out forwards;
}

@keyframes zoom-in-from-left {
    from { transform: translateX(-100%) scale(0.5); opacity: 0.8; }
    to { transform: translateX(0) scale(1); opacity: 1; }
}

.camera-zoom-in-from-right .scene-element,
.camera-zoom-in-from-right.scene-element {
    animation: zoom-in-from-right 2.5s ease-out forwards;
}

@keyframes zoom-in-from-right {
    from { transform: translateX(100%) scale(0.5); opacity: 0.8; }
    to { transform: translateX(0) scale(1); opacity: 1; }
}

/* Container transition state */
.game-container.in-transition {
    position: relative;
    overflow: hidden;
}

/* Animation container for intro/outro scenes */
.outro-animation-container,
.intro-animation-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.5);
}