/* Home categories are intentionally isolated from the hot-offer component. */
.categories .category-card {
    cursor: pointer;
    isolation: isolate;
}

.categories .category-card::before {
    pointer-events: none !important;
}

.categories .category-card .category-content {
    position: relative;
    z-index: 2;
}

.categories .category-card .category-btn {
    position: relative;
    z-index: 4;
    pointer-events: auto !important;
}

.categories .categories-video-layer,
.categories .categories-shared-video {
    pointer-events: none !important;
}

.categories .category-card .category-overlay {
    pointer-events: none !important;
}

.category-card.hero-selected {
    background: linear-gradient(145deg, rgba(81, 102, 255, 0.52), rgba(156, 86, 255, 0.46)) !important;
    border: 3px solid rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 0 0 8px rgba(95, 122, 255, 0.62), 0 0 60px rgba(88, 116, 255, 0.98), 0 0 110px rgba(155, 88, 255, 0.82), 0 34px 96px rgba(8, 14, 36, 0.72) !important;
    filter: saturate(1.42) brightness(1.2) contrast(1.12);
    animation: heroSelectionImpact 1.7s cubic-bezier(.12, .9, .2, 1), heroSelectionPulse 1.15s ease-in-out 1.7s 3;
}

.category-card.hero-selected .category-content h3,
.category-card.hero-selected .category-count {
    color: #ffffff !important;
    text-shadow: 0 0 22px rgba(255, 255, 255, 0.75), 0 0 34px rgba(95, 122, 255, 0.88), 0 0 48px rgba(156, 86, 255, 0.68);
}

.category-card.hero-selected .category-btn {
    background: linear-gradient(135deg, #ffffff, #f3f0ff) !important;
    color: #394ed1 !important;
    border-color: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.8), 0 0 25px rgba(95, 122, 255, 0.65), 0 14px 34px rgba(90, 116, 241, 0.56);
}

.category-card.hero-selected .category-icon-wrapper {
    transform: scale(1.18) rotate(8deg);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.74), 0 0 34px rgba(98, 124, 255, 0.92), 0 0 58px rgba(156, 86, 255, 0.7);
    animation: heroSelectionIcon 0.95s cubic-bezier(.25, 1.4, .35, 1) 2;
}

.category-card.hero-selected::after {
    content: '';
    position: absolute;
    inset: -18px;
    border-radius: inherit;
    border: 4px solid rgba(255, 255, 255, 0.96);
    box-shadow: 0 0 0 18px rgba(95, 122, 255, 0.34), 0 0 70px rgba(95, 122, 255, 0.9), 0 0 120px rgba(156, 86, 255, 0.62);
    pointer-events: none;
    animation: heroSelectionRing 1.55s ease-out 3;
    z-index: 6;
}

@keyframes heroSelectionImpact {
    0% { transform: translateY(0) scale(1); }
    18% { transform: translateY(-42px) scale(1.13) rotateX(4deg); }
    42% { transform: translateY(-14px) scale(1.05); }
    66% { transform: translateY(-26px) scale(1.09); }
    100% { transform: translateY(-16px) scale(1.06); }
}

@keyframes heroSelectionPulse {
    0%, 100% { box-shadow: 0 0 0 8px rgba(95, 122, 255, 0.62), 0 0 60px rgba(88, 116, 255, 0.98), 0 0 110px rgba(155, 88, 255, 0.82), 0 34px 96px rgba(8, 14, 36, 0.72); }
    50% { box-shadow: 0 0 0 12px rgba(95, 122, 255, 0.78), 0 0 76px rgba(88, 116, 255, 1), 0 0 136px rgba(155, 88, 255, 0.92), 0 38px 110px rgba(8, 14, 36, 0.78); }
}

@keyframes heroSelectionRing {
    0% { opacity: 1; transform: scale(0.9); }
    100% { opacity: 0; transform: scale(1.14); }
}

@keyframes heroSelectionIcon {
    0% { transform: scale(1) rotate(0); }
    40% { transform: scale(1.26) rotate(10deg); }
    70% { transform: scale(1.14) rotate(4deg); }
    100% { transform: scale(1.18) rotate(8deg); }
}

@media (prefers-reduced-motion: reduce) {
    .category-card.hero-selected,
    .category-card.hero-selected::after {
        animation: none !important;
    }
}