/* Lafinda category experience — Phase 12 visual polish & motion */

@media (prefers-reduced-motion: reduce) {
    .category-nav-drawer__backdrop,
    .category-nav-drawer__panel,
    .category-nav-mega__backdrop,
    .category-nav-mega__panel,
    .category-nav-card--landing,
    .category-nav-card--home,
    .category-nav-card--mega,
    .category-nav-card--drawer,
    .category-landing__subcategories,
    .category-landing__empty,
    .category-nav-panel.is-active,
    .home-categories,
    .category-list__chip {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }

    .category-nav-card__media.is-loading {
        animation: none !important;
    }
}

.category-nav-card--landing,
.category-nav-card--home,
.category-nav-card--mega,
.category-nav-card--drawer {
    transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

@media (hover: hover) and (max-width: 991.98px) {
    .category-nav-card--landing:hover,
    .category-nav-card--landing:focus-visible,
    .category-nav-card--home:hover,
    .category-nav-card--home:focus-visible {
        transform: translateY(-2px);
    }

    .category-nav-card--landing:hover .category-nav-card__media,
    .category-nav-card--landing:focus-visible .category-nav-card__media,
    .category-nav-card--home:hover .category-nav-card__media,
    .category-nav-card--home:focus-visible .category-nav-card__media {
        box-shadow: 0 8px 22px rgba(11, 27, 60, 0.12);
    }
}

@media (hover: hover) and (min-width: 992px) {
    .category-nav-card--landing:hover .category-nav-card__media,
    .category-nav-card--landing:focus-visible .category-nav-card__media,
    .category-nav-card--home:hover .category-nav-card__media,
    .category-nav-card--home:focus-visible .category-nav-card__media {
        box-shadow: none;
        transform: none;
    }
}

.category-nav-card__media {
    position: relative;
    transition: box-shadow 0.18s ease;
}

.category-nav-card__media.is-loading {
    background: linear-gradient(90deg, #eef0f3 0%, #f8f9fb 50%, #eef0f3 100%);
    background-size: 200% 100%;
    animation: category-polish-shimmer 1.15s ease-in-out infinite;
}

.category-nav-card__media.is-loading img {
    opacity: 0;
}

.category-nav-card__media.is-loaded img {
    opacity: 1;
    transition: opacity 0.28s ease;
}

.category-nav-card__media.is-error {
    color: #9ca3af;
}

.category-nav-card__media.is-error img {
    display: none;
}

.category-nav-card__media.is-error i.bi {
    font-size: 1rem;
    opacity: 0.85;
}

@keyframes category-polish-shimmer {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

.category-landing__hero--has-image {
    position: relative;
    overflow: hidden;
}

.category-landing__hero--has-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--category-hero-image);
    background-size: cover;
    background-position: center;
    transform: scale(1.02);
}

.category-landing__hero--has-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(11, 27, 60, 0.9) 0%, rgba(26, 43, 74, 0.86) 100%);
}

.category-landing__hero--has-image .container {
    position: relative;
    z-index: 1;
}

.category-landing__title,
.category-list__title,
.home-categories__title {
    letter-spacing: -0.015em;
}

.category-landing__browse-trigger,
.category-landing__filter-btn,
.category-list__browse-trigger,
.home-categories__browse,
.category-nav-drawer__back,
.category-nav-drawer__close {
    min-height: 2.35rem;
}

.category-list__filter-btn {
    min-height: 2.35rem;
}

.category-list__chip {
    min-height: 2.35rem;
    transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.category-landing__browse-trigger,
.category-list__browse-trigger,
.home-categories__browse {
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.category-landing__filter-btn {
    transition: border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.category-landing__filter-btn[aria-expanded='true'] {
    border-color: rgba(254, 106, 7, 0.45);
    box-shadow: 0 0 0 3px rgba(254, 106, 7, 0.12);
}

.category-landing__filters .card {
    transition: box-shadow 0.22s ease;
}

.category-landing__empty {
    animation: category-polish-fade-up 0.38s ease both;
}

.category-landing__subcategories {
    animation: category-polish-fade-up 0.32s ease both;
}

.category-nav-grid--landing > li,
.category-nav-grid--home > li {
    animation: category-polish-fade-up 0.36s ease both;
}

.category-nav-grid--landing > li:nth-child(2),
.category-nav-grid--home > li:nth-child(2) {
    animation-delay: 0.03s;
}

.category-nav-grid--landing > li:nth-child(3),
.category-nav-grid--home > li:nth-child(3) {
    animation-delay: 0.06s;
}

.category-nav-grid--landing > li:nth-child(4),
.category-nav-grid--home > li:nth-child(4) {
    animation-delay: 0.09s;
}

.category-nav-grid--landing > li:nth-child(5),
.category-nav-grid--home > li:nth-child(5) {
    animation-delay: 0.12s;
}

.category-nav-grid--landing > li:nth-child(6),
.category-nav-grid--home > li:nth-child(6) {
    animation-delay: 0.15s;
}

@keyframes category-polish-fade-up {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.category-nav-panel.is-active {
    animation: category-polish-panel-in 0.2s ease both;
}

@keyframes category-polish-panel-in {
    from {
        opacity: 0.65;
        transform: translateX(6px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.category-nav-empty {
    animation: category-polish-fade-up 0.35s ease both;
}

.category-nav-empty__icon {
    animation: category-polish-float 2.8s ease-in-out infinite;
}

@keyframes category-polish-float {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .category-nav-empty__icon {
        animation: none !important;
    }
}

.home-categories {
    animation: category-polish-fade-up 0.34s ease both;
}

.promo-pill-item,
.promo-pill-item--button {
    transition: border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

@media (hover: hover) {
    .promo-pill-item:hover,
    .promo-pill-item--button:hover {
        transform: translateY(-1px);
    }
}