/* =========================================================

   MARTIN PIPER .DESIGN

   SPLASH PAGE

   ========================================================= */


/* ---------------------------------------------------------

   SETTINGS

   --------------------------------------------------------- */

:root {

    --black: #1b1b1b;

    --white: #ffffff;

    --purple: #a900e8;

    --bolt-opacity: 0.50;

    --bolt-size: 5.5px;

    --bolt-spacing: 16px;

    --splash-width: 560px;

    --state-transition:
        transform 0.68s cubic-bezier(0.22, 1, 0.36, 1);

}


/* ---------------------------------------------------------

   BASE

   --------------------------------------------------------- */

html,
body {

    margin: 0;

    padding: 0;

    width: 100%;

    min-height: 100%;

}


body {

    font-family: "sweet-sans-pro", sans-serif;

    font-weight: 700;

    font-style: normal;

    background: var(--white);

    color: var(--black);

}


/* ---------------------------------------------------------

   SPLASH

   --------------------------------------------------------- */

.splash {

    position: relative;

    width: 100%;

    height: 100vh;

    min-height: 600px;

    overflow: hidden;

    background: var(--white);

}


/* ---------------------------------------------------------

   BOLT FIELD

   --------------------------------------------------------- */

.bolt-field {

    position: absolute;

    top: -50%;

    left: -50%;

    width: 200%;

    height: 200%;

    overflow: hidden;

    z-index: 1;

    pointer-events: none;

    transform: rotate(-10deg);

    transform-origin: center center;

    opacity: 0;

    transition: opacity 0.35s ease;

}


.bolt-field.is-ready {

    opacity: 1;

}


/* ---------------------------------------------------------

   INDIVIDUAL BOLTS

   --------------------------------------------------------- */

.bolt {

    position: absolute;

    width: var(--bolt-size);

    height: calc(var(--bolt-size) * 1.65);

    -webkit-mask-image: url("../assets/mpd-bolt.svg");

    mask-image: url("../assets/mpd-bolt.svg");

    -webkit-mask-repeat: no-repeat;

    mask-repeat: no-repeat;

    -webkit-mask-position: center;

    mask-position: center;

    -webkit-mask-size: contain;

    mask-size: contain;

}


/* ---------------------------------------------------------

   BOLT STATE COLOURS

   --------------------------------------------------------- */

/*
   Black bolts are intentionally softened to 50% opacity
   so the field remains visible without competing with
   the typography.
*/


.bolt-field.state-1 .bolt.state-1-purple,
.bolt-field.state-2 .bolt.state-2-purple,
.bolt-field.state-3 .bolt.state-3-purple,
.bolt-field.state-4 .bolt.state-4-purple,
.bolt-field.state-5 .bolt.state-5-purple,
.bolt-field.state-6 .bolt.state-6-purple {

    background-color: var(--purple);

    opacity: 1;

}


.bolt-field.state-1 .bolt.state-1-black,
.bolt-field.state-2 .bolt.state-2-black,
.bolt-field.state-3 .bolt.state-3-black,
.bolt-field.state-4 .bolt.state-4-black,
.bolt-field.state-5 .bolt.state-5-black,
.bolt-field.state-6 .bolt.state-6-black {

    background-color: var(--black);

    opacity: var(--bolt-opacity);

}


/* ---------------------------------------------------------

   GOOD IDEAS PALETTE INVERSION

   --------------------------------------------------------- */

/*
   The physical bolt configurations remain exactly the
   same. GOOD IDEAS simply reverses the colour assignment.

   Purple remains solid.
   Black remains 50%.
*/


.splash.is-switched .bolt-field.state-1 .bolt.state-1-purple,
.splash.is-switched .bolt-field.state-2 .bolt.state-2-purple,
.splash.is-switched .bolt-field.state-3 .bolt.state-3-purple,
.splash.is-switched .bolt-field.state-4 .bolt.state-4-purple,
.splash.is-switched .bolt-field.state-5 .bolt.state-5-purple,
.splash.is-switched .bolt-field.state-6 .bolt.state-6-purple {

    background-color: var(--black);

    opacity: var(--bolt-opacity);

}


.splash.is-switched .bolt-field.state-1 .bolt.state-1-black,
.splash.is-switched .bolt-field.state-2 .bolt.state-2-black,
.splash.is-switched .bolt-field.state-3 .bolt.state-3-black,
.splash.is-switched .bolt-field.state-4 .bolt.state-4-black,
.splash.is-switched .bolt-field.state-5 .bolt.state-5-black,
.splash.is-switched .bolt-field.state-6 .bolt.state-6-black {

    background-color: var(--purple);

    opacity: 1;

}


/* ---------------------------------------------------------

   MAIN CONTENT

   --------------------------------------------------------- */

.splash-content {

    position: absolute;

    top: 50%;

    left: 50%;

    width: var(--splash-width);

    max-width: calc(100vw - 48px);

    display: flex;

    align-items: flex-start;

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

    z-index: 2;

}


/* ---------------------------------------------------------

   TEXT KEYLINE

   --------------------------------------------------------- */

/*
   The white stroke creates a clean 4px separation between
   the typography and the bolt field.

   The stroke sits behind the text fill, preserving the
   original black typography while giving it a strong
   knockout against the background pattern.
*/


.descriptor,
.connect-text,
.next-content,
.back-button {

    -webkit-text-stroke: 4px var(--white);

    paint-order: stroke fill;

}


/*
   Keep the contact links consistent with the rest of
   the typography.
*/


.contact-email {

    -webkit-text-stroke: 4px var(--white);

    paint-order: stroke fill;

}


/*
   LinkedIn uses a filled circular mark rather than normal
   text, so it does not receive the typography stroke.
*/


.linkedin-mark {

    -webkit-text-stroke: 0;

}


/* ---------------------------------------------------------

   LOGO

   --------------------------------------------------------- */

.logo-wrap {

    flex: 0 0 auto;

    width: 138px;

}


.mpd-logo {

    display: block;

    width: 100%;

    height: auto;

}


/* ---------------------------------------------------------

   CONTENT WINDOW

   --------------------------------------------------------- */

.splash-content-window {

    position: relative;

    flex: 1 1 auto;

    min-width: 0;

    margin-left: 20px;

    clip-path: inset(0 -160px 0 0);

}


/* ---------------------------------------------------------

   STATE TRACK

   --------------------------------------------------------- */

.splash-state-track {

    position: relative;

    width: 100%;

    transform: translate3d(0, 0, 0);

    transition: var(--state-transition);

    will-change: transform;

    backface-visibility: hidden;

    -webkit-backface-visibility: hidden;

}


/* ---------------------------------------------------------

   STATES

   --------------------------------------------------------- */

.splash-state {

    position: relative;

    width: 100%;

    box-sizing: border-box;

}


/* ---------------------------------------------------------

   SWITCHED TRACK POSITION

   --------------------------------------------------------- */

.splash.is-switched .splash-state-track {

    transform: translate3d(
        0,
        calc(-1 * var(--current-state-height, 0px)),
        0
    );

}


/* ---------------------------------------------------------

   DESCRIPTOR

   --------------------------------------------------------- */

.descriptor {

    padding-top: 4px;

    font-size: 32px;

    line-height: 1.08;

    letter-spacing: -0.025em;

}


/* ---------------------------------------------------------

   CONNECT LOCKUP

   --------------------------------------------------------- */

.connect-lockup {

    display: flex;

    align-items: center;

    margin-top: 24px;

}


.connect-text {

    flex: 0 0 auto;

    font-size: 28px;

    line-height: 0.95;

    letter-spacing: -0.025em;

}


.connect-text div {

    white-space: nowrap;

}


/* ---------------------------------------------------------

   GOOD IDEA

   --------------------------------------------------------- */

.good-idea-button {

    display: block;

    flex: 0 0 auto;

    width: 110px;

    margin-left: 12px;

    text-decoration: none;

    cursor: pointer;

}


.good-idea {

    position: relative;

    display: block;

    width: 100%;

    aspect-ratio: 1 / 1;

    transform-origin: center center;

    overflow: visible;

    animation:
        goodIdeaWobble 3.2s ease-in-out infinite;

}


.good-idea-black,
.good-idea-purple {

    position: absolute;

    top: 0;

    left: 0;

    display: block;

    width: 100%;

    height: auto;

}


.good-idea-black {

    opacity: 1;

}


.good-idea-purple {

    opacity: 0;

    animation:
        goodIdeaPurple 3.2s ease-in-out infinite;

}


/* ---------------------------------------------------------

   GOOD IDEA ANIMATION

   --------------------------------------------------------- */

@keyframes goodIdeaWobble {

    0%,
    100% {

        transform: rotate(-3deg);

    }

    50% {

        transform: rotate(3deg);

    }

}


@keyframes goodIdeaPurple {

    0%,
    44% {

        opacity: 0;

    }

    50%,
    94% {

        opacity: 1;

    }

    100% {

        opacity: 0;

    }

}


/* ---------------------------------------------------------

   NEXT CONTENT

   --------------------------------------------------------- */

.next-content {

    font-size: 32px;

    line-height: 1.08;

    letter-spacing: -0.025em;

}


.next-heading {

    padding-top: 4px;

}


.hello-line {

    position: relative;

    display: block;

    width: max-content;

    line-height: 0.82;

}


/* ---------------------------------------------------------

   HI

   --------------------------------------------------------- */

.hi-button {

    position: absolute;

    display: block;

    width: 75.6px;

    left: calc(100% + 10px);

    top: calc(50% - 1px);

    transform: translateY(-50%);

    border-radius: 50%;

    text-decoration: none;

    background: transparent;

    overflow: visible;

    cursor: pointer;

}


.hi {

    position: relative;

    display: block;

    width: 100%;

    aspect-ratio: 1 / 1;

    transform-origin: center center;

    overflow: visible;

    animation:
        hiWobble 3.2s ease-in-out infinite;

}


.hi-black,
.hi-purple {

    position: absolute;

    top: 0;

    left: 0;

    display: block;

    width: 100%;

    height: auto;

}


.hi-black {

    opacity: 1;

}


.hi-purple {

    opacity: 0;

    animation:
        hiPurple 3.2s ease-in-out infinite;

}


/* ---------------------------------------------------------

   HI ANIMATION

   --------------------------------------------------------- */

@keyframes hiWobble {

    0%,
    100% {

        transform: rotate(3deg);

    }

    50% {

        transform: rotate(-3deg);

    }

}


@keyframes hiPurple {

    0%,
    44% {

        opacity: 0;

    }

    50%,
    94% {

        opacity: 1;

    }

    100% {

        opacity: 0;

    }

}


/* ---------------------------------------------------------

   CONTACT LINKS

   --------------------------------------------------------- */

.contact-links {

    display: flex;

    align-items: center;

    margin-top: 24px;

}


.contact-email {

    display: inline-block;

    color: var(--black);

    font-size: 28px;

    font-weight: 600;

    line-height: 1;

    letter-spacing: -0.025em;

    text-decoration: none;

    white-space: nowrap;

}


.contact-email:hover {

    color: var(--purple);

}


.linkedin-link {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 30px;

    height: 30px;

    margin-left: 15px;

    color: var(--white);

    background: var(--black);

    border-radius: 50%;

    text-decoration: none;

    cursor: pointer;

}


.linkedin-link:hover {

    background: var(--purple);

}


.linkedin-mark {

    font-family: Arial, sans-serif;

    font-size: 22px;

    font-weight: 700;

    line-height: 1;

}


/* ---------------------------------------------------------

   BACK

   --------------------------------------------------------- */

.back-button {

    display: block;

    margin-top: 18px;

    padding: 0;

    border: 0;

    background: transparent;

    color: var(--black);

    font-family: "sweet-sans-pro", sans-serif;

    font-size: 19px;

    font-weight: 700;

    line-height: 1;

    letter-spacing: -0.01em;

    cursor: pointer;

}


/* ---------------------------------------------------------

   BACK HOVER

   --------------------------------------------------------- */

.back-button:hover {

    color: var(--purple);

}


/* ---------------------------------------------------------

   FOCUS

   --------------------------------------------------------- */

.good-idea-button:focus-visible,
.hi-button:focus-visible,
.linkedin-link:focus-visible,
.back-button:focus-visible {

    outline: 2px solid var(--purple);

    outline-offset: 4px;

}


/* ---------------------------------------------------------

   TABLET

   --------------------------------------------------------- */

@media (max-width: 700px) {

    .splash {

        min-height: 500px;

    }


    .splash-content {

        width: calc(100vw - 48px);

        max-width: 520px;

    }


    .logo-wrap {

        width: 105px;

    }


    .splash-content-window {

        margin-left: 15px;

        clip-path: inset(0 -130px 0 0);

    }


    .descriptor {

        padding-top: 3px;

        font-size: clamp(21px, 5.5vw, 31px);

    }


    .connect-lockup {

        margin-top: 20px;

    }


    .connect-text {

        font-size: clamp(19px, 4.8vw, 27px);

    }


    .good-idea-button {

        width: 100px;

        margin-left: 10px;

    }


    .next-content {

        font-size: clamp(21px, 5.5vw, 31px);

    }


    .hi-button {

        width: 60.3px;

        left: calc(100% + 8px);

    }


    .contact-links {

        margin-top: 20px;

    }


    .contact-email {

        font-size: clamp(19px, 4.8vw, 27px);

        font-weight: 500;

    }


    .linkedin-link {

        width: 27px;

        height: 27px;

        margin-left: 14px;

    }


    .linkedin-mark {

        font-size: 20px;

    }


    .back-button {

        margin-top: 17px;

        font-size: clamp(15px, 3.5vw, 19px);

    }

}


/* ---------------------------------------------------------

   MOBILE

   --------------------------------------------------------- */

@media (max-width: 500px) {

    .splash-content {

        width: calc(100vw - 40px);

    }


    .logo-wrap {

        width: 82px;

    }


    .splash-content-window {

        margin-left: 12px;

        clip-path: inset(0 -110px 0 0);

    }


    .descriptor {

        padding-top: 3px;

        font-size: clamp(17px, 5.4vw, 25px);

        line-height: 1.1;

    }


    .connect-lockup {

        margin-top: 18px;

    }


    .connect-text {

        font-size: clamp(16px, 4.8vw, 22px);

    }


    .good-idea-button {

        width: 82px;

        margin-left: 8px;

    }


    .next-content {

        font-size: clamp(17px, 5.4vw, 25px);

    }


    .hi-button {

        width: 49.5px;

        left: calc(100% + 7px);

    }


    .contact-links {

        margin-top: 18px;

    }


    .contact-email {

        font-size: clamp(16px, 4.8vw, 22px);

        font-weight: 500;

    }


    .linkedin-link {

        width: 22px;

        height: 22px;

        margin-left: 11px;

    }


    .linkedin-mark {

        font-size: 16px;

    }


    .back-button {

        margin-top: 15px;

        font-size: clamp(14px, 3.8vw, 18px);

    }

}


/* ---------------------------------------------------------

   REDUCED MOTION

   --------------------------------------------------------- */

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

    .bolt-field {

        opacity: 1;

        transition: none;

    }


    .splash-state-track {

        transition: none;

    }


    .good-idea,
    .good-idea-purple,
    .hi,
    .hi-purple {

        animation: none;

    }


    .good-idea-purple,
    .hi-purple {

        opacity: 0;

    }

}