/* Public /projects — card reveal + skeleton loading */

.cards-grid--results {
    align-items: stretch;
}

.cards-grid--results .project-card[data-project-card] {
    opacity: 0;
    transform: translateY(14px);
    animation: projects-card-in .45s cubic-bezier(.22, 1, .36, 1) forwards;
    animation-delay: var(--card-reveal-delay, 0ms);
}

.cards-grid--results .project-card[data-project-card].is-appended {
    --card-reveal-delay: 0ms;
}

@keyframes projects-card-in {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.project-card__image {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(120deg, rgba(17, 56, 92, .06), rgba(0, 163, 168, .08)),
        var(--surface-muted, #edf3f8);
}

.project-card__image > img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    transition: transform .45s ease;
}

.project-card:hover .project-card__image > img {
    transform: scale(1.03);
}

.project-card__no-image {
    --goal-a: #00a3a8;
    --goal-b: #11385c;
    --goal-c: #4c9f38;
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
    padding: 1.1rem 1rem;
    color: #0f2f4d;
    background:
        linear-gradient(160deg, rgba(15, 47, 77, .92) 0%, rgba(15, 47, 77, .72) 42%, rgba(8, 122, 130, .55) 100%),
        linear-gradient(135deg, var(--goal-a), var(--goal-b) 55%, var(--goal-c));
}

.project-card__no-image-mesh {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 12% 18%, rgba(255, 255, 255, .22), transparent 42%),
        radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--goal-a) 55%, white), transparent 36%),
        radial-gradient(circle at 78% 78%, color-mix(in srgb, var(--goal-c) 40%, transparent), transparent 40%),
        repeating-linear-gradient(
            -28deg,
            rgba(255, 255, 255, .05) 0 1px,
            transparent 1px 14px
        );
    pointer-events: none;
}

.project-card__no-image-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
    opacity: .55;
    pointer-events: none;
}

.project-card__no-image-orb--a {
    width: 42%;
    aspect-ratio: 1;
    left: -8%;
    bottom: -18%;
    background: radial-gradient(circle, color-mix(in srgb, var(--goal-a) 70%, white), transparent 70%);
}

.project-card__no-image-orb--b {
    width: 34%;
    aspect-ratio: 1;
    right: -6%;
    top: -14%;
    background: radial-gradient(circle, color-mix(in srgb, var(--goal-b) 65%, white), transparent 72%);
}

.project-card__no-image-goals {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: 0 1rem 1.6rem;
    pointer-events: none;
}

.project-card__no-image-goals img {
    width: clamp(52px, 18%, 76px);
    height: auto;
    aspect-ratio: 1;
    border-radius: 14px;
    box-shadow:
        0 10px 24px rgba(7, 24, 40, .28),
        0 0 0 1px rgba(255, 255, 255, .18);
    transform: rotate(-4deg) translateY(2px);
    opacity: .96;
}

.project-card__no-image-goals img:nth-child(2) {
    transform: rotate(3deg) translateY(-6px) scale(1.06);
    z-index: 1;
}

.project-card__no-image-goals img:nth-child(3) {
    transform: rotate(7deg) translateY(4px);
}

.project-card__no-image-brand {
    position: absolute;
    left: .85rem;
    right: .85rem;
    bottom: .75rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    max-width: calc(100% - 1.7rem);
    padding: .4rem .55rem .4rem .4rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .28);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 8px 18px rgba(7, 24, 40, .18);
}

.project-card__no-image-brand > img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff;
    object-fit: cover;
    flex: 0 0 auto;
}

.project-card__no-image-brand-text {
    display: grid;
    gap: .05rem;
    min-width: 0;
    color: #fff;
    text-align: left;
    line-height: 1.15;
}

.project-card__no-image-brand-text strong {
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.project-card__no-image-brand-text em {
    font-style: normal;
    font-size: .72rem;
    opacity: .88;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.project-card:hover .project-card__no-image-goals img {
    transform: rotate(-2deg) translateY(0);
}

.project-card:hover .project-card__no-image-goals img:nth-child(2) {
    transform: rotate(1deg) translateY(-8px) scale(1.08);
}

.project-card:hover .project-card__no-image-goals img:nth-child(3) {
    transform: rotate(5deg) translateY(2px);
}

.project-card__no-image-goals img,
.project-card:hover .project-card__no-image-goals img {
    transition: transform .35s ease;
}

/* Skeleton cards — bone layout matching project-card */
.project-skel {
    --skel-base: #e4ecf4;
    --skel-soft: #f3f7fb;
    --skel-glow: rgba(255, 255, 255, .78);
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 100%;
    overflow: hidden;
    border-radius: var(--radius-md, 12px);
    border: 1px solid rgba(17, 56, 92, .1);
    background: #fff;
    box-shadow: 0 10px 28px rgba(17, 56, 92, .07);
    animation: projects-skel-in .4s cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: var(--skel-delay, 0ms);
}

.project-skel::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(
        105deg,
        transparent 0%,
        transparent 38%,
        var(--skel-glow) 50%,
        transparent 62%,
        transparent 100%
    );
    background-size: 220% 100%;
    animation: projects-shimmer 1.35s ease-in-out infinite;
    mix-blend-mode: soft-light;
}

.project-skel__media {
    position: relative;
    aspect-ratio: 16 / 9.5;
    background:
        radial-gradient(circle at 18% 22%, rgba(0, 163, 168, .16), transparent 42%),
        radial-gradient(circle at 84% 18%, rgba(17, 56, 92, .14), transparent 40%),
        linear-gradient(145deg, #d7e3ee 0%, #eaf1f7 48%, #dfe9f2 100%);
    overflow: hidden;
}

.project-skel__media-core {
    position: absolute;
    inset: 18% 22%;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, .08));
    border: 1px solid rgba(255, 255, 255, .35);
}

.project-skel__body {
    display: grid;
    gap: .72rem;
    padding: 1.2rem 1.25rem 1.4rem;
    flex: 1;
}

.project-skel__badges {
    display: flex;
    gap: .4rem;
}

.project-skel__badge {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: linear-gradient(145deg, var(--skel-base), var(--skel-soft));
}

.project-skel__badge:nth-child(1) { background: linear-gradient(145deg, #f2d7c2, #f8ebe1); }
.project-skel__badge:nth-child(2) { background: linear-gradient(145deg, #c9e7e4, #e5f4f2); }
.project-skel__badge:nth-child(3) { background: linear-gradient(145deg, #d5e2f2, #ebf1f8); }

.project-skel__meta {
    width: min(58%, 11rem);
    height: 1.45rem;
    border-radius: 999px;
    background: linear-gradient(90deg, #edf3f8, #f7fafc);
}

.project-skel__title,
.project-skel__excerpt,
.project-skel__link {
    display: grid;
    gap: .45rem;
}

.project-skel__bone {
    display: block;
    height: .88rem;
    border-radius: 8px;
    background: linear-gradient(90deg, var(--skel-base), var(--skel-soft) 55%, var(--skel-base));
    background-size: 200% 100%;
    animation: projects-bone-pulse 1.4s ease-in-out infinite;
}

.project-skel__title .project-skel__bone:nth-child(1) { width: 94%; height: 1.05rem; }
.project-skel__title .project-skel__bone:nth-child(2) { width: 72%; height: 1.05rem; animation-delay: .08s; }

.project-skel__excerpt .project-skel__bone:nth-child(1) { width: 100%; }
.project-skel__excerpt .project-skel__bone:nth-child(2) { width: 92%; animation-delay: .06s; }
.project-skel__excerpt .project-skel__bone:nth-child(3) { width: 64%; animation-delay: .12s; }

.project-skel__link .project-skel__bone {
    width: 6.75rem;
    height: .82rem;
    margin-top: .15rem;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(0, 163, 168, .18), rgba(0, 163, 168, .08));
}

@keyframes projects-shimmer {
    0% { background-position: 140% 0; }
    100% { background-position: -140% 0; }
}

@keyframes projects-bone-pulse {
    0%, 100% { opacity: .72; filter: saturate(.9); }
    50% { opacity: 1; filter: saturate(1); }
}

@keyframes projects-skel-in {
    from {
        opacity: 0;
        transform: translateY(12px) scale(.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.project-skel.is-exiting {
    animation: projects-skel-out .22s ease forwards;
}

@keyframes projects-skel-out {
    to {
        opacity: 0;
        transform: translateY(6px) scale(.98);
    }
}

.projects-load-more {
    display: grid;
    justify-items: center;
    gap: .85rem;
    padding: 1.5rem 0 2.5rem;
}

.projects-load-more__sentinel {
    width: 100%;
    height: 1px;
    pointer-events: none;
}

.projects-load-more__btn {
    min-width: 11rem;
    transition: opacity .2s ease, transform .2s ease;
}

.projects-load-more.is-loading .projects-load-more__btn {
    opacity: 0;
    pointer-events: none;
    height: 0;
    min-height: 0;
    padding: 0;
    margin: 0;
    border: 0;
    overflow: hidden;
}

.projects-load-more__status {
    margin: 0;
    color: var(--text-muted, #64748b);
    font-size: .9rem;
    letter-spacing: .01em;
}

.projects-load-more__status[hidden] {
    display: none !important;
}

.cards-grid--results.is-filter-loading {
    position: relative;
    min-height: 18rem;
}

.cards-grid--results.is-filter-loading > .project-card {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .cards-grid--results .project-card[data-project-card],
    .project-skel {
        opacity: 1;
        transform: none;
        animation: none;
    }

    .project-skel::after,
    .project-skel__bone {
        animation: none;
    }

    .project-card:hover .project-card__image > img,
    .project-card:hover .project-card__no-image-goals img,
    .project-card:hover .project-card__no-image-goals img:nth-child(2),
    .project-card:hover .project-card__no-image-goals img:nth-child(3) {
        transform: none;
    }
}