/* =========================================================
   ANAVOYD STUDIO — EQUIPE
========================================================= */

:root {

    --black: #050505;
    --yellow: #ffe600;
    --gold: #ffb700;
    --white: #f5f5f0;
    --gray: #858575;
    --dark-gray: #24241b;
    --border: #30301e;

}


/* =========================================================
   RESET
========================================================= */

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


html {
    scroll-behavior: smooth;
}


body {

    min-height: 100vh;

    background: var(--black);

    color: var(--white);

    font-family:
        'JetBrains Mono',
        monospace;

    overflow-x: hidden;

}


/* =========================================================
   FUNDO
========================================================= */

.background {

    position: fixed;

    inset: 0;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(255, 230, 0, .07),
            transparent 35%
        ),
        radial-gradient(
            circle at 10% 80%,
            rgba(255, 183, 0, .035),
            transparent 30%
        ),
        #050505;

    z-index: -10;

}


.grid-background {

    position: fixed;

    inset: -100px;

    background-image:
        linear-gradient(
            rgba(255, 230, 0, .035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 230, 0, .035) 1px,
            transparent 1px
        );

    background-size: 55px 55px;

    transform:
        perspective(600px)
        rotateX(58deg)
        scale(1.8);

    transform-origin: center bottom;

    opacity: .5;

    animation:
        gridMove 18s linear infinite;

    z-index: -9;

}


@keyframes gridMove {

    from {
        background-position: 0 0, 0 0;
    }

    to {
        background-position: 0 55px, 55px 0;
    }

}


/* =========================================================
   BRILHO
========================================================= */

.ambient-glow {

    position: fixed;

    width: 700px;
    height: 700px;

    left: 50%;
    top: 45%;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 230, 0, .07),
            transparent 65%
        );

    filter: blur(30px);

    animation:
        glowPulse 6s ease-in-out infinite;

    z-index: -8;

}


@keyframes glowPulse {

    0%,
    100% {
        opacity: .45;
        transform:
            translate(-50%, -50%)
            scale(.9);
    }

    50% {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            scale(1.15);
    }

}


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

.particles {

    position: fixed;

    inset: 0;

    pointer-events: none;

    z-index: -4;

}


.particles span {

    position: absolute;

    width: 2px;
    height: 2px;

    background: var(--yellow);

    box-shadow:
        0 0 8px var(--yellow);

    opacity: 0;

    animation:
        particleFloat 9s linear infinite;

}


.particles span:nth-child(1) {
    left: 10%;
    top: 90%;
}

.particles span:nth-child(2) {
    left: 22%;
    top: 70%;
    animation-delay: 2s;
}

.particles span:nth-child(3) {
    left: 38%;
    top: 85%;
    animation-delay: 4s;
}

.particles span:nth-child(4) {
    left: 51%;
    top: 75%;
    animation-delay: 1s;
}

.particles span:nth-child(5) {
    left: 66%;
    top: 90%;
    animation-delay: 3s;
}

.particles span:nth-child(6) {
    left: 78%;
    top: 65%;
    animation-delay: 5s;
}

.particles span:nth-child(7) {
    left: 90%;
    top: 85%;
    animation-delay: 2s;
}

.particles span:nth-child(8) {
    left: 57%;
    top: 40%;
    animation-delay: 6s;
}


@keyframes particleFloat {

    0% {
        transform: translateY(0);
        opacity: 0;
    }

    15% {
        opacity: .7;
    }

    80% {
        opacity: .3;
    }

    100% {
        transform: translateY(-300px);
        opacity: 0;
    }

}


/* =========================================================
   SCANLINES
========================================================= */

.scanlines {

    position: fixed;

    inset: 0;

    pointer-events: none;

    z-index: 100;

    background:
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 3px,
            rgba(255,255,255,.018) 4px
        );

    animation:
        scanMove 10s linear infinite;

}


@keyframes scanMove {

    from {
        background-position: 0 0;
    }

    to {
        background-position: 0 100vh;
    }

}


/* =========================================================
   VINHETA
========================================================= */

.vignette {

    position: fixed;

    inset: 0;

    pointer-events: none;

    z-index: 99;

    background:
        radial-gradient(
            circle,
            transparent 45%,
            rgba(0,0,0,.85) 100%
        );

}


/* =========================================================
   HEADER
========================================================= */

.header {

    position: sticky;

    top: 0;

    width: 100%;

    height: 90px;

    padding: 0 4%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    background:
        rgba(5,5,5,.82);

    backdrop-filter: blur(10px);

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

    z-index: 50;

}


.header::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -1px;

    width: 25%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            var(--yellow),
            transparent
        );

    animation:
        headerLine 5s ease-in-out infinite;

}


@keyframes headerLine {

    0%,
    100% {
        width: 18%;
    }

    50% {
        width: 35%;
    }

}


/* =========================================================
   BRAND
========================================================= */

.brand {

    display: flex;

    align-items: center;

    gap: 12px;

    text-decoration: none;

}


.brand img {

    width: 34px;
    height: 34px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 0 8px
            rgba(255,230,0,.35)
        );

    transition: .3s;

}


.brand:hover img {

    transform:
        rotate(-8deg)
        scale(1.08);

}


.brand span {

    font-family:
        'Rajdhani',
        sans-serif;

    font-size: 21px;

    font-weight: 700;

    letter-spacing: 3px;

    color: var(--white);

}


.brand span span {

    color: var(--yellow);

}


/* =========================================================
   NAV
========================================================= */

nav {

    display: flex;

    gap: 27px;

}


nav a {

    position: relative;

    color: var(--gray);

    text-decoration: none;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 2px;

    transition: .25s;

}


nav a:hover {

    color: var(--white);

    transform:
        translateY(-2px);

}


nav a.active {

    color: var(--yellow);

}


nav a::before {

    content: ">";

    position: absolute;

    left: -13px;

    color: var(--yellow);

    opacity: 0;

    transition: .2s;

}


nav a:hover::before,
nav a.active::before {

    opacity: 1;

}


nav a::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -9px;

    width: 0;
    height: 1px;

    background: var(--yellow);

    transition: .25s;

}


nav a:hover::after,
nav a.active::after {

    width: 100%;

}


/* =========================================================
   STATUS
========================================================= */

.system-status {

    display: flex;

    align-items: center;

    gap: 8px;

    color: var(--gray);

    font-size: 7px;

    letter-spacing: 2px;

}


.status-dot {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--yellow);

    box-shadow:
        0 0 8px var(--yellow);

    animation:
        blink 2s infinite;

}


@keyframes blink {

    50% {
        opacity: .25;
    }

}


/* =========================================================
   CONTAINER
========================================================= */

.container {

    width: min(1200px, 90%);

    margin: 0 auto;

    padding:
        80px 0 100px;

}


/* =========================================================
   CABEÇALHO
========================================================= */

.page-header {

    margin-bottom: 80px;

    animation:
        fadeUp .8s ease both;

}


.header-label {

    color: var(--yellow);

    font-size: 8px;

    letter-spacing: 4px;

    margin-bottom: 15px;

}


.page-header h1 {

    font-family:
        'Rajdhani',
        sans-serif;

    font-size:
        clamp(55px, 8vw, 105px);

    line-height: .9;

    letter-spacing: -3px;

}


.page-header h1 span {

    color: var(--yellow);

}


.page-header p {

    margin-top: 20px;

    color: var(--gray);

    font-size: 11px;

}


/* =========================================================
   SEÇÕES
========================================================= */

.section {

    margin-bottom: 90px;

}


.section-title {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 35px;

}


.section-title > span {

    color: var(--yellow);

    font-size: 9px;

}


.section-title h2 {

    font-family:
        'Rajdhani',
        sans-serif;

    font-size: 24px;

    letter-spacing: 2px;

}


.section-title div {

    height: 1px;

    flex: 1;

    background:
        linear-gradient(
            90deg,
            var(--border),
            transparent
        );

}


.section-description {

    max-width: 650px;

    color: var(--gray);

    font-size: 10px;

    line-height: 1.8;

    margin:
        -15px 0 35px;

}


/* =========================================================
   EQUIPE
========================================================= */

.team-grid {

    display: grid;

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

    gap: 18px;

}


.member-card {

    position: relative;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.008)
        );

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

    overflow: hidden;

    transition:
        transform .35s,
        border-color .35s;

    animation:
        fadeUp .8s ease both;

}


.member-card:hover {

    transform:
        translateY(-7px);

    border-color:
        rgba(255,230,0,.5);

}


.member-image {

    position: relative;

    width: 100%;

    height: 300px;

    overflow: hidden;

    background: #10100c;

}


.member-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    filter:
        grayscale(.15)
        contrast(1.05);

    transition:
        transform .6s,
        filter .6s;

}


.member-card:hover .member-image img {

    transform: scale(1.06);

    filter:
        grayscale(0)
        contrast(1.1);

}


.image-overlay {

    position: absolute;

    left: 12px;
    bottom: 12px;

    padding: 5px 8px;

    background:
        rgba(0,0,0,.75);

    border:
        1px solid rgba(255,230,0,.25);

    color: var(--yellow);

    font-size: 7px;

    letter-spacing: 2px;

}


.member-image.placeholder {

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        repeating-linear-gradient(
            45deg,
            #0b0b09,
            #0b0b09 10px,
            #11110d 10px,
            #11110d 20px
        );

}


.placeholder span {

    color: #555548;

    font-size: 9px;

    letter-spacing: 3px;

    animation:
        placeholderBlink 2s infinite;

}


@keyframes placeholderBlink {

    50% {
        opacity: .3;
    }

}


.member-info {

    padding: 22px;

}


.member-id {

    color: var(--yellow);

    font-size: 7px;

    letter-spacing: 3px;

}


.member-info h3 {

    font-family:
        'Rajdhani',
        sans-serif;

    font-size: 32px;

    margin:
        7px 0 12px;

    letter-spacing: 1px;

}


.member-info p {

    color: var(--gray);

    font-size: 9px;

    line-height: 1.8;

}


/* =========================================================
   CONTRIBUINTES
========================================================= */

.contributors-grid {

    display: grid;

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

    gap: 18px;

}


.contributor-card {

    display: flex;

    min-height: 180px;

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

    background:
        rgba(255,255,255,.018);

    overflow: hidden;

    transition:
        transform .3s,
        border-color .3s;

}


.contributor-card:hover {

    transform:
        translateY(-5px);

    border-color:
        rgba(255,230,0,.4);

}


.contributor-image {

    width: 180px;

    min-width: 180px;

    background: #10100c;

    overflow: hidden;

}


.contributor-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .5s;

}


.contributor-card:hover img {

    transform: scale(1.07);

}


.contributor-content {

    padding: 25px;

    display: flex;

    flex-direction: column;

    justify-content: center;

}


.contributor-content > span {

    color: var(--yellow);

    font-size: 7px;

    letter-spacing: 3px;

}


.contributor-content h3 {

    font-family:
        'Rajdhani',
        sans-serif;

    font-size: 28px;

    margin:
        7px 0 10px;

}


.contributor-content p {

    color: var(--gray);

    font-size: 9px;

    line-height: 1.7;

}


/* =========================================================
   ESPAÇO DISPONÍVEL
========================================================= */

.contributor-card.available {

    border-style: dashed;

    border-color:
        rgba(255,230,0,.18);

}


.available-icon {

    width: 180px;
    min-width: 180px;

    display: flex;

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

    font-family:
        'Rajdhani',
        sans-serif;

    font-size: 65px;

    color:
        rgba(255,230,0,.35);

    background:
        rgba(255,230,0,.015);

    transition: .3s;

}


.available:hover .available-icon {

    color: var(--yellow);

    text-shadow:
        0 0 20px
        rgba(255,230,0,.4);

}


.contribute-link {

    display: inline-block;

    width: fit-content;

    margin-top: 15px;

    color: var(--yellow);

    text-decoration: none;

    font-size: 8px;

    letter-spacing: 2px;

    transition: .25s;

}


.contribute-link:hover {

    color: var(--white);

    transform:
        translateX(5px);

}


/* =========================================================
   FINAL
========================================================= */

.team-footer {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-top: 40px;

    color: #464638;

    font-size: 7px;

    letter-spacing: 3px;

}


.team-footer div {

    height: 1px;

    flex: 1;

    background: var(--border);

}


/* =========================================================
   FOOTER
========================================================= */

footer {

    min-height: 45px;

    padding: 0 4%;

    display: flex;

    align-items: center;

    justify-content: space-between;

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

    color: #444438;

    font-size: 7px;

    letter-spacing: 2px;

}


/* =========================================================
   ANIMAÇÕES
========================================================= */

@keyframes fadeUp {

    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =========================================================
   RESPONSIVO
========================================================= */

@media (max-width: 950px) {

    .header {

        height: auto;

        min-height: 80px;

        padding:
            18px 4%;

        gap: 20px;

    }


    nav {

        gap: 15px;

    }


    .system-status {

        display: none;

    }


    .team-grid {

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

    }

}


@media (max-width: 700px) {

    .header {

        flex-direction: column;

    }


    nav {

        flex-wrap: wrap;

        justify-content: center;

    }


    .container {

        width: 92%;

        padding-top: 55px;

    }


    .team-grid,
    .contributors-grid {

        grid-template-columns: 1fr;

    }


    .member-image {

        height: 330px;

    }


    .contributor-card {

        flex-direction: column;

    }


    .contributor-image,
    .available-icon {

        width: 100%;

        min-width: 0;

        height: 220px;

    }


    .page-header h1 {

        font-size: 58px;

    }


    footer {

        gap: 15px;

        padding: 15px 4%;

    }

}


@media (max-width: 450px) {

    nav {

        gap: 12px;

    }


    nav a {

        font-size: 7px;

    }


    .page-header h1 {

        font-size: 48px;

    }


    .member-image {

        height: 280px;

    }

}