/* =========================================================
   NIKOOSEN — PORTFOLIO DETAIL
   Two-column hero (content right, project visual left) +
   integrated, aligned case-study body. No sticky sidebar.
   ========================================================= */

.pfd{
  position:relative;background:var(--bg);color:var(--text);
  --acc:#4F7CFF;--acc-soft:rgba(79,124,255,.12);--acc-line:rgba(79,124,255,.35);
}
.pfd.acc-blue  {--acc:#4F7CFF;--acc-soft:rgba(79,124,255,.13);--acc-line:rgba(79,124,255,.38)}
.pfd.acc-cyan  {--acc:#55D6FF;--acc-soft:rgba(85,214,255,.12);--acc-line:rgba(85,214,255,.38)}
.pfd.acc-violet{--acc:#8B7CFF;--acc-soft:rgba(139,124,255,.15);--acc-line:rgba(139,124,255,.42)}
.pfd.acc-pink  {--acc:#FF8AB7;--acc-soft:rgba(255,138,183,.12);--acc-line:rgba(255,138,183,.38)}
.pfd.acc-mint  {--acc:#4AFFD4;--acc-soft:rgba(74,255,212,.10);--acc-line:rgba(74,255,212,.34)}
.pfd .reveal{opacity:0;transform:translateY(30px)}

/* ---------- hero ---------- */
.pfd-hero{position:relative;padding:140px 0 56px;overflow:hidden}
.pfd-hero__bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.pfd-orb{position:absolute;width:560px;height:560px;top:-210px;inset-inline-end:-140px;border-radius:50%;filter:blur(82px);opacity:.5;will-change:transform,opacity;animation:pfdDrift 18s ease-in-out infinite alternate}
@keyframes pfdDrift{0%{transform:translate3d(0,0,0) scale(1);opacity:.4}100%{transform:translate3d(-48px,38px,0) scale(1.16);opacity:.66}}
.pfd-gridlines{position:absolute;inset:-2px;background-image:linear-gradient(rgba(126,161,197,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(126,161,197,.06) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse 82% 70% at 50% 20%,#000,transparent 74%)}

.pfd-hero__grid{
  position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(30px,5vw,58px);align-items:stretch;
}
.pfd-hero__copy{display:flex;flex-direction:column;justify-content:center}
.pfd-back{display:inline-flex;align-items:center;gap:8px;font-size:.84rem;color:var(--muted);margin-bottom:22px;transition:color .25s;width:fit-content}
.pfd-back:hover{color:var(--acc)}
.pfd-crumb{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px;font-size:.82rem;color:var(--muted)}
.pfd-crumb__idx{font-size:.86rem;font-weight:900;color:var(--acc);border:1px solid var(--acc-line);border-radius:8px;padding:2px 10px;background:var(--acc-soft)}
.pfd-hero h1{font-size:clamp(1.7rem,3.8vw,2.2rem);font-weight:900;line-height:1.7;letter-spacing:-.01em;margin-bottom:16px}
.pfd-hero__sub{color:var(--muted);font-size:1rem;line-height:2;max-width:600px;margin-bottom:18px}
.pfd-tags span{display:inline-block;font-size:.78rem;color:var(--acc);border:1px solid var(--acc-line);background:var(--acc-soft);border-radius:30px;padding:5px 14px;margin-bottom:26px}

.pfd-meta{display:flex;flex-wrap:wrap;gap:12px;margin:0;padding:0}
.pfd-meta>div{display:flex;flex-direction:column;gap:3px;border:1px solid var(--line);border-radius:14px;padding:12px 18px;background:rgba(255,255,255,.03);min-width:120px}
.pfd-meta dt{font-size:.74rem;color:var(--muted)}
.pfd-meta dd{font-size:.9rem;font-weight:800;color:var(--text);margin:0}

.pfd-site{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-top:22px}
.pfd-site__url{font-family:ui-monospace,monospace;font-size:.78rem;color:var(--muted);direction:ltr;word-break:break-all}

/* ---------- hero visual ---------- */
.pfd-hero__visual{display:flex;align-items:stretch}
.pfd-shot{
  position:relative;flex:1;overflow:hidden;min-height:340px;border-radius:10px;
  border:1px solid var(--line);background:#060d18;box-shadow:0 26px 64px rgba(0,0,0,.4);
}
@property --pfd-progress{syntax:'<number>';inherits:false;initial-value:0}
.pfd-shot__page{
  position:absolute;inset:0;height:250%;display:flex;flex-direction:column;gap:14px;padding:22px;
  background:linear-gradient(170deg,var(--g1),var(--g2));animation:pfdScroll 13s ease-in-out .5s infinite alternate;
  transform:translateY(calc(var(--pfd-progress, 0) * var(--shot-scroll, -58%)));
}
.pfd-shot__page>.shot-img{position:absolute;inset:0 auto auto 0;width:100%;height:auto}
@keyframes pfdScroll{0%{--pfd-progress:0}100%{--pfd-progress:1}}
.pfd-shot__nav{display:flex;gap:6px}
.pfd-shot__nav i{width:24px;height:7px;border-radius:4px;background:rgba(255,255,255,.5)}
.pfd-shot__nav i:first-child{width:48px;background:rgba(255,255,255,.85)}
.pfd-shot__hero{height:110px;border-radius:11px;background:rgba(255,255,255,.16);margin-top:8px}
.pfd-shot__row{display:flex;gap:12px}
.pfd-shot__row b{flex:1;height:70px;border-radius:9px;background:rgba(255,255,255,.13)}
.pfd-shot__text{height:9px;border-radius:5px;background:rgba(255,255,255,.22)}
.pfd-shot__text.short{width:56%}
.pfd-shot__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pfd-shot__grid b{height:84px;border-radius:9px;background:rgba(255,255,255,.12)}
.pfd-shot__cta{height:38px;width:50%;border-radius:9px;background:rgba(255,255,255,.6);margin-top:auto}
.pfd-shot--code{background:#050a13}
.pfd-shot__page--code{height:100%;justify-content:center;gap:10px;animation:none}
/* a still sample is shown whole, the gradient of the record fills the rest of the frame */
.pfd-shot__page--code>.shot-img{inset:0;width:100%;height:100%;object-fit:contain}
.pfd-code__bar{display:flex;gap:6px;position:absolute;top:16px;inset-inline-start:18px}
.pfd-code__bar i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.28)}
.pfd-code__bar i:first-child{background:#ff6b6b}.pfd-code__bar i:nth-child(2){background:#ffc46b}
.pfd-code__lines{display:flex;flex-direction:column;gap:11px;margin-top:16px}
.pfd-code__lines b{height:8px;border-radius:4px;background:var(--acc-line)}
.pfd-code__lines b:nth-child(1){width:70%}.pfd-code__lines b:nth-child(2){width:88%}
.pfd-code__lines b:nth-child(3){width:54%}.pfd-code__lines b:nth-child(4){width:80%}
.pfd-code__lines b:nth-child(5){width:42%}.pfd-code__lines b:nth-child(6){width:66%}
.pfd-code__lines b:nth-child(7){width:76%}
.pfd-code__glyph{position:absolute;bottom:16px;inset-inline-end:20px;font-size:3rem;color:var(--acc);opacity:.6}

/* ---------- body ---------- */
.pfd-body{display:flex;flex-direction:column;gap:20px;}
.pfd-block h2,.pfd-facts h2{font-size:1.3rem;font-weight:900;margin-bottom:16px;position:relative;padding-inline-start:16px}
.pfd-block h2::before,.pfd-facts h2::before{content:'';position:absolute;inset-inline-start:0;top:6px;bottom:6px;width:4px;border-radius:4px;background:var(--acc)}
.pfd-block p{color:#c4d2e2;font-size:1rem;line-height:2.2;margin-bottom:14px}
.pfd-block p:last-child{margin-bottom:0}
.pfd-body section  {
  padding-block: 50px;
}

.pfd-journey{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.pfd-step{border:1px solid var(--line);border-radius:18px;padding:24px 22px;background:var(--card);transition:.4s}
.pfd-step:hover{border-color:var(--acc-line);transform:translateY(-4px)}
.pfd-step__n{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;font-weight:900;color:var(--acc);border:1px solid var(--acc-line);background:var(--acc-soft);margin-bottom:14px}
.pfd-step h3{font-size:1.02rem;font-weight:800;margin-bottom:8px}
.pfd-step p{color:var(--muted);font-size:.9rem;line-height:1.95}

.pfd-facts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,44px);align-items:start}
.pfd-stack{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0}
.pfd-stack li{font-size:.82rem;font-weight:700;color:#cdd8e6;border:1px solid var(--line);border-radius:30px;padding:7px 16px;background:rgba(255,255,255,.03);transition:.3s}
.pfd-stack li:hover{border-color:var(--acc-line);color:var(--acc);background:var(--acc-soft)}
.pfd-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pfd-stat{border:1px solid var(--line);border-radius:16px;padding:22px 14px;text-align:center;background:linear-gradient(150deg,var(--acc-soft),transparent)}
.pfd-stat b{display:block;font-size:1.5rem;font-weight:900;color:var(--acc);line-height:1.2}
.pfd-stat span{font-size:.76rem;color:var(--muted)}

/* ---------- cta ---------- */
.pfd-cta{padding:20px 0 90px}
.pfd-cta__box{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;padding:38px 44px;border-radius:24px;border:1px solid var(--line);background:radial-gradient(120% 140% at 0% 0%,var(--acc-soft),transparent 55%),var(--bg2)}
.pfd-cta__box h2{font-size:clamp(1.25rem,2.5vw,1.8rem);font-weight:900;margin-bottom:8px}
.pfd-cta__box p{color:var(--muted);font-size:.94rem}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .pfd-hero__grid{grid-template-columns:1fr;gap:36px}
  .pfd-shot{min-height:280px}
  .pfd-hero__copy{justify-content:flex-start}
  .pfd-journey{grid-template-columns:1fr}
  .pfd-facts{grid-template-columns:1fr}
}
@media (max-width:560px){
  .pfd-hero{padding:120px 0 40px}
  .pfd-stats{grid-template-columns:1fr}
  .pfd-cta__box{padding:28px 22px}
  .pfd-meta>div{min-width:0;flex:1}
}
@media (prefers-reduced-motion:reduce){
  .pfd *,.pfd *::before,.pfd *::after{animation:none!important;transition:none!important}
  .pfd .reveal{opacity:1;transform:none}
  .pfd-shot__page{height:100%}
}