/* ==========================================================
   STUDIO SCHMID
   VERSION 0.2.4

   MOTION & TYPE

   01 — DESIGN SYSTEM
   02 — BASE
   03 — LAYOUT
   04 — TYPOGRAPHY
   05 — INTERACTION
   06 — STATES
   07 — RESPONSIVENESS
   ========================================================== */


/* ==========================================================
   01 — DESIGN SYSTEM
   ========================================================== */


/* ----------------------------------------------------------
   COLOUR STYLE 01
   ---------------------------------------------------------- */

:root {
    --colour-background: #FFFFFF;
    --colour-text: #464646;
    --colour-asterisk: #FEBBFF;
}


/* ----------------------------------------------------------
   COLOUR STYLE 02
   ---------------------------------------------------------- */

.colour-style-02 {
    --colour-background: #FEBBFF;
    --colour-text: #F52F0A;
    --colour-asterisk: #FFFFFF;
}


/* ----------------------------------------------------------
   COLOUR STYLE 03
   ---------------------------------------------------------- */

.colour-style-03 {
    --colour-background: #FC84CE;
    --colour-text: #FFFFFF;
    --colour-asterisk: #292929;
}


/* ----------------------------------------------------------
   COLOUR STYLE 04
   ---------------------------------------------------------- */

.colour-style-04 {
    --colour-background: #FF2FAE;
    --colour-text: #FFA343;
    --colour-asterisk: #FFFFFF;
}


/* ----------------------------------------------------------
   COLOUR STYLE 05
   ---------------------------------------------------------- */

.colour-style-05 {
    --colour-background: #D8D9D6;
    --colour-text: #FF4A00;
    --colour-asterisk: #FFFFFF;
}


/* ==========================================================
   FONT STYLES
   ========================================================== */

:root {

    --title-font: "Inter", sans-serif;
    --subline-font: "Inter", sans-serif;
    --body-font: "Inter", sans-serif;

    --title-weight: 700;
    --subline-weight: 400;
    --body-weight: 300;

}


/* FONT STYLE 01 — INTER */
.font-style-01 {
    --title-font: "Inter", sans-serif;
    --subline-font: "Inter", sans-serif;
    --body-font: "Inter", sans-serif;
}


/* FONT STYLE 02 — SPACE GROTESK */
.font-style-02 {
    --title-font: "Space Grotesk", sans-serif;
    --subline-font: "Space Grotesk", sans-serif;
    --body-font: "Space Grotesk", sans-serif;
}


/* FONT STYLE 03 — DM SANS */
.font-style-03 {
    --title-font: "DM Sans", sans-serif;
    --subline-font: "DM Sans", sans-serif;
    --body-font: "DM Sans", sans-serif;
}


/* FONT STYLE 04 — MANROPE */
.font-style-04 {
    --title-font: "Manrope", sans-serif;
    --subline-font: "Manrope", sans-serif;
    --body-font: "Manrope", sans-serif;
}

/* ----------------------------------------------------------
   SPATIAL RELATIONSHIPS
   ---------------------------------------------------------- */

:root {

    /*
       The logo's normal size.
    */

    --title-size: clamp(
        3rem,
        8.5vw,
        8rem
    );


    /*
       The logo's contact-state size.

       This is now handled through SCALE rather than
       changing font-size during the animation.
    */

    --title-contact-scale: 0.48;


    /*
       Distance between logo and subline.
    */

    --subline-gap: clamp(
        3rem,
        8.5vw,
        8rem
    );


    /*
       Distance from top of viewport to small logo.

       This is deliberately related to the small logo's
       approximate visual height.
    */

    --contact-top: clamp(
        5rem,
        8vw,
        8rem
    );


    /*
       Width of the central composition.
    */

    --stage-width: 92vw;


    /*
       Motion.
    */

    --transition-slow: 900ms;

    --transition-medium: 700ms;

    --transition-fast: 500ms;


    /*
       Calm, deliberate easing.
    */

    --ease-smooth: cubic-bezier(
        0.65,
        0,
        0.35,
        1
    );
}


/* ==========================================================
   02 — BASE
   ========================================================== */

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


html,
body {
    width: 100%;
    height: 100%;
}


body {
    background-color: var(--colour-background);
    color: var(--colour-text);

    font-family: var(--font-primary);

    overflow: hidden;

    transition:
        background-color var(--transition-medium) ease,
        color var(--transition-medium) ease;
}


/* ==========================================================
   03 — LAYOUT
   ========================================================== */


/* ----------------------------------------------------------
   STAGE
   ---------------------------------------------------------- */

#stage {
    position: relative;

    width: 100%;
    height: 100vh;

    min-height: 520px;

    overflow: hidden;
}


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

   The HERO itself no longer moves.

   This is the important change.

   It remains permanently centred at the page's vertical
   centre.

   The LOGO moves independently.
   ---------------------------------------------------------- */

#hero {
    position: absolute;

    left: 50%;
    top: 50%;

    width: min(
        var(--stage-width),
        1500px
    );

    height: 0;

    transform: translateX(-50%);

    text-align: center;

    z-index: 5;
}


/* ==========================================================
   04 — TYPOGRAPHY
   ========================================================== */


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

   The title is positioned by its BOTTOM edge.

   Its bottom edge therefore sits exactly at the vertical
   centre of the page.

   IMPORTANT:

   We animate TRANSFORM rather than font-size.

   This prevents the browser from recalculating the title's
   layout halfway through the transition.
   ---------------------------------------------------------- */

#title {
    position: absolute;

    left: 50%;
    bottom: 0;

    /*
       Normal state:
       horizontal centring only.
    */

    transform:
        translateX(-50%)
        scale(1);

    transform-origin:
        center bottom;

    display: block;

    width: max-content;

    max-width: calc(100vw - 2rem);

    font-family: var(--title-font);

    font-size: var(--title-size);

    font-weight: var(--title-weight);

    text-transform: var(--title-transform);

    letter-spacing: var(--title-letter-spacing);

    line-height: 1;

    white-space: nowrap;

    color: var(--colour-text);

    opacity: 0;

    transition:
        opacity var(--transition-medium) ease,
        transform var(--transition-slow) var(--ease-smooth);
}


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

.title-text {
    display: inline-block;

    text-align: center;
}


/* ----------------------------------------------------------
   ASTERISK
   ---------------------------------------------------------- */

#asterisk {
    position: absolute;

    left: 100%;
    top: 0;

    display: block;

    margin-left: 0.08em;

    cursor: pointer;

    color: inherit;

    user-select: none;

    transition:
        color 250ms ease;
}


/* ----------------------------------------------------------
   ASTERISK HOVER
   ---------------------------------------------------------- */

#asterisk:hover {
    color: var(--colour-asterisk);
}


/* ----------------------------------------------------------
   SUBLINE
   ---------------------------------------------------------- */

#subline {
    position: absolute;

    left: 50%;
    top: var(--subline-gap);

    transform: translateX(-50%);

    width: max-content;

    max-width: 90vw;

    min-height: 1.5em;

    padding: 0 1rem;

    font-family: var(--subline-font);

    font-size: clamp(
        1rem,
        1.8vw,
        1.7rem
    );

    font-weight: var(--subline-weight);

    text-transform: var(--subline-transform);

    letter-spacing: var(--subline-letter-spacing);

    line-height: 1.4;

    color: var(--colour-text);

    opacity: 0;

    cursor: default;

    z-index: 10;

    transition:
        opacity 600ms ease;
}


/* ----------------------------------------------------------
   SUBLINE — ACTIVE
   ---------------------------------------------------------- */

#subline.active {
    cursor: pointer;
}


/* ----------------------------------------------------------
   CONTACT
   ---------------------------------------------------------- */

#contact {
    position: absolute;

    left: 50%;

    top: 55%;

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

    width: min(
        90vw,
        500px
    );

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 0.55rem;

    text-align: center;

    font-family: var(--body-font);

    color: var(--colour-text);

    opacity: 0;

    z-index: 1;

    transition:
        opacity 700ms ease;
}


/* ----------------------------------------------------------
   CONTACT NAME
   ---------------------------------------------------------- */

.contact-name {
    font-family: var(--body-font);

    font-size: clamp(
        1.1rem,
        2vw,
        1.5rem
    );

    font-weight: 700;

    margin-bottom: 0.2rem;
}


/* ----------------------------------------------------------
   CONTACT DETAILS
   ---------------------------------------------------------- */

#contact p:not(.contact-name) {
    font-family: var(--body-font);

    font-size: clamp(
        0.95rem,
        1.5vw,
        1.15rem
    );

    font-weight: var(--body-weight);
}


/* ----------------------------------------------------------
   CONTACT LINKS
   ---------------------------------------------------------- */

#contact a {
    color: inherit;

    text-decoration: none;
}


#contact a:hover {
    text-decoration: underline;

    text-underline-offset: 0.2em;
}


/* ==========================================================
   05 — INTERACTION
   ========================================================== */

#contact {
    pointer-events: none;
}


/* ==========================================================
   06 — STATES
   ========================================================== */


/* ----------------------------------------------------------
   CONTACT STATE — LOGO
   ----------------------------------------------------------

   The logo does NOT move by changing the hero.

   Instead we move the title itself.

   The movement is from:

       bottom = page centre

   to:

       top = defined contact position

   while simultaneously scaling.

   Because transform is one continuous property, the
   browser interpolates the movement smoothly.
   ---------------------------------------------------------- */

body.open #title {

    /*
       Move the bottom edge of the logo upward.

       calc() is based on the top position of the logo.
       */

    transform:
        translateX(-50%)
        translateY(
            calc(
                -50vh + var(--contact-top)
            )
        )
        scale(
            var(--title-contact-scale)
        );

}


/*
   This class is retained because the JavaScript uses it.

   It does not introduce a second animation system.
*/

#title.contact-title {

    transform:
        translateX(-50%)
        translateY(
            calc(
                -50vh + var(--contact-top)
            )
        )
        scale(
            var(--title-contact-scale)
        );

}


/* ----------------------------------------------------------
   CONTACT STATE — SUBLINE
   ----------------------------------------------------------

   The subline disappears BEFORE the logo moves.
   ---------------------------------------------------------- */

body.open #subline {
    opacity: 0;

    pointer-events: none;
}


/* ----------------------------------------------------------
   CONTACT STATE — CONTACT
   ---------------------------------------------------------- */

body.open #contact {
    opacity: 1;

    pointer-events: auto;

    z-index: 10;
}


/* ==========================================================
   DEVELOPMENT / WORK IN PROGRESS
   ========================================================== */

#footnote {
    position: absolute;

    right: 2rem;
    bottom: 2rem;

    font-family: var(--body-font);

    font-size: 0.85rem;

    font-weight: 400;

    color: var(--colour-text);

    opacity: 0;

    pointer-events: none;

    transition:
        opacity var(--transition-fast) ease;
}


/* ==========================================================
   DEVELOPMENT OVERLAY
   ========================================================== */

#dev-overlay {
    position: absolute;

    left: 2rem;
    bottom: 2rem;

    font-family: var(--body-font);

    font-size: 0.75rem;

    font-weight: 400;

    line-height: 1.6;

    color: var(--colour-text);

    opacity: 0;

    pointer-events: none;

    transition:
        opacity var(--transition-fast) ease;
}


/* ----------------------------------------------------------
   DEVELOPMENT OVERLAY — HEADINGS
   ---------------------------------------------------------- */

#dev-overlay strong {
    font-family: var(--title-font);

    font-weight: var(--title-weight);
}


/* ----------------------------------------------------------
   SHOW DEVELOPMENT INFORMATION
   ---------------------------------------------------------- */

body.show-dev #footnote,
body.show-dev #dev-overlay {
    opacity: 0.55;
}

.font-preview-01 {
    font-family: "Inter", sans-serif;
}

.font-preview-02 {
    font-family: "Space Grotesk", sans-serif;
}

.font-preview-03 {
    font-family: "DM Sans", sans-serif;
}

.font-preview-04 {
    font-family: "Manrope", sans-serif;
}

/* ==========================================================
   07 — RESPONSIVENESS
   ========================================================== */


/* ----------------------------------------------------------
   SHORT WINDOWS
   ---------------------------------------------------------- */

@media (max-height: 650px) {

    #stage {
        min-height: 480px;
    }

    :root {
        --subline-gap: clamp(
            2.5rem,
            8.5vw,
            6rem
        );

        --contact-top: clamp(
            4rem,
            8vw,
            6rem
        );
    }

}


/* ----------------------------------------------------------
   VERY SHORT WINDOWS
   ---------------------------------------------------------- */

@media (max-height: 520px) {

    #stage {
        min-height: 420px;
    }

    :root {
        --subline-gap: clamp(
            2.2rem,
            8.5vw,
            5rem
        );

        --contact-top: clamp(
            3.5rem,
            8vw,
            5rem
        );
    }

}


/* ----------------------------------------------------------
   TABLET / MOBILE
   ---------------------------------------------------------- */

@media (max-width: 700px) {

    #hero {
        width: 92vw;
    }

    :root {
        --title-size: clamp(
            2.2rem,
            10vw,
            4.5rem
        );

        --subline-gap: clamp(
            2.5rem,
            10vw,
            5rem
        );

        --contact-top: clamp(
            4rem,
            12vw,
            6rem
        );
    }

    #title {
        letter-spacing: 0.055em;
    }

    #subline {
        font-size: clamp(
            1rem,
            4vw,
            1.35rem
        );
    }

    body.open #title,
    #title.contact-title {
        transform:
            translateX(-50%)
            translateY(
                calc(
                    -50vh + var(--contact-top)
                )
            )
            scale(
                var(--title-contact-scale)
            );
    }

    #footnote {
        right: 1rem;
        bottom: 1rem;
    }

    #dev-overlay {
        left: 1rem;
        bottom: 1rem;
    }

}


/* ----------------------------------------------------------
   SMALL PHONES
   ---------------------------------------------------------- */

@media (max-width: 420px) {

    #hero {
        width: 94vw;
    }

    :root {
        --title-size: clamp(
            2rem,
            10vw,
            3.5rem
        );

        --subline-gap: clamp(
            2.2rem,
            10vw,
            4rem
        );
    }

    #title {
        letter-spacing: 0.04em;
    }

    #subline {
        padding: 0 0.5rem;
    }

    #contact {
        width: 90vw;
    }

}


/* ----------------------------------------------------------
   REDUCED MOTION
   ---------------------------------------------------------- */

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

    #title,
    #subline,
    #contact,
    #footnote,
    #dev-overlay {
        transition-duration: 0.01ms;
    }

}