@font-face {
    font-family: "Inter";
    src: url("/fonts/inter-cyrillic.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    unicode-range: U+0400-045F, U+0490-0491, U+2116;
}

@font-face {
    font-family: "Inter";
    src: url("/fonts/inter-latin.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    color-scheme: dark;
    --goal-text: #ffffff;
    --goal-muted: rgba(255, 255, 255, 0.9);
    --goal-track: rgba(76, 58, 82, 0.68);
    --goal-track-border: rgba(255, 255, 255, 0.12);
    --goal-fill-start: #b900f5;
    --goal-fill-end: #8a14e7;
    --goal-glow: rgba(185, 0, 245, 0.42);
    --goal-width: 760px;
    --goal-bar-height: 32px;
    --goal-radius: 16px;
    --goal-font-scale: 1;
    --goal-align-x: center;
    --goal-align-y: center;
    --progress: 0%;
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: transparent;
}

body {
    color: var(--goal-text);
    font-family: "Inter", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.donation-overlay {
    display: grid;
    width: 100%;
    height: 100%;
    min-height: 0;
    align-items: var(--goal-align-y);
    justify-items: var(--goal-align-x);
    padding: 4px clamp(7px, 1vw, 12px);
}

.goal-card {
    display: grid;
    width: min(100%, var(--goal-width));
    min-width: 0;
    gap: 5px;
    padding: 2px clamp(7px, 1vw, 12px);
}

.goal-card[data-theme="ember"] {
    --goal-track: rgba(92, 52, 59, 0.68);
    --goal-fill-start: #ff315f;
    --goal-fill-end: #e30098;
    --goal-glow: rgba(255, 49, 95, 0.42);
}

.goal-card[data-theme="ice"] {
    --goal-track: rgba(48, 70, 87, 0.68);
    --goal-fill-start: #00bce7;
    --goal-fill-end: #5669f4;
    --goal-glow: rgba(0, 188, 231, 0.42);
}

.goal-head {
    min-width: 0;
    padding-inline: 8px;
    text-align: center;
}

.goal-head h1 {
    margin: 0;
    overflow: hidden;
    color: var(--goal-text);
    font-size: calc(1.35rem * var(--goal-font-scale));
    font-weight: 880;
    letter-spacing: 0.018em;
    line-height: 1.16;
    text-overflow: ellipsis;
    text-shadow:
        0 2px 3px rgba(0, 0, 0, 0.94),
        0 0 10px rgba(0, 0, 0, 0.78);
    text-transform: uppercase;
    white-space: nowrap;
}

.goal-progress {
    position: relative;
    min-width: 0;
}

.goal-card.is-stale .goal-progress::after {
    content: "";
    position: absolute;
    z-index: 5;
    top: 50%;
    right: 13px;
    width: 7px;
    height: 7px;
    border: 1px solid rgba(255, 255, 255, 0.68);
    border-radius: 50%;
    background: #f6b73c;
    box-shadow:
        0 0 0 3px rgba(246, 183, 60, 0.13),
        0 0 9px rgba(246, 183, 60, 0.62);
    transform: translateY(-50%);
}

.goal-track {
    position: relative;
    height: var(--goal-bar-height);
    overflow: hidden;
    border: 1px solid var(--goal-track-border);
    border-radius: var(--goal-radius);
    background: var(--goal-track);
    box-shadow:
        0 3px 9px rgba(0, 0, 0, 0.42),
        inset 0 1px 2px rgba(255, 255, 255, 0.08),
        inset 0 -2px 4px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(5px) saturate(115%);
}

.goal-track::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 48%);
    pointer-events: none;
}

.goal-fill {
    position: absolute;
    z-index: 1;
    inset: 0 auto 0 0;
    width: var(--progress);
    min-width: 0;
    overflow: hidden;
    border-radius: var(--goal-radius) 0 0 var(--goal-radius);
    background: linear-gradient(90deg, var(--goal-fill-start), var(--goal-fill-end));
    box-shadow:
        0 0 16px var(--goal-glow),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
    transition: width 850ms cubic-bezier(0.22, 0.78, 0.2, 1);
}

.goal-card.is-complete .goal-fill {
    border-radius: var(--goal-radius);
}

.goal-card.is-empty .goal-fill {
    opacity: 0;
}

.goal-fill-shine {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.goal-fill-shine::before {
    content: "";
    position: absolute;
    inset: -30% auto -30% -45%;
    width: 38%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    transform: skewX(-16deg);
    animation: progress-shimmer 4.8s ease-in-out infinite;
}

.goal-amounts {
    position: absolute;
    z-index: 3;
    inset: 0;
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 14px;
    overflow: hidden;
    color: var(--goal-text);
    font-size: calc(0.96rem * var(--goal-font-scale));
    font-variant-numeric: tabular-nums;
    font-weight: 720;
    letter-spacing: -0.02em;
    line-height: 1;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.98),
        0 0 5px rgba(0, 0, 0, 0.9);
    white-space: nowrap;
}

.goal-amounts strong {
    font-weight: 830;
}

.goal-percent {
    margin-left: 2px;
}

.goal-scale {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    padding-inline: 2px;
    color: var(--goal-muted);
    font-size: calc(0.78rem * var(--goal-font-scale));
    font-variant-numeric: tabular-nums;
    font-weight: 660;
    line-height: 1.15;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.98),
        0 0 5px rgba(0, 0, 0, 0.9);
}

.goal-card.is-complete {
    --goal-fill-start: #1bd37d;
    --goal-fill-end: #8ce75e;
    --goal-glow: rgba(27, 211, 125, 0.42);
}

.goal-card.has-fresh-donation .goal-track {
    animation: donation-arrived 1.2s ease-out both;
}

.goal-card[data-show-title="false"] .goal-head,
.goal-card[data-show-scale="false"] .goal-scale {
    display: none;
}

.goal-card[data-show-current-target="false"] #goalCurrent,
.goal-card[data-show-current-target="false"] #goalDivider,
.goal-card[data-show-current-target="false"] #goalTarget,
.goal-card[data-show-percent="false"] .goal-percent {
    display: none;
}

.goal-card[data-show-current-target="false"][data-show-percent="false"] .goal-amounts {
    display: none;
}

.goal-card[data-uppercase-title="false"] .goal-head h1 {
    text-transform: none;
}

.goal-card[data-shimmer="false"] .goal-fill-shine {
    display: none;
}

@keyframes progress-shimmer {
    0%, 34% {
        left: -45%;
        opacity: 0;
    }

    48% {
        opacity: 0.68;
    }

    70%, 100% {
        left: 125%;
        opacity: 0;
    }
}

@keyframes donation-arrived {
    0% {
        box-shadow:
            0 3px 9px rgba(0, 0, 0, 0.42),
            0 0 22px var(--goal-glow),
            inset 0 0 0 1px rgba(255, 255, 255, 0.24);
    }

    100% {
        box-shadow:
            0 3px 9px rgba(0, 0, 0, 0.42),
            inset 0 1px 2px rgba(255, 255, 255, 0.08),
            inset 0 -2px 4px rgba(0, 0, 0, 0.18);
    }
}

@media (max-width: 520px) {
    .donation-overlay {
        padding: 4px;
    }

    .goal-card {
        gap: 4px;
        padding-inline: 4px;
    }

    .goal-amounts {
        gap: 3px;
        padding-inline: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
    }
}