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

body{
    font-family:"Manrope",sans-serif;
    background: #000;
    color: white;
}

.top-bar{
    width: 100%;
    height: 110px;
    background: white ;
    display: flex;
    align-items: center;
    padding-left: 3%;
}

.logo{
    width: 150px;
    height: auto;
    
}

.hero{
    width: 100%;
    height:calc(100vh-95px);
    background: black;
    display: flex;
    position: relative;
    overflow: hidden;
}

.hero-left{
    width: 50%;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 8%;
    position: relative;
    z-index: 5;

}

.hero-right{
    width: 60%;
    margin-left: -10px;
    overflow: hidden;
    position: relative;
    
}

.hero-image{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    animation: slowZoom 20s ease-in-out infinite alternate;
}

.hero-right::before{
    content: "";
    position: absolute;
    inset: 0;

    z-index: 2;

    width: 100%;
    height: 100%;

    background: 
    
    linear-gradient(
        to right,
        
        rgb(0,0,0) 0%,
        rgba(0,0,0,0.98) 8%,
        rgba(0,0,0,0.85) 16%,
        rgba(0,0,0,0.70) 22%,
        rgba(0,0,0,0.25) 38%,
        rgba(0,0,0,0) 50%
    ),
        
    linear-gradient(
        to top,

        rgb(0,0,0) 0%,
        rgba(0,0,0,0.90) 3%,
        rgba(0,0,0,0.50) 10%,
        rgba(0,0,0,0) 22%
    );

}


.hero-left h1{
    font-size: 96px;
    font-weight: 700;
    margin-bottom: 15px;
    z-index: 2;
}

.tagline{
    font-size: 38px;
    line-height: 1.2;
    margin-bottom: 18px;
    z-index: 1;
}

.description{
    font-size: 22px;
    color: #bdbdbd;
    z-index: 1;
}



.about{
    background: #000;
    color: white;
    padding-left: 8%;
    padding-top: 100px;
    padding-bottom: 100px;
}

.about-content{
    max-width: 600px;
}

.about h2{
    font-size: 52px;
    margin-bottom: 35px;
}

.about p{
    font-size: 18px;
    line-height: 1.4;
    color: #bdbdbd;
    margin-bottom: 15px;
}

.experience-title{
    background: #000;
    color: white;
    padding-left: 8%;
    margin-bottom: 100px;
}

.experience-title h2{
    font-size: 52px;
}


.experience-card{
    display: flex;
    align-items: center;
    padding-bottom: 100px;
}

.experience-text{
    width: 32%;
    color: white;
    padding-left: 8%;
    z-index: 5;
}

.experience-text h3{
    font-size: 42px;
    padding-bottom: 5px;
    font-weight: 700;
}

.pTimeline{
    padding-bottom: 25px;
}

.pTagline{
    padding-bottom: 10px;
}

.pDescription{
    padding-bottom: 10px;
    line-height: 1.5;
}

.pOs{
    padding-bottom: 5px;
}

.pTease{
    padding-top: 10px;
    color: rgb(36, 207, 36);
}



.experience-poster{
    width: 68%;
    position:relative;
    overflow: hidden;
}


.experience-poster::before{

    content: "";
    position: absolute;
    inset: 0;

    z-index: 2;

    background: linear-gradient(
        to right,
        rgb(0,0,0) 0%,
        rgba(0,0,0,0.95) 8%,
        rgba(0,0,0,0.75) 18%,
        rgba(0,0,0,0.35) 28%,
        rgba(0,0,0,0) 45%
    );
}

.poster-image{
    width: 100%;
    display: block;
    object-fit: cover;
    z-index: 1;
    position: relative;
}

.poster-image{
    animation: cinematicMove 30s ease-in-out infinite alternate;
}


.journey{
    background:#000;
    color:white;
    padding-left: 8%;
}

.journey h2{
    font-size:52px;
    margin-bottom:30px;
    
}

.journey p{
    max-width:700px;
    font-size:20px;
    line-height:1.2;
    color:#bdbdbd;
    max-width: 600px;
}

.social-links{
    display:flex;
    gap:35px;
    margin-top:30px;
    padding-bottom: 15px;
}

.social-links a{
    color:white;
    text-decoration:none;
    font-size:20px;
    transition:.3s;
}

.social-links a:hover{
    color:#15a1cc;
}

.contact-email{
    color:#bdbdbd;
    text-decoration:none;
    font-size:22px;
    transition:0.3s;
}

.contact-email{
    display:block;
    color:#bdbdbd;
    text-decoration:none;
    font-size:20px;
    letter-spacing:1px;
    padding-bottom: 100px;
}
.contact-email:hover{
    color:#15a1cc;
}


footer{
    background:#000;
    border-top:1px solid #222;
    text-align:center;
    padding-top: 40px;
    padding-bottom: 45px;
}

.footer-brand{
    font-size:30px;
    margin-bottom:5px;
}

.footer-tagline{
    color:#888;
    margin-bottom:30px;
}

.copyright{
    color:#666;
    font-size:15px;
}



@keyframes slowZoom{

    0%{
        transform:scale(1);
    }

    100%{
        transform:scale(1.15);
    }

}

@keyframes cinematicMove{

    0%{
        transform: scale(1) translateX(0px) translateY(0px);
    }

    100%{
        transform: scale(1.25) translateX(0px) translateY(0px);
    }

}











/* ======================================
        LARGE TV / 4K
====================================== */

/* ======================================
        TV / LARGE SCREENS
====================================== */

@media (min-width:1600px){

    /* ---------- HEADER ---------- */

    .top-bar{
        height:120px;
    }

    .logo{
        width:180px;
    }

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

    .hero-left h1{
        font-size:120px;
    }

    .tagline{
        font-size:52px;
    }

    .description{
        font-size:28px;
        max-width:700px;
    }

    /* ---------- ABOUT ---------- */

    .about{
        padding:180px 8%;
    }

    .about h2{
        font-size:52px;
    }

    .about p{
        font-size:24px;
    }

    /* ---------- EXPERIENCE ---------- */

    .experience-title h2{
        font-size:52px;
    }

    .experience-text h3{
        font-size:64px;
    }

    .experience-text p{
        font-size:24px;
    }

    .experience-poster{
        height:600px;
    }

    /* ---------- JOURNEY ---------- */

    .journey h2{
        font-size:52px;
    }

    .journey p{
        font-size:24px;
    }

    .social-links a{
        font-size:24px;
    }

    .contact-email{
        font-size:24px;
    }

}



/* ======================================
        TABLET
====================================== */

/* ======================================
        TABLET
====================================== */

@media (max-width:992px){

    /* ---------- HEADER ---------- */

    .top-bar{
        height:95px;
    }

    .logo{
        width:130px;
    }

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

    .hero-left{
        width:50%;
    }

    .hero-right{
        width:60%;
    }

    .hero-left h1{
        font-size:72px;
    }

    .tagline{
        font-size:34px;
    }

    .description{
        font-size:20px;
    }

    /* ---------- ABOUT ---------- */

    .about{
        padding:120px 8%;
    }

    .about h2{
        font-size:34px;
    }

    .about p{
        font-size:18px;
    }

    /* ---------- EXPERIENCE ---------- */

    .experience-title h2{
        font-size:36px;
    }

    .experience-text h3{
        font-size:42px;
    }

    .experience-text p{
        font-size:18px;
    }

    .experience-poster{
        height:420px;
    }

    /* ---------- JOURNEY ---------- */

    .journey h2{
        font-size:36px;
    }

    .journey p{
        font-size:18px;
    }

}



/* ======================================
        MOBILE
====================================== */

@media (max-width:768px){

    /* ---------- HEADER ---------- */

    .top-bar{
        height:80px;
    }

    .logo{
        width:110px;
    }

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

    .hero{
        flex-direction:column;
        height:auto;
    }

    .hero-left{
        width:100%;
        padding:60px 8%;
    }

    .hero-right{
        width:100%;
        margin-left:0;
        height:350px;
    }

    .hero-left h1{
        font-size:58px;
    }

    /* ---------- ABOUT ---------- */

    .about{
        padding:100px 8%;
    }

    .about h2{
        font-size:34px;
    }

    .about p{
        font-size:18px;
    }

    /* ---------- EXPERIENCE ---------- */

    .experience-card{
        flex-direction:column;
    }

    .experience-poster{
        width:100%;
        height:350px;
    }

    .experience-text{
        width:100%;
        padding:40px 8%;
    }

    /* ---------- JOURNEY ---------- */

    .social-links{
        flex-direction:column;
        gap:20px;
    }

}

/* ======================================
        SMALL PHONES
====================================== */

@media (max-width:480px){

    /* ---------- HEADER ---------- */

    .top-bar{
        height:75px;
    }

    .logo{
        width:100px;
    }

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

    .hero-left h1{
        font-size:46px;
    }

    .tagline{
        font-size:24px;
    }

    .description{
        font-size:16px;
    }

    /* ---------- ABOUT ---------- */

    .about{
        padding:80px 8%;
    }

    .about h2{
        font-size:30px;
    }

    .about p{
        font-size:16px;
        line-height:1.6;
    }

    /* ---------- EXPERIENCE ---------- */

    .experience-title h2{
        font-size:30px;
    }

    .experience-text h3{
        font-size:34px;
    }

    .experience-text p{
        font-size:16px;
    }

    .experience-poster{
        height:300px;
    }

    /* ---------- JOURNEY ---------- */

    .journey h2{
        font-size:30px;
    }

    .journey p{
        font-size:16px;
    }

    .social-links a{
        font-size:18px;
    }

    .contact-email{
        font-size:18px;
    }

}

html{

    scroll-behavior:smooth;

}

::selection{

    background:white;

    color:black;

}


/* ======================================
   CINEMATIC HERO INTRO
====================================== */

/* Header */

.top-bar{
    opacity:0;
    animation:HeaderReveal 1s ease forwards;
}

/* Hero Text */

.hero-left h1,
.hero-left .tagline,
.hero-left .description{

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

    animation:CinematicReveal 1.2s cubic-bezier(.22,.61,.36,1) forwards;

}

.hero-left h1{
    animation-delay:.45s;
}

.hero-left .tagline{
    animation-delay:.85s;
}

.hero-left .description{
    animation-delay:1.25s;
}

/* Hero Image Container */

.hero-right{

    opacity:0;
    animation:FadeImage 2s ease forwards;

}

/* ======================================
   KEYFRAMES
====================================== */

@keyframes HeaderReveal{

    from{
        opacity:0;
        transform:translateY(-14px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

@keyframes CinematicReveal{

    from{
        opacity:0;
        transform:translateY(18px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

@keyframes FadeImage{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }

}

@keyframes ImageZoomIn{

    from{

        transform:scale(1.08);

        filter:
            brightness(.65)
            blur(5px);

    }

    to{

        transform:scale(1);

        filter:
            brightness(1)
            blur(0);

    }

}



/* ======================================
        CINEMATIC SCROLL REVEAL
====================================== */

.fade-section{

    opacity:0;

    transform:
        translateY(80px)
        scale(.98);

    filter:
        blur(8px)
        brightness(.85);

    transition:
        opacity 1.2s cubic-bezier(.22,.61,.36,1),
        transform 1.2s cubic-bezier(.22,.61,.36,1),
        filter 1.2s ease;

    will-change:
        opacity,
        transform,
        filter;

}

.fade-section.show{

    opacity:1;

    transform:
        translateY(0)
        scale(1);

    filter:
        blur(0)
        brightness(1);

}