body, html {
    background-color: #212121;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.center-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    perspective: 800px;
}

.center {
    display: block;
    max-width: 90vw;
    max-height: 180px;
    width: auto;
    height: auto;
    transform-style: preserve-3d;
}

/* Animazione solo su desktop (dispositivi con mouse) */
@media (hover: hover) and (pointer: fine) {
    .center {
        animation: logo-flip 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
    }
}

@keyframes logo-flip {
    0% {
        transform: rotateY(0deg);
        opacity: 0.3;
    }
    20% {
        opacity: 1;
    }
    75% {
        transform: rotateY(370deg);
    }
    90% {
        transform: rotateY(355deg);
    }
    100% {
        transform: rotateY(360deg);
        opacity: 1;
    }
}

@media screen and (orientation: landscape) {
    .center img {
        max-height: 80vh;
        width: auto;
    }
}

* {
    box-sizing: border-box;
}