/* =======================================
   SPIDER-MAN NYC
   PART 1
======================================= */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500&display=swap');

/* ---------- RESET ---------- */

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

html{
    scroll-behavior:smooth;
}

body{

    background:black;

    color:white;

    overflow-x:hidden;

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

}

/* ---------- SCENES ---------- */

.scene{

    position:relative;

    width:100%;

    min-height:100vh;

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    display:flex;

    align-items:center;

}

/* ---------- BACKGROUND IMAGES ---------- */

.hero{
    background-image:url("images/hero.jpg");
}

.harlem{
    background-image:url("images/harlem.jpg");
}

.subway{
    background-image:url("images/subway.jpg");
}

.immigrant{
    background-image:url("images/immigrant.jpg");
}

.playground{
    background-image:url("images/playground.jpg");
}

.neighborhood{
    background-image:url("images/neighborhood.jpg");
}

.family{
    background-image:url("images/family.jpg");
}

.citynight{
    background-image:url("images/citynight.jpg");
}

.community{
    background-image:url("images/community.jpg");
}

.hope{
    background-image:url("images/hope.jpg");
}

.skyline{
    background-image:url("images/skyline.jpg");
}

/* ---------- OVERLAY ---------- */

.overlay{

    width:100%;

    min-height:100vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:8%;

    background:linear-gradient(
        rgba(0,0,0,.15),
        rgba(0,0,0,.08),
        rgba(0,0,0,.15)
    );

}

/* ---------- TITLE ---------- */

.title{

    font-family:"Bebas Neue",sans-serif;

    font-size:9rem;

    letter-spacing:10px;

    line-height:.9;

    margin-bottom:20px;

    text-shadow:0 0 30px rgba(0,0,0,.8);

}

.subtitle{

    font-size:1.7rem;

    max-width:700px;

    line-height:1.6;

    margin-bottom:40px;

}

/* ---------- HEADINGS ---------- */

h2{

    font-family:"Bebas Neue",sans-serif;

    font-size:5rem;

    letter-spacing:4px;

    margin-bottom:25px;

    text-shadow:0 0 20px rgba(0,0,0,.7);

}

p{

    max-width:650px;

    font-size:1.2rem;

    line-height:2;

    text-shadow:0 0 12px rgba(0,0,0,.8);

}

.fact{

    margin-top:30px;

    color:#ff6666;

    font-style:italic;

}

/* =======================================
   PART 2
   LAYOUT + BUTTONS + TEXT
======================================= */

/* ---------- TEXT POSITIONS ---------- */

.center{

    align-items:center;

    text-align:center;

}

.left{

    align-items:flex-start;

    text-align:left;

}

.right{

    align-items:flex-end;

    text-align:right;

}

/* ---------- SPOTIFY BUTTON ---------- */

.spotify-button{

    display:inline-block;

    margin-top:30px;

    padding:16px 38px;

    border:2px solid white;

    border-radius:50px;

    color:white;

    text-decoration:none;

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

    font-size:1rem;

    transition:.35s;

    backdrop-filter:blur(6px);

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

}

.spotify-button:hover{

    background:#1DB954;

    border-color:#1DB954;

    transform:scale(1.05);

    box-shadow:0 0 30px rgba(29,185,84,.45);

}

/* ---------- SCROLL TEXT ---------- */

.scroll{

    margin-top:80px;

    font-size:1rem;

    letter-spacing:2px;

    opacity:.85;

    animation:bounce 2.3s infinite;

}

/* ---------- ENDING ---------- */

.ending h1{

    font-family:"Bebas Neue",sans-serif;

    font-size:7rem;

    line-height:.95;

    letter-spacing:5px;

    margin-bottom:35px;

    text-shadow:0 0 25px rgba(0,0,0,.85);

}

.ending p{

    max-width:700px;

    margin-bottom:18px;

}

/* ---------- IMAGE DEPTH ---------- */

.scene::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        rgba(0,0,0,.25),

        rgba(0,0,0,.15),

        rgba(0,0,0,.35)

    );

    z-index:0;

}

.overlay{

    position:relative;

    z-index:1;

}

/* ---------- SPACING ---------- */

.overlay h2{

    margin-bottom:20px;

}

.overlay p{

    margin-bottom:18px;

}

/* ---------- TITLE EFFECT ---------- */

.title{

    transition:.5s;

}

.title:hover{

    color:white;

    text-shadow:

        0 0 10px #ffffff,

        0 0 30px rgba(220,20,60,.6),

        0 0 60px rgba(220,20,60,.4);

}

/* ---------- HEADINGS ---------- */

h2{

    transition:.35s;

}

h2:hover{

    letter-spacing:8px;

}

/* ---------- RESPONSIVE ---------- */

@media (max-width:900px){

    .title{

        font-size:5rem;

        letter-spacing:4px;

    }

    h2{

        font-size:3.5rem;

    }

    p{

        font-size:1rem;

        max-width:100%;

    }

    .overlay{

        padding:12%;

    }

    .right{

        align-items:flex-start;

        text-align:left;

    }

    .spotify-button{

        font-size:.95rem;

    }

}

/* ---------- SMOOTH IMAGE FEEL ---------- */

.scene{

    background-attachment:fixed;

}

/* =======================================
   PART 3
   CINEMATIC EFFECTS
======================================= */

/* ---------- FADE IN ---------- */

.scene{

    opacity:0;

    transform:translateY(80px);

    transition:opacity 1.3s ease,
               transform 1.3s ease;

}

.scene.show{

    opacity:1;

    transform:translateY(0);

}

/* ---------- IMAGE ZOOM ---------- */

.scene{

    transition:
        transform 12s ease,
        opacity 1.3s ease;

}

.scene.show{

    transform:scale(1.015);

}

/* ---------- SCROLL ARROW ---------- */

@keyframes bounce{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(10px);

    }

}

/* ---------- BUTTON ---------- */

.spotify-button{

    cursor:pointer;

}

.spotify-button:active{

    transform:scale(.96);

}

/* ---------- SELECTION ---------- */

::selection{

    background:#b11313;

    color:white;

}

/* ---------- SCROLLBAR ---------- */

::-webkit-scrollbar{

    width:12px;

}

::-webkit-scrollbar-track{

    background:#050505;

}

::-webkit-scrollbar-thumb{

    background:#b11313;

    border-radius:10px;

}

::-webkit-scrollbar-thumb:hover{

    background:#d62828;

}

/* ---------- PARAGRAPHS ---------- */

p{

    animation:fadeText 2s ease;

}

@keyframes fadeText{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

/* ---------- TITLE ---------- */

.title{

    animation:titleAppear 2.2s ease;

}

@keyframes titleAppear{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ---------- HEADINGS ---------- */

h2{

    animation:slideUp 1.4s ease;

}

@keyframes slideUp{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ---------- FACTS ---------- */

.fact{

    border-left:4px solid #b11313;

    padding-left:18px;

    font-size:1rem;

}

/* ---------- HERO ---------- */

.hero{

    justify-content:center;

}

/* ---------- ENDING ---------- */

.skyline{

    min-height:120vh;

}

.ending{

    gap:25px;

}

/* ---------- SMOOTHNESS ---------- */

img{

    user-select:none;

}

/* ---------- LITTLE RED LINE ---------- */

h2::after{

    content:"";

    display:block;

    width:90px;

    height:3px;

    background:#b11313;

    margin-top:10px;

}

/* ---------- TRANSITIONS ---------- */

*{

    transition:

    color .3s ease,

    background-color .3s ease,

    border-color .3s ease;

}