/* RESET */

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

/* ROOT */

:root{

    --black:#050505;
    --white:#F7F5F2;
    --dawn:#D8D0C7;
    --warm:#B89D76;

}

/* PAGE */

html{
    scroll-behavior:smooth;
}

body{
   background:var(--black);

    overflow-x:hidden;

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

    transition:
        background-color 2s ease,
        color 2s ease;
}

/* AMBIENT LIGHT */

.ambient-light{

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:1;

    opacity:0;

    background:

        radial-gradient(
            circle at center,
            rgba(255,255,255,.15),
            transparent 60%
        );

    transition:
        opacity 2s ease;

}


/* SCENES */

.scene{
    position:relative;
    width:100%;
    height:100vh;
    overflow:hidden;
}

/* -------------------------------- */
/* SCENE 01 */
/* -------------------------------- */

.scene-01{

    background:
        radial-gradient(
            circle at center,
            #0a0a0a 0%,
            #050505 70%
        );

}

/* FILM GRAIN */

.film-grain{

    position:absolute;
    inset:-50%;

    opacity:0.025;

    background-image:
        radial-gradient(
            white 1px,
            transparent 1px
        );

    background-size:4px 4px;

    animation:
        grain 8s steps(10) infinite;

}

/* COPY */

.copy{

    position:absolute;

    left:8%;
    right:8%;

    top:55%;

    transform:translateY(-50%);

    z-index:2;

}

/* TYPOGRAPHY */

h1,
h2{

    font-family:
        'Cormorant Garamond',
        serif;

    font-weight:300;

    line-height:1.25;

    letter-spacing:-0.03em;

}

h1{

    color:var(--white);

    font-size:
        clamp(
            2.8rem,
            9vw,
            4rem
        );

    opacity:0;

    animation:
        intro 4s forwards;

    animation-delay:1.5s;

}

h2{

    color:#111;

    font-size:
        clamp(
            2.5rem,
            8vw,
            3.5rem
        );

}

.scene-02 h2{

    opacity:0;

    animation:
        intro 3s forwards;

    animation-delay:.5s;

}

h1 span,
h2 span{

    display:block;

}

/* -------------------------------- */
/* SCENE 02 */
/* -------------------------------- */

.scene-02{

position:relative;

    background:

        radial-gradient(
            circle at top,
            rgba(255,255,255,.6),
            transparent 45%
        ),

        linear-gradient(
            180deg,
            #efebe4,
            #ddd4c8,
            #cfc2b2
        );


}

/* ATMOSPHERE */

.scene-02::before{

    content:"";

    position:absolute;

    inset:-10%;

    background:
        radial-gradient(
            rgba(255,255,255,.15),
            transparent 70%
        );

    animation:
        drift 25s linear infinite;

}

/* -------------------------------- */
/* ANIMATION */
/* -------------------------------- */

@keyframes intro{

    from{

        opacity:0;
        transform:
            translateY(12px);

    }

    to{

        opacity:1;
        transform:
            translateY(0);

    }

}

@keyframes grain{

    0%{

        transform:
            translate(0,0);

    }

    25%{

        transform:
            translate(-2%,-1%);

    }

    50%{

        transform:
            translate(2%,1%);

    }

    75%{

        transform:
            translate(-1%,2%);

    }

    100%{

        transform:
            translate(0,0);

    }

}

@keyframes drift{

    from{

        transform:
            translateX(-2%)
            translateY(0);

    }

    to{

        transform:
            translateX(2%)
            translateY(-2%);

    }

}

/* -------------------------------- */
/* DESKTOP */
/* -------------------------------- */

@media (min-width:900px){

    .copy{

        width:700px;

        left:50%;

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

    }

}

/* ================================= */
/* SCENE 03 — THE JOURNEY */
/* ================================= */

.scene-03{

    position:relative;

    background:
        linear-gradient(
            180deg,
            #8a929d 0%,
            #69727d 40%,
            #414851 100%
        );

    overflow:hidden;

}

/* FOG */

.scene-03{

    position:relative;

    overflow:hidden;

    background:#000;

}

.scene-03-image{

    position:absolute;

    inset:0;

    background-image:
        url('./assets/images/railway-fog.png');

    background-size:cover;

    background-position:center;

    transform:scale(1.1);

    animation:
        journeyPush 20s linear forwards;

}

/* vignette */

.scene-03::after{

    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(
            transparent 30%,
            rgba(0,0,0,.35) 100%
        );

}

/* COPY */

.copy-03{

    position:absolute;

    top:18%;

    left:6%;
    right:12%;

    transform:none;

}



.scene-03::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.35) 0%,
            rgba(0,0,0,.15) 40%,
            rgba(0,0,0,0) 100%
        );

    z-index:1;
}

.copy-03 h2{

    color:rgba(255,255,255,.95);

    font-size:
        clamp(
            2.7rem,
            8vw,
            4rem
        );

    line-height:1.15;

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

}

.scene-03-reveal{

    margin-top:3rem;

    font-size:
        clamp(
            1.8rem,
            5vw,
            2.4rem
        );

    color:
        rgba(255,255,255,.75);

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

}

/* ANIMATION */

@keyframes fogDrift{

    from{

        transform:
            translateX(-2%)
            translateY(0);

    }

    to{

        transform:
            translateX(2%)
            translateY(-2%);

    }

}

@keyframes revealLine{

    from{

        opacity:0;
        transform:
            translateY(10px);

    }

    to{

        opacity:1;
        transform:
            translateY(0);

    }

}


.scene-03::after{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(
            ellipse at center,
            transparent 20%,
            rgba(0,0,0,.18) 100%
        );

    pointer-events:none;

}

@keyframes journeyPush{

    from{

        transform:
            scale(1.1);

    }

    to{

        transform:
            scale(1.18);

    }

}

.scene--04{
    position:relative;
    height:100svh;
    overflow:hidden;
    background:#000;
}

.scene04-bg{
    position:absolute;
    inset:0;

    background-image:
        url("./assets/images/scene-04-radio.jpg");

    background-size:cover;
    background-position:center center;

    transform:scale(1.08);

    transition:
        transform 12s linear,
        opacity 2s ease;

    opacity:0;
}

.scene--04.active .scene04-bg{
    opacity:1;
    transform:scale(1);
}

.scene04-film{
    position:absolute;
    inset:-50%;

    opacity:.08;

    background-image:
        radial-gradient(
            rgba(255,255,255,.12) 1px,
            transparent 1px
        );

    background-size:4px 4px;

    animation:
        grain 8s steps(8) infinite;
}

@keyframes grain{

    0%{
        transform:translate(0,0);
    }

    25%{
        transform:translate(-2%,1%);
    }

    50%{
        transform:translate(1%,-2%);
    }

    75%{
        transform:translate(-1%,2%);
    }

    100%{
        transform:translate(0,0);
    }
}

.scene04-vignette{
    position:absolute;
    inset:0;

    background:
        radial-gradient(
            ellipse,
            transparent 25%,
            rgba(0,0,0,.25) 70%,
            rgba(0,0,0,.7) 100%
        );
}

.scene04-rain{
    position:absolute;
    inset:0;

    opacity:.06;

    background:
        repeating-linear-gradient(
            170deg,
            transparent 0,
            transparent 12px,
            rgba(255,255,255,.3) 13px,
            transparent 14px
        );

    animation:
        rainMove 18s linear infinite;
}

@keyframes rainMove{

    from{
        transform:translateY(-5%);
    }

    to{
        transform:translateY(5%);
    }
}

.scene04-copy{

    position:absolute;

    top:14vh;
    left:8vw;

    width:38vw;
    max-width:300px;

    transform:none;

    text-align:left;

    z-index:20;
}

.scene04-text{

    opacity:0;

    font-family:
        "Cormorant Garamond",
        serif;

    font-weight:300;

    font-size:
        clamp(
            20px,
            3vw,
            32px
        );

    line-height:1.45;

    color:
        rgba(
            235,
            225,
            210,
            .82
        );

    transition:
        opacity 2.5s ease;
}

.scene04-text{

    position:relative;

    opacity:0;

    font-family:"Cormorant Garamond", serif;

    font-weight:300;

    font-size:clamp(20px,3vw,30px);

    line-height:1.45;

    color:rgba(235,225,210,.82);

    text-align:left;

    transition:opacity 2.5s ease;
}

.scene04-text.active{
    opacity:.82;
}