/* Front page "Tune In" panel: same content, looser spacing and a bit of motion. */

.g-container.home-tune {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.home-tune-title {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.home-tune-onair {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 5px 1px;
    font-size: 9px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #ffd2c8;
    background: #2a0500;
    border: 1px solid #ff4b2b;
    box-shadow: 0 0 6px rgba(255, 75, 43, 0.45);
}

.home-tune-onair::before {
    content: "";
    width: 5px;
    height: 5px;
    background: #ff4b2b;
    animation: tune-blink 1.4s steps(1) infinite;
}

@keyframes tune-blink {
    50% { opacity: 0.15; }
}

.home-tune-tv {
    translate: -22px 0;
    rotate: -4deg;
    transition: rotate 0.2s steps(3), scale 0.2s steps(3), filter 0.2s steps(2);
}

.home-tune-tv:hover {
    rotate: 0deg;
    scale: 1.08;
    filter: brightness(1.25) contrast(1.15);
}

.home-tune-tv img {
    display: block;
}

.home-tune-copy {
    margin: 0;
    max-width: 92%;
    line-height: 1.35;
}

.home-tune-dancers {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
}

.home-tune-dancer {
    object-fit: contain;
    animation: tune-bob 0.9s steps(2) infinite;
    animation-delay: calc(var(--i) * -0.18s);
    transition: scale 0.15s steps(2);
}

.home-tune-dancer:nth-child(even) {
    margin-bottom: 5px;
}

.home-tune-dancer:hover {
    scale: 1.25;
}

.home-tune-dancer.is-lead {
    animation: none;
}

@keyframes tune-bob {
    50% { translate: 0 -4px; }
}

.home-tune-retronaut {
    margin: -8px 0 -6px 56px;
    animation: tune-float 4.8s ease-in-out infinite;
    transition: scale 0.2s steps(3), filter 0.2s steps(2);
}

.home-tune-retronaut:hover {
    scale: 1.1;
    filter: drop-shadow(0 0 6px rgba(255, 119, 0, 0.7));
}

@keyframes tune-float {
    0%, 100% { translate: 0 0;     rotate: -3deg; }
    50%      { translate: -6px -7px; rotate: 3deg; }
}

.home-tune-divider {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--panel-color);
}

.home-tune-divider::before,
.home-tune-divider::after {
    content: "";
    flex: 1;
    border-top: 2px dotted var(--panel-color);
    opacity: 0.55;
}

.home-tune-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    width: 100%;
}

.home-tune-buttons > img,
.home-tune-buttons > a {
    display: block;
    position: relative;
    rotate: -1.2deg;
    transition: rotate 0.15s steps(2), scale 0.15s steps(2), filter 0.15s steps(2);
}

.home-tune-buttons > :nth-child(3n + 2) {
    rotate: 1deg;
    translate: 0 1px;
}

.home-tune-buttons > :nth-child(3n) {
    rotate: -0.4deg;
}

.home-tune-buttons img {
    display: block;
    height: 31px;
    object-fit: contain;
}

.home-tune-buttons > img:hover,
.home-tune-buttons > a:hover,
.home-tune-buttons > a:focus-visible {
    z-index: 1;
    rotate: 0deg;
    scale: 1.18;
    filter: drop-shadow(0 0 4px rgba(255, 119, 0, 0.85));
}

@media (prefers-reduced-motion: reduce) {
    .home-tune *,
    .home-tune *::before {
        animation: none !important;
        transition: none !important;
    }
}