/* =========================================================
   GABOBARS — PERSONAL SITE
========================================================= */

:root {

    --bg: #080606;

    --panel-bg:
        rgba(
            9,
            8,
            9,
            0.76
        );

    --panel-solid:
        rgba(
            8,
            7,
            8,
            0.97
        );

    --text:
        #d8d2cb;

    --text-soft:
        #aaa39c;

    --text-dim:
        #7f7872;

    --red:
        #8f1720;

    --red-hover:
        #b32630;

    --black-line:
        rgba(
            0,
            0,
            0,
            0.82
        );

    --panel-width:
        1380px;
}


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

* {
    box-sizing:
        border-box;
}


html {
    min-height:
        100%;

    scroll-behavior:
        smooth;
}


body {
    position:
        relative;

    margin:
        0;

    min-height:
        100vh;

    overflow-x:
        hidden;

    background:
        var(--bg);

    color:
        var(--text);

    font-family:
        "JetBrains Mono",
        Consolas,
        monospace;
}


/* =========================================================
   BACKGROUND
========================================================= */

.background-layer {

    position:
        fixed;

    inset:
        0;

    z-index:
        0;

    overflow:
        hidden;

    background:
        linear-gradient(
            90deg,
            #080405,
            #0a0607,
            #080405
        );
}


.background-layer img {

    position:
        absolute;

    inset:
        0;

    width:
        100vw;

    height:
        100vh;

    display:
        block;

    object-fit:
        cover;

    object-position:
        center center;

    opacity:
        0;

    transition:
        opacity
        500ms
        ease;
}


.background-layer.is-visible img {

    opacity:
        1;
}


.background-layer::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:
        linear-gradient(
            90deg,
            rgba(
                80,
                7,
                14,
                0.06
            ),
            transparent 16%,
            transparent 84%,
            rgba(
                80,
                7,
                14,
                0.06
            )
        );
}


/* =========================================================
   SCROLLING DECORATION
========================================================= */

.site-decor {

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        100%;

    height:
        100%;

    min-height:
        0;

    z-index:
        1;

    pointer-events:
        none;

    overflow:
        hidden;
}


/* =========================================================
   DECORATIVE GIFS
========================================================= */

.decor-item {

    position:
        absolute;

    display:
        block;

    margin:
        0;

    padding:
        0;

    pointer-events:
        none;

    overflow:
        hidden;

    opacity:
        0.60;

    transform-origin:
        center center;

    filter:
        saturate(
            0.70
        )
        contrast(
            0.95
        );

    /*
        Deliberately slightly slower / less "UI-like"
        than the rest of the site.
    */
    transition:
        opacity
        220ms
        ease,

        transform
        300ms
        cubic-bezier(
            0.2,
            0.7,
            0.2,
            1
        ),

        filter
        220ms
        ease;
}


.decor-item
.tenor-gif-embed {

    width:
        100%
        !important;

    margin:
        0
        !important;

    pointer-events:
        none
        !important;
}


.decor-item
.tenor-gif-embed
iframe {

    border:
        none
        !important;

    pointer-events:
        none
        !important;
}


/* =========================================================
   GHOST
========================================================= */

.decor-ghost {

    width:
        clamp(
            145px,
            13vw,
            230px
        );

    left:
        clamp(
            5px,
            2.6vw,
            36px
        );

    top:
        290px;

    transform:
        rotate(
            -4deg
        );
}


/* =========================================================
   OUTLAST #1
========================================================= */

.decor-outlast-one {

    width:
        clamp(
            145px,
            13vw,
            225px
        );

    right:
        clamp(
            5px,
            2.5vw,
            35px
        );

    /*
        Moved slightly upwards.
    */
    top:
        790px;

    transform:
        rotate(
            3deg
        );
}


/* =========================================================
   OUTLAST #2
========================================================= */

.decor-outlast-two {

    width:
        clamp(
            105px,
            9vw,
            155px
        );

    left:
        clamp(
            4px,
            3vw,
            42px
        );

    /*
        Moved upwards so it remains
        naturally inside the actual page.
    */
    top:
        1240px;

    transform:
        rotate(
            -6deg
        );

    opacity:
        0.42;
}


/* =========================================================
   KURUMI #1
========================================================= */

.decor-kurumi-one {

    width:
        clamp(
            125px,
            11vw,
            190px
        );

    right:
        clamp(
            12px,
            5vw,
            75px
        );

    top:
        380px;

    transform:
        rotate(
            4deg
        );
}


/* =========================================================
   KURUMI #2
========================================================= */

.decor-kurumi-two {

    width:
        clamp(
            110px,
            10vw,
            180px
        );

    left:
        clamp(
            12px,
            6vw,
            90px
        );

    /*
        Also moved upward.
    */
    top:
        1430px;

    transform:
        rotate(
            -3deg
        );

    opacity:
        0.50;
}


/* =========================================================
   SMALL STICKERS
========================================================= */

.decor-sticker {

    position:
        absolute;

    padding:
        5px
        8px;

    color:
        var(--text-soft);

    background:
        rgba(
            7,
            6,
            7,
            0.68
        );

    border:
        1px solid
        rgba(
            0,
            0,
            0,
            0.72
        );

    font:
        500
        9px
        / 1
        "JetBrains Mono",
        monospace;

    letter-spacing:
        0.06em;

    white-space:
        nowrap;

    opacity:
        0.53;

    user-select:
        none;

    pointer-events:
        none;

    /*
        Slightly imperfect shadow rather than
        a perfectly centered UI shadow.
    */
    box-shadow:
        2px
        3px
        0
        rgba(
            0,
            0,
            0,
            0.20
        );
}


/*
    These positions are intentionally
    not perfectly symmetrical.
*/

.sticker-online {

    left:
        7.3vw;

    top:
        710px;

    transform:
        rotate(
            -4deg
        );
}


.sticker-94 {

    right:
        5.6vw;

    top:
        1185px;

    transform:
        rotate(
            3deg
        );
}


.sticker-live {

    right:
        9.3vw;

    top:
        1650px;

    transform:
        rotate(
            -2deg
        );
}


.sticker-red {

    left:
        8.6vw;

    top:
        1040px;

    padding:
        0;

    border:
        none;

    background:
        transparent;

    box-shadow:
        none;

    color:
        var(--red);

    font-size:
        16px;

    opacity:
        0.40;

    transform:
        rotate(
            -8deg
        );
}


.sticker-eye {

    right:
        7.5vw;

    top:
        585px;

    padding:
        0;

    border:
        none;

    background:
        transparent;

    box-shadow:
        none;

    color:
        var(--red);

    font-size:
        15px;

    opacity:
        0.31;
}


/* =========================================================
   SMALL MARKS
========================================================= */

.decor-mark {

    position:
        absolute;

    color:
        var(--red);

    font-family:
        "JetBrains Mono",
        monospace;

    pointer-events:
        none;

    user-select:
        none;
}


.mark-one {

    left:
        3.1vw;

    top:
        480px;

    font-size:
        10px;

    letter-spacing:
        0.24em;

    opacity:
        0.40;

    transform:
        rotate(
            -90deg
        );
}


.mark-two {

    right:
        4.2vw;

    top:
        980px;

    font-size:
        10px;

    opacity:
        0.27;
}


.mark-three {

    left:
        5.4vw;

    top:
        1320px;

    font-size:
        14px;

    opacity:
        0.25;
}


.mark-four {

    right:
        3.7vw;

    top:
        1570px;

    font-size:
        10px;

    opacity:
        0.26;
}


/* =========================================================
   MAIN PANEL
========================================================= */

.site-shell {

    position:
        relative;

    z-index:
        2;

    width:
        min(
            calc(
                100% - 120px
            ),
            var(--panel-width)
        );

    margin:
        10vh
        auto
        6vh;
}


.site-panel {

    position:
        relative;

    background:
        var(--panel-bg);

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

    border-radius:
        0;

    backdrop-filter:
        blur(
            1.5px
        );

    -webkit-backdrop-filter:
        blur(
            1.5px
        );

    box-shadow:
        0
        18px
        50px
        rgba(
            0,
            0,
            0,
            0.28
        );

    opacity:
        0;

    transform:
        translateY(
            16px
        );

    overflow:
        hidden;
}


.site-panel.is-visible {

    animation:
        panel-enter
        500ms
        cubic-bezier(
            0.20,
            0.75,
            0.25,
            1
        )
        forwards;
}


@keyframes panel-enter {

    from {

        opacity:
            0;

        transform:
            translateY(
                16px
            );
    }

    to {

        opacity:
            1;

        transform:
            translateY(
                0
            );
    }
}


/* =========================================================
   HERO
========================================================= */

.hero {

    position:
        relative;

    min-height:
        clamp(
            650px,
            74vh,
            800px
        );

    padding:
        70px
        clamp(
            30px,
            6vw,
            100px
        )
        90px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}


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

.brand {

    position:
        absolute;

    top:
        48px;

    left:
        56px;
}


.brand h1 {

    margin:
        0;

    color:
        var(--text);

    font-family:
        "IM FELL English SC",
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        clamp(
            36px,
            2.6vw,
            42px
        );

    font-weight:
        500;

    line-height:
        1;

    letter-spacing:
        0.01em;
}


.brand-line {

    display:
        block;

    width:
        70%;

    height:
        2px;

    margin-top:
        8px;

    background:
        var(--red);
}


/* =========================================================
   LANGUAGE
========================================================= */

.language-toggle-wrap {

    position:
        absolute;

    top:
        50px;

    right:
        56px;
}


.language-toggle {

    position:
        relative;

    width:
        84px;

    height:
        30px;

    padding:
        2px;

    display:
        grid;

    grid-template-columns:
        1fr
        1fr;

    border:
        none;

    background:
        transparent;

    cursor:
        pointer;

    font:
        500
        11px
        "JetBrains Mono",
        monospace;
}


.toggle-option {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    transition:
        color
        180ms
        ease;
}


.toggle-indicator {

    position:
        absolute;

    top:
        2px;

    left:
        2px;

    width:
        calc(
            50% - 3px
        );

    height:
        calc(
            100% - 4px
        );

    background:
        #b6b2ad;

    transition:
        transform
        240ms
        ease;
}


.language-toggle[data-lang="pt"]
.toggle-option[data-lang="pt"],

.language-toggle[data-lang="en"]
.toggle-option[data-lang="en"] {

    color:
        #151313;
}


.language-toggle[data-lang="en"]
.toggle-indicator {

    transform:
        translateX(
            calc(
                100% + 2px
            )
        );
}


/* =========================================================
   HERO CENTER
========================================================= */

.hero-center {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        clamp(
            28px,
            3vw,
            42px
        );

    width:
        100%;

    text-align:
        center;
}


.avatar {

    display:
        block;

    width:
        clamp(
            250px,
            31vw,
            450px
        );

    height:
        auto;

    max-height:
        500px;

    object-fit:
        contain;
}


.hero-rotating {

    margin:
        0;

    color:
        var(--text-soft);

    font:
        400
        clamp(
            13px,
            1vw,
            16px
        )
        / 1.6
        "JetBrains Mono",
        monospace;
}


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

.content {

    width:
        min(
            calc(
                100% - 150px
            ),
            1050px
        );

    margin:
        0
        auto;

    padding-bottom:
        100px;
}


.content-section {

    margin-top:
        95px;
}


/* =========================================================
   SECTION TITLES
========================================================= */

.section-title {

    margin:
        0;

    color:
        var(--text);

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        clamp(
            28px,
            2.2vw,
            35px
        );

    font-weight:
        500;

    line-height:
        1;
}


.section-line {

    display:
        block;

    width:
        65px;

    height:
        2px;

    margin-top:
        8px;

    background:
        var(--red);
}


/* =========================================================
   ABOUT
========================================================= */

.about-copy {

    max-width:
        820px;

    margin:
        30px
        0
        0;

    color:
        var(--text-soft);

    font:
        400
        clamp(
            14px,
            1vw,
            17px
        )
        / 1.85
        "JetBrains Mono",
        monospace;

    text-align:
        justify;
}


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

.social-section {

    margin-top:
        75px;
}


.social-links {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        wrap;
}


.social-links a {

    padding:
        5px
        12px;

    color:
        var(--text-soft);

    text-decoration:
        none;

    font:
        500
        12px
        / 1.5
        "JetBrains Mono",
        monospace;

    transition:
        color
        150ms
        ease;
}


.social-links a:hover {

    color:
        var(--red-hover);
}


.social-divider {

    width:
        1px;

    height:
        13px;

    background:
        var(--red);
}


/* =========================================================
   CURRENT INTERESTS
========================================================= */

.interests-section {

    margin-top:
        110px;
}


.interest-grid {

    display:
        grid;

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

    gap:
        15px
        18px;

    margin-top:
        38px;
}


.interest-button {

    min-height:
        48px;

    padding:
        12px
        18px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(
            0,
            0,
            0,
            0.65
        );

    background:
        rgba(
            8,
            7,
            8,
            0.14
        );

    color:
        var(--text-soft);

    text-decoration:
        none;

    text-align:
        center;

    font:
        500
        12px
        / 1.2
        "JetBrains Mono",
        monospace;

    transition:
        color
        150ms
        ease;
}


.interest-button:hover {

    color:
        var(--red-hover);
}


.interest-group-gap {

    grid-column:
        1 / -1;

    height:
        20px;

    position:
        relative;
}


.interest-group-gap::before {

    content:
        "";

    position:
        absolute;

    left:
        14%;

    right:
        14%;

    top:
        50%;

    height:
        1px;

    background:
        rgba(
            142,
            23,
            32,
            0.24
        );
}


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

.site-footer {

    margin-top:
        120px;
}


.footer-line {

    width:
        100%;

    height:
        1px;

    background:
        rgba(
            120,
            115,
            110,
            0.28
        );
}


.footer-row {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        25px;

    padding-top:
        18px;

    color:
        var(--text-dim);

    font:
        400
        11px
        / 1.5
        "JetBrains Mono",
        monospace;
}


.footer-row p {

    margin:
        0;
}


/* =========================================================
   MUSIC PLAYER
========================================================= */

.music-player {

    position:
        fixed;

    right:
        24px;

    bottom:
        24px;

    z-index:
        10;

    width:
        350px;

    padding:
        15px
        16px;

    background:
        rgba(
            8,
            7,
            8,
            0.36
        );

    border:
        1px solid
        rgba(
            0,
            0,
            0,
            0.78
        );

    transition:
        background
        180ms
        ease;
}


.music-player:hover,
.music-player:focus-within {

    background:
        var(--panel-solid);
}


.player-label {

    margin-bottom:
        10px;

    color:
        var(--text-soft);

    font:
        500
        11px
        "JetBrains Mono",
        monospace;
}


.player-controls-row {

    display:
        grid;

    grid-template-columns:
        auto
        minmax(
            0,
            1fr
        )
        auto
        auto;

    align-items:
        center;

    gap:
        10px;
}


.play-button,
.volume-button {

    padding:
        0;

    border:
        none;

    background:
        transparent;

    color:
        var(--text-soft);

    cursor:
        pointer;

    font:
        500
        14px
        "JetBrains Mono",
        monospace;
}


.play-button:hover,
.volume-button:hover {

    color:
        var(--red-hover);
}


.progress-range {

    width:
        100%;

    accent-color:
        var(--red-hover);

    cursor:
        pointer;
}


.time-current {

    min-width:
        35px;

    color:
        var(--text-dim);

    font:
        400
        10px
        "JetBrains Mono",
        monospace;

    text-align:
        right;
}


.volume-popover {

    position:
        absolute;

    right:
        12px;

    bottom:
        calc(
            100% + 8px
        );

    width:
        120px;

    padding:
        10px;

    background:
        rgba(
            8,
            7,
            8,
            0.97
        );

    border:
        1px solid
        rgba(
            0,
            0,
            0,
            0.8
        );

    opacity:
        0;

    pointer-events:
        none;

    transform:
        translateY(
            4px
        );

    transition:
        opacity
        150ms
        ease,

        transform
        150ms
        ease;
}


.music-player.volume-open
.volume-popover {

    opacity:
        1;

    pointer-events:
        auto;

    transform:
        translateY(
            0
        );
}


#volumeRange {

    width:
        100%;

    accent-color:
        var(--red-hover);
}


/* =========================================================
   PANEL SHADOWS
========================================================= */

.panel-shadow {

    position:
        absolute;

    left:
        0;

    right:
        0;

    height:
        45px;

    pointer-events:
        none;

    z-index:
        3;
}


.panel-shadow-top {

    top:
        0;

    background:
        linear-gradient(
            to bottom,
            rgba(
                0,
                0,
                0,
                0.17
            ),
            transparent
        );
}


.panel-shadow-bottom {

    bottom:
        0;

    background:
        linear-gradient(
            to top,
            rgba(
                0,
                0,
                0,
                0.17
            ),
            transparent
        );
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .site-shell {

        width:
            calc(
                100% - 50px
            );
    }


    .hero {

        min-height:
            650px;

        padding:
            60px
            45px
            70px;
    }


    .brand {

        left:
            40px;
    }


    .language-toggle-wrap {

        right:
            40px;
    }


    .content {

        width:
            calc(
                100% - 90px
            );
    }


    .avatar {

        width:
            50vw;

        max-height:
            420px;
    }


    .decor-item {

        opacity:
            0.40;
    }


    .decor-ghost {

        width:
            125px;

        left:
            5px;
    }


    .decor-outlast-one {

        width:
            125px;

        right:
            5px;

        top:
            710px;
    }


    .decor-outlast-two {

        width:
            90px;

        left:
            5px;

        top:
            1120px;
    }


    .decor-kurumi-one {

        width:
            105px;

        right:
            5px;

        top:
            350px;
    }


    .decor-kurumi-two {

        width:
            95px;

        left:
            10px;

        top:
            1260px;
    }


    .decor-sticker {

        opacity:
            0.30;
    }


    .decor-mark {

        opacity:
            0.22;
    }

}


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

@media (max-width: 680px) {

    .site-shell {

        width:
            calc(
                100% - 20px
            );

        margin-top:
            7vh;
    }


    .hero {

        min-height:
            590px;

        padding:
            35px
            20px
            65px;
    }


    .brand {

        top:
            28px;

        left:
            22px;
    }


    .language-toggle-wrap {

        top:
            28px;

        right:
            18px;
    }


    .hero-center {

        gap:
            26px;
    }


    .avatar {

        width:
            76vw;

        max-height:
            390px;
    }


    .content {

        width:
            calc(
                100% - 36px
            );
    }


    .social-links a {

        padding-inline:
            7px;

        font-size:
            10px;
    }


    .interest-grid {

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


    .footer-row {

        font-size:
            10px;
    }


    .music-player {

        width:
            calc(
                100vw - 28px
            );

        right:
            14px;

        bottom:
            14px;
    }


    .decor-item {

        opacity:
            0.20;
    }


    .decor-ghost {

        width:
            95px;

        left:
            -35px;

        top:
            230px;
    }


    .decor-outlast-one {

        width:
            100px;

        right:
            -32px;

        top:
            700px;
    }


    .decor-outlast-two {

        width:
            75px;

        left:
            -25px;

        top:
            1060px;
    }


    .decor-kurumi-one {

        width:
            90px;

        right:
            -28px;

        top:
            390px;
    }


    .decor-kurumi-two {

        width:
            82px;

        left:
            -25px;

        top:
            1220px;
    }


    .decor-sticker {

        display:
            none;
    }

}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 430px) {

    .brand h1 {

        font-size:
            33px;
    }


    .language-toggle {

        width:
            76px;
    }


    .hero {

        min-height:
            540px;
    }


    .avatar {

        width:
            80vw;
    }


    .interest-grid {

        grid-template-columns:
            1fr;
    }


    .footer-row {

        font-size:
            9px;
    }


    .decor-item {

        opacity:
            0.14;
    }


    .decor-ghost {

        width:
            78px;

        left:
            -30px;

        top:
            220px;
    }


    .decor-outlast-one {

        width:
            82px;

        right:
            -30px;

        top:
            650px;
    }


    .decor-outlast-two {

        width:
            65px;

        left:
            -28px;

        top:
            980px;
    }


    .decor-kurumi-one {

        width:
            72px;

        right:
            -28px;

        top:
            370px;
    }


    .decor-kurumi-two {

        width:
            68px;

        left:
            -27px;

        top:
            1120px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    * {

        animation:
            none !important;

        transition:
            none !important;
    }

}