:root {

    --bg: #030205;
    --purple: #9b4dff;
    --purple-light: #c084fc;
    --text: #f5f3f7;
    --muted: #918b9b;
    --border: rgba(177, 92, 255, 0.18);

    --card: rgba(15, 10, 21, 0.68);

    --font: "Inter", sans-serif;
    --mono: "Space Mono", monospace;

}


* {

    margin: 0;
    padding: 0;
    box-sizing: border-box;

}


html,
body {

    width: 100%;
    min-height: 100%;

}


body {

    background: #030205;

    color: var(--text);

    font-family: var(--font);

    overflow-x: hidden;

}


button,
a {

    font: inherit;

}


button {

    border: 0;

}


/* =====================================================
   INTRO
===================================================== */


.intro-screen {

    position: fixed;

    inset: 0;

    z-index: 9999;

    display: flex;

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

    background:

        radial-gradient(
            circle at center,
            rgba(92, 25, 150, 0.13),
            transparent 45%
        ),

        #020103;

    transition:
        opacity 1s ease,
        visibility 1s ease;

}


.intro-screen.hide {

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

}


#matrixCanvas {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    opacity: 0.55;

}


.intro-noise {

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: 0.05;

    background-image:

        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");

}


.intro-content {

    position: relative;

    z-index: 5;

    width: min(850px, 90%);

    text-align: center;

    font-family: var(--mono);

}


.intro-line {

    min-height: 130px;

    font-size: clamp(22px, 4vw, 48px);

    line-height: 1.4;

    text-shadow:

        0 0 15px rgba(177, 92, 255, 0.5),

        0 0 50px rgba(177, 92, 255, 0.15);

}


.cursor {

    color: var(--purple-light);

    animation: blink 0.7s infinite;

}


@keyframes blink {

    50% {
        opacity: 0;
    }

}


/* =====================================================
   PARTÍCULAS
===================================================== */


#particleCanvas {

    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 2;

    pointer-events: none;

    opacity: 0;

    transition: opacity 1.5s ease;

}


/* =====================================================
   APP
===================================================== */


.app {

    position: relative;

    width: 100%;

    min-height: 100vh;

    padding: 40px 20px;

    background:

        radial-gradient(
            circle at 50% 10%,
            rgba(117, 45, 190, 0.10),
            transparent 32%
        ),

        radial-gradient(
            circle at 20% 80%,
            rgba(92, 25, 150, 0.07),
            transparent 35%
        ),

        #030205;

}


.app::before {

    content: "";

    position: fixed;

    inset: 0;

    pointer-events: none;

    z-index: 1;

    opacity: 0.10;

    background-image:

        radial-gradient(
            rgba(255,255,255,0.5) 0.5px,
            transparent 0.5px
        );

    background-size: 4px 4px;

}


.hidden {

    display: none;

}


.page {

    width: min(620px, 100%);

    margin: 0 auto;

    position: relative;

    z-index: 3;

    animation: pageIn 0.9s ease both;

}


.page:not(.active) {

    display: none;

}


@keyframes pageIn {

    from {

        opacity: 0;

        transform: translateY(20px);

        filter: blur(10px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

        filter: blur(0);

    }

}


/* =====================================================
   PERFIL
===================================================== */


.profile {

    text-align: center;

    position: relative;

    margin-bottom: 24px;

}


.profile-glow {

    position: absolute;

    width: 220px;
    height: 220px;

    left: 50%;
    top: -70px;

    transform: translateX(-50%);

    background: var(--purple);

    filter: blur(110px);

    opacity: 0.15;

    pointer-events: none;

}


.avatar-wrapper {

    width: 112px;
    height: 112px;

    margin: 0 auto 18px;

    position: relative;

    display: grid;

    place-items: center;

}


.avatar-ring {

    position: absolute;

    inset: -4px;

    border-radius: 50%;

    background:

        conic-gradient(
            from 0deg,
            transparent,
            var(--purple),
            transparent,
            var(--purple-light),
            transparent
        );

    animation: spin 6s linear infinite;

}


@keyframes spin {

    to {
        transform: rotate(360deg);
    }

}


.avatar {

    position: relative;

    z-index: 2;

    width: 104px;
    height: 104px;

    border-radius: 50%;

    overflow: hidden;

    background: #09050d;

    border: 3px solid #100916;

    box-shadow:

        0 0 30px rgba(155, 77, 255, 0.25);

}


.avatar img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

}


.profile h1 {

    font-size: 26px;

    letter-spacing: -0.04em;

}


.username {

    margin-top: 4px;

    color: var(--muted);

    font-size: 13px;

    font-family: var(--mono);

}


.bio {

    margin: 18px auto 0;

    color: #bbb5c4;

    font-size: 14px;

    line-height: 1.7;

}


.bio span {

    color: var(--purple-light);

    font-family: var(--mono);

    font-size: 12px;

}


/* =====================================================
   REDES
===================================================== */


.socials {

    display: flex;

    justify-content: center;

    gap: 10px;

    margin-bottom: 26px;

}


.socials a {

    width: 42px;
    height: 42px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    border: 1px solid var(--border);

    background: rgba(255,255,255,0.025);

    text-decoration: none;

    transition:

        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;

}


.socials a img {

    width: 20px;
    height: 20px;

    object-fit: contain;

    opacity: 0.58;

    filter:

        invert(1)
        brightness(1.4);

    transition:

        opacity 0.25s ease,
        transform 0.25s ease;

}


.socials a:hover {

    transform: translateY(-4px);

    border-color: rgba(177,92,255,0.55);

    background: rgba(155,77,255,0.08);

    box-shadow:

        0 0 25px rgba(155,77,255,0.18);

}


.socials a:hover img {

    opacity: 1;

    transform: scale(1.08);

}


/* =====================================================
   LINKS
===================================================== */


.links {

    display: flex;

    flex-direction: column;

    gap: 13px;

}


.project-card {

    width: 100%;

    min-height: 78px;

    display: flex;

    align-items: center;

    gap: 15px;

    padding: 11px 15px;

    border-radius: 18px;

    border: 1px solid var(--border);

    background:

        linear-gradient(
            120deg,
            rgba(255,255,255,0.045),
            rgba(255,255,255,0.012)
        );

    backdrop-filter: blur(14px);

    color: var(--text);

    text-decoration: none;

    cursor: pointer;

    transition:

        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;

}


.project-card:hover {

    transform:
        translateY(-3px)
        scale(1.005);

    border-color:
        rgba(174,91,255,0.5);

    background:

        linear-gradient(
            120deg,
            rgba(155,77,255,0.12),
            rgba(255,255,255,0.025)
        );

    box-shadow:

        0 12px 40px rgba(0,0,0,0.35),

        0 0 35px rgba(155,77,255,0.08);

}


.project-icon {

    width: 52px;
    height: 52px;

    flex-shrink: 0;

    border-radius: 14px;

    overflow: hidden;

    background: #0b0710;

    border: 1px solid rgba(255,255,255,0.08);

}


.project-icon img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

}


.project-info {

    flex: 1;

    text-align: left;

}


.project-info strong {

    display: block;

    font-size: 15px;

    margin-bottom: 4px;

}


.project-info span {

    display: block;

    color: var(--muted);

    font-size: 12px;

}


.arrow {

    color: #7e7488;

    font-size: 22px;

    transition: 0.25s ease;

}


.project-card:hover .arrow {

    transform: translateX(4px);

    color: var(--purple-light);

}


/* =====================================================
   ASSINATURA
===================================================== */


.signature {

    text-align: center;

    margin-top: 38px;

    font-family: var(--mono);

    font-size: 9px;

    letter-spacing: 0.4em;

    color: #4e4655;

    animation: signatureGlow 4s ease-in-out infinite;

}


@keyframes signatureGlow {

    50% {

        color: #9a55d8;

        text-shadow:
            0 0 15px rgba(155,77,255,0.45);

    }

}


/* =====================================================
   GTA
===================================================== */


.gta-page {

    width: min(1000px, 100%);

}


.gta-header {

    display: flex;

    align-items: flex-start;

    gap: 18px;

    margin-bottom: 30px;

}


.back-button {

    width: 44px;
    height: 44px;

    flex-shrink: 0;

    border-radius: 50%;

    color: white;

    background: rgba(255,255,255,0.045);

    border: 1px solid var(--border);

    cursor: pointer;

    font-size: 20px;

    transition: 0.25s ease;

}


.back-button:hover {

    background: rgba(155,77,255,0.14);

    border-color: var(--purple);

}


.eyebrow {

    color: var(--purple-light);

    font-family: var(--mono);

    font-size: 10px;

    letter-spacing: 0.25em;

}


.gta-header h2 {

    margin-top: 5px;

    font-size: clamp(25px, 5vw, 38px);

    letter-spacing: -0.04em;

}


.gta-header p {

    margin-top: 7px;

    color: var(--muted);

    font-size: 13px;

}


/* =====================================================
   GRID
===================================================== */


.content-grid {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 16px;

}


.content-card {

    overflow: hidden;

    border-radius: 18px;

    border: 1px solid var(--border);

    background: var(--card);

    backdrop-filter: blur(14px);

    transition:

        transform 0.3s ease,
        border-color 0.3s ease;

}


.content-card:hover {

    transform: translateY(-4px);

    border-color:
        rgba(155,77,255,0.4);

}


.media-container {

    position: relative;

    aspect-ratio: 16 / 10;

    background: #000;

    overflow: hidden;

}


.media-container video,
.media-container img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

}


.image-media {

    cursor: zoom-in;

}


.image-media img {

    transition:
        transform 0.5s ease;

}


.image-media:hover img {

    transform: scale(1.05);

}


.media-type {

    position: absolute;

    top: 10px;
    left: 10px;

    padding: 5px 8px;

    border-radius: 6px;

    font-family: var(--mono);

    font-size: 8px;

    letter-spacing: 0.08em;

    color: white;

    background:
        rgba(0,0,0,0.65);

    border:
        1px solid rgba(255,255,255,0.1);

    backdrop-filter:
        blur(8px);

}


.content-info {

    min-height: 58px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 12px 13px;

}


.content-info strong {

    flex: 1;

    font-size: 13px;

}


.download-button {

    border:
        1px solid rgba(155,77,255,0.25);

    background:
        rgba(155,77,255,0.07);

    color: #c9a7e8;

    border-radius: 8px;

    padding: 7px 9px;

    font-size: 10px;

    cursor: pointer;

    transition: 0.25s ease;

}


.download-button:hover {

    background:
        rgba(155,77,255,0.17);

    border-color:
        rgba(155,77,255,0.5);

    color: white;

}


/* =====================================================
   IMAGE VIEWER
===================================================== */


.image-viewer {

    position: fixed;

    inset: 0;

    z-index: 15000;

    display: none;

    align-items: center;

    justify-content: center;

    padding: 30px;

    background:
        rgba(0,0,0,0.92);

    backdrop-filter:
        blur(14px);

}


.image-viewer.show {

    display: flex;

    animation:
        viewerIn 0.3s ease;

}


@keyframes viewerIn {

    from {

        opacity: 0;

        backdrop-filter:
            blur(0);

    }

    to {

        opacity: 1;

    }

}


.image-viewer img {

    max-width: 95vw;

    max-height: 90vh;

    object-fit: contain;

    border-radius: 8px;

    box-shadow:

        0 30px 100px
        rgba(0,0,0,0.8),

        0 0 60px
        rgba(155,77,255,0.08);

    animation:
        imageZoom 0.35s ease;

}


@keyframes imageZoom {

    from {

        transform:
            scale(0.92);

        opacity: 0;

    }

    to {

        transform:
            scale(1);

        opacity: 1;

    }

}


.image-viewer-close {

    position: absolute;

    top: 20px;
    right: 22px;

    width: 45px;
    height: 45px;

    border-radius: 50%;

    color: white;

    background:
        rgba(255,255,255,0.06);

    border:
        1px solid rgba(255,255,255,0.12);

    font-size: 28px;

    cursor: pointer;

}


/* =====================================================
   MODAL
===================================================== */


.modal {

    position: fixed;

    inset: 0;

    z-index: 10000;

    display: none;

    align-items: center;

    justify-content: center;

    padding: 20px;

    background:
        rgba(0,0,0,0.82);

    backdrop-filter:
        blur(12px);

}


.modal.show {

    display: flex;

    animation:
        modalIn 0.3s ease;

}


@keyframes modalIn {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}


.modal-box {

    position: relative;

    width: min(430px, 100%);

    padding: 35px 28px;

    text-align: center;

    border-radius: 24px;

    background:

        radial-gradient(
            circle at 50% 0,
            rgba(155,77,255,0.14),
            transparent 45%
        ),

        #0a070d;

    border:
        1px solid rgba(155,77,255,0.25);

    box-shadow:

        0 30px 100px rgba(0,0,0,0.6),

        0 0 70px rgba(155,77,255,0.1);

}


.modal-close {

    position: absolute;

    top: 13px;
    right: 15px;

    width: 32px;
    height: 32px;

    border-radius: 50%;

    background:
        rgba(255,255,255,0.05);

    color: #aaa;

    cursor: pointer;

    font-size: 20px;

}


.modal-icon {

    width: 58px;
    height: 58px;

    margin:
        0 auto 18px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color: var(--purple-light);

    background:
        rgba(155,77,255,0.1);

    border:
        1px solid rgba(155,77,255,0.25);

    font-size: 25px;

}


.modal-box h3 {

    font-size: 20px;

    margin-bottom: 10px;

}


.modal-box p {

    color: var(--muted);

    font-size: 13px;

    line-height: 1.6;

    margin-bottom: 20px;

}


.modal-button,
.verify-button {

    width: 100%;

    display: block;

    padding: 13px;

    border-radius: 12px;

    cursor: pointer;

    text-decoration: none;

    font-weight: 600;

    font-size: 13px;

}


.modal-button {

    background: var(--purple);

    color: white;

    box-shadow:
        0 0 25px rgba(155,77,255,0.2);

}


.verify-button {

    margin-top: 9px;

    color: #aaa;

    background:
        rgba(255,255,255,0.04);

    border:
        1px solid rgba(255,255,255,0.08);

}


.modal-box small {

    display: block;

    margin-top: 18px;

    color: #5d5663;

    font-size: 9px;

    line-height: 1.5;

}


/* =====================================================
   MOBILE
===================================================== */


@media (max-width: 650px) {

    .app {

        padding:
            30px 15px;

    }


    .content-grid {

        grid-template-columns: 1fr;

    }


    .gta-header {

        margin-bottom: 22px;

    }


    .project-card {

        min-height: 72px;

    }


    .project-icon {

        width: 48px;
        height: 48px;

    }


    .content-info {

        min-height: 62px;

    }

}


@media (max-width: 380px) {

    .bio {

        font-size: 13px;

    }


    .project-info span {

        font-size: 11px;

    }

}