/* ==========================================
   ZDIBU ANIME CARDS
   LIGHT PREMIUM CATALOG
========================================== */


/* GRID */

.grid-anime{

display:grid;

grid-template-columns:
repeat(
auto-fill,
minmax(210px,1fr)
);

gap:22px;

}



/* CARD */

.anime-card{

position:relative;

height:340px;

border-radius:18px;

overflow:hidden;

background:#101018;

display:block;

color:white;

text-decoration:none;

cursor:pointer;


/* sombra mínima */

box-shadow:
0 6px 18px rgba(0,0,0,.18);


transition:
transform .15s ease;


}



/* hover card */

.anime-card:hover{

transform:
translateY(-5px);

}




/* IMAGEN */

.anime-card-image{

position:absolute;

inset:0;

}



.anime-card-image img{

width:100%;

height:100%;

object-fit:cover;

display:block;


/* importante */

content-visibility:auto;


transition:
transform .15s ease;

}




.anime-card:hover img{

transform:
scale(1.04);

}




/* CAPA OSCURA SIMPLE */

.anime-card::after{


content:"";

position:absolute;

inset:0;


background:

rgba(0,0,0,.28);


pointer-events:none;

}





/* CONTENIDO */

.anime-card-content{


position:absolute;

bottom:0;

left:0;

right:0;


padding:16px;


z-index:3;


}





.anime-card-title{


font-size:18px;

font-weight:900;

line-height:1.15;


margin:0;


}





.anime-card-subtitle{


font-size:12px;

opacity:.65;


margin-top:5px;


}





/* TAGS */


.anime-card-tags{


display:flex;

gap:6px;

flex-wrap:wrap;

margin-top:10px;


}



.anime-card-tag{


font-size:10px;

padding:

4px 9px;


border-radius:20px;


background:

rgba(255,255,255,.15);


}





/* SCORE */

.anime-score{


position:absolute;

top:12px;

right:12px;


z-index:5;


background:#ffd83d;

color:#111;


font-weight:900;

font-size:12px;


padding:

6px 10px;


border-radius:12px;


}





/* ESTADO */


.anime-status{


position:absolute;

top:12px;

left:12px;


z-index:5;


background:#00d9ff;

color:#001;


font-weight:900;

font-size:11px;


padding:

5px 10px;


border-radius:12px;


}



/* INFORMACION EXTRA */

.anime-extra{


position:absolute;

left:0;

right:0;

bottom:0;


padding:16px;


background:

rgba(0,0,0,.82);


z-index:4;


/* escondido */

opacity:0;

transform:
translateY(20px);


transition:

opacity .25s ease,
transform .25s ease;


pointer-events:none;

}




.anime-card:hover .anime-extra{


opacity:1;


transform:
translateY(0);


}





.anime-extra p{


margin:5px 0;

font-size:12px;


}





/* BOTON CARGAR MAS */


.anime-cargar-mas{


display:block;


margin:

40px auto;


padding:

12px 35px;


border-radius:50px;


border:1px solid rgba(255,255,255,.2);


background:#111827;


color:white;


font-weight:800;


cursor:pointer;


transition:
transform .15s ease;


}



.anime-cargar-mas:hover{


background:#7b2fff;


}





/* MOBILE */


@media(max-width:600px){


.grid-anime{


grid-template-columns:

repeat(2,1fr);


gap:14px;


}



.anime-card{


height:260px;

border-radius:15px;


}



.anime-card-title{


font-size:15px;


}



.anime-card-content{


padding:13px;


}



}