/* ============================================================
   Portfolio Showcase v3.1 — style.css
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;700;900&display=swap');

:root {
    --psc-bg:      #060818;
    --psc-surface: rgba(255,255,255,0.045);
    --psc-border:  rgba(255,255,255,0.09);
    --psc-muted:   rgba(232,234,240,0.45);
    --psc-accent:  #6366f1;
    --psc-accent2: #06b6d4;
    --psc-radius:  18px;
    --psc-font:    'Vazirmatn', sans-serif;
    --card-w:      300px;
    --card-gap:    20px;
    --mockup-h:    280px;
}

/* ── Root ── */
.psc-root {
    font-family:   var(--psc-font);
    direction:     rtl;
    background-color: transparent;
    background-image: linear-gradient(230deg, #04002e 85%, #0f18c0 100%);

    padding:       60px 48px 68px;
    position:      relative;
    overflow:      hidden;
    border-radius: 28px;
}
.psc-root::before {
    content: '';
    position: absolute; inset: 0;
    background:
            radial-gradient(ellipse 65% 45% at 15% 10%, rgba(99,102,241,.2) 0%, transparent 55%),
            radial-gradient(ellipse 50% 40% at 85% 90%, rgba(6,182,212,.14) 0%, transparent 55%);
    pointer-events: none; z-index: 0;
}
.psc-root::after {
    content: '';
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='16' cy='16' r='.5' fill='rgba(255,255,255,0.028)'/%3E%3C/svg%3E");
    pointer-events: none; z-index: 0;
}

/* ── Header ── */
.psc-header { text-align:center; margin-bottom:44px; position:relative; z-index:1; }
.psc-title {
    font-size: clamp(26px,3.5vw,44px); font-weight:900; margin:0 0 10px;
    background: linear-gradient(135deg,#fff 35%,var(--psc-accent2) 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    letter-spacing:-0.02em;
}
.psc-subtitle { font-size:15px; color:var(--psc-muted); margin:0; font-weight:300; }

/* ── Filters ── */
.psc-filters {
    display:flex; flex-wrap:wrap; justify-content:center;
    gap:8px; margin-bottom:36px; position:relative; z-index:1;
}
.psc-filter-btn {
    padding:8px 22px; border:1px solid var(--psc-border);
    background:var(--psc-surface); color:var(--psc-muted);
    border-radius:100px; font-family:var(--psc-font); font-size:13px;
    cursor:pointer; transition:all .25s; backdrop-filter:blur(10px);
}
.psc-filter-btn:hover, .psc-filter-btn.active {
    background:var(--psc-accent); border-color:var(--psc-accent);
    color:#fff; box-shadow:0 0 22px rgba(99,102,241,.45);
}

/* ── Carousel wrap ── */
.psc-carousel-wrap {
    position:relative; z-index:1; overflow:hidden;
    padding:20px 20px 24px; margin:0 -20px;
}

/* ── Track ── */
.psc-track {
    display:flex; gap:var(--card-gap);
    transition:transform .55s cubic-bezier(.4,0,.2,1);
    will-change:transform; align-items:stretch;
    direction:rtl;
}

/* ── Hidden card ── */
.psc-card.psc-hidden { display:none; }

/* ── Card ── */
.psc-card {
    position:relative; flex:0 0 var(--card-w); width:var(--card-w);
    border-radius:var(--psc-radius); background:var(--psc-surface);
    border:1px solid var(--psc-border); overflow:hidden; cursor:pointer;
    backdrop-filter:blur(18px);
    transition:transform .4s cubic-bezier(.34,1.4,.64,1), box-shadow .4s, border-color .35s;
    animation:pscIn .5s ease both;
    display:flex; flex-direction:column;
    Padding : 14px ;
}
.psc-card:nth-child(1) { animation-delay:.04s }
.psc-card:nth-child(2) { animation-delay:.10s }
.psc-card:nth-child(3) { animation-delay:.16s }
.psc-card:nth-child(4) { animation-delay:.22s }
.psc-card:nth-child(5) { animation-delay:.28s }
.psc-card:nth-child(6) { animation-delay:.34s }
.psc-card:nth-child(n+7) { animation-delay:.40s }

@keyframes pscIn {
    from { opacity:0; transform:translateY(24px) }
    to   { opacity:1; transform:translateY(0) }
}

/* color tint overlay */
.psc-card::before {
    content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
    background:linear-gradient(
            165deg,
            rgba(var(--r),var(--g),var(--b),.2) 0%,
            rgba(var(--r),var(--g),var(--b),.05) 50%,
            transparent 100%
    );
    transition:opacity .4s;
}
/* top accent bar */
.psc-card::after {
    content:''; position:absolute; top:0; left:0; right:0; height:2.5px; z-index:3; pointer-events:none;
    background:linear-gradient(90deg, transparent, rgba(var(--r),var(--g),var(--b),.95) 50%, transparent);
}
.psc-card:hover {
    transform:translateY(-10px) scale(1.02);
    box-shadow:0 32px 80px rgba(var(--r),var(--g),var(--b),.3), 0 8px 30px rgba(0,0,0,.5);
    border-color:rgba(var(--r),var(--g),var(--b),.4);
}
.psc-card:hover::before { opacity:1.7; }

/* ── Badge ── */
.psc-badge {
    position:absolute; top:12px; right:12px; z-index:10;
    display:flex; align-items:center; gap:4px;
    background:rgba(var(--r),var(--g),var(--b),.9); color:#fff;
    padding:4px 10px 4px 8px; border-radius:100px;
    font-size:10px; font-weight:700; letter-spacing:.06em;
    backdrop-filter:blur(8px); box-shadow:0 4px 14px rgba(0,0,0,.35);
}
.psc-badge-star { font-size:8px; animation:pscPulse 2s ease-in-out infinite; }
@keyframes pscPulse {
    0%,100% { opacity:1; transform:scale(1) }
    50%     { opacity:.5; transform:scale(.8) }
}

/* ── Card link ── */
.psc-card-link {
    display:flex; flex-direction:column; flex:1;
    text-decoration:none; position:relative; z-index:1;
}

/* ════════════════════════════════════════════
   MOCKUP  —  desktop (background) + phone (foreground)
   Layout per card (width ~240px):
     desktop : fills right side, top-anchored, slightly tilted on hover
     phone   : left-bottom corner, overlaps desktop, taller
   ════════════════════════════════════════════ */
.psc-mockup {
    position:relative;
    height:var(--mockup-h);
    flex-shrink:0;
    overflow:hidden;
    /* inner padding so shadows aren't clipped */
    padding:16px 12px 0;
    background:linear-gradient(
            to bottom,
            rgba(var(--r),var(--g),var(--b),.12) 0%,
            rgba(0,0,0,.0) 100%
    );
}

/* ── Desktop frame ── */
.psc-desktop {
    /* sits in the upper-right area of the mockup */
    position:absolute;
    top:16px;
    right:12px;
    /* leave room on the left for the phone */
    left:52px;
    /* height: ~65% of mockup */
    height:65%;

    background:#0d0f22;
    border-radius:8px 8px 5px 5px;
    border:1.5px solid rgba(255,255,255,.15);
    box-shadow:
            0 4px 20px rgba(0,0,0,.6),
            0 0 0 1px rgba(255,255,255,.05);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    transition:transform .42s cubic-bezier(.34,1.2,.64,1), box-shadow .42s;
    z-index:1;
}
.psc-card:hover .psc-desktop {
    transform:translateX(5px) translateY(-5px) rotate(1deg);
    box-shadow:
            0 14px 40px rgba(var(--r),var(--g),var(--b),.22),
            0 0 0 1.5px rgba(var(--r),var(--g),var(--b),.3);
}

/* browser bar inside desktop */
.psc-desktop-bar {
    height:18px; flex-shrink:0;
    background:rgba(255,255,255,.06);
    border-bottom:1px solid rgba(255,255,255,.07);
    display:flex; align-items:center; padding:0 7px; gap:4px;
}
.psc-dot { width:5px; height:5px; border-radius:50%; flex-shrink:0; }
.psc-dot.d1 { background:#ff5f57; }
.psc-dot.d2 { background:#febc2e; }
.psc-dot.d3 { background:#28c840; }

/* url bar mockup */
.psc-desktop-bar::after {
    content:'';
    flex:1; height:8px; margin-right:6px;
    background:rgba(255,255,255,.07);
    border-radius:4px;
}

.psc-desktop-screen {
    flex:1; overflow:hidden; position:relative;
    background:#080a1a;
}

/* ── Phone frame ── */
.psc-phone {
    position:absolute;
    bottom:0;
    left:8px;
    width:40%;
    max-width:82px;
    /* taller than desktop */
    height:60%;

    background:#0a0c1e;
    border-radius:14px 14px 12px 12px;
    border:2px solid rgba(255,255,255,.2);
    box-shadow:
            0 8px 32px rgba(0,0,0,.7),
            0 0 0 3px rgba(var(--r),var(--g),var(--b),.2),
            inset 0 1px 0 rgba(255,255,255,.12);
    overflow:hidden;
    display:flex; flex-direction:column;
    z-index:2;
    transition:transform .42s cubic-bezier(.34,1.2,.64,1), box-shadow .42s;
}
.psc-card:hover .psc-phone {
    transform:translateX(-5px) translateY(-8px) rotate(-1.5deg);
    box-shadow:
            0 20px 55px rgba(var(--r),var(--g),var(--b),.38),
            0 0 0 3px rgba(var(--r),var(--g),var(--b),.5),
            inset 0 1px 0 rgba(255,255,255,.15);
}

/* notch */
.psc-phone-notch {
    height:12px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    background:rgba(0,0,0,.95);
    border-radius:0 0 8px 8px;
    margin:0 auto; width:38%;
    position:relative; z-index:2;
}
.psc-phone-notch::after {
    content:'';
    width:5px; height:5px; border-radius:50%;
    background:rgba(var(--r),var(--g),var(--b),.7);
    box-shadow:0 0 5px rgba(var(--r),var(--g),var(--b),.6);
}

.psc-phone-screen {
    flex:1; overflow:hidden; position:relative;
    background:#080a1a;
}

/* ── Scroll images ── */
.psc-scroll-img {
    width:100%; display:block;
    object-fit:cover; object-position:top center;
    transform:translateY(0); will-change:transform;
    user-select:none; pointer-events:none;
}

/* no-image placeholder */
.psc-no-img {
    height:100%; display:flex; align-items:center; justify-content:center;
    color:rgba(var(--r),var(--g),var(--b),.35);
}
.psc-no-img svg { width:38px; }

/* ── Card info ── */
.psc-info {
    display:flex; flex-direction:column; gap:10px;
    padding:14px 14px 12px; flex:1;
    border-top:1px solid rgba(255,255,255,.06);
}
.psc-info-top {
    display:flex; align-items:flex-start;
    justify-content:space-between; gap:6px;
}
.psc-card-title { font-size:13px; font-weight:700; color:#fff; margin:0; line-height:1.4; flex:1; }
.psc-card-meta  { display:flex; flex-direction:column; align-items:flex-end; gap:2px; flex-shrink:0; }
.psc-client     { font-size:10px; color:var(--psc-muted); white-space:nowrap; }
.psc-year       { font-size:11px; font-weight:600; color:rgba(var(--r),var(--g),var(--b),.9); white-space:nowrap; }

/* ── Tags ── */
.psc-tags { display:flex; flex-wrap:wrap; gap:4px; }
.psc-tag {
    font-size:10px; padding:2px 8px; border-radius:100px;
    background:rgba(var(--r),var(--g),var(--b),.13);
    color:rgba(var(--r),var(--g),var(--b),1);
    border:1px solid rgba(var(--r),var(--g),var(--b),.25);
    font-weight:500; transition:background .2s;
}
.psc-card:hover .psc-tag { background:rgba(var(--r),var(--g),var(--b),.25); }

/* ── CTA ── */
.psc-cta {
    display:flex; align-items:center; gap:6px;
    padding-top:10px; border-top:1px solid rgba(255,255,255,.07);
    font-size:12px; font-weight:600;
    color:rgba(var(--r),var(--g),var(--b),.65);
    transition:color .25s; margin-top:auto;
}
.psc-cta svg { transition:transform .25s; flex-shrink:0; }
.psc-card:hover .psc-cta     { color:rgba(var(--r),var(--g),var(--b),1); }
.psc-card:hover .psc-cta svg { transform:translateX(-5px); }

/* ── Nav arrows ── */
.psc-nav {
    position:absolute; top:50%; transform:translateY(-50%);
    width:42px; height:42px; border-radius:50%;
    background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.13);
    color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:background .25s, transform .25s, box-shadow .25s;
    backdrop-filter:blur(10px); z-index:5;
}
.psc-nav:hover {
    background:var(--psc-accent); border-color:var(--psc-accent);
    box-shadow:0 0 22px rgba(99,102,241,.5); transform:translateY(-50%) scale(1.1);
}
.psc-nav-prev { left:-10px; }
.psc-nav-next { right:-10px; }
.psc-nav:disabled { opacity:.25; cursor:default; pointer-events:none; }

/* ── Dots ── */
.psc-dots {
    display:flex; justify-content:center; gap:7px;
    margin-top:24px; position:relative; z-index:1;
}
.psc-dot-btn {
    width:7px; height:7px; border-radius:50%;
    background:rgba(255,255,255,.18); border:none; cursor:pointer; padding:0;
    transition:background .25s, width .3s, border-radius .3s;
}
.psc-dot-btn.active {
    background:var(--psc-accent); width:22px; border-radius:4px;
    box-shadow:0 0 10px rgba(99,102,241,.6);
}

/* ── Empty ── */
.psc-empty { text-align:center; color:var(--psc-muted); padding:60px; font-size:16px; }

/* ── Responsive ── */
@media (max-width:1400px) { :root { --card-w:220px; } }
@media (max-width:1100px) { :root { --card-w:200px; --mockup-h:255px; } }
@media (max-width:900px)  {
    :root { --card-w:200px; --mockup-h:245px; }
    .psc-root { padding:44px 24px 52px; }
}
@media (max-width:600px)  {
    :root { --card-w:74vw; --mockup-h:240px; }
    .psc-root { padding:36px 16px 44px; }
    .psc-nav-prev { left:-6px; }
    .psc-nav-next { right:-6px; }
}