@font-face {
    font-family: "sfpro_d";
    src: url(../../font/SF-Pro-Display-Medium.otf);
}

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

body {
    min-height: 100vh;
    width: 100%;
    font-family: 'sfpro_d', 'Times New Roman', Times, serif;
    overflow-x: hidden;
    cursor: none;
}

a, button, [onclick], .home-btn, .back-btn, .resume-btn {
    cursor: none;
}

a:not(.nav-shape):not(.home-btn):not(.back-btn):not(.resume-btn) {
    color: #000000;
}

#mousetrailer {
    height: 15px;
    width: 15px;
    background: black;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10000;
    pointer-events: none;
    opacity: 1;
    transition: opacity 250ms ease;
    display: none;
}

#background-animation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 11;
    pointer-events: none;
    background: none;

    & * {
        background: none;
    }

    &::before {
        content: 'vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsitevedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsitevedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsitevedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite';
        position: absolute;
        top: -50px;
        left: -100px;
        width: 300%;
        height: 300%;
        font-size: clamp(30px, 8vw, 80px);
        font-family: 'sfpro_d', 'inter', Times, serif;
        color: rgba(255, 255, 255, 0.05);
    }

    &>.bg-shape {
        position: absolute;
        opacity: 0.15;
        will-change: transform;

        &.triangle {
            width: 0;
            height: 0;
            border-left: 40px solid transparent;
            border-right: 40px solid transparent;
            border-bottom: 70px solid #ffffff;
            animation: float-and-roll-left 20s linear infinite;
        }

        &.triangle-reverse {
            width: 0;
            height: 0;
            border-left: 40px solid transparent;
            border-right: 40px solid transparent;
            border-bottom: 70px solid #ffffff;
            animation: float-and-roll-right 20s linear infinite;
        }

        &:nth-child(1) {
            top: 5%;
            animation-delay: 0s;
            animation-duration: 22s;
        }

        &:nth-child(2) {
            top: 15%;
            animation-delay: -5s;
            animation-duration: 25s;
        }

        &:nth-child(3) {
            top: 25%;
            animation-delay: -10s;
            animation-duration: 28s;
        }

        &:nth-child(4) {
            top: 35%;
            animation-delay: -15s;
            animation-duration: 20s;
        }

        &:nth-child(5) {
            top: 45%;
            animation-delay: -8s;
            animation-duration: 24s;
        }

        &:nth-child(6) {
            top: 55%;
            animation-delay: -12s;
            animation-duration: 26s;
        }

        &:nth-child(7) {
            top: 65%;
            animation-delay: -18s;
            animation-duration: 23s;
        }

        &:nth-child(8) {
            top: 75%;
            animation-delay: -3s;
            animation-duration: 27s;
        }

        &:nth-child(9) {
            top: 85%;
            animation-delay: -20s;
            animation-duration: 21s;
        }

        &:nth-child(10) {
            top: 95%;
            animation-delay: -14s;
            animation-duration: 29s;
        }
    }
}

.page-container {
    position: relative;
    z-index: 12;
    min-height: 100vh;
    width: 100%;
    padding: 60px 80px;
    background: transparent;
    pointer-events: auto;

    @media (max-width: 768px) {
        padding: 40px 20px;
    }
}

.page-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    margin-bottom: 60px;

    @media (max-width: 768px) {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        justify-content: center;

        & h1 {
            width: 100%;
            text-align: center;
        }
    }

    & h1 {
        font-size: 48px;
        color: #ffffff;
        background: none;

        @media (max-width: 768px) {
            font-size: 32px;
        }
    }

    & .resume-btn {
        font-family: 'sfpro_d', 'Times New Roman', Times, serif;
        font-size: clamp(12px, 2vw, 18px);
        color: #ffffff;
        text-decoration: none;
        padding: clamp(8px, 1.5vw, 12px) clamp(14px, 2.5vw, 24px);
        border: 2px solid #ffffff;
        border-radius: 30px;
        transition: all 300ms ease;
        background: none;
        white-space: nowrap;

        &:hover {
            background: #000000;
            border-color: #000000;
            color: #ffffff;
        }
    }

    & .home-btn {
        font-family: 'sfpro_d', 'Times New Roman', Times, serif;
        font-size: clamp(12px, 2vw, 18px);
        color: #ffffff;
        text-decoration: none;
        padding: clamp(8px, 1.5vw, 12px) clamp(14px, 2.5vw, 24px);
        border: 2px solid #ffffff;
        border-radius: 30px;
        transition: all 300ms ease;
        background: none;
        justify-self: end;
        grid-column: 3;
        white-space: nowrap;

        &:hover {
            background: #a69b8f;
            border-color: #a69b8f;
            color: #000000;
        }
    }
}

.nav-buttons {
    display: flex;
    gap: 12px;
    align-items: center;
}

.page-content {
    color: #ffffff;
    font-size: 18px;
    line-height: 1.6;
    background: none;

    & h2 {
        font-size: 32px;
        margin-bottom: 20px;
        background: none;

        @media (max-width: 768px) {
            font-size: 24px;
        }
    }

    & p {
        margin-bottom: 20px;
        background: none;
    }

    & section {
        margin-bottom: 60px;
        background: none;
    }
}

@media (hover: hover),
(pointer: fine) {
    #mousetrailer {
        display: block;
    }
}

/* Shape transition overlay */
#shape-transition {
    position: fixed;
    border-radius: 6rem;
    z-index: 9999;
    pointer-events: none;
    transform: scale(20);
    transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1), border-radius 400ms ease;
}

#shape-transition.shrink {
    transform: scale(1);
    border-radius: 6rem;
}

@keyframes float-and-roll-left {
    from {
        transform: translateX(-100px) rotate(0deg);
    }

    to {
        transform: translateX(calc(100vw + 100px)) rotate(-360deg);
    }
}

@keyframes float-and-roll-right {
    from {
        transform: translateX(calc(100vw + 100px)) rotate(0deg);
    }

    to {
        transform: translateX(-100px) rotate(360deg);
    }
}

/* =============================================================================
   CARD GRID (projects.html landing page)
   ============================================================================= */

.page-content>section:first-child {
    margin-bottom: 30px;
}

#cards {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 1123px;
    margin: 0 auto;
    justify-content: center;
}

#cards:hover>.card::after {
    opacity: 1;
}

.card {
    background-color: rgb(20, 20, 20);
    border-radius: 10px;
    cursor: none;
    display: flex;
    height: 304px;
    flex-direction: column;
    position: relative;
    width: calc(33.333% - 6px);
    text-decoration: none;
    color: inherit;
}

.card:hover::before {
    opacity: 1;
}

.card::before,
.card::after {
    border-radius: inherit;
    content: "";
    height: 100%;
    left: 0px;
    opacity: 0;
    position: absolute;
    top: 0px;
    transition: opacity 500ms;
    width: 100%;
}

.card::before {
    background: radial-gradient(800px circle at var(--mouse-x) var(--mouse-y),
            rgba(255, 255, 255, 0.06),
            transparent 40%);
    z-index: 3;
}

.card::after {
    background: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y),
            rgba(255, 255, 255, 0.4),
            transparent 40%);
    z-index: 1;
}

.card>.card-content {
    background-color: rgb(20, 20, 20);
    border-radius: inherit;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    inset: 1px;
    padding: 10px;
    position: absolute;
    z-index: 2;
}

.card.expanding {
    z-index: 9999;
    border-radius: 0 !important;
}

.card.expanding::before,
.card.expanding::after {
    display: none;
}

.card.expanding>.card-content {
    background-color: #000000;
}

.card.expanding .card-image,
.card.expanding .card-info-wrapper {
    opacity: 0;
}

/* =============================================================================
   CARD CONTENT
   ============================================================================= */

.card-image {
    align-items: center;
    display: flex;
    height: 16 / 9;
    justify-content: center;
    overflow: hidden;
    border-radius: 8px 8px 0 0;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.7;
    filter: grayscale(0.3);
    transition: opacity 300ms ease, filter 300ms ease;
}

.card:hover .card-image img {
    opacity: 1;
    filter: grayscale(0);
}

.card-info-wrapper {
    align-items: center;
    display: flex;
    flex-grow: 1;
    justify-content: flex-start;
    padding: 0px 16px;
}

.card-info {
    align-items: flex-start;
    display: flex;
    gap: 10px;
}

.card-info-title>h3 {
    font-size: 1.05em;
    line-height: 1.3;
    color: rgb(240, 240, 240);
    font-weight: 400;
    margin: 0;
}

.card-info-title>h4 {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8em;
    font-weight: 400;
    margin-top: 6px;
    line-height: 1.4;
}

/* =============================================================================
   CARD GRID RESPONSIVE
   ============================================================================= */

@media (max-width: 900px) {
    .card {
        width: calc(50% - 4px);
    }
}

@media (max-width: 600px) {

    @media (hover: none) {

        .card::before,
        .card::after {
            opacity: 1;
            --mouse-x: 50%;
            --mouse-y: 50%;
        }

        .card-image img {
            opacity: 1;
            filter: grayscale(0);
        }
    }

    #cards {
        gap: 6px;
    }

    .card {
        width: 100%;
        height: 234px;
    }

    .card-info-wrapper {
        padding: 0px 12px;
    }

    .card-info-title>h3 {
        font-size: 0.95em;
    }

    .card-info-title>h4 {
        font-size: 0.75em;
        margin-top: 4px;
    }
}

/* =============================================================================
   PROJECTS PAGE SPECIFIC
   ============================================================================= */

body:has(#cards) {
    overflow: hidden;
    height: 100vh;
    background-color: rebeccapurple;

    & .page-container {
        padding: 40px 60px;
        display: flex;
        flex-direction: column;
        height: 100vh;
    }

    & .page-header {
        margin-bottom: 30px;

        @media (max-width: 768px) {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
        }
    }

    & .home-btn {
        @media (max-width: 768px) {
            justify-self: unset;
            grid-column: unset;
        }
    }

    & .page-content {
        flex: 1;
        display: flex;
        align-items: center;
    }

    & #cards {
        width: 100%;
    }

    & .card {
        height: 260px;
    }

    & .card-image {
        height: 140px;
    }

    @media (max-width: 768px) {
        overflow-y: auto;
        height: auto;

        & .page-container {
            height: auto;
        }

        & .page-content {
            flex: none;
            display: block;
        }
    }
}