* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: linear-gradient(135deg, rgb(22, 4, 29), rgb(35, 7, 46));
    font-family: "Inter", sans-serif;
    color: white;
    overflow-x: hidden;
}

.header {
    position: fixed;
    top: 0;
    left: 0.5vw;
    width: 99vw;
    z-index: 1000;
    box-sizing: border-box;

    padding: 35px;
    margin-top: 0.5vw;

    background: linear-gradient(
        to right,
        rgb(28, 9, 36),
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 0)
    );

    backdrop-filter: blur(6px);
    /* background: radial-gradient(circle, rgb(222, 222, 222), rgb(255, 255, 255)); */

    outline: 2px solid rgba(171, 60, 214, 0.347);
    border-radius: 10px;
    color: white;

    filter: blur(20px);
    opacity: 0;
    transition: filter 2s ease, opacity 1s ease;
}

.header.loaded {
    position: fixed;
    top: 0;
    left: 0.5vw;
    width: 99vw;
    z-index: 1000;
    box-sizing: border-box;

    padding: 35px;
    margin-top: 0.5vw;

    background: linear-gradient(
        to right,
        rgb(28, 9, 36),
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 0)
    );

    backdrop-filter: blur(6px);
    /* background: radial-gradient(circle, rgb(222, 222, 222), rgb(255, 255, 255)); */

    outline: 2px solid rgba(171, 60, 214, 0.347);
    border-radius: 10px;
    color: white;

    filter: blur(0px);
    opacity: 1;
}

.header a {
    color: rgba(255, 255, 255, 0.685);
    outline: 2px solid rgba(171, 60, 214, 0.347);

    text-align: center;
    padding: 12px;
    text-decoration: none;

    font-family: "Inter", sans-serif;
    font-size: 18px;
    line-height: 12px;

    border-radius: 4px;
}

.header a:hover {
    color: rgb(189, 68, 237);
    transition: color 0.2s ease;
}

.header a.active {
    background-color: rgb(171, 60, 2141);
    color: white;
}

.header-right {
    float: right;
}

.header .logo {
    position: absolute;
    top: 48%;

    transform: translateY(-51%) translateX(-40px);

    height: 110px;
    width: auto;

    filter:
        drop-shadow(0 0 0 rgba(171, 60, 214, 0.347))
        drop-shadow(1px 0 0 rgba(171, 60, 214, 0.347))
        drop-shadow(-1px 0 0 rgba(171, 60, 214, 0.347))
        drop-shadow(0 1px 0 rgba(171, 60, 214, 0.347))
        drop-shadow(0 -1px 0 rgba(171, 60, 214, 0.347));
}


/* Spacer so content doesn't hide under fixed header */
.spacing {
    height: 160px;
}

/* ===== TITLE SECTION ===== */
.title-div {
    position: relative;
    height: 1220px;

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;
    overflow: hidden;
}

/* Title text */
.title-text {
    position: relative;
    bottom: 75px;
    z-index: 2;
    margin: 0;

    font-size: clamp(4rem, 10vw, 7rem);

    text-shadow:
        0 0 5px rgba(171, 60, 214, 0.6),
        0 0 10px rgba(171, 60, 214, 0.5),
        0 0 20px rgba(171, 60, 214, 0.4);

    transform: scale(0);
    animation: growText 0.7s forwards ease;
}

@keyframes growText {
    0% { transform: scale(2); opacity: 0;}
    100% { transform: scale(1);  opacity: 1;}
}


/* Top tilted shape */
.top-tilted-box {
    position: absolute;
    top: 0px;
    left: 0;

    width: 100%;
    height: 350px; /* taller so it can move */
    background: linear-gradient(135deg, rgba(171,60,214,0.35), rgba(171,60,214,0));
    clip-path: polygon(0 0, 100% 0, 100% 10%, 0 80%);
}

/* Bottom tilted shape */
.bottom-tilted-box {
    position: absolute;
    top: 800px; /* move it up safely */
    left: 0;

    width: 100%;
    height: 550px; /* taller so it can move */
    background: linear-gradient(135deg, rgba(171,60,214,0.1), rgba(171,60,214,0.35));
    clip-path: polygon(0 30%, 100% 0, 100% 70%, 0 40%);
}

/* Next section tilt */
.content-tilted-box {
    margin-top: -180px; /* overlap slightly if desired */

    width: 100%;
    height: 320px;

    background: linear-gradient(135deg, rgba(171,60,214,0.35), rgba(171,60,214,0.12));
    clip-path: polygon(0 0, 100% 50%, 100% 70%, 0 100%);
}

.content {
    padding: 0;
    margin: 0;
}
.content p {
    margin: 0;
    padding: 0;
}

.page-wrapper {
    filter: blur(20px);
    opacity: 0;
    transition: filter 2s ease, opacity 1s ease;
}

.page-wrapper.loaded {
    filter: blur(0);
    opacity: 1;
}


/* ===== BUTTON ===== */
a.email-link {
    display: inline-block;
    margin: 40px auto;

    padding: 10px 20px;
    border-radius: 5px;

    background-color: rgb(171, 60, 214);
    color: white;
    text-decoration: none;
}

a.email-link:hover {
    background-color: rgb(189, 68, 237);
}

/* ===== MOBILE ===== */
@media (max-width: 500px) {
    .header a {
        display: block;
        margin: 8px 0;
    }

    .header-right {
        float: none;
    }

    .header .logo {
        opacity: 0;
        pointer-events: none;
    }
}