/* All depth treatment is restricted to the portfolio; dialogs and hero stay intact. */
#project-list .project-medical .project-visual,
#project-list .project-ghost .project-visual { overflow:clip; }
#project-list .project-medical .project-visual > .pv-interface { perspective:1200px; }
#project-list .pd-medical-stack { position:relative; transform-style:preserve-3d; }
#project-list .pd-medical-stack > .pv-medical { position:relative; transform:translateZ(8px); box-shadow:0 22px 32px -22px #263d4b70; }
#project-list .pd-document { position:absolute; inset:0 5px 5px; pointer-events:none; padding:16px 18px; border:1px solid #becbd0; border-radius:3px; background:linear-gradient(130deg,#fff,#eef2f1); box-shadow:0 10px 20px -16px #172e4059; }
#project-list .pd-document-rear { transform:translate3d(7px,-10px,-28px) rotate(.8deg); background:linear-gradient(145deg,#d9e2e3,#c9d6d8); }
#project-list .pd-document-middle { transform:translate3d(3px,-5px,-12px) rotate(.4deg); }
#project-list .pd-document-title { display:block; color:#61757f; font-size:7px; font-weight:600; letter-spacing:.16em; border-bottom:1px solid #c6d2d6; padding-bottom:9px; margin-bottom:18px; }
#project-list .pd-document > i { display:block; width:70%; height:3px; background:#b8c8ce; opacity:.55; margin:12px 0; }
#project-list .pd-document > i:nth-of-type(even) { width:47%; }
#project-list .pd-document > i:last-child { height:58px; width:100%; margin-top:28px; background:repeating-linear-gradient(0deg,transparent 0 13px,#c5d0d3 13px 14px); border:1px solid #ccd7da; }

#project-list .project-ghost .pv-ghost-scene { perspective:1000px; }
#project-list .pd-phone-device { position:relative; width:231px; flex:none; transform-style:preserve-3d; transform:rotate(2deg); }
#project-list .pd-phone-device::before { content:""; position:absolute; inset:0; border:2px solid #7b8a80; border-radius:35px; background:linear-gradient(115deg,#4f6157,#172a20 75%); transform:translateZ(-8px); box-shadow:12px 23px 32px -17px #203c2d80; }
#project-list .pd-phone-device > .pv-phone { position:relative; width:100%; transform:translateZ(8px); border-color:#202d26; box-shadow:inset 0 0 0 1px #dbe4d7,0 0 0 1px #77877c; }
#project-list .pd-phone-edge { position:absolute; top:32px; bottom:32px; width:16px; pointer-events:none; background:linear-gradient(90deg,#24362b,#a6b6a9 42%,#52685a 65%,#15251c); border-block:1px solid #bac8bc; transform:rotateY(90deg); transform-style:preserve-3d; }
#project-list .pd-phone-edge-left { left:0; transform-origin:left center; transform:translateZ(8px) rotateY(90deg); }
#project-list .pd-phone-edge-right { right:0; transform-origin:right center; transform:translateZ(-8px) rotateY(90deg); }
#project-list .pd-phone-edge > i { position:absolute; left:5px; right:5px; top:23%; height:36px; border:1px solid #b1bfb4; border-radius:3px; background:#425649; transform:translateZ(1px); }
#project-list .pd-phone-edge > i + i { top:35%; height:24px; }
#project-list .pd-phone-edge-right > i { top:28%; height:50px; }
#project-list .pd-phone-edge-right > i + i { display:none; }
#project-list .pd-phone-camera { position:absolute; top:11px; left:50%; width:45px; height:9px; transform:translateX(-50%); border-radius:10px; background:#24332a; box-shadow:inset 0 1px 2px #080f0b; pointer-events:none; }
#project-list .pd-phone-camera::after { content:""; position:absolute; right:4px; top:2px; width:5px; height:5px; border:1px solid #5a7065; border-radius:50%; background:#132a2d; }

@media (min-width:1001px) and (prefers-reduced-motion:no-preference) {
  #project-list .pd-medical-stack { transform:rotateX(5deg) rotateY(-11deg) rotate(-1deg); }
  #project-list .pd-medical-stack > .pv-medical { transform:translateZ(8px) scale(.96); }
  #project-list .pd-phone-device { transform:rotateX(7deg) rotateY(-23deg) rotate(3deg); }
}
@media (min-width:1001px) and (max-width:1100px) {
  #project-list .pd-phone-device { width:218px; }
}
@media (max-width:1000px) {
  #project-list .project-medical .project-visual > .pv-interface { perspective:900px; }
  #project-list .project-ghost .pv-ghost-scene { perspective:800px; }
  #project-list .pd-phone-device { width:min(231px,100%); }
}
@media (prefers-reduced-motion:reduce) {
  #project-list .pd-medical-stack { transform:none; transform-style:flat; }
  #project-list .pd-medical-stack > .pv-medical { transform:none; }
  #project-list .pd-document-rear { transform:translate(5px,-8px); }
  #project-list .pd-document-middle { transform:translate(2px,-4px); }
  #project-list .pd-phone-device { transform:none; }
}