/* ========================================= */
/* North Legacy */
/* FINAL CHAPTER */
/* ========================================= */

:root{

    --gold:#C9A857;

    --black:#050505;

    --dark:#101010;

    --text:#F5F5F5;

    --secondary:#A3A3A3;

}

*{

    margin:0;
    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

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

    background:var(--black);

    color:var(--text);

    overflow-x:hidden;

}

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

.cinema-bg{

    position:fixed;

    inset:0;

    background:

    radial-gradient(
    circle at top,
    rgba(201,168,87,.08),
    transparent 35%
    ),

    linear-gradient(
    to bottom,
    #0A0A0A,
    #050505 60%,
    #000
    );

    z-index:-3;

}

/* GRID */

.cinema-bg::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:

    linear-gradient(
    rgba(255,255,255,.03) 1px,
    transparent 1px),

    linear-gradient(
    90deg,
    rgba(255,255,255,.03) 1px,
    transparent 1px);

    background-size:42px 42px;

    opacity:.25;

}

/* GOLD LIGHT */

.gold-glow{

    position:fixed;

    width:900px;
    height:900px;

    top:-350px;
    left:50%;

    transform:translateX(-50%);

    border-radius:50%;

    background:

    radial-gradient(

    circle,

    rgba(201,168,87,.20),

    transparent 70%

    );

    filter:blur(100px);

    z-index:-2;

}

/* ========================================= */
/* NAVBAR */
/* ========================================= */

.final-nav{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:32px 70px;

    backdrop-filter:blur(18px);

    background:

    rgba(0,0,0,.35);

    border-bottom:

    1px solid rgba(255,255,255,.05);

    z-index:999;

}

/* LOGO */

.final-nav span{

    color:var(--gold);

    font-size:.82rem;

    letter-spacing:8px;

    font-weight:700;

}

/* BOTON */

.final-nav a{

    color:white;

    text-decoration:none;

    display:flex;

    align-items:center;

    gap:12px;

    letter-spacing:2px;

    font-size:.82rem;

    transition:.35s;

}

.final-nav a:hover{

    color:var(--gold);

    transform:translateX(-5px);

}

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

.opening-hero{

    min-height:100vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:180px 30px;

}

/* TAG */

.opening-hero span{

    color:var(--gold);

    letter-spacing:8px;

    font-size:.82rem;

    font-weight:700;

    margin-bottom:28px;

}

/* TITULO */

.opening-hero h1{

    font-size:

    clamp(4rem,10vw,9rem);

    line-height:.9;

    letter-spacing:-5px;

    font-weight:800;

    margin-bottom:40px;

}

/* TEXTO */

.opening-hero p{

    max-width:720px;

    color:var(--secondary);

    line-height:2;

    font-size:1.12rem;

}

/* LINEA */

.opening-hero::after{

    content:"";

    width:1px;

    height:120px;

    margin-top:90px;

    background:

    linear-gradient(

    var(--gold),

    transparent

    );

}

/* ========================================= */
/* VIDEO */
/* ========================================= */

.opening-video{

    padding:0 40px 180px;

}

.opening-video video{

    width:100%;

    max-width:1500px;

    display:block;

    margin:0 auto;

    border-radius:34px;

    background:#000;

    overflow:hidden;

    box-shadow:

    0 35px 90px rgba(0,0,0,.45);

    border:

    1px solid rgba(255,255,255,.05);

}

/* CONTENEDOR */

.opening-video{

    position:relative;

}

/* GLOW */

.opening-video::before{

    content:"";

    position:absolute;

    width:700px;
    height:700px;

    left:50%;
    top:45%;

    transform:translate(-50%,-50%);

    background:

    radial-gradient(

    circle,

    rgba(201,168,87,.12),

    transparent 70%

    );

    filter:blur(90px);

    z-index:-1;

}

/* ========================================= */
/* OPENING FILE */
/* ========================================= */

.opening-file{

    max-width:1200px;

    margin:0 auto 180px;

    padding:0 35px;

    text-align:center;

}

/* TAG */

.opening-file span{

    display:block;

    color:var(--gold);

    font-size:.82rem;

    letter-spacing:7px;

    font-weight:700;

    margin-bottom:22px;

}

/* TITULO */

.opening-file h2{

    font-size:

    clamp(3rem,7vw,6rem);

    line-height:1;

    letter-spacing:-3px;

    font-weight:800;

    max-width:900px;

    margin:0 auto;

}

/* ========================================= */
/* FILM DATA */
/* ========================================= */

.opening-data{

    max-width:1400px;

    margin:120px auto 0;

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(220px,1fr));

    gap:26px;

}

/* CARD */

.data-card{

    position:relative;

    padding:38px;

    border-radius:24px;

    background:

    rgba(255,255,255,.03);

    backdrop-filter:blur(16px);

    border:

    1px solid rgba(255,255,255,.05);

    transition:

    transform .35s ease,

    border-color .35s ease,

    box-shadow .35s ease;

}

/* HOVER */

.data-card:hover{

    transform:

    translateY(-8px);

    border-color:

    rgba(201,168,87,.25);

    box-shadow:

    0 20px 45px rgba(0,0,0,.30);

}

/* LABEL */

.data-card span{

    display:block;

    color:var(--gold);

    font-size:.78rem;

    letter-spacing:4px;

    margin-bottom:18px;

    font-weight:700;

}

/* VALUE */

.data-card h3{

    color:white;

    font-size:1.25rem;

    font-weight:600;

    line-height:1.5;

}

/* PEQUEÑA LÍNEA */

.data-card::after{

    content:"";

    position:absolute;

    left:38px;

    bottom:24px;

    width:45px;

    height:2px;

    background:var(--gold);

    opacity:.35;

}

/* ========================================= */
/* OPENING BLOCKS */
/* ========================================= */

.opening-block{

    max-width:950px;

    margin:180px auto;

    padding:0 35px;

    position:relative;

}

/* TAG */

.opening-block span{

    display:inline-block;

    color:var(--gold);

    font-size:.82rem;

    letter-spacing:6px;

    font-weight:700;

    margin-bottom:24px;

}

/* TITULO */

.opening-block h2{

    font-size:

    clamp(2.8rem,6vw,5rem);

    line-height:1.05;

    letter-spacing:-2px;

    margin-bottom:34px;

    color:white;

}

/* TEXTO */

.opening-block p{

    max-width:760px;

    color:var(--secondary);

    font-size:1.05rem;

    line-height:2.1;

}

/* DIVISOR */

.opening-block::after{

    content:"";

    display:block;

    width:80px;

    height:2px;

    margin-top:70px;

    background:var(--gold);

    opacity:.35;

    transition:.4s;

}

/* ========================================= */
/* HOVER */
/* ========================================= */

.opening-block:hover::after{

    width:140px;

    opacity:1;

}

.opening-block:hover h2{

    color:var(--gold);

    transition:.35s;

}

/* ========================================= */
/* EFECTO DE FONDO */
/* ========================================= */

.opening-block::before{

    content:"";

    position:absolute;

    top:-40px;

    left:-40px;

    width:220px;

    height:220px;

    border-radius:50%;

    background:

    radial-gradient(

    circle,

    rgba(201,168,87,.06),

    transparent 70%

    );

    filter:blur(35px);

    z-index:-1;

    opacity:0;

    transition:.45s;

}

.opening-block:hover::before{

    opacity:1;

}

/* ========================================= */
/* ANIMACIÓN */
/* ========================================= */

.opening-block{

    opacity:0;

    transform:translateY(70px);

    animation:

    finaleFade 1s ease forwards;

}

.opening-block:nth-of-type(1){

    animation-delay:.1s;

}

.opening-block:nth-of-type(2){

    animation-delay:.2s;

}

.opening-block:nth-of-type(3){

    animation-delay:.3s;

}

.opening-block:nth-of-type(4){

    animation-delay:.4s;

}

/* PALABRAS IMPORTANTES */

.opening-block strong{

    color:white;

    font-weight:700;

}

.opening-block em{

    color:var(--gold);

    font-style:normal;

}

/* ========================================= */
/* FINAL QUOTE */
/* ========================================= */

.final-quote{

    padding:220px 30px 180px;

    text-align:center;

}

.final-quote blockquote{

    max-width:1100px;

    margin:auto;

    font-size:
    clamp(3rem,7vw,6.5rem);

    font-weight:800;

    line-height:1.05;

    letter-spacing:-3px;

    color:white;

}

.final-quote::before{

    content:"FINAL MESSAGE";

    display:block;

    color:var(--gold);

    letter-spacing:8px;

    font-size:.82rem;

    font-weight:700;

    margin-bottom:35px;

}

/* ========================================= */
/* ENTER STORE */
/* ========================================= */

.enter-store{

    position:relative;

    padding:180px 40px;

    text-align:center;

    overflow:hidden;

}

/* GLOW */

.enter-store::before{

    content:"";

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    width:900px;
    height:900px;

    border-radius:50%;

    background:

    radial-gradient(

    circle,

    rgba(201,168,87,.15),

    transparent 70%

    );

    filter:blur(90px);

    z-index:-1;

}

.enter-store span{

    display:block;

    color:var(--gold);

    letter-spacing:7px;

    font-size:.82rem;

    font-weight:700;

    margin-bottom:22px;

}

.enter-store h2{

    font-size:

    clamp(4rem,9vw,8rem);

    line-height:.95;

    letter-spacing:-4px;

    margin-bottom:25px;

}

.enter-store p{

    max-width:650px;

    margin:0 auto 70px;

    color:var(--secondary);

    line-height:2;

    font-size:1.08rem;

}

/* BOTÓN */

.enter-btn{

    display:inline-flex;

    align-items:center;

    gap:18px;

    padding:22px 48px;

    border-radius:999px;

    text-decoration:none;

    background:var(--gold);

    color:#111;

    font-size:.95rem;

    font-weight:700;

    letter-spacing:2px;

    transition:

    transform .35s ease,

    box-shadow .35s ease,

    background .35s ease;

}

.enter-btn:hover{

    transform:

    translateY(-8px)
    scale(1.02);

    box-shadow:

    0 25px 60px rgba(201,168,87,.28);

    background:#D8B96C;

}

/* ========================================= */
/* FOOTER */
/* ========================================= */

.opening-footer{

    padding:60px 20px;

    border-top:

    1px solid rgba(255,255,255,.05);

    text-align:center;

}

.opening-footer p{

    color:#777;

    letter-spacing:2px;

    font-size:.85rem;

}

/* ========================================= */
/* ANIMATIONS */
/* ========================================= */

@keyframes finaleFade{

    from{

        opacity:0;

        transform:translateY(50px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.opening-hero,
.opening-video,
.opening-file,
.final-quote,
.enter-store{

    animation:

    finaleFade 1s ease;

}

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

@media(max-width:992px){

    .final-nav{

        padding:25px 30px;

    }

    .opening-video{

        padding:0 20px 120px;

    }

    .opening-data{

        grid-template-columns:

        repeat(2,1fr);

    }

}

@media(max-width:768px){

    .opening-hero{

        padding:170px 25px;

    }

    .opening-hero h1{

        letter-spacing:-2px;

    }

    .opening-hero p{

        font-size:1rem;

    }

    .opening-file h2{

        font-size:2.5rem;

    }

    .opening-data{

        grid-template-columns:1fr;

    }

    .opening-block{

        margin:120px auto;

        padding:0 22px;

    }

    .opening-block h2{

        font-size:2.2rem;

    }

    .opening-block p{

        font-size:.98rem;

    }

    .final-quote{

        padding:140px 20px;

    }

    .final-quote blockquote{

        font-size:2.3rem;

    }

    .enter-store{

        padding:140px 25px;

    }

    .enter-store h2{

        font-size:3rem;

    }

    .enter-btn{

        width:100%;

        justify-content:center;

    }

}