/* ============================================================
   PF WEB ENGINE — Portfolio Card Deck (v10.1)
   FIFA-style 3D coverflow: one card front & center, flip one by one.
   Fallback: without .pf-on the track keeps the original grid layout.
   ============================================================ */

.pf-deck { position: relative; }
.pf-deck .pf-nav,
.pf-deck .pf-hud { display: none; }

/* ---------- viewport & track ---------- */
.pf-deck.pf-on .pf-viewport {
    position: relative;
    overflow: hidden;
    padding: 34px 0 14px;
    touch-action: pan-y;
    outline: none;
    user-select: none;
    -webkit-user-select: none;
}
.pf-deck.pf-on .pf-track {
    display: block;
    position: relative;
    height: 620px;
    perspective: 1500px;
    transition: height 0.4s ease;
}

/* ---------- cards in deck mode ---------- */
.pf-deck.pf-on .portfolio-card {
    position: absolute;
    left: 50%;
    top: 0;
    width: min(400px, 80vw);
    margin: 0;
    cursor: pointer;
    transition:
        transform 0.6s cubic-bezier(0.22, 0.85, 0.25, 1),
        opacity 0.6s ease,
        filter 0.6s ease;
    will-change: transform;
    backface-visibility: hidden;
}
/* active card: gold rim always on */
.pf-deck.pf-on .portfolio-card.is-active::before { opacity: 1; }

/* holographic shine sweep on the active card (FIFA special card vibe) */
.pf-deck.pf-on .portfolio-card.is-active::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 4;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(115deg,
        transparent 32%,
        rgba(255, 226, 138, 0.10) 45%,
        rgba(255, 255, 255, 0.16) 50%,
        rgba(255, 226, 138, 0.10) 55%,
        transparent 68%);
    background-size: 260% 100%;
    animation: pfHolo 3.4s linear infinite;
}
@keyframes pfHolo {
    0%   { background-position: 130% 0; }
    100% { background-position: -130% 0; }
}

/* ---------- nav arrows ---------- */
.pf-deck.pf-on .pf-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 42%;
    z-index: 120;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(8, 9, 12, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    cursor: pointer;
    transition: border-color 0.3s, color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.pf-deck.pf-on .pf-nav:hover {
    border-color: rgba(245, 165, 36, 0.7);
    color: var(--accent);
    box-shadow: 0 0 34px -8px rgba(245, 165, 36, 0.55);
    transform: scale(1.06);
}
.pf-deck.pf-on .pf-nav i,
.pf-deck.pf-on .pf-nav svg { width: 20px; height: 20px; }
.pf-deck.pf-on .pf-prev { left: 2px; }
.pf-deck.pf-on .pf-next { right: 2px; }

/* ---------- HUD (counter · name · dots · hint) ---------- */
.pf-deck.pf-on .pf-hud {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px 22px;
    margin-top: 20px;
}
.pf-count { font-size: 0.82rem; letter-spacing: 0.14em; color: var(--text-3); }
.pf-count strong { color: var(--accent); font-weight: 700; }
.pf-name { font-size: 0.95rem; color: var(--text-2); font-weight: 600; }
.pf-dots { display: flex; gap: 7px; align-items: center; }
.pf-dot {
    width: 6px;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.18);
    cursor: pointer;
    transition: background 0.3s, width 0.3s;
}
.pf-dot.is-on { background: var(--accent); width: 20px; }
.pf-hint { font-size: 0.68rem; letter-spacing: 0.18em; color: var(--text-3); opacity: 0.7; }

/* ---------- mobile ---------- */
@media (max-width: 768px) {
    .pf-deck.pf-on .pf-viewport { padding: 20px 0 8px; }
    .pf-deck.pf-on .pf-nav { width: 42px; height: 42px; top: 40%; }
    .pf-deck.pf-on .pf-prev { left: -4px; }
    .pf-deck.pf-on .pf-next { right: -4px; }
    .pf-hint { display: none; }
}