/* ===== Общие стили ===== */
body {
    height: 100vh;
    background: #0b0f1a;
    color: white;
    font-family: sans-serif;
}

.title_img{
    padding-bottom: 150%;
}

.scene{
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.central{
    position: absolute;
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 40vw;
    z-index: 1;
}

.center-img {
    width: 25vh;
}

.solar-system {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 100%;
    transform: scale(1);
}

.orbit {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border: 1px dashed rgba(255,255,255,0.3);
    border-radius: 50%;
    transition: opacity 1s ease, transform 1s ease;
    transform: translate(-50%, -50%) scale(1);
}

/* Планета */
.planet {
    width: 100px;
    height: 100px;
    font-size: 0.9em;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    text-decoration: none;
    border-radius: 50%;
    position: absolute;
    top: 0; left: 50%;
    padding: 5px;
    transform: translate(-50%, -50%);
}

.orbit:nth-child(1) .planet {
    background-image: url('../img/flute.jpg');
    background-size: cover;
    background-position: center; 
    background-repeat: no-repeat;
}

.orbit:nth-child(2) .planet {
    background-image: url('../img/sneakers.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ===== Задаём размеры орбит и анимацию ===== */
.orbit:nth-child(1) {
    width: 45vh;
    height: 45vh;
    z-index: 80;
    transition-delay: 0.2s;
    animation: rotate 8s linear infinite; 
}
.orbit:nth-child(2) {
    width: 75vh;
    height: 75vh;
    z-index: 70;
    transition-delay: 1s;
    animation: rotate 11s linear infinite;
}

/* ===== Ключевые кадры вращения ===== */
/* Орбита сама крутится вокруг центра,
   а вместе с ней крутится и планета */
@keyframes rotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}