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

:root {
    --logo: url("/assets/img/logo.svg");
    --os-linux: url("/assets/img/os-linux.svg");
    --os-apple: url("/assets/img/os-apple.svg");
    --os-windows: url("/assets/img/os-windows.svg");

}
/* ── THEMES ── */
[data-mode="dark"] {
    --bg: #2b2b2b;
    --bg-end: #484935;
    --card-bg: var(--text);
    --card-text: var(--bg);
    /* --card-footer-bg: #1c1c1c; */
    /* --border: #263626; */
    --text: #bec394;
    --kofi: url("kofi-dark.png");
}
[data-mode="light"] {
    --bg: #d9e1d6;
    --bg-end: #afb383;
    --card-bg: #ffffff;
    --card-text: #333;
    /* --card-footer-bg: #1c1c1c; */
    /* --border: #d8d3cb; */
    --text: #333;
    --kofi: url("kofi-light.png");
}

/* ── AEW OVERRIDES ── */
/* [data-mode="dark"] .audio-elem-wrapper {
    --aew-track-empty: #3abb20;
}
[data-mode="light"] .audio-elem-wrapper {
    --aew-track-empty: #db1717;
} */

body {
    font-family: "Red Hat Mono", monospace;
    font-size: 16px;
    background: linear-gradient(160deg, var(--bg) 0%, var(--bg-end) 100%);
    background-attachment: fixed;
    color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Annie Use Your Telescope";
    letter-spacing: 0.1em;
}

/* ── HEADER ── */
.site-header {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    align-items: center;
    background-size: cover;
    background-position: center;
    padding: 2rem;
    text-align: center;
    color: var(--text);
    font-size: 2rem;
}
.site-header .left {
    text-align: left;
}
.site-header .right {
    text-align: right;
}
.site-header .logo {
    width: 80px;
    height: 80px;
    background-color: var(--text);
    -webkit-mask: var(--logo) no-repeat center / contain;
    mask: var(--logo) no-repeat center / contain;
    transition: transform 1s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.site-header .logo:hover {
    transform: rotate(180deg);
}

/* ── FOOTER ── */

.site-header h1:hover {
    animation: shake 0.6s cubic-bezier(.36,.07,.19,.97) both;
}

/* @keyframes shake {
    0% { transform: translateX(0); }
    10% { transform: translateX(-10px); }
    20% { transform: translateX(10px); }
    30% { transform: translateX(-10px); }
    40% { transform: translateX(10px); }
    50% { transform: translateX(-6px); }
    60% { transform: translateX(6px); }
    70% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
    90% { transform: translateX(-1px); }
    100% { transform: translateX(0); }
} */
@keyframes shake {
    0%   { transform: translate(0, 0); }
    10%  { transform: translate(-8px, 5px); }
    20%  { transform: translate(6px, -7px); }
    30%  { transform: translate(-5px, 9px); }
    40%  { transform: translate(7px, -6px); }
    50%  { transform: translate(-6px, 4px); }
    60%  { transform: translate(5px, -5px); }
    70%  { transform: translate(-4px, 6px); }
    80%  { transform: translate(3px, -3px); }
    90%  { transform: translate(-2px, 2px); }
    100% { transform: translate(0, 0); }
}

.site-footer .kofi img {
    content: var(--kofi);
    width: 200px;
}
footer {
    text-align: center;
    margin-top: 1rem;
}

/* ── TOGGLE ── */
.toggle-mode svg {
    display: block;
}
.toggle-mode .sun,
.toggle-mode .moon {
    stroke: var(--text);
    fill: var(--text);
    stroke-width: 1.5;
    stroke-linecap: round;
    transition: opacity 0.2s;
}
[data-mode="dark"] .toggle-mode .sun {
    opacity: 0.3;
}
[data-mode="light"] .toggle-mode .moon {
    opacity: 0.3;
}
.toggle-mode {
    background: transparent;
    border: 0;
    color: var(--text);
    font-size: 3rem;
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    cursor: pointer;
        /* transition: background 0.3s, color 0.3s; */
    transition: transform 0.1s ease-in-out;
}
.toggle-mode:hover {
    /* background: #ffffff2e; */
    transform: scale(1.3);
}

/* ── MAIN ── */
main {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

/* ── CARD ── */
.card {
    background-color: var(--card-bg);
    color: var(--card-text);
    border-radius: 8px;
    display: flex;
    overflow: hidden;
    flex-direction: column;
}
.card .audio-elem-wrapper {
    --aew-radius: 0 0 6px 6px;
}
.card.rev .card-main {
    flex-direction: row-reverse;
}
.card-main {
    display: flex;
}
audio {
    display: block;
    width: 100%;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}
.card-img {
    width: 45%;
    flex-shrink: 0;
    background: #0c0c0c;
    overflow: hidden;
}
.card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: zoom-in;
}
.card-body {
    width: 55%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: top;
    gap: 1rem;
}
.card-name {
    font-size: 2.3rem;
    font-weight: bold;
}
.card-desc {
    font-size: 1.1rem;
}
.card-download {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    /* padding: 20px; */
}
.card-download .version {
    font-size: 14px;
    text-align: center;
    opacity: 0.75;
}
/* .card-dl {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.48rem 1.1rem;
    background: #4a7c5e;
    color: #fff;
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    border-radius: 4px;
    align-self: flex-start;
}
.card-dl:hover {
    background: #3a6048;
} */
.os-icon {
    width: 50px;
    height: 50px;
    background-color: var(--card-text);
    display: inline-block;
    transition: transform 0.1s ease-out;
}
.os-icon.disabled {
    opacity: 0.2;
    cursor: unset;
}
.os-icon.linux {
    -webkit-mask: var(--os-linux) no-repeat center / contain;
    mask: var(--os-linux) no-repeat center / contain;
}
.os-icon.apple {
    -webkit-mask: var(--os-apple) no-repeat center / contain;
    mask: var(--os-apple) no-repeat center / contain;
}
.os-icon.windows {
    -webkit-mask: var(--os-windows) no-repeat center / contain;
    mask: var(--os-windows) no-repeat center / contain;
}
.os-icon:not(.disabled):hover {
    cursor: pointer;
    transform: scale(1.3);
}

/* ── MODAL ── */
#modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    z-index: 999;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
}
#modal.open {
    display: flex;
}
#modal img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
}

/* ── RESPONSIVE ── */
@media (max-width: 800px) {
    .card-main,
    .card.rev .card-main {
        flex-direction: column;
    }
    .card-img {
        width: 100%;
    }
    .card-body {
        width: 100%;
    }
    .card-body h2 {
        font-size: 2rem;
    }
    .card-download {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1rem;
        padding: 20px;
    }
    .card-download .version {
        width: 100%;
    }
}