/* ==========================================================================
   HOME — EPISÓDIOS
   ========================================================================== */
.rl-home__section{
  max-width: 1200px;
  margin-inline: auto;
}

/* grid */
.rl-home__grid--eps{
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* card */
.rl-home-ep{
  border-radius: 14px;
  border-color: rgba(255,255,255,.08);
  box-shadow: none;
  transition: border-color var(--rl-fast), box-shadow var(--rl-fast), filter var(--rl-fast);
  transform: none; /* trava pra não “pular” */
}

@media (hover:hover){
  .rl-home-ep:hover{
    transform: none; /* não pula */
    border-color: rgba(255,255,255,.14);
  }

  .rl-home-ep:hover .rl-home-ep__thumb{
    /* você tinha .45 — mantive a ideia, mas deixei menos agressivo */
    filter: brightness(.85);
  }
}

@media (max-width: 768px){
  .rl-home__section{
    width: calc(100% - 24px);
  }
}

/* thumb 16:9 */
.rl-home-ep__thumb{
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25%; /* 16:9 real */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: translateZ(0);
  filter: brightness(1);
  transition: filter var(--rl-fast);
  border-radius: 14px;
  overflow: hidden;
}

.rl-home-ep__link{
  display: block;
  color: inherit;
  text-decoration: none;
}

.rl-home-ep__thumb::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0) 70%);
  pointer-events: none;
  z-index: 1;
}

/* data (esq) */
.rl-home-ep__date{
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 2;

  font-weight: 500;
  color: #fff;
  font-size: 10px;
  padding: 4px 8px;
  display: inline-flex;
  white-space: nowrap;

  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  background: var(--rl-accent);
  border-radius: 25px 50px 50px 50px;
}

/* badge (dir) */
.rl-home-ep__badge{
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 2;

  padding: 6px 10px;
  border-radius: 999px;

  font-size: 12px;
  font-weight: 700;
  line-height: 1;

  transform: translateY(0);
  transition: transform var(--rl-fast), border-color var(--rl-fast), box-shadow var(--rl-fast);
  box-shadow: 0 10px 28px rgba(0,0,0,.18);

  color: rgba(255,255,255,.92);
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* meta */
.rl-home-ep__meta{
  padding: 8px 6px 10px;
  display: grid;
  gap: 4px;
}

.rl-home-ep__title{
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--rl-text);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rl-home-ep__sub{
  font-size: 12px;
  color: var(--rl-muted);
  opacity: .9;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* responsivo */
@media (max-width: 1200px){
  .rl-home__grid--eps{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1024px){
  .rl-home__grid--eps{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px){
  .rl-home__grid--eps{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px){
  .rl-home__grid--eps{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   ANIMES
   ========================================================================== */

.rl-home__grid--anime{
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.rl-home-anime{
  background: transparent;
}

.rl-home-anime__link{
  display: grid;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}

/* Poster 2:3 com tilt via ::before (copia o background-image inline) */
.rl-home-anime__poster{
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 150%; /* 2:3 */
  border-radius: 14px;
  overflow: hidden;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  box-shadow: 0 12px 26px rgba(0,0,0,.22);
  isolation: isolate; /* garante stacking consistente */
  filter: brightness(1);
  transition: filter 220ms ease, box-shadow var(--rl-fast), border-color var(--rl-fast);
}

/* camada animável */
.rl-home-anime__poster::before{
  content: "";
  position: absolute;
  inset: -10px; /* sobra para não aparecer borda ao inclinar */

  background-image: inherit; /* puxa do style inline */
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;

  transform: translateX(0) rotate(0deg) scale(1.02);
  transition: transform 520ms ease, background-position 520ms ease, filter 220ms ease;
  z-index: 0;
}

/* overlay */
.rl-home-anime__poster::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.70), rgba(0,0,0,0) 60%);
  pointer-events: none;
  z-index: 1;
}

/* badges / info acima */
.rl-home-anime__badge,
.rl-home-anime .rl-card-info,
.rl-home-anime .play-btn{
  z-index: 2;
}

@media (hover:hover){
  .rl-home-anime__link:hover .rl-home-anime__poster{
    filter: brightness(.92);
    box-shadow: 0 18px 44px rgba(0,0,0,.34);
    border-color: rgba(255,255,255,.14);
  }

  /* movimento lateral + inclinação (o “tilt” do vídeo) */
  .rl-home-anime__link:hover .rl-home-anime__poster::before{
    transform: translateX(-10px) rotate(-1.2deg) scale(1.05);
    background-position: 44% 50%;
    filter: brightness(.95);
  }
}

.rl-home-anime__badge{
  position: absolute;
  left: 10px;
  bottom: 10px;

  padding: 6px 10px;
  border-radius: 999px;

  font-size: 12px;
  font-weight: 700;
  line-height: 1;

  color: rgba(255,255,255,.92);
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Info (qualidade + nota) só no hover */
.rl-home-anime .rl-card-info{
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 3;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--rl-fast), transform var(--rl-fast);
  pointer-events: none;
}

@media (hover:hover){
  .rl-home-anime__link:hover .rl-card-info{
    opacity: 1;
    transform: translateY(0);
  }
}

.rl-card-quality,
.rl-card-mal{
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;

  color: rgba(255,255,255,.92);
  background: var(--rl-accent);
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.rl-card-quality{ letter-spacing: .2px; }

.rl-home-anime__name{
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--rl-text);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rl-home-anime__meta{
  font-size: 12.5px;
  color: var(--rl-muted);
  opacity: .9;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Se você não quer o play no card de anime */
.rl-home-anime .play-btn{ display: none; }

/* ==========================================================================
   HOME — Títulos das seções (estilo Top10: left + menor + traço com fade)
   ========================================================================== */

.rl-home__head{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 30px;
  margin-bottom: 30px;
}

.rl-home__title{
    position: relative;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
    letter-spacing: .15em;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.1;
    color: #fff;
}

/* marcador do título — barra vertical */
.rl-home__dot{
  width: 3px;
  height: 18px;
  border-radius: 999px;
  background-color: var(--rl-muted);
  
}

/* traço abaixo com fade (começa forte à esquerda e some ao ir pra direita) */
.rl-home__title::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px;

  width: 220px;
  height: 2px;
  border-radius: 999px;

  background: linear-gradient(
  90deg,
  var(--rl-muted),
  rgba(181,181,190,.55) 35%,
  rgba(181,181,190,0) 100%
  );
  pointer-events: none;
}

/* ajuste fino em telas menores */
@media (max-width: 768px){
  .rl-home__title{
    font-size: 15px;
  }
  .rl-home__title::after{
    width: 180px;
  }
}

/* ==========================================================================
   RESPONSIVE (tablet/mobile) — ajustes finais
   - mantém desktop (5 col)
   - tablet: 4/3 col
   - mobile: 2 col (e 1 col em telas muito estreitas)
   ========================================================================== */

@media (max-width: 1200px){
  .rl-home__grid--anime{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1024px){
  .rl-home__grid--anime{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 768px){
  .rl-home__grid--anime{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rl-home__grid--anime{ gap: 14px; }
  .rl-home-anime__name{ font-size: 13px; }
  .rl-home-anime__meta{ font-size: 12px; }
}

/* Em celulares: chips (qualidade/nota) precisam aparecer sem hover */
@media (hover: none){
  .rl-home-anime .rl-card-info{
    opacity: 1;
    transform: none;
  }
}

/* Telas bem pequenas */
@media (max-width: 420px){
  .rl-home__grid--anime{ grid-template-columns: 1fr; }
}

@media (max-width: 520px){
  .rl-home-ep__title,
  .rl-home-anime__name{
    white-space: normal;
    overflow: hidden;
    text-overflow: clip;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .rl-home-ep__sub,
  .rl-home-anime__meta{
    white-space: normal;
    overflow: hidden;
    text-overflow: clip;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}

@media (max-width: 420px){
  .rl-home-ep__date{
    font-size: 9.5px;
    padding: 3px 7px;
  }
  .rl-home-ep__badge,
  .rl-home-anime__badge,
  .rl-card-quality,
  .rl-card-mal{
    font-size: 11px;
    padding: 6px 9px;
  }
}