/* =========================
   RESET
========================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    min-height: 100vh;

    background: #05070c;

    color: white;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    overflow-x: hidden;
}


/* =========================
   CINEMA BACKGROUND
========================= */

.cinema-background {
    position: fixed;

    inset: 0;

    z-index: -10;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 20%,
            #172033 0%,
            #080b12 45%,
            #030407 100%
        );
}


/* RED/GOLD CINEMA GLOW */

.cinema-background::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at 20% 50%,
            rgba(160, 18, 29, 0.15),
            transparent 35%
        ),
        radial-gradient(
            circle at 80% 40%,
            rgba(232, 177, 62, 0.10),
            transparent 30%
        );

    animation:
        cinemaGlow 8s
        ease-in-out
        infinite alternate;
}


@keyframes cinemaGlow {

    from {
        opacity: 0.5;
    }

    to {
        opacity: 1;
    }

}


/* =========================
   MOVING SPOTLIGHTS
========================= */

.spotlight {
    position: absolute;

    top: -300px;

    width: 350px;
    height: 1200px;

    opacity: 0.09;

    filter: blur(35px);

    background:
        linear-gradient(
            to bottom,
            rgba(255, 209, 112, 0.8),
            transparent 75%
        );

    transform-origin: top center;
}


.light-1 {
    left: 10%;

    transform: rotate(-28deg);

    animation:
        spotlightOne 10s
        ease-in-out
        infinite alternate;
}


.light-2 {
    right: 10%;

    transform: rotate(28deg);

    animation:
        spotlightTwo 12s
        ease-in-out
        infinite alternate;
}


@keyframes spotlightOne {

    from {
        transform: rotate(-35deg);
    }

    to {
        transform: rotate(-12deg);
    }

}


@keyframes spotlightTwo {

    from {
        transform: rotate(35deg);
    }

    to {
        transform: rotate(12deg);
    }

}


/* =========================
   MOVING FILM STRIPS
========================= */

.film-strip {
    position: absolute;

    width: 1400px;
    height: 70px;

    opacity: 0.035;

    border-top: 3px solid white;
    border-bottom: 3px solid white;

    background:
        repeating-linear-gradient(
            90deg,
            white 0px,
            white 18px,
            transparent 18px,
            transparent 42px
        );
}


.strip-1 {
    top: 20%;
    left: -400px;

    transform: rotate(-15deg);

    animation:
        filmMove 20s
        linear
        infinite;
}


.strip-2 {
    bottom: 15%;
    right: -400px;

    transform: rotate(15deg);

    animation:
        filmMoveReverse 25s
        linear
        infinite;
}


@keyframes filmMove {

    from {
        translate: -150px 0;
    }

    to {
        translate: 350px 0;
    }

}


@keyframes filmMoveReverse {

    from {
        translate: 150px 0;
    }

    to {
        translate: -350px 0;
    }

}


/* =========================
   BACK BUTTON
========================= */

.back-button {
    position: absolute;

    top: 85px;
    left: 4%;

    z-index: 100;

    padding:
        13px
        24px;

    color: #f4d08b;

    text-decoration: none;

    font-size: 16px;
    font-weight: bold;

    border:
        1px solid
        rgba(244, 208, 139, 0.25);

    background:
        rgba(10, 12, 18, 0.65);

    backdrop-filter:
        blur(12px);

    border-radius: 12px;

    transition: 0.3s;
}


.back-button:hover {
    transform: translateX(-5px);

    border-color: #d8aa4e;

    background:
        rgba(216, 170, 78, 0.12);

    box-shadow:
        0 0 25px
        rgba(216, 170, 78, 0.15);
}


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

.films-hero {
    position: relative;

    max-width: 1500px;

    height: 760px;

    margin: auto;

    display: flex;

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

    overflow: hidden;
}


/* =========================
   CENTER FILMS TITLE
========================= */

.films-center {
    position: relative;

    z-index: 10;

    text-align: center;

    max-width: 600px;
}


.small-title {
    color: #d8aa4e;

    font-size: 12px;

    letter-spacing: 6px;

    margin-bottom: 15px;
}


.films-center h1 {
    font-size:
        clamp(
            85px,
            12vw,
            180px
        );

    font-weight: 900;

    line-height: 0.9;

    letter-spacing: -10px;

    color: white;

    text-shadow:
        0 10px 50px
        rgba(0,0,0,0.8);
}


.films-center h1 span {

    background:
        linear-gradient(
            90deg,
            #d8aa4e,
            #f0d490,
            #a21728
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


.hero-description {
    max-width: 500px;

    margin:
        24px
        auto
        0;

    color: #8e929d;

    font-size: 15px;

    line-height: 1.7;
}


/* =========================
   FLOATING MOVIE POSTERS
========================= */

.floating-poster {
    position: absolute;

    width: 145px;

    aspect-ratio: 2 / 3;

    border-radius: 13px;

    overflow: hidden;

    border:
        1px solid
        rgba(216, 170, 78, 0.25);

    background: #11141b;

    box-shadow:
        0 20px 50px
        rgba(0, 0, 0, 0.7);

    animation:
        posterFloat 5s
        ease-in-out
        infinite alternate;
}


.floating-poster img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.poster-1 {
    top: 110px;
    left: 15%;

    transform: rotate(-8deg);
}


.poster-2 {
    top: 100px;
    right: 15%;

    transform: rotate(8deg);

    animation-delay: 1s;
}


.poster-3 {
    top: 315px;
    left: 6%;

    transform: rotate(5deg);

    animation-delay: 2s;
}


.poster-4 {
    top: 315px;
    right: 6%;

    transform: rotate(-5deg);

    animation-delay: 0.5s;
}


.poster-5 {
    bottom: 55px;
    left: 22%;

    transform: rotate(-5deg);

    animation-delay: 1.5s;
}


.poster-6 {
    bottom: 55px;
    right: 22%;

    transform: rotate(5deg);

    animation-delay: 2.5s;
}


@keyframes posterFloat {

    from {
        translate: 0 0;
    }

    to {
        translate: 0 -15px;
    }

}


/* =========================
   FILMS BROWSER
========================= */

.films-browser {
    width: 92%;

    max-width: 1600px;

    margin:
        20px
        auto
        100px;

    display: grid;

    grid-template-columns:
        240px
        1fr;

    gap: 45px;
}


/* =========================
   LEFT CATEGORY PANEL
========================= */

.category-panel {
    height: fit-content;

    position: sticky;

    top: 25px;

    padding: 24px;

    background:
        linear-gradient(
            180deg,
            rgba(26, 30, 40, 0.94),
            rgba(8, 10, 15, 0.94)
        );

    border:
        1px solid
        rgba(216, 170, 78, 0.18);

    border-radius: 18px;

    box-shadow:
        0 20px 60px
        rgba(0,0,0,0.35);

    backdrop-filter:
        blur(16px);
}


.category-small {
    color: #a21728;

    font-size: 11px;

    letter-spacing: 4px;

    margin-bottom: 7px;
}


.category-panel h2 {
    font-size: 26px;

    margin-bottom: 22px;
}


/* CATEGORY BUTTON */

.genre {
    width: 100%;

    display: flex;

    align-items: center;

    gap: 13px;

    padding:
        14px
        14px;

    margin-bottom: 9px;

    color: #9498a2;

    text-align: left;

    font-size: 14px;

    cursor: pointer;

    border:
        1px solid
        transparent;

    border-radius: 8px;

    background:
        rgba(255,255,255,0.025);

    transition: 0.25s;
}


.genre span {
    color: #565b66;

    font-size: 10px;
}


.genre:hover {
    color: white;

    border-color:
        rgba(216,170,78,0.22);

    background:
        rgba(216,170,78,0.08);

    transform:
        translateX(5px);
}


.genre.active {

    color: #111;

    font-weight: bold;

    background:
        linear-gradient(
            90deg,
            #bd8d37,
            #f0d185
        );

    border-color: transparent;

    box-shadow:
        0 8px 25px
        rgba(216,170,78,0.18);
}


.genre.active span {
    color: #622714;
}


/* =========================
   FILMS CONTENT
========================= */

.films-content {
    min-width: 0;
}


.section-heading {
    display: flex;

    justify-content:
        space-between;

    align-items:
        flex-end;

    margin-bottom: 27px;
}


.section-heading p {
    color: #a21728;

    font-size: 11px;

    letter-spacing: 4px;

    margin-bottom: 7px;
}


.section-heading h2 {
    font-size: 32px;
}


.movie-count {
    color: #686d77;

    font-size: 13px;
}


/* =========================
   MOVIE GRID
========================= */

.films-grid {
    display: grid;

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

    gap:
        35px
        20px;
}


.film-card {
    min-width: 0;

    transition:
        0.35s ease;
}


.film-card:hover {
    transform:
        translateY(-9px);
}


/* LONG POSTER */

.movie-poster {
    position: relative;

    width: 100%;

    aspect-ratio: 2 / 3;

    overflow: hidden;

    background: #10131a;

    border-radius: 14px;

    border:
        1px solid
        rgba(255,255,255,0.07);

    box-shadow:
        0 15px 40px
        rgba(0,0,0,0.4);

    transition: 0.35s;
}


.movie-poster img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform
        0.5s ease,
        filter
        0.5s ease;
}


.film-card:hover .movie-poster {

    border-color:
        rgba(216,170,78,0.6);

    box-shadow:
        0 20px 55px
        rgba(216,170,78,0.12);
}


.film-card:hover .movie-poster img {

    transform:
        scale(1.07);

    filter:
        brightness(0.55);
}


/* RATING */

.movie-rating {
    position: absolute;

    top: 12px;
    right: 12px;

    padding:
        7px
        10px;

    color: #f2cc73;

    font-size: 13px;

    border-radius: 7px;

    background:
        rgba(4, 5, 8, 0.82);

    backdrop-filter:
        blur(8px);
}


/* OVERLAY */

.movie-overlay {
    position: absolute;

    inset: 0;

    display: flex;

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

    opacity: 0;

    background:
        linear-gradient(
            transparent,
            rgba(3,4,7,0.85)
        );

    transition: 0.3s;
}


.film-card:hover
.movie-overlay {
    opacity: 1;
}


.movie-overlay button {

    padding:
        11px
        22px;

    color: #111;

    font-weight: bold;

    cursor: pointer;

    border: 0;

    border-radius: 8px;

    background:
        linear-gradient(
            90deg,
            #c4933c,
            #f0d185
        );

    transform:
        translateY(20px);

    opacity: 0;

    transition: 0.3s;
}


.film-card:hover
.movie-overlay button {

    transform:
        translateY(0);

    opacity: 1;
}


/* MOVIE INFO */

.movie-info {
    padding:
        13px
        3px;
}


.movie-info h3 {
    margin-bottom: 6px;

    font-size: 16px;
}


.movie-info p {
    color: #686d77;

    font-size: 12px;
}


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

@media (max-width: 1200px) {

    .films-grid {
        grid-template-columns:
            repeat(3, 1fr);
    }

}


@media (max-width: 900px) {

    .films-browser {
        grid-template-columns: 1fr;
    }

    .category-panel {
        position: static;
    }

    .category-panel {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .category-panel h2,
    .category-small {
        width: 100%;
    }

    .genre {
        width: auto;
        margin: 0;
    }

    .floating-poster {
        width: 110px;
    }

}


@media (max-width: 700px) {

    .films-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .films-hero {
        height: 650px;
    }

    .poster-3,
    .poster-4 {
        display: none;
    }

    .films-center h1 {
        letter-spacing: -6px;
    }

}


@media (max-width: 450px) {

    .floating-poster {
        width: 85px;
    }

    .back-button {
        top: 20px;
        left: 20px;
    }

}




/* =========================
   TOP NAVIGATION
========================= */

.top-header {
    width: 100%;

    height: 75px;

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

    padding: 0 6%;

    position: relative;
    z-index: 100;

    background: rgba(5, 7, 12, 0.72);

    backdrop-filter: blur(18px);

    border-bottom: 1px solid rgba(255,255,255,0.07);
}


.top-logo {
    color: white;

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

    letter-spacing: 2px;
}


.top-nav {
    display: flex;

    gap: 30px;
}


.top-nav a {
    color: #8d929d;

    text-decoration: none;

    font-size: 14px;
    font-weight: 600;

    transition: 0.3s;
}


.top-nav a:hover {
    color: white;
}


/* FILMS ACTIVE COLOR */

.top-nav a.active {
    color: #e6b75c;
}