/* ==================================================
   SVNCTM
   CINEMATIC COMING SOON WEBSITE
================================================== */


/* ==================================================
   VARIABLES
================================================== */

:root {

    --pink: #C54B8D;

    --blush: #F7D8E6;

    --lavender: #CFC8FF;

    --warm-white: #F7F5F2;

    --charcoal: #2E2E2E;

    --heading:
        "Neue Montreal",
        "Helvetica Neue",
        Arial,
        sans-serif;

    --body:
        "Avenir",
        "Helvetica Neue",
        Arial,
        sans-serif;

    --ease:
        cubic-bezier(.16, 1, .3, 1);

}


/* ==================================================
   RESET
================================================== */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html,
body {

    width: 100%;

    height: 100%;

}


body {

    overflow-x: hidden;

    overflow-y: auto;

    background:
        var(--warm-white);

    color:
        var(--pink);

    font-family:
        var(--body);

}


a {

    color: inherit;

    text-decoration: none;

}


/* ==================================================
   LOADER
================================================== */

.loader {

    position: fixed;

    inset: 0;

    z-index: 99999;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        var(--warm-white);

    transition:
        opacity 1s var(--ease),
        visibility 1s var(--ease);

}


.loader.hidden {

    opacity: 0;

    visibility: hidden;

}


.loader-content {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

}


/* REAL LOGO */

.loading-logo {

    width: 145px;

    max-width: 45vw;

    height: auto;

    display: block;

    object-fit: contain;

    opacity: 0;

    transform:
        translateY(20px)
        scale(.96);

    animation:
        loadingLogoReveal 1.1s var(--ease)
        forwards;

}


@keyframes loadingLogoReveal {

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

    }

}


/* LOADING LINE */

.loader-line {

    width: 140px;

    height: 1px;

    margin-top: 25px;

    overflow: hidden;

    background:
        rgba(46, 46, 46, .12);

}


.loader-line span {

    display: block;

    width: 100%;

    height: 100%;

    background:
        var(--pink);

    transform:
        translateX(-100%);

    animation:
        loaderLine 1.4s var(--ease)
        forwards;

}


@keyframes loaderLine {

    to {

        transform:
            translateX(0);

    }

}


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

.background {

    position: fixed;

    inset: 0;

    z-index: 0;

    overflow: hidden;

    background:
        var(--warm-white);

}


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

.orb {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter:
        blur(100px);

}


/* TOP RIGHT PINK */

.orb-one {

    width: 45vw;

    height: 45vw;

    top: -15vw;

    right: -10vw;

    background:
        rgba(247, 216, 230, .75);

    animation:
        orbOne 14s ease-in-out infinite;

}


/* BOTTOM LEFT PURPLE */

.orb-two {

    width: 42vw;

    height: 42vw;

    bottom: -20vw;

    left: -12vw;

    background:
        rgba(207, 200, 255, .58);

    animation:
        orbTwo 18s ease-in-out infinite;

}


/* CENTER SOFT PINK */

.orb-three {

    width: 25vw;

    height: 25vw;

    top: 35%;

    left: 40%;

    background:
        rgba(197, 75, 141, .07);

    filter:
        blur(90px);

    animation:
        orbThree 12s ease-in-out infinite;

}


/* BOTTOM RIGHT WHITE */

.orb-four {

    width: 20vw;

    height: 20vw;

    right: 15%;

    bottom: 12%;

    background:
        rgba(255, 248, 244, .95);

    filter:
        blur(70px);

    animation:
        orbFour 16s ease-in-out infinite;

}


@keyframes orbOne {

    0%,
    100% {

        transform:
            translate(0, 0)
            scale(1);

    }

    50% {

        transform:
            translate(-80px, 70px)
            scale(1.15);

    }

}


@keyframes orbTwo {

    0%,
    100% {

        transform:
            translate(0, 0)
            scale(1);

    }

    50% {

        transform:
            translate(100px, -60px)
            scale(1.12);

    }

}


@keyframes orbThree {

    0%,
    100% {

        transform:
            translate(0, 0)
            scale(1);

        opacity:
            .4;

    }

    50% {

        transform:
            translate(50px, -40px)
            scale(1.3);

        opacity:
            1;

    }

}


@keyframes orbFour {

    0%,
    100% {

        transform:
            translate(0, 0)
            scale(1);

    }

    50% {

        transform:
            translate(-40px, 30px)
            scale(1.2);

    }

}


/* ==================================================
   GRAIN
================================================== */

.grain {

    position: fixed;

    inset: -50%;

    width: 200%;

    height: 200%;

    z-index: 3;

    pointer-events: none;

    opacity: .025;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");

    animation:
        grain .25s steps(2) infinite;

}


@keyframes grain {

    0% {

        transform:
            translate(0, 0);

    }

    25% {

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

    }

    50% {

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

    }

    75% {

        transform:
            translate(1%, 1%);

    }

    100% {

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

    }

}


/* ==================================================
   MAIN PAGE
================================================== */

.landing {

    position: relative;

    z-index: 5;

    width: 100%;

    min-height: 100vh;

    min-height: 100svh;

    padding:
        30px 4vw;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}


/* ==================================================
   HEADER
================================================== */

.top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    opacity: 0;

    animation:
        fadeDown 1s var(--ease)
        1.8s forwards;

}


.brand {

    display: flex;

    align-items: center;

}


.header-logo {

    width: 100px;

    max-height: 45px;

    height: auto;

    display: block;

    object-fit: contain;

}


.top-status {

    font-size: 8px;

    font-weight: 500;

    letter-spacing: .3em;

    color:
        var(--charcoal);

    opacity: .45;

}


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

.center {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 90%;

    max-width: 1150px;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

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

}


/* ==================================================
   COMING SOON
================================================== */

.coming-label {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 12px;

    font-size: 18px;

    font-weight: 600;

    letter-spacing: .28em;

    text-transform: uppercase;

    opacity: 0;

    transform:
        translateY(15px);

    animation:
        comingLabelReveal 1s var(--ease)
        1.5s forwards;

}


.coming-black {

    color:
        #222222;

}


.coming-pink {

    color:
        var(--pink);

}


@keyframes comingLabelReveal {

    to {

        opacity:
            .85;

        transform:
            translateY(0);

    }

}


/* ==================================================
   MAIN TITLE
================================================== */

.main-title {

    margin: 0;

    font-family:
        var(--heading);

    font-size:
        clamp(3.25rem, 6vw, 6.75rem);

    font-weight:
        500;

    line-height:
        .86;

    letter-spacing:
        -.075em;

}


.title-line {

    display:
        block;

    overflow:
        hidden;

}


.line-one {

    color:
        #2E2E2E;

    opacity:
        0;

    transform:
        translateY(100%);

    animation:
        titleReveal 1.2s var(--ease)
        1.7s forwards;

}


.line-two {

    color:
        var(--pink);

    opacity:
        0;

    transform:
        translateY(100%);

    animation:
        titleReveal 1.2s var(--ease)
        1.9s forwards;

}


@keyframes titleReveal {

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}


/* ==================================================
   TAGLINE
================================================== */

.message {

    margin-top:
        20px;

    max-width:
        500px;

    font-family:
        var(--body);

    font-size:
        17px;

    font-weight:
        500;

    line-height:
        1.6;

    letter-spacing:
        .015em;

    color:
        #303030;

    opacity:
        0;

    transform:
        translateY(15px);

    animation:
        messageReveal 1.2s var(--ease)
        2.4s forwards;

}


@keyframes messageReveal {

    to {

        opacity:
            .8;

        transform:
            translateY(0);

    }

}


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

.bottom {

    position: relative;

    z-index: 10;

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    font-size: 8px;

    letter-spacing: .18em;

    opacity: 0;

    animation:
        fadeUp 1s var(--ease)
        2.8s forwards;

}


.copyright {

    color:
        #2E2E2E;

    opacity:
        .55;

}


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

.footer-links {

    display: flex;

    align-items: center;

    gap: 28px;

}


.contact-link {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color:
        #2E2E2E;

    opacity:
        .62;

    transition:
        color .4s ease,
        opacity .4s ease,
        transform .4s var(--ease);

}


.contact-link:hover {

    color:
        var(--pink);

    opacity:
        1;

    transform:
        translateY(-3px);

}


.contact-icon {

    width:
        16px;

    height:
        16px;

    flex-shrink:
        0;

}


.arrow {

    font-size:
        12px;

    opacity:
        .55;

    transition:
        transform .4s var(--ease);

}


.contact-link:hover .arrow {

    transform:
        translate(2px, -2px);

}


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

@keyframes fadeDown {

    from {

        opacity:
            0;

        transform:
            translateY(-15px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}


@keyframes fadeUp {

    from {

        opacity:
            0;

        transform:
            translateY(15px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}


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

@media (max-width: 768px) {


    .landing {

        height: auto;

        min-height: 100vh;

        min-height: 100svh;

        padding:
            24px 6vw;

        gap: 44px;

    }


    .header-logo {

        width:
            80px;

        max-height:
            38px;

    }


    .top-status {

        font-size:
            7px;

        letter-spacing:
            .25em;

    }


    .center {

        position: relative;

        top: auto;

        left: auto;

        width:
            88%;

        margin: 0 auto;

        transform: none !important;

    }


    .coming-label {

        margin-bottom:
            10px;

        font-size:
            14px;

        letter-spacing:
            .22em;

    }


    .main-title {

        font-size:
            clamp(2.6rem, 11vw, 5rem);

        line-height:
            .88;

        letter-spacing:
            -.07em;

    }


    .message {

        margin-top:
            18px;

        font-size:
            13px;

        max-width:
            340px;

    }


    .bottom {

        align-items:
            center;

        flex-direction:
            column;

        gap: 14px;

        text-align:
            center;

    }


    .footer-links {

        width:
            100%;

        justify-content:
            center;

        flex-wrap:
            wrap;

        gap:
            16px;

    }


    .contact-link span {

        display:
            inline;

    }


    .contact-icon {

        width:
            18px;

        height:
            18px;

    }


    .arrow {

        display:
            none;

    }

}


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

@media (max-width: 400px) {


    .main-title {

        font-size:
            12vw;

    }


    .coming-label {

        font-size:
            11px;

    }


    .message {

        font-size:
            12px;

    }


    .footer-links {

        gap:
            12px;

    }

}


/* ==================================================
   REDUCED MOTION
================================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

    }

}