@font-face {
    font-family: 'gochi'; /* Любое имя для ссылки на шрифт в дальнейшем */
    src: url('fonts/gochi-hand.otf') format('opentype');
    font-weight: normal; /* или bold, если у вас жирный вариант */
    font-style: normal;  /* или italic, если это курсив */
}
@font-face {
    font-family: 'gnocchi'; /* Любое имя для ссылки на шрифт в дальнейшем */
    src: url('fonts/gnocchi.ttf') format('truetype');
    font-weight: normal; /* или bold, если у вас жирный вариант */
    font-style: normal;  /* или italic, если это курсив */
}
body {
    font-family: 'gochi', Inter, sans-serif;
}
html {
    user-select: none;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #030713;
}

a,
a:link,
a:visited,
a:hover,
a:active {
    color: inherit;
}
a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;

    text-decoration-color: currentColor;
}
#spotify-text-logo {
    display: flex;
    gap: 8px;

}
.circle {
    border-radius: 50%;
    background: rgba(91, 124, 255, 0.7);
    filter: blur(220px);
    position: fixed;
    overflow: hidden;
    z-index: -1;

    transform-origin: center;
    animation: pulse 8s ease-in-out infinite alternate;
}
.circle-left {
    top: calc(100% - 300px);
    --stop-position: 100px;
    --size: 300px;
    width: 300px;
    height: 300px;
    left: min(
            calc(100vw - var(--size)),
            var(--stop-position)
    );
}

.circle-right {
    --stop-position: 1300px;
    --size: 500px;
    top: -80px;
    width: 500px;
    height: 500px;
    left: min(
            calc(100vw - var(--size)),
            var(--stop-position)
    );
}

#main {
    display: flex;
    padding: 0 60px;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
    min-height: 62vh;
}

#hello-outer {
    margin-top: -100px;
    flex-wrap: wrap;
    align-content: center;
}

#center {
    /*padding: 130px 21vi 180px 21vi;*/
    width: 100%;
    display: grid;
    flex-direction: row;
    /*min-height: 35vh;*/
    gap: 150px;
    grid-auto-flow: column;
    align-items: center;
    justify-content: space-around;
}

h1, h2, h3, h4, h5, h6, p {
    color: rgba(33, 174, 205, 0.7);
    white-space: nowrap;
}

.vertical-block {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* контент начинается сверху */
}
#left {
    align-items: flex-end;     /* элементы прижаты к левому краю */
}
#right {
    align-items: flex-start;     /* элементы прижаты к левому краю */
}

#left-outer #discord-outer {
    display: none;
}

.generic-block {
    --padding-top: 12px;
    --padding-left: 14px;

    padding: var(--padding-top) var(--padding-left);
    backdrop-filter: blur(4px);
    cursor: pointer;
    transition: ease 0.2s;
    --accent: 255, 255, 255;
    border: 3px solid rgba(var(--accent), 0.25);
    border-radius: 16px;
    background: rgba(var(--accent), 0.15);
}

.generic-block:hover {
    border-color: rgba(var(--accent), 0.7);
    background: rgba(var(--accent), 0.25);
}

.hello {
    font-family: 'gnocchi', sans-serif;
    font-size: 2.3em;
    font-weight: 300;
    color: #1899B6;
    rotate: -3deg;
    line-height: 1.3;
}

#hello-subtitle {
    font-family: 'gnocchi', sans-serif;
    font-size: 1.5em;
    font-weight: 300;
    color: #1899B6;
    rotate: -3deg;
    line-height: 1.1;
}

.menu-item-text {
    font-size: 1.5em;
    color: #1899B6;
}

#header {
    padding-top: 30px;
    width: 100%;
    height: fit-content;
}

#menu {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    gap: 80px;
}

/* Основная карточка */

.music-card {
    padding-bottom: 0;
    --accent: 124, 255, 161;
    width: min(95%, 300px);
    font-family: 'Montserrat', sans-serif;
    overflow: hidden;

    /*border: 3px solid rgba(27, 255, 107, 0.3);*/

    /*background: rgba(144, 255, 124, 0.15);*/
    box-shadow:
            0 0 18px rgba(27, 195, 107, 0.12),
            inset 0 0 20px rgba(0, 0, 0, 0.08);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    color: #7cffa1;
    font-size: 14px;
    font-weight: 500;
}

.spotify {
    display: flex;
    align-items: center;
    gap: 5px;
}

.spotify b {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    width: 16px;
    height: 16px;

    border-radius: 50%;
    color: #152f3d;
    background: #1ED760;

    font-size: 14px;
}

/* Информация о треке */

.track {
    cursor: pointer;
    position: relative;

    display: flex;
    align-items: center;
    gap: 16px;

}

.cover {
    flex: 0 0 auto;

    width: 88px;
    height: 88px;

    object-fit: cover;
    border-radius: 16px;

    background:
            linear-gradient(135deg, #102342, #7d403d 55%, #142c31);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
}

.track-info {
    min-width: 0;
}

.track-info h1 {
    margin: 0 0 2px 0;

    color: white;
    font-size: 18px;
    line-height: 1.1;
    font-weight: 450;
}

.track-info p {
    margin: 0 0 16px 0;

    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    font-weight: 400;
}
.real-progress {
    transition: linear 0.19s;
}
.like-button {
    display: none;
    font-family: serif;
    position: absolute;
    top: 10px;
    right: 0px;

    padding: 0;
    border: 0;

    color: #ed414d;
    background: transparent;

    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

/* Проигрыватель */

.player {
    padding: 0 4px 0 0;
    width: 195px;
}

.time {
    display: flex;
    justify-content: space-between;

    margin-bottom: 2px;

    color: #91a5aa;
    font-size: 8px;
}

.progress {
    height: 3px;
    overflow: hidden;
    border-radius: 10px;
    background: #102b37;
}

.progress span {
    display: block;
    width: 30%;
    height: 100%;
    border-radius: inherit;
    background: #90FF7C;
}

/* Открытие месяца */

.discovery {
    --discovery-padding-top: 18px;

    box-sizing: border-box;
    width: calc(100% + var(--padding-left) * 2);
    padding: 6px 10px 4px 10px;
    margin: var(--padding-top) calc(var(--padding-left) * -1) 0 calc(var(--padding-left) * -1);
    min-height: 50px;

    background: rgba(11, 45, 55, 0.4);
}

.discovery-title {
    margin: 0 0 5px;

    color: #90FF7C;
    font-size: 10px;
    font-weight: 500;
}

.discovery-content {
    position: relative;

    display: flex;
    align-items: center;
    gap: 10px;
}

.discovery-cover {
    width: 30px;
    height: 30px;

    object-fit: cover;
    border-radius: 8px;

    background: linear-gradient(135deg, #ddd, #555);
}

.discovery-content h2 {
    margin: 0 0 2px;

    color: white;
    font-size: 12px;
    font-weight: 400;
}

.discovery-content p {
    margin: 0;

    color: rgba(255, 255, 255, 0.85);
    font-size: 10px;
    font-weight: 300;
    padding-bottom: 2px;
}

.glow {
    position: absolute;
    right: 3px;
    top: 50%;

    width: 35px;
    height: 35px;

    border-radius: 50%;
    transform: translateY(-50%);

    background: #08c765;
    filter: blur(16px);
    opacity: 0.8;
}

#spotify-quote {
    position: fixed;
    top: 40px;
    margin-left: 4px;
    rotate: -2deg;
    font-size: 20px;
}
.fade-in-up {
    animation: fade-in-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.fade-in-down {
    animation: fade-in-down 1.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.fade-in {
    animation: fade-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hello-fade-in {
    animation: fade-in 1s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 0.2s;
}
.hello-second-fade-in {
    animation: fade-in 1s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 0.4s;
}
.hello-subtitle-fade-in {
    animation: fade-in 1s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 0.6s;
}
.projects-card-fade-in-up {
    animation: fade-in-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hello-2 {
    margin-top: -20px;
}

/* Глобальный минималистичный scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(128, 128, 128, 0.45) transparent;
}

#projects-title {
    transition: ease 0.1s;
    font-size: 24px;
    font-weight: 200;
    position: fixed;
    opacity: 0;
    animation-delay: 0.6s;
}

.project-card {
    flex: 0 0 230px;
    overflow: hidden;
    padding: 0 14px;
    box-sizing: border-box;
    width: 230px;
    height: 160px;
    min-width: 230px;
    min-height: 160px;
    position: relative;
    font-family: 'Montserrat', sans-serif;
}

.project-title {
    top: 2px;
    left: 2px;
    color: rgb(var(--accent));
    font-size: 20px;
}

.project-description {
    text-wrap: auto;
    opacity: 0;
    transition: ease 0.4s;
    text-align: left;
    color: color-mix(in srgb, rgba(var(--accent), 0.7) 90%, white);
    font-weight: 600;
    position: absolute;
    top: 30px;
    left: 12px;
}

.project-roles {
    transition: ease 0.2s;
    text-align: right;
    color: color-mix(in srgb, rgba(var(--accent), 0.7) 90%, white);
    font-weight: 600;
    position: absolute;
    bottom: 0;
    right: 12px;
}
.project-icon {
    position: absolute;
    top: 70px;
    left: -3px;
    width: 80px;
    height: 80px;
    z-index: -1;
    transition: ease 0.2s;
}
#projects-list-outer {
    width: 100%;
    /*min-width: 0;*/
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 60px;
    margin-bottom: -60px;
}
.blurred-icon {
    filter: blur(10px);
    opacity: 0.5;
}
#projects-list {
    width: max-content;
    min-width: 100%;
    bottom: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 10px;

    padding-bottom: 60px;
    margin-bottom: -60px;
    overflow-x: auto;
}

/*.bitmap-background {*/
/*    z-index: -10;*/
/*    position: fixed;*/
/*    top: 100px;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    left: 10%;*/
/*    right: 10%;*/
/*    pointer-events: none;*/
/*}*/

.discord-icon {
    width: 70px;
    margin-left: 15px;
}
.discord-text {
    font-size: 20px;
    letter-spacing: 2px;
    font-weight: 200;
    color: #8f78a6;
}

.music-card-appear-perspective {
    animation: music-card-appear-perspective 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
    object-fit: cover;
    transform-origin: right center;
    filter: drop-shadow(18px 18px 14px rgba(0, 0, 0, 0.35));
}

.perspective-right {
    object-fit: cover;
    transform-origin: right center;
    transform: perspective(400px) rotateY(340deg);
    filter: drop-shadow(18px 18px 14px rgba(0, 0, 0, 0.35));
}
.perspective-left {
    object-fit: cover;
    transform-origin: left center;
    transform: perspective(400px) rotateY(20deg);
    filter: drop-shadow(18px 18px 14px rgba(0, 0, 0, 0.35));
}

canvas {
    pointer-events: auto;
    opacity: 0.1;
    z-index: -10;
    width: 100%;
    height: 700px;
    position: fixed;
    top: 30px;
    left: calc(50% - (100% / 2));
    image-rendering: pixelated; /* Сохраняет четкость квадратных точек */
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
@keyframes fade-in-down {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes music-card-appear-perspective {
    from {
        opacity: 0;
        transform: translateY(20px) perspective(400px) rotateY(360deg);
    }

    to {
        opacity: 1;
        transform: translateY(20px) perspective(400px) rotateY(357deg);
    }
}
@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes pulse {
    from {
        transform: scale(0.9);
    }

    to {
        transform: scale(1.15);
    }
}