/* ═══════════════ LIVELY PORTFOLIO PAGE ═══════════════ */

/* Header stats */
.pf-stats { display: flex; justify-content: center; gap: 2.5rem; margin-top: 2rem; flex-wrap: wrap; }
.pf-stat { text-align: center; }
.pf-stat b { display: block; font: 900 2.2rem/1 'Poppins', sans-serif; color: #fff; }
.pf-stat b i { font-style: normal; color: var(--orange); }
.pf-stat > span { font-size: .78rem; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.6); font-weight: 600; }

/* ── Sticky filter bar with sliding highlight ── */
.pf-live .portfolio-filters {
    position: sticky; top: 78px; z-index: 20; justify-content: center;
    width: fit-content; max-width: 100%; margin: 0 auto 2.5rem !important; padding: .45rem;
    background: rgba(255,255,255,.88); backdrop-filter: blur(12px);
    border: 1px solid var(--border); border-radius: 30px; box-shadow: var(--shadow);
}
.pf-live .portfolio-filters { position: sticky; }
.pf-live .portfolio-filters .filter-btn {
    position: relative; z-index: 1; margin: 0; border: none; background: transparent; color: var(--navy);
    display: inline-flex; align-items: center; gap: .45rem; padding: .55rem 1.1rem; transition: color .3s;
}
.pf-live .portfolio-filters .filter-btn:hover { background: rgba(255,122,0,.08); color: var(--orange); }
.pf-live .portfolio-filters .filter-btn.active { background: transparent; color: #fff; }
.pf-count {
    font: 700 .68rem 'Poppins', sans-serif; min-width: 22px; padding: .1rem .4rem; border-radius: 50px; text-align: center;
    background: rgba(10,37,64,.08); color: inherit; transition: background .3s;
}
.filter-btn.active .pf-count { background: rgba(255,255,255,.25); }
.pf-ind {
    position: absolute; top: 0; left: 0; z-index: 0; border-radius: 50px; pointer-events: none;
    background: linear-gradient(135deg, var(--orange), #ff9a40); box-shadow: 0 6px 18px rgba(255,122,0,.4);
    transition: transform .45s cubic-bezier(.3,1.3,.5,1), width .45s cubic-bezier(.3,1.3,.5,1), height .3s;
}

/* ── Section backdrop ── */
.pf-live #portfolio { position: relative; }
.pf-live #portfolio::before {
    content: ''; position: absolute; width: 420px; height: 420px; border-radius: 50%; filter: blur(80px);
    background: rgba(255,122,0,.10); top: 200px; right: -160px; pointer-events: none;
}

/* ── Tiles ── */
.pf-live .portfolio-grid { gap: 1.4rem; }
.pf-live .port-item {
    box-shadow: var(--shadow); outline: none;
    opacity: 0; transform: translateY(40px) scale(.96);
    transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1), box-shadow .3s;
    transition-delay: calc(var(--i, 0) * 70ms), calc(var(--i, 0) * 70ms), 0s;
}
.pf-live .port-item.in { opacity: 1; transform: none; }
.pf-live .port-item.in:hover, .pf-live .port-item.in:focus-visible { transform: translateY(-8px); box-shadow: var(--shadow-lg); transition-delay: 0s; }
.pf-live .port-item.in:focus-visible { box-shadow: 0 0 0 3px var(--orange), var(--shadow-lg); }
.pf-live .port-item.pf-out { opacity: 0; transform: scale(.9); transition-delay: 0s; }

.pf-live .port-img img, .pf-live .port-img video { display: block; transition: transform .8s cubic-bezier(.2,.7,.2,1); }

.pf-live .port-overlay {
    position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.3rem;
    background: linear-gradient(to top, rgba(10,37,64,.95) 0%, rgba(10,37,64,.5) 40%, rgba(10,37,64,0) 72%);
    opacity: 0; transition: opacity .35s; z-index: 3;
}
.pf-live .port-overlay h4 { color: #fff; font-size: 1.05rem; margin-bottom: .25rem; transform: translateY(16px); transition: transform .4s; }
.pf-live .port-overlay p { color: rgba(255,255,255,.75); font-size: .82rem; transform: translateY(16px); transition: transform .4s .05s; }
.pf-zoom {
    position: absolute; top: 50%; left: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%;
    display: grid; place-items: center; background: rgba(255,255,255,.95); color: var(--orange);
    transform: scale(.4); opacity: 0; transition: transform .4s cubic-bezier(.3,1.6,.5,1), opacity .3s;
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.pf-zoom svg { width: 22px; height: 22px; }
.pf-tag {
    position: absolute; top: 12px; left: 12px; z-index: 4;
    font: 700 .66rem 'Poppins', sans-serif; letter-spacing: 1px; text-transform: uppercase; color: #fff;
    background: rgba(10,37,64,.75); backdrop-filter: blur(6px); padding: .3rem .75rem; border-radius: 50px;
    transition: background .3s;
}
.pf-live .port-item:hover .port-overlay, .pf-live .port-item:focus-visible .port-overlay { opacity: 1; }
.pf-live .port-item:hover .port-overlay h4, .pf-live .port-item:hover .port-overlay p { transform: none; }
.pf-live .port-item:hover .pf-zoom { transform: scale(1); opacity: 1; }
.pf-live .port-item:hover .pf-tag { background: var(--orange); }
.pf-live .play-icon { animation: pfPlay 2s ease-out infinite; transition: opacity .3s; }
.pf-live .port-item.playing .play-icon { opacity: 0; }
@keyframes pfPlay { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.6); } 100% { box-shadow: 0 0 0 18px rgba(255,255,255,0); } }

@media (hover: none) {
    .pf-live .port-overlay { opacity: 1; background: linear-gradient(to top, rgba(10,37,64,.9) 0%, rgba(10,37,64,0) 50%); }
    .pf-live .port-overlay h4, .pf-live .port-overlay p { transform: none; }
    .pf-zoom { display: none; }
}

/* ── Lightbox ── */
.pf-live .lightbox.lb-open .lightbox-content { animation: lbIn .45s cubic-bezier(.2,.9,.3,1.15); }
.pf-live .lightbox.lb-open { animation: lbFade .3s ease; }
@keyframes lbIn { from { opacity: 0; transform: scale(.88) translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes lbFade { from { opacity: 0; } to { opacity: 1; } }
.pf-live #lightbox-media img, .pf-live #lightbox-media video { animation: lbMedia .4s ease; }
@keyframes lbMedia { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
.lb-counter {
    position: absolute; top: 18px; left: 20px; z-index: 10; color: #fff; background: rgba(0,0,0,.6);
    font: 600 .8rem 'Poppins', sans-serif; padding: .35rem .85rem; border-radius: 50px;
}
.pf-live .nav-btn:hover { background: var(--orange); }
.pf-live .close-btn { transition: background .25s, transform .25s; }
.pf-live .close-btn:hover { background: var(--orange); transform: rotate(90deg); }

/* ── Bottom CTA ── */
.pf-live #cta::before, .pf-live #cta::after { content: ''; position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; }
.pf-live #cta::before { width: 420px; height: 420px; top: -180px; left: 5%; background: rgba(255,122,0,.35); animation: phBlob 14s ease-in-out infinite; }
.pf-live #cta::after { width: 360px; height: 360px; bottom: -160px; right: 5%; background: rgba(255,154,64,.25); animation: phBlob 17s ease-in-out infinite reverse; }
.pf-live #cta .cta-bg { animation: phDots 25s linear infinite; }
.pf-live #cta h2 span {
    background: linear-gradient(90deg, var(--orange), #ffd29e, var(--orange)); background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: svShim 4s linear infinite;
}
.pf-live #cta .btn-primary { animation: pfPulse 2.4s ease-out infinite; }
@keyframes pfPulse { 0% { box-shadow: 0 4px 18px rgba(255,122,0,.35), 0 0 0 0 rgba(255,122,0,.55); } 100% { box-shadow: 0 4px 18px rgba(255,122,0,.35), 0 0 0 16px rgba(255,122,0,0); } }

@media (max-width: 760px) {
    .pf-live .portfolio-filters { top: 74px; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; border-radius: 50px; }
    .pf-live .portfolio-filters::-webkit-scrollbar { display: none; }
    .pf-live .portfolio-filters .filter-btn { flex-shrink: 0; white-space: nowrap; }
    .pf-stats { gap: 1.5rem; }
    .pf-stat b { font-size: 1.7rem; }
}

@media (prefers-reduced-motion: reduce) {
    .pf-live .port-item { opacity: 1; transform: none; transition: none; }
    .pf-live *, .pf-live *::before, .pf-live *::after { animation: none !important; }
}