/* ===========================================================================
   BR Featured Projects - before/after showcase (dark theme, gold accent)
   =========================================================================== */
.pxl-fp { --pxl-fp-accent: #bd9a5f; position: relative; }

/* ---------- Header ---------- */
.pxl-fp--header { margin-bottom: 56px; }
.pxl-fp.align-center .pxl-fp--header { text-align: center; }
.pxl-fp.align-center .pxl-fp--intro { margin-left: auto; margin-right: auto; }
.pxl-fp.align-center .pxl-fp--eyebrow { justify-content: center; }
.pxl-fp--eyebrow {
    display: inline-flex; align-items: center; gap: 12px;
    color: var(--pxl-fp-accent); font-size: 13px; font-weight: 600;
    letter-spacing: 2.4px; text-transform: uppercase; margin-bottom: 16px;
}
.pxl-fp--eyebrow-line { display: inline-block; width: 34px; height: 1px; background: var(--pxl-fp-accent); opacity: .8; }
.pxl-fp--title { font-size: clamp(26px, 3.2vw, 42px); line-height: 1.15; font-weight: 700; margin: 0 0 18px; letter-spacing: -.01em; }
.pxl-fp--intro { max-width: 640px; margin: 0; font-size: 16px; line-height: 1.8; color: color-mix(in srgb, currentColor 62%, transparent); }

/* ---------- Grid ---------- */
.pxl-fp--grid { display: grid; grid-template-columns: 1fr; gap: 56px; }
.pxl-fp--grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
/* An odd last card in a 2-col grid spans full width (featured) */
.pxl-fp--grid.cols-2 .pxl-fp-card:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* ---------- Card ---------- */
.pxl-fp-card { position: relative; }
.pxl-fp-card__compare {
    position: relative;
    display: flex;
    gap: 0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 40px 80px -44px rgba(0, 0, 0, .75);
    border: 1px solid rgba(255, 255, 255, .07);
}
.pxl-fp-side {
    position: relative; flex: 1 1 50%; min-width: 0;
    aspect-ratio: 4 / 3; overflow: hidden; background: rgba(255,255,255,.03);
}
.pxl-fp-side img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 1.1s cubic-bezier(.22,1,.36,1);
}
.pxl-fp-card:hover .pxl-fp-side img { transform: scale(1.05); }
.pxl-fp-side.is-before img { filter: saturate(.86) brightness(.94); }

/* Before / After tags */
.pxl-fp-tag {
    position: absolute; top: 16px; z-index: 3;
    display: inline-flex; align-items: center;
    padding: 7px 15px; border-radius: 100px;
    font-size: 11.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
    backdrop-filter: blur(6px);
}
.pxl-fp-tag.is-before { left: 16px; color: #fff; background: rgba(20, 20, 20, .68); border: 1px solid rgba(255,255,255,.18); }
.pxl-fp-tag.is-after { right: 16px; color: #14110c; background: var(--pxl-fp-accent); box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--pxl-fp-accent) 80%, transparent); }

/* Center seam + before -> after arrow badge */
.pxl-fp-card__seam {
    position: absolute; top: 0; bottom: 0; left: 50%; z-index: 4;
    width: 2px; transform: translateX(-50%);
    background: linear-gradient(180deg, transparent, var(--pxl-fp-accent) 20%, var(--pxl-fp-accent) 80%, transparent);
    pointer-events: none;
}
.pxl-fp-card__seam::after {
    content: "\2192"; position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; color: #14110c; font-weight: 700;
    background: var(--pxl-fp-accent);
    box-shadow: 0 10px 26px -8px rgba(0, 0, 0, .6);
}

/* Info */
.pxl-fp-card__info { margin-top: 22px; }
.pxl-fp-card__cat {
    display: inline-block; margin-bottom: 10px;
    padding: 5px 14px; border-radius: 100px;
    font-size: 11.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
    color: var(--pxl-fp-accent);
    background: color-mix(in srgb, var(--pxl-fp-accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--pxl-fp-accent) 30%, transparent);
}
.pxl-fp-card__title { font-size: clamp(20px, 1.8vw, 26px); font-weight: 700; margin: 0; letter-spacing: -.01em; }

/* ===========================================================================
   GSAP scroll-reveal initial state (only when JS marks the section ready)
   =========================================================================== */
.pxl-fp.pxl-ready[data-animate="yes"] [data-fp-card],
.pxl-fp.pxl-ready[data-animate="yes"] [data-fp-anim] { opacity: 0; will-change: transform, opacity; }

/* ===========================================================================
   Responsive
   =========================================================================== */
@media (max-width: 991px) {
    .pxl-fp--header { margin-bottom: 40px; }
    .pxl-fp--grid, .pxl-fp--grid.cols-2 { grid-template-columns: 1fr; gap: 44px; }
    .pxl-fp--grid.cols-2 .pxl-fp-card:last-child:nth-child(odd) { grid-column: auto; }
}
@media (max-width: 600px) {
    /* Stack before / after on small screens */
    .pxl-fp-card__compare { flex-direction: column; }
    .pxl-fp-side { aspect-ratio: 16 / 10; }
    .pxl-fp-card__seam { display: none; }
    .pxl-fp-tag.is-after { right: auto; left: 16px; top: auto; bottom: 16px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .pxl-fp.pxl-ready[data-animate="yes"] [data-fp-card],
    .pxl-fp.pxl-ready[data-animate="yes"] [data-fp-anim] { opacity: 1 !important; }
    .pxl-fp-side img { transition: none; }
}

/* Fallback where color-mix is unsupported */
@supports not (background: color-mix(in srgb, #000 10%, transparent)) {
    .pxl-fp--intro { color: rgba(255, 255, 255, .62); }
    .pxl-fp-card__cat { background: rgba(189, 154, 95, .12); border-color: rgba(189, 154, 95, .3); }
}