/* ===========================
   MOVIES HERO
=========================== */

.movies-hero{
    position:relative;
    height:70vh;
    min-height:560px;
    display:flex;
    align-items:flex-end;
    overflow:hidden;
    border-radius:25px;
    margin:20px;
}

.movies-hero-bg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    transform:scale(1.05);
    filter:brightness(.45);
}

.movies-overlay{
    position:absolute;
    inset:0;
    background:
    linear-gradient(to top,
    rgba(0,0,0,.92) 10%,
    rgba(0,0,0,.35) 55%,
    rgba(0,0,0,.15) 100%);
}

.movies-content{
    position:relative;
    z-index:2;
    max-width:700px;
    padding:70px;
}

.movies-content h1{
    position:relative;
    display:inline-block;

    font-size:4rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:2px;

    background:linear-gradient(
        90deg,
        #ff4fae 0%,
        #ffffff 20%,
        #ff1493 40%,
        #ffffff 50%,
        #ff1493 60%,
        #ff4fae 100%
    );

    background-size:300% auto;

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;

    animation:glitter 4s linear infinite;
}

.movies-content h1::before{

    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:40%;
    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.95),
        transparent
    );

    transform:skewX(-25deg);

    animation:shine 2.8s infinite;

    pointer-events:none;
}

@keyframes shine{

    0%{
        left:-120%;
    }

    100%{
        left:150%;
    }

}

@keyframes glitter{
    0%{
        background-position: 0% center;
    }
    100%{
        background-position: 300% center;
    }
}

.movies-content p{
    color:#ddd;
    font-size:18px;
    margin-bottom:35px;
}




/* ===========================
   SEARCH
=========================== */

.movie-search{
    margin-bottom:25px;
}

.movie-search input{

    width:100%;
    max-width:420px;

    padding:15px 22px;

    border:none;

    border-radius:50px;

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

    backdrop-filter:blur(12px);

    color:#fff;

    font-size:16px;

    outline:none;

}

.movie-search input::placeholder{

    color:#ccc;

}


/* ===========================
   FILTERS
=========================== */

.movie-filters{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

}

.movie-filters button{

    padding:10px 22px;

    border:none;

    border-radius:40px;

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

    color:#fff;

    cursor:pointer;

    transition:.3s;

}

.movie-filters button:hover,

.movie-filters button.active{

    background:var(--primary);

}


/* ===========================
   PAGE
=========================== */

.movies-page{

    padding:20px;

}


/* ===========================
   ROWS
=========================== */

.movie-row{

    margin:45px 0;

}

.row-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:18px;

}

.row-header h2{

    font-size:28px;

}

.view-all{

    color:var(--primary);

    text-decoration:none;

}


/* ===========================
   SLIDER
=========================== */

.row-wrapper{

    position:relative;

}

.movie-slider{

    display:flex;

    gap:18px;

    overflow-x:auto;

    scroll-behavior:smooth;

    scrollbar-width:none;

}

.movie-slider::-webkit-scrollbar{

    display:none;

}


/* ===========================
   CARD
=========================== */

.movie-card{

    width:210px;

    flex:none;

    color:#fff;

    text-decoration:none;

    transition:.35s;

}

.poster{

    position:relative;

    overflow:hidden;

    border-radius:16px;

    box-shadow:0 10px 30px rgba(0,0,0,.45);

}

.poster img{

    width:100%;

    display:block;

}

.movie-card{
    transition:.35s;
}

.movie-card:hover{

    transform:translateY(-10px) scale(1.04);

    z-index:20;

}

.movie-overlay{

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

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

    opacity:0;

    transition:.3s;

}

.movie-card:hover .movie-overlay{

    opacity:1;

}


.play-btn{

    width:70px;

    height:70px;

    border-radius:50%;

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

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    backdrop-filter:blur(12px);

}

.badge{

    position:absolute;

    top:10px;

    right:10px;

    padding:5px 10px;

    border-radius:30px;

    font-size:11px;

    font-weight:bold;

}

.badge.premium{

    background:#FFD700;

    color:#000;

}

.movie-info{

    padding-top:12px;

}

.movie-info h3{

    font-size:20px;

    font-weight:700;

}

.movie-meta{

    display:flex;

    gap:10px;

    color:#bbb;

    font-size:13px;

}


/* ===========================
   ARROWS
=========================== */

.row-arrow{

    position:absolute;

    top:45%;

    transform:translateY(-50%);

    width:48px;

    height:48px;

    border-radius:50%;

    color:#fff;

    cursor:pointer;
        
    pointer-events:auto;
    
      border:1px solid rgba(245,197,66,.65);

    background:rgba(18,18,18,.55);

    backdrop-filter:blur(12px);

    z-index:100;

    box-shadow:
        0 0 0 2px rgba(245,197,66,.12),
        0 0 12px rgba(245,197,66,.35),
        0 0 24px rgba(245,197,66,.18);

    transition:all .3s ease;


}

.row-arrow.left{

    left:-10px;

}

.row-arrow.right{

    right:-10px;

}

.row-arrow:hover{

    transform:scale(1.08);

    border-color:#F5C542;

    box-shadow:
        0 0 0 2px rgba(245,197,66,.25),
        0 0 18px rgba(245,197,66,.6),
        0 0 36px rgba(245,197,66,.35);

}


/* ===========================
   RESPONSIVE
=========================== */

@media(max-width:768px){

.movies-content{

    padding:35px;

}

.movies-content h1{

    font-size:40px;

}

.movie-card{

    width:160px;

}

}

.empty-row{
    width:100%;
    min-height:180px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    color:#ddd;
    border:2px dashed rgba(255,255,255,.15);
    border-radius:16px;
    background:rgba(255,255,255,.03);
}