.project-modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0a0a0cb3;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:9999;display:flex;justify-content:center;align-items:center;padding:20px;box-sizing:border-box;animation:fadeInModalOverlay .3s ease forwards}.project-modal-container{background:#141419f2;border:1px solid rgba(255,255,255,.08);border-radius:20px;width:100%;max-width:800px;max-height:90vh;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;position:relative;box-shadow:0 30px 60px #00000080,0 0 100px #c2a4ff0d;display:flex;flex-direction:column;box-sizing:border-box;animation:slideInModalContent .35s cubic-bezier(.16,1,.3,1) forwards}.project-modal-container::-webkit-scrollbar{width:8px}.project-modal-container::-webkit-scrollbar-track{background:#0000001a;border-radius:0 20px 20px 0}.project-modal-container::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:4px}.project-modal-container::-webkit-scrollbar-thumb:hover{background:#fff3}.project-modal-close{position:absolute;top:12px;right:12px;background:#000000a6;border:1px solid rgba(255,255,255,.2);border-radius:50%;width:44px;height:44px;display:flex;justify-content:center;align-items:center;color:#fff;font-size:24px;cursor:pointer;z-index:20;transition:all .25s ease}.project-modal-close:hover{background:var(--accentColor);color:#000;transform:rotate(90deg);border-color:var(--accentColor)}.project-modal-image-wrapper{width:100%;height:380px;overflow:hidden;background:#0003;display:flex;align-items:center;justify-content:center;padding:14px;box-sizing:border-box}.project-modal-image{width:100%;height:100%;object-fit:contain;border-radius:10px}.project-modal-content{padding:35px;overscroll-behavior:contain}.project-modal-header{margin-bottom:25px;border-bottom:1px solid rgba(255,255,255,.05);padding-bottom:20px}.project-modal-category{font-size:13px;text-transform:uppercase;letter-spacing:2px;color:var(--accentColor);font-weight:600;display:inline-block;margin-bottom:8px}.project-modal-title{font-size:32px;font-weight:600;color:#fff;margin:0}.project-modal-body{margin-bottom:30px}.project-modal-body h3,.project-modal-tech-section h3{font-size:18px;font-weight:500;color:#ffffffe6;margin-top:0;margin-bottom:12px}.project-modal-description{font-size:15px;line-height:1.7;color:#ffffffb3;margin:0}.project-modal-tech-section{margin-bottom:35px}.project-modal-tags{display:flex;flex-wrap:wrap;gap:10px}.project-modal-tag{background:#c2a4ff0f;border:1px solid rgba(194,164,255,.15);color:var(--accentColor);padding:6px 14px;font-size:13px;border-radius:20px;font-weight:500}.project-modal-footer{display:flex;gap:15px;border-top:1px solid rgba(255,255,255,.05);padding-top:25px}.project-modal-link{display:inline-flex;align-items:center;gap:10px;padding:12px 24px;border-radius:25px;font-size:15px;font-weight:500;text-decoration:none;transition:all .3s ease;cursor:pointer}.github-btn{background:#ffffff0d;color:#fff;border:1px solid rgba(255,255,255,.1)}.github-btn:hover{background:#ffffff1f;border-color:#ffffff4d}.youtube-btn{background:red;color:#fff;border:1px solid #ff0000}.youtube-btn:hover{background:transparent;color:red;border-color:red}@keyframes fadeInModalOverlay{0%{opacity:0}to{opacity:1}}@keyframes slideInModalContent{0%{opacity:0;transform:scale(.95) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}@media only screen and (max-width: 768px){.project-modal-overlay{padding:12px;align-items:flex-end}.project-modal-container{max-height:92vh;max-height:92svh;border-radius:18px}.project-modal-image-wrapper{height:auto;max-height:32vh;aspect-ratio:3 / 2;padding:10px}.project-modal-content{padding:20px}.project-modal-header{margin-bottom:18px;padding-bottom:14px}.project-modal-category{font-size:11px;letter-spacing:1.5px}.project-modal-title{font-size:23px;line-height:1.25}.project-modal-body{margin-bottom:20px}.project-modal-body h3,.project-modal-tech-section h3{font-size:16px}.project-modal-description{font-size:14px}.project-modal-tech-section{margin-bottom:22px}.project-modal-tag{font-size:12px;padding:5px 11px}.project-modal-footer{flex-direction:column;padding-top:18px}.project-modal-link{justify-content:center;width:100%;box-sizing:border-box;padding:12px 16px;font-size:14px}}
