---
import Typemark from "../assets/ci/typemark.svg";
import Logo from "../assets/ci/icon-only.svg";
---

<main class="inner">
    <div class="text">
        <h1>Smart websites for bold ideas.</h1>

        <p>
            From concept to launch — websites, apps, and digital solutions that
            work hard, so you can play hard. Whether it's a personal site, an
            e-commerce platform, or a custom web app, I bring your ideas to
            life.
        </p>

        <a
            href="mailto:hello@tideshiftdigital.com?subject=Anfrage"
            class="hoverable">Get in touch</a
        >
    </div>

    <p class="copyright"><span>&copy; 2025</span> <span>Tideshift Digital e.U.</span></p>

    <Typemark class="typemark" />
</main>

<Logo class="logo" />

<style is:global>
    .inner {
        height: 100dvh;
    }
</style>

<style>
    .inner {
        display: grid;
        height: 100%;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 1rem;
    }

    .text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 2em;
        grid-column: 1 / -1;
        grid-row: 1 / -1;
    }

    h1 {
        max-width: 16ch;
        font-family: var(--ff-heading);
        font-size: var(--fs-xl);
        font-weight: 700;
        text-transform: uppercase;
        line-height: 1.1;
        letter-spacing: 0.0333em;
    }

    .text {
        & p {
            max-width: 50ch;
            line-height: 1.5;
            font-size: var(--fs-600);
        }
    }

    a {
        display: inline-block;
        width: max-content;
        text-decoration: none;
        position: relative;
        font-size: var(--fs-600);
        font-weight: 600;
        color: var(--clr-ts-light);
    }

    a:after {
        content: "";
        display: block;
        width: 100%;
        height: 3px;
        background-color: var(--clr-ts-warm-red);
        position: absolute;
        left: 0;
        bottom: -0.05rem;
    }

    .copyright {
        margin-top: auto;
        grid-row: 2;
        grid-column: 1;
        font-size: var(--fs-300);

        & > * {
            display: inline-block;
        }
    }

    .typemark {
        margin: auto 0 0 auto;
        grid-row: 2;
        grid-column: 2;
        fill: var(--clr-ts-warm-red) !important;
        width: auto;
        max-width: 100%;
        height: auto;
        max-height: 3.125rem;
    }

    .logo {
        width: auto;
        margin-left: auto;
        height: 95vh;
        fill: var(--clr-ts-dark-logo) !important;
        z-index: -10;
        position: absolute;
        right: 0;
        bottom: 0;
        transform: translate3d(10vw, 10vh, 0);
    }
</style>
