/* ErrorAnimation Component Styles */

.error-animation-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 400px;
    position: relative;
    perspective: 1000px;
    margin: 40px 0;
}

.error-rotor {
    display: inline-block;
    transform-origin: center;
    transform-style: preserve-3d;
    will-change: transform;
    animation: errorRotateY 4s linear infinite;
}

.error-logo {
    display: block;
    width: 400px;
    height: auto;
}

.error-logo #g136 {
    transform-box: fill-box;
    transform-origin: center;
    will-change: transform;
    animation: errorRotateSegments 3s linear infinite;
}

@keyframes errorRotateY {
    0% {
        transform: rotateY(0deg);
    }
    50% {
        transform: rotateY(90deg);
    }
    100% {
        transform: rotateY(0deg);
    }
}

@keyframes errorRotateSegments {
    0% {
        transform: rotate3d(1, -1, 0, 0deg);
    }
    50% {
        transform: rotate3d(1, -1, 0, 90deg);
    }
    100% {
        transform: rotate3d(1, -1, 0, 0deg);
    }
}

/* Responsive Sizing */
@media (max-width: 600px) {
    .error-logo {
        width: 300px;
    }
    
    .error-animation-container {
        height: 300px;
    }
}

@media (max-width: 400px) {
    .error-logo {
        width: 250px;
    }
    
    .error-animation-container {
        height: 250px;
    }
}
