/* Decorative, purely cosmetic background for the public front page.
   Not referenced by any other template. */

.task-bg-field {
    position: fixed;
    top: -170px;
    left: -170px;
    z-index: 0;
    display: grid;
    width: calc(100vw + 340px);
    height: calc(100vh + 340px);
    padding: 20px;
    grid-template-columns: repeat(auto-fill, 190px);
    grid-auto-rows: 112px;
    gap: 18px;
    animation: task-bg-drift 48s linear infinite;
    pointer-events: none;
    user-select: none;
    will-change: transform;
}

@keyframes task-bg-drift {
    from {
        transform: translate(0, 0);
    }

    to {
        /* Exactly one grid "period" (card + gap), so the loop reset is seamless. */
        transform: translate(-208px, -130px);
    }
}

.task-bg-card {
    display: flex;
    overflow: hidden;
    box-sizing: border-box;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid currentcolor;
    border-radius: 8px;
    opacity: 0.55;
    font-size: 12px;
    line-height: 1.3;
}

.task-bg-card .task-bg-label {
    overflow: hidden;
    opacity: 0.85;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.task-bg-card .task-bg-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 650;
}

.task-bg-card .task-bg-desc {
    overflow: hidden;
    opacity: 0.8;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 450;
}

.task-bg-card--v0 { background: var(--status-todo-bg); color: var(--status-todo-fg); }
.task-bg-card--v1 { background: var(--status-progress-bg); color: var(--status-progress-fg); }
.task-bg-card--v2 { background: var(--status-done-bg); color: var(--status-done-fg); }
.task-bg-card--v3 { background: var(--status-info-bg); color: var(--status-info-fg); }
.task-bg-card--v4 { background: var(--status-neutral-bg); color: var(--status-neutral-fg); }
.task-bg-card--v5 { background: var(--priority-normal); color: #fff; }
.task-bg-card--v6 { background: var(--priority-high); color: #fff; }
.task-bg-card--v7 { background: var(--priority-urgent); color: #fff; }

.task-bg-card:nth-child(3n) { transform: rotate(-3deg); }
.task-bg-card:nth-child(3n + 1) { transform: rotate(2deg); }
.task-bg-card:nth-child(3n + 2) { transform: rotate(-1.5deg); }
.task-bg-card:nth-child(5n) { opacity: 0.32; }

.front-page-panel {
    position: relative;
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    .task-bg-field {
        animation: none;
    }
}

/* The tiled grid doesn't read well on narrow screens; skip the flourish there. */
@media (max-width: 640px) {
    .task-bg-field {
        display: none;
    }
}