/* MAIS TUNER 24.11.34 — movimento editorial inspirado no NRK Radio.
   O sistema privilegia leitura, resposta rápida e superfícies sólidas. */
:root{
  --nrk-motion-fast:90ms;
  --nrk-motion-base:150ms;
  --nrk-motion-slow:200ms;
  --nrk-motion-ease:cubic-bezier(1,.2,.88,1);
  --nrk-motion-exit:cubic-bezier(.4,0,1,1);
}

/* Entradas editoriais: curtas, sem elasticidade e sem efeito 3D. */
html:not(.anim-none) .nrk-motion-enter{
  opacity:0;
  transform:none;
  transition:opacity var(--nrk-motion-slow) var(--nrk-motion-ease);
  transition-delay:0ms;
}
html:not(.anim-none) .nrk-motion-enter.nrk-motion-visible{
  opacity:1;
  transform:none;
}

/* O nível profundo mantém um pouco mais de deslocamento, sem inclinação. */
html.anim-deep .nrk-motion-enter,
html.anim-deep .nrk-motion-enter.nrk-motion-visible{transform:none}

/* Cartões e controles seguem o movimento contido observado no NRK. */
html:not(.anim-none) :is(
  .card,.brand-tile,.radio-card,.podcast-card,.host-card,.news-card,.radiovision-card,
  .community-episode-card,.community-radio-card,.community-song-row,
  .dist-brand-card,.dist-card,.dist-station-card,.dist-resource,
  .rg-nrk-program,.rg-series-episode,.card-network-trigger
){
  transform:none;
  transition:
    background-color var(--nrk-motion-base) ease,
    border-color var(--nrk-motion-base) ease,
    opacity var(--nrk-motion-base) var(--nrk-motion-ease) !important;
}
/* As folhas históricas usam seletores de modo com maior especificidade.
   #main garante que a cadência curta prevaleça nos cartões da Home. */
html:not(.anim-none) body #main :is(.card,.brand-tile,.radio-card){
  transform:none !important;
  transition:
    background-color var(--nrk-motion-base) ease,
    border-color var(--nrk-motion-base) ease,
    opacity var(--nrk-motion-base) var(--nrk-motion-ease) !important;
}
@media(hover:hover) and (pointer:fine){
  html:not(.anim-none) :is(
    .radio-card,.podcast-card,.host-card,.news-card,.radiovision-card,
    .community-episode-card,.community-radio-card,.community-song-row,
    .dist-brand-card,.dist-card,.dist-station-card,.dist-resource,
    .rg-series-episode
  ):hover{
    transform:none !important;
  }
  html.anim-deep .radio-card:hover,
  html.anim-deep body .grid:not(.large-view):not(.list-view):not(.brand-view)>.card:hover{
    transform:none !important;
  }
  html.anim-deep .radio-card:hover :is(.card-hero,.card-body),
  html.anim-deep .card:hover :is(.card-hero,.card-body){transform:none !important}
}

html:not(.anim-none) :is(
  button,.circle-btn,.language-trigger,.rg-open-btn,.rv-tv-button,
  .source-btn,.stream-source-option,.tab,.news-filter,.community-button
){
  transition:
    color var(--nrk-motion-fast) ease,
    background-color var(--nrk-motion-fast) ease,
    border-color var(--nrk-motion-fast) ease,
    opacity var(--nrk-motion-fast) ease,
    transform var(--nrk-motion-fast) var(--nrk-motion-ease) !important;
}
html:not(.anim-none) :is(button,.circle-btn,.rg-open-btn,.rv-tv-button,.community-button):active{
  transform:none !important;
  opacity:.82;
}

/* Páginas, painéis e menus entram como camadas editoriais. */
html:not(.anim-none) :is(
  .radioguide,.podcasts-page,.hosts-page,.news-page,.radiovision-page,.dist-page,
  .track-info-modal,.station-modal,.site-menu-overlay,.replay-panel,
  .cinema-stations-overlay,.rg-series-fullscreen
).show{
  animation:nrkLayerIn var(--nrk-motion-base) ease-out both !important;
}
html:not(.anim-none) :is(
  .track-info-inner,.station-modal-inner,.site-menu-panel,.replay-inner,
  .cinema-stations-sheet,.rg-series-native-player,.rg-series-queue
){
  transition:
    opacity var(--nrk-motion-base) ease,
    transform var(--nrk-motion-slow) var(--nrk-motion-ease) !important;
}
@keyframes nrkLayerIn{from{opacity:0}to{opacity:1}}

/* Troca de capa, marca e metadados: pequeno fade, sem salto ou zoom. */
html:not(.anim-none) :is(
  .hero .art,.np-cover,.mini-art img,.card-hero-img,.card-brand-logo,
  .podcast-cover,.host-photo,.news-card-media img,.radiovision-art img
){
  transition:opacity var(--nrk-motion-base) ease-out !important;
}
html:not(.anim-none) :is(.hero-enter .art,.hero-enter .nowplaying,.hero-enter #liveDot){
  animation:nrkContentReveal var(--nrk-motion-slow) var(--nrk-motion-ease) both !important;
}
@keyframes nrkContentReveal{
  from{opacity:0}
  to{opacity:1}
}

/* Loaders em blocos sólidos, como a primeira pintura das páginas do NRK. */
html:not(.anim-none) :is(
  .rg-nrk-loading,.insights-loading,.radiovision-loading,.sr-weather-loading,
  .community-status[data-loading="true"],.news-status[data-loading="true"]
){
  position:relative;
  min-height:112px;
  overflow:hidden;
  border:0 !important;
  border-radius:3px !important;
  background:#123c67 !important;
  color:transparent !important;
  contain:layout paint;
}
html:not(.anim-none) :is(
  .rg-nrk-loading,.insights-loading,.radiovision-loading,.sr-weather-loading,
  .community-status[data-loading="true"],.news-status[data-loading="true"]
)::before,
html:not(.anim-none) :is(
  .rg-nrk-loading,.insights-loading,.radiovision-loading,.sr-weather-loading,
  .community-status[data-loading="true"],.news-status[data-loading="true"]
)::after{
  content:'';
  position:absolute;
  left:24px;
  height:12px;
  border-radius:2px;
  background:#315b84;
  animation:nrkBlockPulse 1.15s ease-in-out infinite;
}
html:not(.anim-none) :is(
  .rg-nrk-loading,.insights-loading,.radiovision-loading,.sr-weather-loading,
  .community-status[data-loading="true"],.news-status[data-loading="true"]
)::before{top:34px;width:min(52%,360px)}
html:not(.anim-none) :is(
  .rg-nrk-loading,.insights-loading,.radiovision-loading,.sr-weather-loading,
  .community-status[data-loading="true"],.news-status[data-loading="true"]
)::after{top:58px;width:min(32%,220px);animation-delay:90ms}
@keyframes nrkBlockPulse{0%,100%{opacity:.48}50%{opacity:1}}

/* A sintonia deixa de saltar: marca estável e pulsação editorial discreta. */
html:not(.anim-none) .kangaroo-tuning.show .kangaroo-loader-img{
  animation:nrkTuningFade 1.2s ease-in-out infinite !important;
  transform:translateX(-50%) !important;
}
html:not(.anim-none) .kangaroo-tuning.show :is(.kangaroo-shadow,.kangaroo-dust){animation:none !important}
html:not(.anim-none) .kangaroo-tuning.show .kangaroo-dots i{
  animation:nrkDot 1.05s ease-in-out infinite !important;
}
html:not(.anim-none) .kangaroo-tuning.show .kangaroo-dots i:nth-child(2){animation-delay:120ms !important}
html:not(.anim-none) .kangaroo-tuning.show .kangaroo-dots i:nth-child(3){animation-delay:240ms !important}
@keyframes nrkTuningFade{0%,100%{opacity:.62}50%{opacity:1}}
@keyframes nrkDot{0%,100%{opacity:.28;transform:none}50%{opacity:1;transform:none}}

/* Menus de estação e a seta usam uma única cadência. */
html:not(.anim-none) .card-network-trigger svg,
html:not(.anim-none) .rg-nrk-affiliate svg{
  transition:transform var(--nrk-motion-base) var(--nrk-motion-ease) !important;
}
html:not(.anim-none) .card-network-menu{
  transform-origin:top right;
  animation:nrkMenuIn var(--nrk-motion-base) var(--nrk-motion-ease) both;
}
@keyframes nrkMenuIn{
  from{opacity:0;transform:translate3d(0,-4px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}

/* Barra do player entra de baixo sem efeito elástico. */
html:not(.anim-none) .mini-player.just-shown{
  animation:nrkPlayerIn var(--nrk-motion-slow) var(--nrk-motion-ease) both !important;
}
@keyframes nrkPlayerIn{
  from{opacity:0}
  to{opacity:1}
}

/* O NRK mantém listas visualmente estáveis. Aqui o ponteiro altera apenas
   contraste; não recalcula posição nem sombra de dezenas de cartões. */
html:not(.anim-none) :is(.card,.brand-tile,.radio-card,.podcast-card,.news-card,.host-card,.radiovision-card,.cin-tile):hover{
  transform:none !important;
}

/* Nada continua consumindo pintura quando a aba perde visibilidade. */
html.app-backgrounded *,html.app-backgrounded *::before,html.app-backgrounded *::after{
  animation-play-state:paused !important;
  transition:none !important;
}

@media(prefers-reduced-motion:reduce){
  .nrk-motion-enter,.nrk-motion-visible{opacity:1 !important;transform:none !important;transition:none !important}
  .nrk-motion-enter *,
  :is(.rg-nrk-loading,.insights-loading,.radiovision-loading,.sr-weather-loading)::before,
  :is(.rg-nrk-loading,.insights-loading,.radiovision-loading,.sr-weather-loading)::after{
    animation:none !important;
  }
}