/* ========================
   HOME PAGE — Work section, filters, thumbnails, skills ticker.
   Sidebar + two-column shell live in assets/components/sidebar/ and
   assets/css/app-shell.css (shared with About/Play/Notes).
======================== */

:root {
    --divider-light: #C3C6D3;
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Satoshi Variable', 'Satoshi', sans-serif;
    background: #ffffff;
}

.home-video-placeholder {
    width: 100%;
    aspect-ratio: 785 / 497;
    background: #F3F4F6;
    /* Hidden until the real video is ready — remove this line to bring it back */
    display: none;
    align-items: center;
    justify-content: center;
    font-family: 'Satoshi Variable', 'Satoshi', sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: #000000;
    margin-bottom: 56px;
}

/* ════════════════════════════════
/* Footer styles → footer.css (loaded via footer-loader.js) */

/* ── Card reveal on scroll ── */
.card-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
.card-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.ws-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.ws-reveal.is-visible { opacity: 1; transform: none; }

.work-section__header {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 40px;
}

.work-section__title {
    font-family: 'Satoshi Variable', 'Satoshi', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.3;
    color: #0a1833;
    width: 100%;
}

.work-filter {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    position: sticky;
    top: 96px;
    z-index: 100;
    background: #ffffff;
    padding: 12px 0;
    margin-bottom: 24px;
}

/* Fills the 24px band between the fixed header (72px) and where the
   filter bar sticks (96px) with the same background, so scrolled
   content can't peek through that gap while it's stuck. */
.work-filter::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -24px;
    height: 24px;
    background: #ffffff;
}

.work-filter__btn {
    font-family: 'Satoshi', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    height: 40px;
    padding: 0 24px;
    background: none;
    border: 1px solid var(--divider-light);
    color: #0a1833;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.work-filter__btn.is-active {
    background: #000000;
    color: #fcfcfd;
    border-color: #000000;
}

.work-filter__btn:hover:not(.is-active) {
    background: rgba(0, 0, 0, 0.05);
}

.work-list {
    display: flex;
    flex-direction: column;
    gap: 64px;
    padding-bottom: 140px;
}

.work-thumb {
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
div.work-thumb { cursor: default; }

.work-thumb__img {
    width: 100%;
    aspect-ratio: 781 / 499;
    overflow: hidden;
    background: #f5f5f5;
    position: relative;
    border-radius: 4px;
}

.work-thumb__img img,
.work-thumb__img video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.work-thumb:hover .work-thumb__img img,
.work-thumb:hover .work-thumb__img video { transform: scale(1.03); }

/* ── Hover-triggered preview video (plays over the static cover image on hover) ── */
.work-thumb__img video[data-hover-play] {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.work-thumb__img video[data-hover-play].is-visible { opacity: 1; }

/* ── Hover label — hidden, replaced by custom cursor tooltip ── */
.work-thumb__hover-label { display: none; }

/* ── Custom "View case study" cursor tooltip ── */
#work-cursor {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transition: opacity 0.1s ease, clip-path 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    background: #0a1833;
    color: #ffffff;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.02em;
    white-space: nowrap;
    padding: 10px 18px;
    border-radius: 0;
}
#work-cursor.visible {
    opacity: 1;
    clip-path: inset(0 0% 0 0);
}

.work-thumb__info { display: flex; flex-direction: column; gap: 8px; }

.work-thumb__title {
    font-family: 'Satoshi', sans-serif;
    font-weight: 700;
    font-size: 24px;
    color: #0a1833;
    line-height: normal;
}

.work-thumb__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.work-thumb__desc {
    font-family: 'Satoshi Variable', 'Satoshi', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: rgba(10, 24, 51, 0.68);
}

@media (max-width: 1140px) {
    .work-list { padding-bottom: 100px; }
}

@media (max-width: 768px) {
    .work-list { gap: 40px; padding-bottom: 80px; }
    .home-video-placeholder { margin-bottom: 32px; }

    /* Category filter — single horizontal row with its own scroll instead
       of wrapping to a second line, and re-pinned flush below the sticky
       Work|Play|Notes|About tab group (assets/components/sidebar/,
       ≤768px only) rather than the fixed header directly: that bar sticks
       at top:80px and is 54px tall (see sidebar.css), so this one sticks
       right at its bottom edge, 80+54 = 134px — no gap between the two
       bars, unlike the 8px one under the fixed header above. */
    .work-filter {
        top: 134px;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .work-filter::-webkit-scrollbar { display: none; }

    /* Same gap-filler technique as the base rule above, shrunk to just a
       couple of px — there's no real gap to fill here (the two bars sit
       flush), just enough overlap to absorb sub-pixel rounding between
       these two independently-stuck elements. Safe to dip into
       .home-tabs's own box: that bar's z-index (110) is higher than this
       one's (100, below), so it always paints on top regardless. */
    .work-filter::before {
        top: -3px;
        height: 3px;
    }

    .work-filter__btn {
        flex-shrink: 0;
    }
}

/* ── Skip navigation ── */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 8px;
    z-index: 9999;
    background: #0a1833;
    color: #fff;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    border-radius: 4px;
}
.skip-link:focus { left: 8px; }

/* ── Respect reduced-motion preference ── */
@media (prefers-reduced-motion: reduce) {
    .header, .header--scrolled, .header--hidden {
        transition: none !important;
        transform: none !important;
    }
}

/* ========================
   DARK MODE
======================== */
[data-theme="dark"] body { background: #0f131b; }
[data-theme="dark"] .home-video-placeholder { background: #1f2430; color: #ffffff; }

[data-theme="dark"] .work-section__title { color: #ffffff; }
[data-theme="dark"] .work-filter { background: #0f131b; }
[data-theme="dark"] .work-filter::before { background: #0f131b; }
[data-theme="dark"] .work-filter__btn { color: #ffffff; border-color: #4B5563; }
[data-theme="dark"] .work-filter__btn.is-active { background: #ffffff; color: #0f131b; }
[data-theme="dark"] .work-thumb__title { color: #ffffff; }
[data-theme="dark"] .work-thumb__desc { color: #9CA3AF; }
[data-theme="dark"] .work-thumb__img { background: #1f2430; }