/* =============================================================================
   UNIVERSO ANIMES — Transições de página + loading (Fase 1)
   Carregado DEPOIS de ua-components. Progressive enhancement: degrada p/ navegação
   normal onde não há suporte. No-glow / flat / tokens. prefers-reduced-motion safe.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1) View Transitions (cross-document / MPA) — crossfade suave, sem flash branco.
   Em navegadores sem suporte (ex.: Firefox atual) é simplesmente ignorado → reload normal.
   ----------------------------------------------------------------------------- */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root){
  animation-duration: .28s;
  animation-timing-function: cubic-bezier(.22,.61,.36,1);
}

/* -----------------------------------------------------------------------------
   2) Barra de progresso de navegação (topo) — feedback imediato no clique.
   Lime sólido (regra de ouro), flat (sem glow). Abaixo do #wpadminbar quando logado.
   ----------------------------------------------------------------------------- */
.ua-progress{
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  z-index: 100000; pointer-events: none;
  opacity: 0; transition: opacity .25s ease;
}
.ua-progress.is-active{ opacity: 1; }
.ua-progress__bar{
  height: 100%; width: 0;
  background: var(--ua-accent);
  transition: width .2s cubic-bezier(.22,.61,.36,1);
}
body.admin-bar .ua-progress{ top: 46px; }
@media screen and (min-width:783px){ body.admin-bar .ua-progress{ top: 32px; } }

/* -----------------------------------------------------------------------------
   3) Skeleton (shimmer) — componente reutilizável p/ conteúdo assíncrono.
   ----------------------------------------------------------------------------- */
.ua-skel{
  position: relative; overflow: hidden;
  background: var(--ua-surface-1);
  border-radius: var(--ua-r-sm);
}
.ua-skel::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.06) 50%, rgba(255,255,255,0) 100%);
  transform: translateX(-100%);
  animation: ua-shimmer 1.4s ease-in-out infinite;
}
@keyframes ua-shimmer{ to { transform: translateX(100%); } }

/* Skeleton dos resultados da busca (mesma métrica das linhas reais) */
.ua-search-overlay__results .ua-skel-row{
  display: flex; align-items: center; gap: var(--ua-sp-3);
  padding: var(--ua-sp-2);
}
.ua-search-overlay__results .ua-skel-row .ua-skel-poster{
  flex: 0 0 46px; width: 46px; height: 69px; border-radius: var(--ua-r-sm);
}
.ua-search-overlay__results .ua-skel-row .ua-skel-lines{ flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--ua-sp-2); }
.ua-search-overlay__results .ua-skel-row .ua-skel-line{ height: 12px; border-radius: var(--ua-r-xs); }
.ua-search-overlay__results .ua-skel-row .ua-skel-line.is-sm{ width: 45%; height: 10px; }

/* -----------------------------------------------------------------------------
   4) Placeholder + RESERVA DE PROPORÇÃO (anti-CLS) + fade-in dos cards de grid e histórico.
   Os grids usam <img loading="lazy"> NATIVO → o fade entra via JS no evento load (classe
   .ua-imgin). À prova de falha: sem opacity:0 persistente; se o JS não rodar, a imagem
   continua visível. O aspect-ratio reserva o espaço antes de a imagem pintar (mata o CLS).
   ----------------------------------------------------------------------------- */
.module .content .items .item .poster{
  background: var(--ua-surface-1);
  aspect-ratio: 2 / 3;                                     /* reserva espaço → mata o layout-shift */
  padding-top: 0;                                          /* mata o padding-top:140% do core (front.style:890):
                                                              ele dava ~1.4 e a IMG em ratio NATURAL (via
                                                              margin-top:-140%) sobrava/strip no fundo do quadro 1.5. */
}
/* A IMG preenche o quadro 2/3 com object-fit:cover (recorte, NÃO deforma). position:absolute+inset:0
   sobrescreve o margin-top:-140% do core (front.style:974) → arte preenche o quadro, sem strip, uniforme
   e idêntico em catálogo/owl/seções/favoritos. Especificidade (0,5,0)=core; ua-transitions carrega por
   ÚLTIMO → vence por ORDEM, sem !important. */
.module .content .items .item .poster img{
  display: block; position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; object-fit: cover;
}
@keyframes ua-img-fade{ from{ opacity: 0; } to{ opacity: 1; } }
.module .items .item .poster img.ua-imgin{ animation: ua-img-fade .35s ease; }

/* -----------------------------------------------------------------------------
   6) SKELETON das seções da home durante o carregamento (carrossel + listas).
   Os loaders ".load_modules"/".genreload" do tema (que mostravam só "Carregando..")
   viram faixas shimmer de cards; o próprio tema os esconde quando o conteúdo carrega.
   Os sliders owl escondem os itens até o init → o loader é o único placeholder (sem dupla).
   ----------------------------------------------------------------------------- */
/* Carrossel hero: overlay shimmer até o Swiper inicializar (.swiper-initialized) */
.carousel-container{ position: relative; }
.carousel-container::before{
  content: ""; position: absolute; inset: 0; z-index: 20; pointer-events: none;
  background: var(--ua-surface-1);
  transition: opacity .4s ease;
}
.carousel-container::after{
  content: ""; position: absolute; inset: 0; z-index: 21; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.05) 50%, rgba(255,255,255,0) 100%);
  transform: translateX(-100%); animation: ua-shimmer 1.5s ease-in-out infinite;
}
.carousel-container:has(.swiper-initialized)::before{ opacity: 0; }
.carousel-container:has(.swiper-initialized)::after{ content: none; }

/* Loaders de seção → faixa de "cards" shimmer (esconde o texto "Carregando..") */
.load_modules{
  position: relative; overflow: hidden;
  height: clamp(170px, 46vw, 250px); margin: 6px 0 12px; padding: 0; border: 0;
  border-radius: var(--ua-r-md);
  color: transparent; font-size: 0; line-height: 0;       /* esconde "Carregando.." */
  background: repeating-linear-gradient(90deg,
    var(--ua-surface-1) 0, var(--ua-surface-1) 118px,
    rgba(0,0,0,0) 118px, rgba(0,0,0,0) 130px);
}
.load_modules::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.05) 50%, rgba(255,255,255,0) 100%);
  transform: translateX(-100%); animation: ua-shimmer 1.5s ease-in-out infinite;
}
/* Seções NÃO-owl (ex.: Episódios = .items.full): os cards já aparecem na hora reservando
   espaço (aspect-ratio + placeholder), então o loader-skeleton textual sobraria POR CIMA
   dos cards reais (conteúdo duplicado). Escondê-lo. Sliders owl mantêm o skeleton (itens
   ficam escondidos até o init → ali o loader É o único placeholder). */
.load_modules:has(+ .items:not(.owl-carousel)){ display: none; }

/* -----------------------------------------------------------------------------
   5) prefers-reduced-motion — neutraliza animações de transição/shimmer/fade.
   ----------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  @view-transition{ navigation: none; }   /* desliga DE FATO a transição cross-document (não só anima a 0) */
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){ animation: none; }
  .ua-skel::after{ animation: none; }
  .ua-progress__bar{ transition: none; }
  .module .items .item .poster img.ua-imgin{ animation: none; }
}