.catalog-banner {
    --witch-offset-y: 12px;
    position: relative;
    overflow: hidden;
    background: radial-gradient(900px 380px at 15% -10%, rgba(255, 122, 0, 0.14), rgba(255, 122, 0, 0) 60%),
        linear-gradient(180deg, #0f1423 0%, #0c111d 100%);
    color: var(--white-color);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
}

.catalog-banner::before,
.catalog-banner::after {
    content: '';
    position: absolute;
    width: clamp(140px, 22vw, 260px);
    height: clamp(140px, 22vw, 260px);
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.16;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.25));
    pointer-events: none;
    z-index: 0;
}
.catalog-banner::before {
    left: -6px;
    top: -6px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280' viewBox='0 0 280 280'%3E%3Cg fill='none' stroke='%23FFB703' stroke-opacity='0.7' stroke-width='2'%3E%3Cpath d='M2 2 C90 18 160 46 278 2'/%3E%3Cpath d='M2 42 C110 70 160 86 278 42'/%3E%3Cpath d='M2 86 C120 120 170 130 278 86'/%3E%3Cpath d='M2 130 C120 160 170 170 278 130'/%3E%3Cpath d='M2 2 C18 90 46 160 2 278'/%3E%3Cpath d='M42 2 C70 110 86 160 42 278'/%3E%3Cpath d='M86 2 C120 120 130 170 86 278'/%3E%3Cpath d='M130 2 C160 120 170 170 130 278'/%3E%3C/g%3E%3C/svg%3E");
}
.catalog-banner::after {
    right: -6px;
    top: -6px;
    transform: scaleX(-1);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280' viewBox='0 0 280 280'%3E%3Cg fill='none' stroke='%23FFB703' stroke-opacity='0.7' stroke-width='2'%3E%3Cpath d='M2 2 C90 18 160 46 278 2'/%3E%3Cpath d='M2 42 C110 70 160 86 278 42'/%3E%3Cpath d='M2 86 C120 120 170 130 278 86'/%3E%3Cpath d='M2 130 C120 160 170 170 278 130'/%3E%3Cpath d='M2 2 C18 90 46 160 2 278'/%3E%3Cpath d='M42 2 C70 110 86 160 42 278'/%3E%3Cpath d='M86 2 C120 120 130 170 86 278'/%3E%3Cpath d='M130 2 C160 120 170 170 130 278'/%3E%3C/g%3E%3C/svg%3E");
}

.catalog-banner__content {
    position: relative;
    z-index: 1;
}
.catalog-banner__title {
    background: linear-gradient(90deg, #ffd166, #ffb703, #ff7a00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.catalog-banner__animation {
    position: absolute;
    inset: 0 30px 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    transform: translateY(var(--witch-offset-y));
    pointer-events: none;
    z-index: 0;
}
.catalog-banner__img {
    width: clamp(220px, 38vw, 274px);
    height: auto;
    display: block;
    filter: drop-shadow(0 18px 32px rgba(0, 0, 0, 0.45));
    animation: witchFloat 6s ease-in-out infinite;
    transform-origin: 50% 80%;
}

@keyframes witchFloat {
    0%,
    100% {
        transform: translateY(var(--witch-offset-y)) rotate(-1deg);
    }
    50% {
        transform: translateY(calc(var(--witch-offset-y) - 10px)) rotate(1deg);
    }
}

@media (max-width: 1440px) {
    .catalog-banner__animation {
        display: flex;
    }
}

.card {
    position: relative;
    overflow: hidden;
}
.card__header,
.card__body,
.card__menu,
.card__learn-more {
    position: relative;
    z-index: 1;
}

.card::before {
    content: '';
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 44%;
    aspect-ratio: 1/1;
    background-image: url('/images/halloween/card/card-pumpkin.png');
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: contain;
    opacity: 0.16;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.25));
    pointer-events: none;
    z-index: 0;
    transition: opacity 0.2s ease;
}
.card:hover::before {
    opacity: 0.22;
}

.card:nth-child(5n + 2)::before {
    background-image: url('/images/halloween/card/card-ghost.png');
}

.card:nth-child(5n + 3)::before {
    background-image: url('/images/halloween/card/card-cat.png');
}

.card:nth-child(5n + 4)::before {
    background-image: url('/images/halloween/card/card-ghost.png');
}

.card:nth-child(5n + 5)::before {
    background-image: url('/images/halloween/card/card-pumpkin.png');
}

@media (max-width: 768px) {
    .card::before {
        width: 38%;
        right: 6px;
        bottom: 6px;
        opacity: 0.14;
    }
}