/* ============================================
   FILMES.CSS
   Página "Filmes" — linha do tempo completa do MCU
   Paleta do site:
   Preto profundo + verde neon + branco
============================================ */

:root {
    --fm-bg: #0a0a0a;
    --fm-panel: #101010;
    --fm-panel-alt: #151515;

    --fm-line: rgba(0, 255, 100, 0.16);

    --fm-green: #00ff66;
    --fm-green-bright: #39ff88;

    --fm-text: #f5f5f5;
    --fm-muted: #9a9a9a;

    --fm-black: #050505;
}


/* ---------- BASE ---------- */

.filmes-hero,
.filmes-section,
.doomsday-finale {
    box-sizing: border-box;
}

.filmes-hero *,
.filmes-section *,
.doomsday-finale * {
    box-sizing: border-box;
}


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

.filmes-hero {
    position: relative;

    padding: 190px 24px 100px;

    text-align: center;

    background:
        radial-gradient(
            ellipse at 50% -10%,
            rgba(0, 255, 100, 0.10),
            transparent 60%
        ),
        linear-gradient(
            180deg,
            #050505 0%,
            var(--fm-bg) 100%
        );

    overflow: hidden;
}


/* linhas verdes de fundo */

.filmes-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        repeating-linear-gradient(
            90deg,
            rgba(0, 255, 100, 0.035) 0px,
            rgba(0, 255, 100, 0.035) 1px,
            transparent 1px,
            transparent 120px
        );

    pointer-events: none;

    opacity: 0.5;
}


/* brilho verde */

.filmes-hero::after {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    left: 50%;
    top: -300px;

    transform: translateX(-50%);

    background: rgba(0, 255, 100, 0.05);

    filter: blur(100px);

    pointer-events: none;
}


.filmes-hero-content {
    position: relative;

    max-width: 780px;

    margin: 0 auto;

    z-index: 1;
}


.filmes-hero-eyebrow {
    display: inline-block;

    font-family: 'Inter', sans-serif;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 3px;

    color: var(--fm-green);

    margin-bottom: 18px;
}


.filmes-hero h1 {
    font-family: 'Bebas Neue', sans-serif;

    font-size: clamp(42px, 7vw, 78px);

    letter-spacing: 2px;

    color: var(--fm-text);

    line-height: 1;

    margin: 0 0 22px;
}


.filmes-hero h1 span {
    color: var(--fm-green);

    text-shadow:
        0 0 20px rgba(0, 255, 100, 0.25);
}


.filmes-hero p {
    font-family: 'Inter', sans-serif;

    font-size: 16px;

    line-height: 1.7;

    color: var(--fm-muted);

    max-width: 560px;

    margin: 0 auto;
}


/* ============================================
   SEÇÕES / FASES
============================================ */

.filmes-section {
    background: var(--fm-bg);

    padding: 72px 24px;
}


.filmes-section.dark-strip {
    background: var(--fm-panel);
}


.filmes-section .container {
    max-width: 1180px;

    margin: 0 auto;
}


/* ============================================
   TÍTULO DAS FASES
============================================ */

.phase-title {
    display: flex;

    align-items: center;

    gap: 20px;

    margin-bottom: 40px;
}


.phase-number {
    font-family: 'Bebas Neue', sans-serif;

    font-size: 54px;

    line-height: 1;

    color: transparent;

    -webkit-text-stroke: 1.5px var(--fm-green);

    opacity: 0.55;
}


.phase-label {
    display: block;

    font-family: 'Inter', sans-serif;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2.5px;

    color: var(--fm-green);

    margin-bottom: 4px;
}


.phase-title h2 {
    font-family: 'Bebas Neue', sans-serif;

    font-size: 32px;

    letter-spacing: 1px;

    color: var(--fm-text);

    margin: 0;
}


/* ============================================
   GRID DE FILMES
============================================ */

.filmes-grid {
    display: grid;

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

    gap: 28px;
}


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

.filme-card {
    background: var(--fm-panel-alt);

    border: 1px solid var(--fm-line);

    border-radius: 10px;

    overflow: hidden;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}


.filme-card:hover {
    transform: translateY(-6px);

    border-color: rgba(0, 255, 100, 0.55);

    box-shadow:
        0 10px 35px rgba(0, 255, 100, 0.07);
}


/* ============================================
   POSTER
============================================ */

.filme-poster {
    width: 100%;

    aspect-ratio: 2 / 3;

    background: var(--fm-black);

    overflow: hidden;
}


.filme-poster img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform 0.35s ease;
}


.filme-card:hover .filme-poster img {
    transform: scale(1.04);
}


/* ============================================
   INFORMAÇÕES
============================================ */

.filme-info {
    padding: 18px 18px 22px;
}


.filme-ano {
    font-family: 'Inter', sans-serif;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.5px;

    color: var(--fm-green);
}


.filme-info h3 {
    font-family: 'Bebas Neue', sans-serif;

    font-size: 22px;

    letter-spacing: 0.5px;

    color: var(--fm-text);

    margin: 8px 0 10px;

    line-height: 1.15;
}


.filme-info p {
    font-family: 'Inter', sans-serif;

    font-size: 13.5px;

    line-height: 1.6;

    color: var(--fm-muted);

    margin: 0;
}


/* ============================================
   DESTAQUE FINAL — DOOMSDAY
============================================ */

.doomsday-finale {
    position: relative;

    padding: 90px 24px 110px;

    background:
        radial-gradient(
            ellipse at 50% 0%,
            rgba(0, 255, 100, 0.12),
            transparent 55%
        ),
        linear-gradient(
            180deg,
            var(--fm-bg) 0%,
            #050505 100%
        );

    border-top:
        1px solid var(--fm-line);

    overflow: hidden;
}


/* linhas decorativas */

.doomsday-finale::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            transparent 100px,
            rgba(0, 255, 100, 0.025) 101px,
            transparent 102px
        );

    pointer-events: none;
}


.doomsday-finale-inner {
    position: relative;

    max-width: 1080px;

    margin: 0 auto;

    text-align: center;

    z-index: 1;
}


.finale-label {
    display: inline-block;

    margin-bottom: 30px;

    color: var(--fm-green);
}


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

.finale-card {
    display: grid;

    grid-template-columns: 340px 1fr;

    gap: 48px;

    align-items: center;

    text-align: left;

    background:
        linear-gradient(
            155deg,
            #121212 0%,
            #080808 100%
        );

    border:
        1px solid rgba(0, 255, 100, 0.30);

    border-radius: 16px;

    padding: 32px;

    box-shadow:
        0 0 60px rgba(0, 255, 100, 0.06);
}


.finale-card:hover {
    border-color: rgba(0, 255, 100, 0.5);

    box-shadow:
        0 0 70px rgba(0, 255, 100, 0.10);
}


/* ============================================
   POSTER FINAL
============================================ */

.finale-poster {
    width: 100%;

    aspect-ratio: 2 / 3;

    border-radius: 10px;

    overflow: hidden;

    background: var(--fm-black);

    box-shadow:
        0 0 40px rgba(0, 255, 100, 0.10);
}


.finale-poster img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;
}


/* ============================================
   INFORMAÇÕES FINAIS
============================================ */

.finale-ano {
    font-family: 'Inter', sans-serif;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

    color: var(--fm-green);
}


.finale-info h2 {
    font-family: 'Bebas Neue', sans-serif;

    font-size: clamp(36px, 4vw, 52px);

    letter-spacing: 1px;

    color: var(--fm-text);

    margin: 10px 0 18px;

    line-height: 1.05;
}


.finale-info p {
    font-family: 'Inter', sans-serif;

    font-size: 15px;

    line-height: 1.75;

    color: var(--fm-muted);

    margin: 0 0 16px;

    max-width: 620px;
}


.finale-info .primary-button {
    display: inline-block;

    margin-top: 12px;
}


/* ============================================
   BOTÃO DOOMSDAY
============================================ */

.finale-info .primary-button {
    background: var(--fm-green);

    color: #050505;

    border: 1px solid var(--fm-green);

    font-weight: 800;

    transition:
        background 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}


.finale-info .primary-button:hover {
    background: var(--fm-green-bright);

    box-shadow:
        0 0 25px rgba(0, 255, 100, 0.35);

    transform: translateY(-2px);
}


/* ============================================
   RESPONSIVO
============================================ */

@media (max-width: 860px) {

    .finale-card {
        grid-template-columns: 1fr;

        text-align: center;
    }


    .finale-poster {
        max-width: 260px;

        margin: 0 auto;
    }


    .finale-info p {
        margin-left: auto;

        margin-right: auto;
    }

}


@media (max-width: 640px) {

    .filmes-hero {
        padding: 150px 20px 70px;
    }


    .filmes-section {
        padding: 56px 20px;
    }


    .filmes-grid {
        grid-template-columns:
            repeat(auto-fill, minmax(150px, 1fr));

        gap: 16px;
    }


    .filme-info {
        padding: 14px;
    }


    .phase-number {
        font-size: 40px;
    }

}