@property --category-card-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

@property --category-card-reverse-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

.home-category-card,
.landing-category-card,
.category-site-tile {
    position: relative;
    isolation: isolate;
}

.home-category-card::before,
.home-category-card::after,
.landing-category-card::before,
.landing-category-card::after,
.category-site-tile::before,
.category-site-tile::after {
    position: absolute;
    z-index: 0;
    inset: -1px;
    width: auto;
    padding: 1.5px;
    border-radius: inherit;
    content: "";
    opacity: 1;
    pointer-events: none;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
}

/* Two orange glints orbit the card border in opposite directions. */
.home-category-card::after,
.landing-category-card::after,
.category-site-tile::after {
    background: conic-gradient(
        from var(--category-card-angle),
        transparent 0deg 318deg,
        #ffd3c5 328deg,
        #ee4d2d 336deg,
        #ffd3c5 344deg,
        transparent 352deg 360deg
    );
    animation: category-card-border-spin 1.45s linear infinite;
}

.home-category-card::before,
.landing-category-card::before,
.category-site-tile::before {
    background: conic-gradient(
        from var(--category-card-reverse-angle),
        transparent 0deg 318deg,
        #ffd3c5 328deg,
        #ee4d2d 336deg,
        #ffd3c5 344deg,
        transparent 352deg 360deg
    );
    animation: category-card-border-spin-reverse 1.45s linear infinite;
}

.home-category-card > *,
.landing-category-card > *,
.category-site-tile > * {
    position: relative;
    z-index: 1;
}

@keyframes category-card-border-spin {
    to { --category-card-angle: 360deg; }
}

@keyframes category-card-border-spin-reverse {
    to { --category-card-reverse-angle: -360deg; }
}

@media (prefers-reduced-motion: reduce) {
    .home-category-card::before,
    .home-category-card::after,
    .landing-category-card::before,
    .landing-category-card::after,
    .category-site-tile::before,
    .category-site-tile::after {
        animation: none;
    }
}