/* ============================================================
   PJ KAPTEIN WOONSUPPORT - Premium project preview
   Shared-element (FLIP) modal + laser-scan hover. GPU-only.
   ============================================================ */

/* ---- card affordance + hover ---- */
.pcard{cursor:pointer}
.pcard:focus-visible{outline:2px solid var(--volt,#39FF14);outline-offset:3px;border-radius:14px}
.pcard-media{position:relative;overflow:hidden}
.pcard-media img{transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.pcard:hover .pcard-media img,.pcard:focus-visible .pcard-media img{transform:scale(1.05)}
.pcard:hover .pcard-link,.pcard:focus-visible .pcard-link{color:var(--volt,#39FF14)}

/* subtle green laser line scanning left -> right on hover */
.pcard-media::after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:14%;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(57,255,20,.06) 30%,rgba(57,255,20,.85) 50%,rgba(57,255,20,.06) 70%,transparent);
  filter:blur(.3px);mix-blend-mode:screen;opacity:0;transform:translateX(-160%)}
@media(hover:hover){
  .pcard:hover .pcard-media::after{opacity:1;animation:pmLaser 1.5s cubic-bezier(.5,.1,.4,1)}
}
@keyframes pmLaser{0%{transform:translateX(-160%);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translateX(800%);opacity:0}}

/* ============================================================
   MODAL
   ============================================================ */
.pm-root{position:fixed;inset:0;z-index:9990;display:none}
.pm-root.active{display:block}
body.pm-open{overflow:hidden}

.pm-scrim{position:fixed;inset:0;z-index:9991;background:rgba(4,5,4,.55);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  opacity:0;transition:opacity .55s cubic-bezier(.22,.61,.36,1)}
.pm-root.in .pm-scrim{opacity:1}

/* flying shared-element image */
.pm-ghost{position:fixed;z-index:9994;border-radius:16px;overflow:hidden;pointer-events:none;
  background-size:cover;background-position:center;will-change:transform;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8)}

/* panel */
.pm-panel{position:fixed;z-index:9992;left:50%;top:50%;transform:translate(-50%,-50%);
  width:80vw;max-width:1400px;max-height:90vh;overflow:hidden;
  display:grid;grid-template-columns:1.12fr .88fr;
  background:linear-gradient(180deg,rgba(18,20,18,.92),rgba(9,10,9,.96));
  -webkit-backdrop-filter:blur(16px) saturate(1.1);backdrop-filter:blur(16px) saturate(1.1);
  border:1px solid rgba(57,255,20,.22);border-radius:24px;
  box-shadow:0 50px 120px -30px rgba(0,0,0,.92), 0 0 90px -30px rgba(57,255,20,.45), inset 0 1px 0 rgba(255,255,255,.05);
  opacity:0;transition:opacity .5s cubic-bezier(.22,.61,.36,1);color:#eef0ec}
.pm-root.in .pm-panel{opacity:1}

/* left: media */
.pm-media{position:relative;overflow:hidden;background:#0a0b0a;min-height:420px}
.pm-track{display:flex;height:100%;transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.pm-slide{flex:0 0 100%;height:100%;overflow:hidden}
.pm-slide img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s cubic-bezier(.22,.61,.36,1)}
.pm-media:hover .pm-slide img{transform:scale(1.04)}
.pm-media-fade{opacity:0;transition:opacity .35s ease}
.pm-root.shown .pm-media-fade{opacity:1}
.pm-cat{position:absolute;top:18px;left:18px;z-index:4;font-family:var(--f-body,'Inter',sans-serif);
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#06210a;
  background:var(--volt,#39FF14);padding:6px 12px;border-radius:20px}
/* gallery nav */
.pm-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.25);background:rgba(10,11,10,.55);backdrop-filter:blur(6px);
  color:#fff;cursor:pointer;display:none;place-items:center;transition:background .3s,border-color .3s,transform .3s}
.pm-nav:hover{background:rgba(57,255,20,.18);border-color:var(--volt,#39FF14)}
.pm-nav svg{width:20px;height:20px}
.pm-prev{left:14px}.pm-next{right:14px}
.pm-root.has-gallery .pm-nav{display:grid}
.pm-dots{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);z-index:4;display:none;gap:7px}
.pm-root.has-gallery .pm-dots{display:flex}
.pm-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.35);cursor:pointer;transition:background .3s,transform .3s}
.pm-dot.on{background:var(--volt,#39FF14);transform:scale(1.25);box-shadow:0 0 8px var(--volt,#39FF14)}

/* right: info */
.pm-info{position:relative;padding:clamp(28px,3vw,46px);overflow-y:auto;display:flex;flex-direction:column}
.pm-eyebrow{font-family:var(--f-body,'Inter',sans-serif);font-size:11.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--volt,#39FF14);display:inline-flex;align-items:center;gap:10px;margin-bottom:14px}
.pm-eyebrow::before{content:"";width:24px;height:1px;background:var(--volt,#39FF14);box-shadow:0 0 8px var(--volt,#39FF14)}
.pm-title{font-family:var(--f-head,'Bebas Neue',sans-serif);font-weight:400;font-size:clamp(28px,3.2vw,44px);
  line-height:.98;text-transform:uppercase;color:#fff;letter-spacing:.01em;margin-bottom:14px}
.pm-desc{font-family:var(--f-body,'Inter',sans-serif);font-size:15px;line-height:1.65;color:#c4c9c1;margin-bottom:24px}
.pm-facts{display:grid;grid-template-columns:repeat(3,auto);gap:18px 28px;margin:0 0 26px;
  padding:18px 0;border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1)}
.pm-facts dt{font-family:var(--f-body,'Inter',sans-serif);font-size:10.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#8b918a;margin-bottom:5px}
.pm-facts dd{font-family:var(--f-body,'Inter',sans-serif);font-size:14.5px;color:#fff;font-weight:600}
.pm-tasks h3{font-family:var(--f-body,'Inter',sans-serif);font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#9aa39a;margin-bottom:14px}
.pm-tasklist{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:11px}
.pm-tasklist li{position:relative;padding-left:28px;font-family:var(--f-body,'Inter',sans-serif);
  font-size:14.5px;line-height:1.5;color:#d4d8d0}
.pm-tasklist li::before{content:"";position:absolute;left:0;top:6px;width:15px;height:9px;
  border-left:2px solid var(--volt,#39FF14);border-bottom:2px solid var(--volt,#39FF14);transform:rotate(-45deg)}
.pm-cta{margin-top:auto;align-self:flex-start}

.pm-close{position:absolute;top:16px;right:16px;z-index:6;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.2);background:rgba(10,11,10,.5);backdrop-filter:blur(6px);color:#fff;
  cursor:pointer;display:grid;place-items:center;transition:transform .45s,border-color .3s,background .3s}
.pm-close:hover{transform:rotate(90deg);border-color:var(--volt,#39FF14);background:rgba(57,255,20,.1)}
.pm-close svg{width:20px;height:20px}

/* stagger the info content in */
.pm-info > *{opacity:0;transform:translateY(14px)}
.pm-root.shown .pm-info > *{opacity:1;transform:none;transition:opacity .5s ease,transform .55s cubic-bezier(.22,.61,.36,1)}
.pm-root.shown .pm-info > *:nth-child(1){transition-delay:.12s}
.pm-root.shown .pm-info > *:nth-child(2){transition-delay:.17s}
.pm-root.shown .pm-info > *:nth-child(3){transition-delay:.22s}
.pm-root.shown .pm-info > *:nth-child(4){transition-delay:.27s}
.pm-root.shown .pm-info > *:nth-child(5){transition-delay:.32s}
.pm-root.shown .pm-info > *:nth-child(6){transition-delay:.37s}
.pm-root.shown .pm-info > *:nth-child(7){transition-delay:.42s}

/* ============================================================
   MOBILE - bottom sheet
   ============================================================ */
@media(max-width:820px){
  .pm-panel{left:0;right:0;bottom:0;top:auto;transform:translateY(100%);
    width:100%;max-width:none;max-height:92vh;border-radius:24px 24px 0 0;
    grid-template-columns:1fr;overflow-y:auto;transition:transform .5s cubic-bezier(.22,.61,.36,1),opacity .3s ease;opacity:1}
  .pm-root.in .pm-panel{transform:translateY(0)}
  .pm-root.active .pm-panel{opacity:1}
  .pm-media{min-height:0;height:46vh}
  .pm-grab{position:sticky;top:0;z-index:5;height:22px;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(180deg,rgba(12,13,12,.9),transparent)}
  .pm-grab::before{content:"";width:42px;height:4px;border-radius:4px;background:rgba(255,255,255,.3)}
  .pm-info > *{opacity:1;transform:none}   /* no stagger jank on sheet */
  .pm-ghost{display:none!important}        /* sheet motion replaces FLIP on mobile */
}
.pm-grab{display:none}
@media(max-width:820px){.pm-grab{display:flex}}

@media(prefers-reduced-motion:reduce){
  .pcard-media::after{display:none}
  .pm-ghost{display:none!important}
  .pm-scrim,.pm-panel,.pm-track,.pm-slide img,.pm-info > *{transition:opacity .2s linear!important;transform:none!important}
}