/* Stilovi stranice podcasta koje Tailwind klase ne mogu pokriti.
   Datoteka se učitava samo na toj stranici, pa selektori ne utječu na ostatak sitea. */

/* Dizajn stoji na toploj papirnatoj pozadini, uključujući zaglavlje. */
body {
    background-color: #FAF8F4;
}

header .navbar.bg-white {
    background-color: #FAF8F4 !important;
}

/* Skripta skriva kartice atributom hidden, a Tailwind display klase imaju !important. */
[data-podcast-episode][hidden],
[data-podcast-filters][hidden],
[data-podcast-more][hidden] {
    display: none !important;
}

/* Consent omot je složen za video 16:9. Spotify player je nizak i fiksne visine. */
.podcast-embed .privacy-preferences-media {
    height: 232px;
    min-height: 0;
    aspect-ratio: auto;
    border-radius: 16px;
}

/* Animacije u hero kolažu.
   Mikrofon se lagano ljulja oko kraja drške, dolje desno, kao da stoji na stalku.
   Ploča se vrti samo dok svira epizoda iz kartice u kolažu. Pri pauzi staje na mjestu. */
.podcast-hero__mic {
    transform-origin: 63% 93%;
    animation: podcast-mic-sway 4.5s ease-in-out infinite alternate;
}

.podcast-hero__disc {
    transform-origin: 50% 50%;
    animation: podcast-disc-spin 6s linear infinite;
    animation-play-state: paused;
}

[data-podcast-state].is-playing .podcast-hero__disc {
    animation-play-state: running;
}

@keyframes podcast-mic-sway {
    from {
        transform: rotate(-2.5deg);
    }

    to {
        transform: rotate(2.5deg);
    }
}

@keyframes podcast-disc-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .podcast-hero__mic,
    .podcast-hero__disc {
        animation: none;
    }
}