.re-home{
    min-height:100vh;
}

.re-hero{
    position:relative;
    height:min(780px,88vh);
    min-height:600px;
    overflow:hidden;
}

.re-hero-slide{
    position:absolute;
    inset:0;
    opacity:0;
    visibility:hidden;
    transition:
        opacity .7s ease,
        visibility .7s ease;
}

.re-hero-slide.active{
    opacity:1;
    visibility:visible;
}

.re-hero-bg{
    position:absolute;
    inset:0;
    background-position:center 20%;
    background-repeat:no-repeat;
    background-size:cover;
    transform:scale(1.025);
}

.re-hero-shade{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            #000 0%,
            rgba(0,0,0,.94) 18%,
            rgba(0,0,0,.62) 48%,
            rgba(0,0,0,.15) 75%
        ),
        linear-gradient(
            0deg,
            #000 0%,
            transparent 45%
        );
}

.re-hero-inner{
    position:relative;
    z-index:3;

    height:100%;

    display:flex;
    align-items:center;
}

.re-hero-copy{
    width:min(650px,58%);
    padding-top:60px;
}

.re-hero-featured,
.re-kicker{
    color:var(--primary);

    font-size:11px;
    font-weight:900;

    letter-spacing:.18em;
    text-transform:uppercase;
}

.re-hero h1{
    max-width:650px;

    margin:12px 0;

    font-size:clamp(38px,5vw,72px);
    line-height:.98;

    letter-spacing:-.045em;
}

.re-hero-meta{
    display:flex;
    align-items:center;
    gap:9px;

    margin:18px 0;

    color:#ddd;
    font-size:13px;
}

.re-hero-meta span:not(:last-child)::after{
    content:"•";
    margin-left:9px;
    color:#555;
}

.re-hero-meta .rating{
    color:var(--primary);
}

.re-hero-description{
    max-width:580px;

    color:#c5c5c8;

    font-size:14px;
    line-height:1.75;
}

.re-hero-actions{
    display:flex;
    gap:10px;
    margin-top:25px;
}

.re-btn{
    min-height:43px;

    padding:0 21px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    border-radius:7px;

    font-size:13px;
    font-weight:800;

    transition:
        transform .2s,
        background .2s;
}

.re-btn:hover{
    transform:translateY(-2px);
}

.re-btn-primary{
    background:var(--primary);
    color:#050505;
}

.re-btn-dark{
    background:rgba(20,20,20,.8);
    border:1px solid rgba(255,255,255,.12);
}

.re-hero-poster{
    display:none;
}

.re-hero-pagination{
    position:absolute;
    z-index:10;

    right:35px;
    bottom:85px;

    display:flex;
    gap:6px;
}

.re-hero-pagination button{
    width:23px;
    height:3px;

    padding:0;
    border:0;

    background:rgba(255,255,255,.25);

    cursor:pointer;

    transition:.3s;
}

.re-hero-pagination button.active{
    width:45px;
    background:var(--primary);
}

.re-home-content{
    position:relative;
    z-index:10;

    margin-top:-30px;
    padding-bottom:80px;
}

.re-section{
    margin-bottom:55px;
}

.re-section-head{
    margin-bottom:20px;

    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
}

.re-section-head h2{
    margin:5px 0 0;

    font-size:25px;
    letter-spacing:-.025em;
}

.re-tabs{
    display:flex;

    padding:3px;

    border:1px solid var(--border);
    border-radius:8px;

    background:#0b0b0c;
}

.re-tabs button{
    border:0;
    border-radius:6px;

    padding:7px 13px;

    background:transparent;
    color:#777;

    font-size:11px;
    font-weight:800;

    cursor:pointer;
}

.re-tabs button.active{
    background:var(--primary);
    color:#000;
}

.re-anime-grid{
    display:grid;

    grid-template-columns:
        repeat(6,minmax(0,1fr));

    gap:24px 14px;
}

.re-anime-card{
    min-width:0;
}

.re-card-poster{
    position:relative;

    display:block;

    aspect-ratio:2/3;

    overflow:hidden;

    border-radius:9px;

    background:#111;
}

.re-card-poster img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:transform .45s ease;
}

.re-anime-card:hover
.re-card-poster img{
    transform:scale(1.055);
}

.re-card-overlay{
    position:absolute;
    inset:0;

    display:flex;
    align-items:center;
    justify-content:center;

    opacity:0;

    background:
        linear-gradient(
            transparent,
            rgba(0,0,0,.65)
        );

    transition:.25s;
}

.re-anime-card:hover
.re-card-overlay{
    opacity:1;
}

.re-card-play{
    width:46px;
    height:46px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:var(--primary);
    color:#000;

    box-shadow:
        0 0 35px rgba(232,255,71,.3);
}

.re-score{
    position:absolute;

    top:8px;
    left:8px;

    padding:4px 7px;

    border-radius:5px;

    background:rgba(0,0,0,.82);
    color:var(--primary);

    font-size:10px;
    font-weight:800;
}

.re-card-badges{
    position:absolute;

    right:7px;
    bottom:7px;
    left:7px;

    display:flex;
    gap:4px;
}

.re-card-badges span{
    padding:4px 6px;

    border-radius:4px;

    background:rgba(0,0,0,.88);

    color:white;

    font-size:9px;
    font-weight:900;
}

.re-card-badges .sub{
    background:var(--primary);
    color:#000;
}

.re-card-badges .dub{
    background:#f3f3f3;
    color:#111;
}

.re-card-info{
    padding:9px 2px 0;
}

.re-card-info h3{
    margin:0;

    overflow:hidden;

    color:#f4f4f5;

    font-size:13px;
    line-height:1.35;

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

.re-card-info h3 a{
    transition:color .2s;
}

.re-card-info h3 a:hover{
    color:var(--primary);
}

.re-card-meta{
    margin-top:6px;

    display:flex;
    gap:6px;

    color:#777;

    font-size:10px;
}

.re-card-meta span:not(:last-child)::after{
    content:"•";
    margin-left:6px;
    color:#444;
}

.re-continue-grid{
    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:12px;
}

/* TABLET */

@media(max-width:1200px){

    .re-anime-grid{
        grid-template-columns:
            repeat(5,minmax(0,1fr));
    }
}

@media(max-width:900px){

    .re-anime-grid{
        grid-template-columns:
            repeat(4,minmax(0,1fr));
    }

    .re-hero{
        height:680px;
    }

    .re-hero-copy{
        width:70%;
    }
}

/* MOBILE */

@media(max-width:640px){

    .re-container{
        width:calc(100% - 22px);
    }

    .re-hero{
        height:660px;
        min-height:660px;
    }

    .re-hero-bg{
        background-position:center top;
    }

    .re-hero-shade{
        background:
            linear-gradient(
                0deg,
                #000 2%,
                rgba(0,0,0,.9) 28%,
                rgba(0,0,0,.28) 75%
            );
    }

    .re-hero-inner{
        align-items:flex-end;
        padding-bottom:85px;
    }

    .re-hero-copy{
        width:100%;
        padding:0;
    }

    .re-hero h1{
        max-width:95%;

        margin:9px 0;

        font-size:35px;
        line-height:1.03;
    }

    .re-hero-description{
        display:-webkit-box;
        overflow:hidden;

        font-size:12px;
        line-height:1.6;

        -webkit-box-orient:vertical;
        -webkit-line-clamp:3;
    }

    .re-hero-pagination{
        right:12px;
        bottom:45px;
    }

    .re-home-content{
        margin-top:-15px;
    }

    .re-section-head{
        align-items:center;
    }

    .re-section-head h2{
        font-size:20px;
    }

    .re-kicker{
        font-size:9px;
    }

    .re-anime-grid{
        grid-template-columns:
            repeat(3,minmax(0,1fr));

        gap:18px 8px;
    }

    .re-card-info h3{
        font-size:11px;
    }

    .re-card-meta{
        font-size:8px;
    }

    .re-tabs button{
        padding:6px 8px;
        font-size:9px;
    }
}

@media(max-width:400px){

    .re-anime-grid{
        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }
}