/* ═══════════════════════════════════════════════════════════════
   SHAKHESMALL — HOME PAGE MOTION SYSTEM
   ═══════════════════════════════════════════════════════════════ */

html {
    scroll-behavior: smooth;
}

/* ───────────────────────────────────────────────────────────────
   HERO ENTRANCE
   ─────────────────────────────────────────────────────────────── */

.hero-enter {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: none;
    animation: heroFadeSlideUp 750ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
    will-change: transform, opacity, filter;
}

    .hero-enter:nth-child(1) {
        animation-delay: 0ms;
    }

    .hero-enter:nth-child(2) {
        animation-delay: 140ms;
    }

    .hero-enter:nth-child(3) {
        animation-delay: 280ms;
    }

@keyframes heroFadeSlideUp {
    0% {
        opacity: 0;
        transform: translate3d(0, 30px, 0);
        filter: blur(4px);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }
}


/* ───────────────────────────────────────────────────────────────
   HERO BLOBS
   ─────────────────────────────────────────────────────────────── */

.hero-blob {
    animation: blobDrift 20s ease-in-out infinite, blobPulse 8s ease-in-out infinite alternate;
    will-change: transform;
}

    .hero-blob:nth-child(1) {
        animation-duration: 25s, 8s;
        animation-delay: 0s, -2s;
    }

    .hero-blob:nth-child(2) {
        animation-duration: 30s, 10s;
        animation-delay: -5s, -5s;
    }

@keyframes blobDrift {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    }

    25% {
        transform: translate3d(30px, -20px, 0) rotate(45deg) scale(1.05);
    }

    50% {
        transform: translate3d(-20px, 30px, 0) rotate(90deg) scale(.95);
    }

    75% {
        transform: translate3d(-30px, -10px, 0) rotate(135deg) scale(1.02);
    }
}

@keyframes blobPulse {
    0% {
        opacity: .45;
    }

    100% {
        opacity: .8;
    }
}


/* ───────────────────────────────────────────────────────────────
   SEARCH BOX
   ─────────────────────────────────────────────────────────────── */

.search-btn-pulse {
    position: relative;
    overflow: hidden;
    animation: searchPulse 1.5s ease-out 900ms 1;
}

    .search-btn-pulse::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 110deg, transparent 25%, rgba(255, 255, 255, .22) 50%, transparent 75% );
        transform: translateX(-120%);
        transition: transform 700ms ease;
        pointer-events: none;
    }

    .search-btn-pulse:hover::after {
        transform: translateX(120%);
    }

@keyframes searchPulse {
    0% {
        box-shadow: 0 0 0 0 rgb(107 76 58 / .45);
    }

    50% {
        box-shadow: 0 0 0 12px rgb(107 76 58 / 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgb(107 76 58 / 0);
    }
}


/* ───────────────────────────────────────────────────────────────
   TABS
   ─────────────────────────────────────────────────────────────── */

.tab-container {
    position: relative;
    display: flex;
    gap: 4px;
    padding: 4px;
    background: rgb(255 255 255 / .10);
    border: 1px solid rgb(255 255 255 / .08);
    border-radius: 1rem;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .08);
}

.tab-btn {
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    padding: .625rem 1rem;
    font-size: .75rem;
    font-weight: 500;
    color: rgb(199 210 254);
    border: none;
    border-radius: .75rem;
    background: transparent;
    cursor: pointer;
    transition: color 220ms ease, transform 220ms cubic-bezier(.16, 1, .3, 1);
}

    .tab-btn:hover {
        color: white;
        transform: translateY(-1px);
    }

    .tab-btn.active {
        color: rgb(67 56 202);
        font-weight: 700;
    }

    .tab-btn:active {
        transform: scale(.97);
    }

.tab-pill {
    position: absolute;
    top: 4px;
    height: calc(100% - 8px);
    background: white;
    border-radius: .75rem;
    box-shadow: 0 4px 12px rgb(15 23 42 / .12), inset 0 1px 0 rgb(255 255 255 / .8);
    z-index: 0;
    pointer-events: none;
    transition: transform 420ms cubic-bezier(.16, 1, .3, 1), width 420ms cubic-bezier(.16, 1, .3, 1);
    will-change: transform, width;
}


/* ───────────────────────────────────────────────────────────────
   SCROLL REVEAL
   ─────────────────────────────────────────────────────────────── */

/* Reveal-on-scroll is a PROGRESSIVE ENHANCEMENT.
   Content is visible by default so the page can never be blanked out when the
   reveal JavaScript doesn't run or when Blazor's interactive re-render resets
   the `visible` class on a node whose element is already on screen (the
   IntersectionObserver won't re-fire, leaving sections stuck hidden).
   `.hero-enter` needs JS-safe behavior for the same reason — see below. */
.scroll-reveal {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: none;
    transition: opacity 450ms cubic-bezier(.16, 1, .3, 1), transform 450ms cubic-bezier(.16, 1, .3, 1), filter 450ms cubic-bezier(.16, 1, .3, 1);
    will-change: opacity, transform, filter;
}

    .scroll-reveal.visible {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: none;
    }


/* ───────────────────────────────────────────────────────────────
   STAGGER
   ─────────────────────────────────────────────────────────────── */

.reveal-stagger-1 {
    transition-delay: 0ms;
}

.reveal-stagger-2 {
    transition-delay: 70ms;
}

.reveal-stagger-3 {
    transition-delay: 140ms;
}

.reveal-stagger-4 {
    transition-delay: 210ms;
}

.reveal-stagger-5 {
    transition-delay: 280ms;
}

.reveal-stagger-6 {
    transition-delay: 350ms;
}

.reveal-stagger-7 {
    transition-delay: 420ms;
}

.reveal-stagger-8 {
    transition-delay: 490ms;
}


/* ───────────────────────────────────────────────────────────────
   FEATURED CARDS
   ─────────────────────────────────────────────────────────────── */

.featured-card {
    position: relative;
    transition: transform 450ms cubic-bezier(.16, 1, .3, 1), box-shadow 450ms cubic-bezier(.16, 1, .3, 1), border-color 300ms ease;
    will-change: transform;
}

/* ───────────────────────────────────────────────────────────────
   FEATURED CAROUSEL (auto-scrolling horizontal)
   ─────────────────────────────────────────────────────────────── */

.featured-carousel {
    position: relative;
    overflow: hidden;
    /* Soft edge fade so cards don't hard-clip at the boundaries */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.featured-carousel:hover .featured-track {
    animation-play-state: paused;
}

.featured-track {
    display: flex;
    gap: 1.25rem;
    width: max-content;
    animation: featuredScroll 30s linear infinite;
}

.featured-track > * {
    flex: 0 0 280px;
}

@keyframes featuredScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .featured-track {
        animation: none;
    }
    .featured-carousel {
        -webkit-mask-image: none;
        mask-image: none;
        overflow-x: auto;
    }
}


    /* Image/gradient area */
    .featured-card > div:first-child {
        transition: transform 600ms cubic-bezier(.16, 1, .3, 1);
    }

    .featured-card:hover > div:first-child {
        /* Don't zoom the whole card content */
    }


    /* ───────────────────────────────────────────────────────────────
   CARD SHINE
   ─────────────────────────────────────────────────────────────── */

    .featured-card::after,
    .blog-card::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        background: linear-gradient( 110deg, transparent 30%, rgb(255 255 255 / .16) 50%, transparent 70% );
        transform: translateX(-130%);
        transition: transform 800ms cubic-bezier(.16, 1, .3, 1);
    }

    .featured-card:hover::after,
    .blog-card:hover::after {
        transform: translateX(130%);
    }


/* ───────────────────────────────────────────────────────────────
   LATEST CARDS
   ─────────────────────────────────────────────────────────────── */

.latest-card {
    transition: transform 350ms cubic-bezier(.16, 1, .3, 1), box-shadow 350ms cubic-bezier(.16, 1, .3, 1);
}

    .latest-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 16px 35px -10px rgb(15 23 42 / .12);
    }


/* ───────────────────────────────────────────────────────────────
   CATEGORY CARDS
   ─────────────────────────────────────────────────────────────── */

.category-card {
    transition: transform 400ms cubic-bezier(.16, 1, .3, 1), box-shadow 400ms cubic-bezier(.16, 1, .3, 1);
}

    .category-card:hover {
        transform: translateY(-6px);
    }

.category-icon-wrapper {
    transition: transform 400ms cubic-bezier(.16, 1, .3, 1), box-shadow 400ms ease;
}

.category-card:hover .category-icon-wrapper {
    transform: translateY(-3px) scale(1.08) rotate(-2deg);
}


/* ───────────────────────────────────────────────────────────────
   CATEGORY SHINE
   ─────────────────────────────────────────────────────────────── */

@media (hover: hover) and (pointer: fine) {

    .category-icon-wrapper {
        position: relative;
        overflow: hidden;
    }

        .category-icon-wrapper::after {
            content: "";
            position: absolute;
            top: -50%;
            left: -150%;
            width: 200%;
            height: 200%;
            background: linear-gradient( 115deg, transparent 40%, rgb(255 255 255 / .45) 50%, transparent 60% );
            transform: rotate(25deg);
            opacity: 0;
            pointer-events: none;
            transition: opacity 250ms ease, left 600ms cubic-bezier(.16, 1, .3, 1);
        }

    .category-card:hover .category-icon-wrapper::after {
        opacity: 1;
        left: 150%;
    }
}


/* ───────────────────────────────────────────────────────────────
   BLOG
   ─────────────────────────────────────────────────────────────── */

.blog-card {
    position: relative;
    transition: transform 450ms cubic-bezier(.16, 1, .3, 1), box-shadow 450ms cubic-bezier(.16, 1, .3, 1);
}

    .blog-card:hover {
        transform: translateY(-6px);
    }

    .blog-card svg {
        transition: transform 500ms cubic-bezier(.16, 1, .3, 1);
    }

    .blog-card:hover svg {
        transform: scale(1.12) rotate(-3deg);
    }


/* ───────────────────────────────────────────────────────────────
   STATS
   ─────────────────────────────────────────────────────────────── */

.stat-counter {
    display: inline-block;
    font-variant-numeric: tabular-nums;
}


/* ───────────────────────────────────────────────────────────────
   STICKY SEARCH
   ─────────────────────────────────────────────────────────────── */

.sticky-search {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    transform: translate3d(0, -110%, 0) scale(.98);
    opacity: 0;
    transition: transform 400ms cubic-bezier(.16, 1, .3, 1), opacity 250ms ease, box-shadow 300ms ease;
    pointer-events: none;
    will-change: transform, opacity;
}

    .sticky-search.visible {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 1;
        pointer-events: auto;
        box-shadow: 0 8px 30px -10px rgb(15 23 42 / .20);
    }

    .sticky-search .search-inner {
        background: rgb(255 255 255 / .92);
        border: 1px solid rgb(226 232 240 / .8);
        border-radius: 0 0 1.5rem 1.5rem;
        /* Tighter vertical padding on phones so the sticky bar stays slim;
           restored to the original spacing from the sm breakpoint up. */
        padding: .5rem .75rem;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }

    /* ── Mobile layout for the sticky search ────────────────────────
       Phones: 3 equal columns on row 1 (province / city / type) with the
       free-text field hidden, and the submit button as a full-width row 2.
       Desktop (≥640px): single flex row, identical to the original design.
       These rules live here (and not in the markup) because the Tailwind
       build is not available in this workspace — see AGENTS.md. */
    .sticky-search .sticky-search-row {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .5rem;
    }

    .sticky-search .sticky-search-field {
        display: none;
    }

    .sticky-search .sticky-search-submit {
        /* Row 2 on mobile: span all three columns. */
        grid-column: 1 / -1;
        width: 100%;
    }

    @media (min-width: 640px) {
        .sticky-search .search-inner {
            padding: .75rem 1rem;
        }

        .sticky-search .sticky-search-row {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: .5rem;
        }

        .sticky-search .sticky-search-field {
            display: flex;
            flex: 1 1 0%;
            min-width: 0;
        }

        .sticky-search .sticky-search-submit {
            grid-column: auto;
            width: auto;
        }
    }


/* ───────────────────────────────────────────────────────────────
   REDUCED MOTION
   ─────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {

    .hero-enter,
    .hero-blob,
    .tab-pill,
    .search-btn-pulse,
    .scroll-reveal,
    .category-icon-wrapper::after,
    .sticky-search,
    .featured-card,
    .latest-card,
    .category-card,
    .blog-card,
    .category-icon-wrapper {
        animation: none !important;
        transition: none !important;
    }

    .hero-enter,
    .scroll-reveal {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }

    .featured-card:hover,
    .latest-card:hover,
    .category-card:hover,
    .blog-card:hover {
        transform: none !important;
    }
}


/* ───────────────────────────────────────────────────────────────
   MOBILE
   ─────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {

    .featured-card:hover,
    .category-card:hover,
    .blog-card:hover {
        transform: translateY(-3px);
    }

    .tab-btn {
        padding-left: .5rem;
        padding-right: .5rem;
    }
}

/* Categories: Desktop - 6 equal columns in grid */
.categories-row {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 0.75rem !important;
    width: 100% !important;
}

/* Tablet: 4 columns */
@media (max-width: 1024px) {
    .categories-row {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* Mobile: 4-column grid, wraps into as many rows as needed */
@media (max-width: 640px) {
    .categories-row {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 0.5rem !important;
        overflow: visible !important;
    }

    .categories-row .category-card {
        padding: 0.6rem 0.25rem !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .categories-row .category-icon-wrapper {
        width: 2.25rem !important;
        height: 2.25rem !important;
        font-size: 1rem !important;
    }

    .categories-row .category-name {
        font-size: 10px !important;
        line-height: 1.2 !important;
    }

    .categories-row .category-count {
        font-size: 9px !important;
    }
}