/* Animate only cards, not category badges, tags, or the color picker. */
.task-board.color-fire,
.task-summary-container.color-fire {
    position: relative;
    isolation: isolate;
    background-color: #fff0db;
    border-color: #e85d04;
    color: #000;
    font-weight: 700;
}

/* Override theme/link text colors on Fire cards without changing icon fonts. */
.task-board.color-fire :where(a, span, p, small, strong, b, em, div, li, dt, dd, label, time, h1, h2, h3, h4, h5, h6),
.task-summary-container.color-fire :where(a, span, p, small, strong, b, em, div, li, dt, dd, label, time, h1, h2, h3, h4, h5, h6) {
    color: #000 !important;
    font-weight: 700 !important;
}

.task-board.color-fire::before,
.task-summary-container.color-fire::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;
    background-image: url("flames.svg");
    background-repeat: repeat-x;
    background-position: center bottom;
    background-size: 240px 150px;
    opacity: .72;
    animation: kb-fire-flames 1.8s ease-in-out infinite alternate;
}

.task-board.color-fire::after,
.task-summary-container.color-fire::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(to bottom, #fff0dbed, #fff0dbb3 48%, #fff0db33);
}

@keyframes kb-fire-flames {
    0% { background-position: 0 bottom; background-size: 240px 140px; opacity: .65; }
    35% { background-position: 5px bottom; background-size: 245px 160px; opacity: .82; }
    70% { background-position: -3px bottom; background-size: 237px 146px; opacity: .72; }
    100% { background-position: 2px bottom; background-size: 242px 174px; opacity: .88; }
}

@media (prefers-reduced-motion: reduce), print {
    .task-board.color-fire::before,
    .task-summary-container.color-fire::before {
        animation: none;
        opacity: .55;
    }
}

/* Additional card effects; badges and picker squares use native static colors. */
:is(.task-board, .task-summary-container):is(.color-explode, .color-radiation, .color-skulls, .color-dance, .color-cats, .color-sandwich) {
    position: relative;
    isolation: isolate;
    color: #000;
    font-weight: 700;
}

:is(.task-board, .task-summary-container):is(.color-explode, .color-radiation, .color-skulls, .color-dance, .color-cats, .color-sandwich) :where(a, span, p, small, strong, b, em, div, li, dt, dd, label, time, h1, h2, h3, h4, h5, h6) {
    color: #000 !important;
    font-weight: 700 !important;
}

:is(.task-board, .task-summary-container):is(.color-explode, .color-radiation, .color-skulls, .color-dance, .color-cats, .color-sandwich)::before,
:is(.task-board, .task-summary-container):is(.color-explode, .color-radiation, .color-skulls, .color-dance, .color-cats, .color-sandwich)::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;
}

:is(.task-board, .task-summary-container).color-explode {
    background-color: #fff0dc;
    border-color: #ba4a0b;
}

:is(.task-board, .task-summary-container).color-explode::before {
    background: url("explode.svg") center bottom / 260px 180px no-repeat;
    animation: kb-cloud-grow 6s ease-out infinite;
    opacity: .8;
}

:is(.task-board, .task-summary-container).color-explode::after {
    background: linear-gradient(#fff0dcc4, #fff0dc73 65%, #fff0dc33);
}

:is(.task-board, .task-summary-container).color-radiation {
    background-color: #fff9b0;
    border-color: #8b7900;
}

:is(.task-board, .task-summary-container).color-radiation::before {
    background: url("radiation.svg") right center / 145px 145px no-repeat;
    opacity: .42;
    animation: kb-radiation-pulse 4s ease-in-out infinite;
}

:is(.task-board, .task-summary-container).color-radiation::after {
    background: linear-gradient(90deg, #fff9b0d9, #fff9b033, #fff9b0d9);
    background-size: 200% 100%;
    animation: kb-radiation-glow 6s ease-in-out infinite alternate;
}

:is(.task-board, .task-summary-container).color-skulls {
    background-color: #f1eff7;
    border-color: #676071;
}

:is(.task-board, .task-summary-container).color-skulls::before {
    background: url("skulls.svg") 0 0 / 180px 160px repeat;
    opacity: .4;
    animation: kb-skulls-drift 12s linear infinite;
}

:is(.task-board, .task-summary-container).color-skulls::after {
    background: #f1eff773;
}

@keyframes kb-cloud-grow {
    0%, 5% { background-size: 25px 18px; opacity: 0; }
    14% { background-size: 100px 55px; opacity: .7; }
    55%, 80% { background-size: 260px 180px; opacity: .85; }
    100% { background-size: 285px 195px; opacity: 0; }
}

/* Keep motion inside the card background so menus and links stay usable. */
@keyframes kb-radiation-pulse {
    0%, 100% { background-size: 120px 120px; background-position: right center; opacity: .32; }
    50% { background-size: 155px 155px; background-position: calc(100% - 12px) center; opacity: .58; }
}

@keyframes kb-radiation-glow {
    from { background-position: 0% center; }
    to { background-position: 100% center; }
}

@keyframes kb-skulls-drift {
    from { background-position: 0 0; }
    to { background-position: 180px -160px; }
}

@media (prefers-reduced-motion: reduce), print {
    :is(.task-board, .task-summary-container).color-radiation::before,
    :is(.task-board, .task-summary-container).color-radiation::after,
    :is(.task-board, .task-summary-container):is(.color-explode, .color-skulls)::before {
        animation: none;
    }
}


/* Use the owner-supplied GIF unchanged, with a text readability layer. */
:is(.task-board, .task-summary-container).color-dance {
    background-color: #f1edf3;
    border-color: #725b85;
}

:is(.task-board, .task-summary-container).color-dance::before {
    background: url("dance.gif") center center / cover no-repeat;
    opacity: .8;
}

:is(.task-board, .task-summary-container).color-dance::after {
    background: linear-gradient(#ffffffbf, #ffffff99 60%, #ffffff73);
}

/* CSS animation:none cannot stop a GIF; suppress its image for reduced motion. */
@media (prefers-reduced-motion: reduce), print {
    :is(.task-board, .task-summary-container).color-dance::before {
        background-image: none;
    }
}

/* Owner-supplied cats GIF; only card surfaces receive the animation. */
:is(.task-board, .task-summary-container).color-cats {
    background-color: #f3e9df;
    border-color: #91745b;
}

:is(.task-board, .task-summary-container).color-cats::before {
    background: url("cats.gif") center center / cover no-repeat;
    opacity: .85;
}

:is(.task-board, .task-summary-container).color-cats::after {
    background: linear-gradient(#ffffffbf, #ffffff99 60%, #ffffff73);
}

@media (prefers-reduced-motion: reduce), print {
    :is(.task-board, .task-summary-container).color-cats::before {
        background-image: none;
    }
}

/* Sandwich: a gentle double squeeze of the photo; card text/controls stay still. */
:is(.task-board, .task-summary-container).color-sandwich {
    background-color: #fff0d0;
    border-color: #b77832;
}
:is(.task-board, .task-summary-container).color-sandwich::before {
    background: url("sandwich.webp") 52% center / cover no-repeat;
    opacity: .85;
    transform-origin: center;
    animation: kb-sandwich-squeeze 5s ease-in-out infinite;
}
:is(.task-board, .task-summary-container).color-sandwich::after {
    background: linear-gradient(#fff4d9d9, #fff4d99e 65%, #fff4d966);
}
@keyframes kb-sandwich-squeeze {
    0%, 12%, 28%, 100% { transform: scale(1); }
    6%, 22% { transform: scale(.94, .985); }
}
@media (prefers-reduced-motion: reduce), print {
    :is(.task-board, .task-summary-container).color-sandwich::before {
        animation: none;
        transform: none;
    }
}
@media print {
    :is(.task-board, .task-summary-container).color-sandwich::before {
        background-image: none;
    }
}