@import url("./vars.css");
@import url("./reset.css");
@import url("./keyframes.css");

body {
    display: flex;
    flex-direction: column;
    gap: 4em;
    min-height: 100dvh;
    padding-bottom: 4em;
    background: var(--clr-darkBlue);
    background-image:
        url("data:image/svg+xml, %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='75' height='125' viewbox='0 0 70 80'%3E%3Cpath fill='%23000' d='M34.641 0L69.282 20L69.282 60L34.641 80L0 60L0 20Z'%3E%3C/path%3E%3C/svg%3E%0A"),
        url("data:image/svg+xml, %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='75' height='125' viewbox='0 0 70 80'%3E%3Cpath fill='%23000' d='M34.641 0L69.282 20L69.282 60L34.641 80L0 60L0 20Z'%3E%3C/path%3E%3C/svg%3E%0A"),
        linear-gradient(90deg, var(--clr-darkRed), var(--clr-darkBlue));
    background-size: 1.2em 2em, 1.2em 2em, 100% 100%;
    background-position: 0 0, 0.6em 1em, 0 0;
}

.backlink {
    padding: 0.5em;
}

h1.header {
    display: flex;
    flex-direction: column;
    text-align: center;
    font-size: min(80px, 12vw);
    font-weight: 700;
    font-style: italic;
    letter-spacing: -0.05em;
    line-height: 0.9;

    .full {
        translate: -0.6em;
    }
    
    .outline {
        translate: 0.6em;
        color: var(--clr-background);
        text-shadow:
            0 0 1px var(--clr-neon-1),
            0 0 2px var(--clr-neon-1),
            0 0 3px var(--clr-neon-1),
            0 0 5px var(--clr-neon-1),
            0 0 8px var(--clr-neon-1),
            0 0 13px var(--clr-neon-1);
    }
}

.topBar {
    position: sticky;
    top: 0;
    background: var(--clr-background);
    padding: 1em;
    border-block: 1px solid var(--clr-mid);
    z-index: var(--z-top);
    overflow: auto;
}

.loading {
    text-align: center;
    font-size: 1.25em;

    &::after {
        content: '';
        display: inline-block;
        width: 2ch;
        text-align: left;
        animation: loadingAfter 1s step-end infinite;
    }
}

.feed-err {
    text-align: center;
    font-size: 1.25em;
    color: var(--clr-neon-7);
}

.feed-msg {
    grid-column: 1 / -1;
    text-align: center;
    font-size: 1em;
    color: var(--clr-neon-2);
}

.controls {
    display: none;
    flex-wrap: nowrap;
    width: min-content;
    gap: 1.5em;
    justify-content: center;
    align-items: center;
    margin-inline: auto;

    input {
        display: none;
    }

    .controls-filters {
        list-style: none;
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        gap: 0.5em;
    }

    label, .controls-sorting {
        display: block;
        padding: 0.25em 0.5em;
        border: 1px solid var(--clr-mid);
        cursor: pointer;
        font-size: 0.9em;
        white-space: nowrap;
        transition: all 0.2s;

        &:hover {
            border-color: var(--clr-neon-2);
            opacity: 0.8;
        }

        &:has(:checked) {
            background: var(--clr-neon-2);
            border-color: var(--clr-neon-2);
            color: #000;
        }
    }
}


/* Feed Grid */
.feed-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2em;
    width: min(100%, 1200px);
    margin-inline: auto;
    padding: 2em;
}

.feed-item {
    background: var(--clr-surface-light);
    border: 1px solid var(--clr-mid);
    border-radius: 0.5em;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.3s;

    &:hover {
        translate: 0 -5px;
        border-color: var(--clr-neon-1);
    }

    .item-thumb {
        width: 100%;
        aspect-ratio: 16 / 9;
        object-fit: cover;
    }
    
    .item-content {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        gap: 0.5em;
        padding: 1em;
    }
    
    .item-date {
        font-size: 0.85rem;
        color: var(--clr-neon-0);
    }
    
    .item-title {
        font-size: 1.25rem;
        line-height: 1.3;
    }
    
    .item-description {
        flex-grow: 1;
        opacity: 0.8;
    }
}

.item-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    padding-block: 0.5em;

    .tag {
        font-size: 0.75em;
        padding: 0.25em 0.5em;
        background: var(--clr-neon-0);
        border-radius: 0.25em;
        opacity: 0.8;
    }
}

.item-links {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    border-top: 1px solid var(--clr-mid);
    padding-top: 1em;

    .link {
        font-weight: 300;
        font-size: 0.9em;
    }
}