:root{--primary-gradient:linear-gradient(135deg, #667eea 0%, #764ba2 100%);--secondary-gradient:linear-gradient(135deg, #f093fb 0%, #f5576c 100%);--accent-gradient:linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);--card-shadow:0 8px 32px rgba(0, 0, 0, 0.12);--card-shadow-hover:0 20px 60px rgba(0, 122, 255, 0.25);--transition-smooth:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);--transition-bounce:all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);}.projects-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:2rem;padding:0 1.25rem;margin:2.5rem auto;max-width:1600px;}.project-card{background:rgba(255, 255, 255, 0.03);backdrop-filter:blur(20px);border:1px solid rgba(255, 255, 255, 0.08);border-radius:24px;overflow:hidden;position:relative;z-index:1;animation:fadeInUp 0.6s ease-out backwards;}.project-card::before{display:none;}.project-card:hover{transform:none;box-shadow:none;}body.light-theme .project-card{background:rgba(255, 255, 255, 0.95);border-color:rgba(0, 0, 0, 0.08);box-shadow:0 4px 16px rgba(0, 0, 0, 0.06);}.project-image, .media-container{position:relative;height:280px;overflow:hidden;background:linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);}body.light-theme .project-image, body.light-theme .media-container{background:linear-gradient(135deg, #f5f5f7 0%, #e8e8ea 100%);}.project-image-img, .showcase-media-content{width:100%;height:100%;object-fit:cover;transition:transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);}.type-badge{position:absolute;top:1rem;right:1rem;padding:0.5rem 1rem;background:rgba(0, 0, 0, 0.8);backdrop-filter:blur(10px);border:1px solid rgba(255, 255, 255, 0.2);border-radius:50px;font-size:0.7rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#00D4FF;z-index:10;animation:pulse 2s ease-in-out infinite;}body.light-theme .type-badge{background:rgba(255, 255, 255, 0.95);border-color:rgba(0, 0, 0, 0.1);color:#007AFF;}@keyframes pulse{0%, 100%{box-shadow:0 0 0 0 rgba(0, 212, 255, 0.4);}50%{box-shadow:0 0 0 8px rgba(0, 212, 255, 0);}}.project-overlay{display:none;}.overlay-content{display:flex;flex-direction:column;align-items:center;gap:0.75rem;color:white;font-weight:700;transform:translateY(10px);transition:transform 0.4s ease;}.project-card:hover .overlay-content{transform:translateY(0);}.view-text{font-size:1.25rem;letter-spacing:0.5px;}.project-card .showcase-info{padding:20px;position:relative;z-index:2;}.project-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;gap:0.75rem;}.project-badge .badge-text{background:var(--primary-gradient);color:white;padding:0.4rem 1rem;border-radius:50px;font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.8px;box-shadow:0 4px 12px rgba(102, 126, 234, 0.3);}.project-platforms{display:flex;gap:0.5rem;flex-wrap:wrap;}.platform-tag{background:rgba(255, 255, 255, 0.08);border:1px solid rgba(255, 255, 255, 0.15);color:var(--text-secondary);padding:0.35rem 0.75rem;border-radius:8px;font-size:0.7rem;font-weight:600;transition:var(--transition-smooth);}body.light-theme .platform-tag{background:rgba(0, 0, 0, 0.04);border-color:rgba(0, 0, 0, 0.1);color:#515154;}.project-card:hover .platform-tag{background:rgba(0, 122, 255, 0.2);border-color:rgba(0, 122, 255, 0.4);color:#00D4FF;transform:translateY(-2px);}body.light-theme .project-card:hover .platform-tag{background:rgba(0, 122, 255, 0.15);color:#007AFF;}.project-title, .showcase-title{font-size:1.35rem;font-weight:800;color:var(--text-primary);margin-bottom:0.65rem;line-height:1.3;transition:color 0.3s ease;}.project-card:hover .project-title, .project-card:hover .showcase-title{color:#007AFF;}body.light-theme .project-card:hover .project-title, body.light-theme .project-card:hover .showcase-title{color:#007AFF;}.project-description, .showcase-description{font-size:0.95rem;color:var(--text-secondary);line-height:1.65;margin-bottom:1rem;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}.project-metrics{display:grid;grid-template-columns:repeat(2, 1fr);gap:1rem;margin:1.25rem 0;padding:1.25rem;background:rgba(255, 255, 255, 0.02);border:1px solid rgba(255, 255, 255, 0.08);border-radius:16px;transition:var(--transition-smooth);}body.light-theme .project-metrics{background:rgba(0, 0, 0, 0.02);border-color:rgba(0, 0, 0, 0.08);}.project-card:hover .project-metrics{background:rgba(0, 122, 255, 0.05);border-color:rgba(0, 122, 255, 0.2);}.metric{text-align:center;}.metric-value{display:block;font-size:1.75rem;font-weight:800;color:#007AFF;margin-bottom:0.35rem;}body.light-theme .metric-value{color:#007AFF;}.metric-label{font-size:0.7rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.8px;font-weight:600;}.tech-stack, .showcase-tags{display:flex;flex-wrap:wrap;gap:0.6rem;}.tech-tag, .project-tag{background:rgba(0, 122, 255, 0.12);border:1px solid rgba(0, 122, 255, 0.3);color:#00D4FF;padding:0.5rem 1rem;border-radius:12px;font-size:0.75rem;font-weight:600;transition:var(--transition-smooth);position:relative;overflow:hidden;}body.light-theme .tech-tag, body.light-theme .project-tag{background:rgba(0, 122, 255, 0.08);border-color:rgba(0, 122, 255, 0.25);color:#007AFF;}.tech-tag::before, .project-tag::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);transition:left 0.5s ease;}.project-card:hover .tech-tag, .project-card:hover .project-tag{background:rgba(0, 122, 255, 0.25);border-color:rgba(0, 122, 255, 0.6);transform:translateY(-3px);box-shadow:0 4px 12px rgba(0, 122, 255, 0.3);}body.light-theme .project-card:hover .tech-tag, body.light-theme .project-card:hover .project-tag{background:rgba(0, 122, 255, 0.15);box-shadow:0 4px 12px rgba(0, 122, 255, 0.2);}.project-card:hover .tech-tag::before, .project-card:hover .project-tag::before{left:100%;}.tech-tag.more{background:rgba(255, 255, 255, 0.08);border-color:rgba(255, 255, 255, 0.2);color:var(--text-secondary);cursor:pointer;}body.light-theme .tech-tag.more{background:rgba(0, 0, 0, 0.05);border-color:rgba(0, 0, 0, 0.15);}.tech-tag.more:hover{background:rgba(0, 122, 255, 0.15);color:#00D4FF;}.project-modal-overlay{position:fixed;inset:0;background:rgba(0, 0, 0, 0.92);backdrop-filter:blur(30px);display:none;align-items:flex-start;justify-content:center;z-index:10000;padding:1.25rem;animation:fadeIn 0.3s ease-out;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;}body.light-theme .project-modal-overlay{background:rgba(0, 0, 0, 0.6);}.project-modal-overlay.active{display:flex;}@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}.project-modal{background:rgba(10, 10, 10, 0.98);backdrop-filter:blur(40px);border:1px solid rgba(255, 255, 255, 0.1);border-radius:28px;max-width:1300px;width:95%;margin:2rem 0;animation:modalSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);box-shadow:0 30px 90px rgba(0, 0, 0, 0.5);position:relative;display:flex;flex-direction:column;max-height:90vh;overflow:hidden;}body.light-theme .project-modal{background:rgba(255, 255, 255, 0.98);border-color:rgba(0, 0, 0, 0.1);box-shadow:0 30px 90px rgba(0, 0, 0, 0.25);}@keyframes modalSlideIn{from{transform:scale(0.85) translateY(30px);opacity:0;}to{transform:scale(1) translateY(0);opacity:1;}}.modal-content::-webkit-scrollbar{width:10px;}.modal-content::-webkit-scrollbar-track{background:rgba(255, 255, 255, 0.03);border-radius:10px;}.modal-content::-webkit-scrollbar-thumb{background:linear-gradient(135deg, #667eea, #764ba2);border-radius:10px;}.modal-content::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg, #764ba2, #f5576c);}.modal-header{display:flex;justify-content:space-between;align-items:flex-start;padding:2rem 2rem 1.5rem;border-bottom:1px solid rgba(255, 255, 255, 0.08);gap:1.5rem;}body.light-theme .modal-header{border-bottom-color:rgba(0, 0, 0, 0.08);}.modal-title-section{flex:1;}.modal-title{font-size:2.25rem;font-weight:900;color:var(--text-primary);margin-bottom:0.75rem;line-height:1.2;background:var(--primary-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}.modal-subtitle{font-size:1.1rem;color:var(--text-secondary);line-height:1.6;}.close-button{width:44px;height:44px;background:rgba(255, 255, 255, 0.08);border:1px solid rgba(255, 255, 255, 0.15);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-primary);cursor:pointer;transition:var(--transition-smooth);flex-shrink:0;}body.light-theme .close-button{background:rgba(0, 0, 0, 0.04);border-color:rgba(0, 0, 0, 0.1);}.close-button:hover{background:rgba(255, 59, 48, 0.15);border-color:rgba(255, 59, 48, 0.3);color:#FF3B30;transform:rotate(90deg) scale(1.1);}.modal-screenshots{margin-bottom:2.5rem;}.image-slider{position:relative;width:100%;max-width:900px;margin:0 auto;border-radius:20px;overflow:hidden;background:rgba(0, 0, 0, 0.3);}body.light-theme .image-slider{background:rgba(0, 0, 0, 0.05);}.slider-container{display:flex;transition:transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);}.slider-image{min-width:100%;height:550px;object-fit:contain;background:rgba(0, 0, 0, 0.2);}body.light-theme .slider-image{background:rgba(0, 0, 0, 0.02);}.slider-btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0, 0, 0, 0.8);backdrop-filter:blur(10px);border:1px solid rgba(255, 255, 255, 0.2);color:white;width:52px;height:52px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10;transition:var(--transition-smooth);}body.light-theme .slider-btn{background:rgba(255, 255, 255, 0.95);border-color:rgba(0, 0, 0, 0.1);color:#1d1d1f;box-shadow:0 4px 16px rgba(0, 0, 0, 0.15);}.slider-btn:hover{transform:translateY(-50%) scale(1.15);background:var(--primary-gradient);border-color:transparent;box-shadow:0 8px 24px rgba(102, 126, 234, 0.4);}body.light-theme .slider-btn:hover{color:white;}.slider-btn.prev{left:1.25rem;}.slider-btn.next{right:1.25rem;}.slider-dots{display:flex;justify-content:center;gap:0.75rem;padding:1.5rem 0;}.slider-dot{width:10px;height:10px;border-radius:50%;background:rgba(255, 255, 255, 0.25);cursor:pointer;transition:var(--transition-smooth);border:2px solid transparent;}body.light-theme .slider-dot{background:rgba(0, 0, 0, 0.2);}.slider-dot.active{background:var(--primary-gradient);width:36px;border-radius:6px;box-shadow:0 4px 12px rgba(102, 126, 234, 0.4);}.slider-dot:hover:not(.active){background:rgba(0, 122, 255, 0.6);transform:scale(1.3);}.modal-content{padding:2rem;flex:1;display:flex;flex-direction:column;gap:2.5rem;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}.modal-details{width:100%;}.details-grid{display:grid;gap:2rem;}.details-section{background:rgba(255, 255, 255, 0.02);border:1px solid rgba(255, 255, 255, 0.06);padding:1.75rem;border-radius:20px;transition:var(--transition-smooth);}body.light-theme .details-section{background:rgba(0, 0, 0, 0.02);border-color:rgba(0, 0, 0, 0.06);}.details-section:hover{background:rgba(255, 255, 255, 0.04);border-color:rgba(0, 122, 255, 0.2);transform:translateY(-4px);}body.light-theme .details-section:hover{background:rgba(0, 0, 0, 0.03);}.section-title{font-size:1.35rem;font-weight:800;background:var(--primary-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:1.5rem;display:flex;align-items:center;gap:0.75rem;}.features-list{display:grid;gap:1rem;}.feature-item{display:flex;align-items:flex-start;gap:1rem;padding:1.25rem;background:rgba(255, 255, 255, 0.03);border:1px solid rgba(255, 255, 255, 0.05);border-radius:14px;transition:var(--transition-smooth);}body.light-theme .feature-item{background:rgba(0, 0, 0, 0.02);border-color:rgba(0, 0, 0, 0.05);}.feature-item:hover{background:rgba(0, 122, 255, 0.08);border-color:rgba(0, 122, 255, 0.2);transform:translateX(8px);}.feature-icon{font-size:1.75rem;min-width:28px;filter:drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));}.feature-content h4{font-size:1rem;font-weight:700;color:var(--text-primary);margin:0 0 0.4rem 0;}.feature-content p{font-size:0.9rem;color:var(--text-secondary);margin:0;line-height:1.6;}.tech-stack-list{display:flex;flex-wrap:wrap;gap:0.7rem;}.metrics-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));gap:1.25rem;}.metric-card{background:rgba(255, 255, 255, 0.03);border:1px solid rgba(255, 255, 255, 0.06);padding:1.5rem;border-radius:16px;text-align:center;transition:var(--transition-smooth);}body.light-theme .metric-card{background:rgba(0, 0, 0, 0.02);border-color:rgba(0, 0, 0, 0.06);}.metric-card:hover{background:rgba(0, 122, 255, 0.08);border-color:rgba(0, 122, 255, 0.2);transform:translateY(-4px);}.timeline{display:flex;flex-direction:column;gap:1.5rem;position:relative;padding-left:2.25rem;}.timeline::before{content:'';position:absolute;left:10px;top:0;bottom:0;width:3px;background:linear-gradient(180deg, #667eea 0%, rgba(102, 126, 234, 0.2) 100%);border-radius:2px;}.timeline-item{position:relative;padding-left:1.25rem;}.timeline-item::before{content:'';position:absolute;left:-1.75rem;top:4px;width:14px;height:14px;border-radius:50%;background:var(--primary-gradient);border:3px solid rgba(10, 10, 10, 0.98);box-shadow:0 0 0 4px rgba(102, 126, 234, 0.2);}body.light-theme .timeline-item::before{border-color:rgba(255, 255, 255, 0.98);}.timeline-date{font-size:0.8rem;color:var(--text-secondary);font-weight:600;margin-bottom:0.4rem;text-transform:uppercase;letter-spacing:0.5px;}.timeline-title{font-size:1.05rem;font-weight:700;color:var(--text-primary);margin-bottom:0.4rem;}.timeline-description{font-size:0.9rem;color:var(--text-secondary);line-height:1.6;}.modal-footer{padding:1rem 2rem 4rem;border-top:1px solid rgba(255, 255, 255, 0.08);background:transparent;backdrop-filter:none;width:100%;}body.light-theme .modal-footer{border-top:none;background:transparent;}.action-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;}.action-button{display:inline-flex;align-items:center;gap:0.6rem;padding:1rem 2rem;border-radius:14px;font-size:0.95rem;font-weight:700;text-decoration:none;transition:var(--transition-smooth);border:none;cursor:pointer;position:relative;overflow:hidden;}.action-button::before{content:'';position:absolute;inset:0;background:linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);transform:translateX(-100%);transition:transform 0.6s ease;}.action-button:hover::before{transform:translateX(100%);}.action-button.primary{background:var(--primary-gradient);color:white;box-shadow:0 6px 20px rgba(102, 126, 234, 0.4);}.action-button.primary:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(102, 126, 234, 0.5);}.action-button.secondary{background:rgba(255, 255, 255, 0.08);color:var(--text-primary);border:1px solid rgba(255, 255, 255, 0.2);}body.light-theme .action-button.secondary{background:rgba(0, 0, 0, 0.05);border-color:rgba(0, 0, 0, 0.15);}.action-button.secondary:hover{background:rgba(255, 255, 255, 0.15);border-color:rgba(255, 255, 255, 0.3);transform:translateY(-3px);}body.light-theme .action-button.secondary:hover{background:rgba(0, 0, 0, 0.08);}.project-video, .youtube-embed{width:100%;height:100%;object-fit:contain;display:block;border:none;}.youtube-shorts{aspect-ratio:9 / 16;max-height:100%;margin:0 auto;}.project-card-simple .showcase-card{position:relative;}.project-card-simple .showcase-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg, rgba(0, 122, 255, 0.1) 0%, transparent 100%);opacity:0;transition:opacity 0.4s ease;pointer-events:none;z-index:1;border-radius:inherit;}.project-card-simple:hover .showcase-card::before{opacity:1;}@media (max-width:1200px){.projects-grid{grid-template-columns:repeat(2, 1fr);gap:1.75rem;}.modal-title{font-size:2rem;}.slider-image{height:480px;}}@media (max-width:1024px){.projects-grid{grid-template-columns:repeat(2, 1fr);gap:1.5rem;padding:0 1rem;}.media-container, .project-image{height:240px;}.modal-content{padding:1.5rem;}.slider-image{height:420px;}.details-section{padding:1.5rem;}}@media (max-width:768px){.projects-grid{grid-template-columns:1fr;gap:1.25rem;padding:0 1rem;}.project-card{border-radius:20px;}.media-container, .project-image{height:220px;}.project-modal-overlay{padding:1rem;}.project-modal{margin:1rem 0;border-radius:24px;max-height:85vh;width:100%;}.modal-header{padding:1.5rem;flex-direction:column;align-items:flex-start;gap:1rem;}.close-button{position:absolute;top:1rem;right:1rem;width:40px;height:40px;}.modal-title{font-size:1.75rem;padding-right:3rem;}.modal-subtitle{font-size:1rem;}.modal-content{padding:1.25rem;}.slider-image{height:340px;}.slider-btn{width:44px;height:44px;}.slider-btn.prev{left:0.75rem;}.slider-btn.next{right:0.75rem;}.details-section{padding:1.25rem;border-radius:16px;}.section-title{font-size:1.15rem;}.feature-item{padding:1rem;gap:0.75rem;}.feature-icon{font-size:1.5rem;}.feature-content h4{font-size:0.95rem;}.feature-content p{font-size:0.85rem;}.timeline{padding-left:2rem;}.modal-footer{padding:1.25rem 1.5rem;}.action-buttons{flex-direction:column;gap:0.75rem;}.action-button{width:100%;justify-content:center;padding:0.95rem 1.5rem;}.metrics-grid{grid-template-columns:repeat(2, 1fr);gap:1rem;}.project-metrics{padding:1rem;gap:0.75rem;}}@media (max-width:480px){.projects-grid{gap:1rem;padding:0 0.75rem;}.project-card{border-radius:18px;}.media-container, .project-image{height:200px;}.project-info, .showcase-info{padding:1.25rem;}.project-title, .showcase-title{font-size:1.2rem;}.project-description, .showcase-description{font-size:0.88rem;}.type-badge{padding:0.4rem 0.85rem;font-size:0.65rem;}.platform-tag{padding:0.3rem 0.65rem;font-size:0.65rem;}.tech-tag, .project-tag{padding:0.4rem 0.85rem;font-size:0.7rem;}.project-modal-overlay{padding:0.5rem;}.project-modal{margin:0.5rem 0;border-radius:20px;max-height:92vh;width:100%;}.modal-header{padding:1.25rem;}.modal-title{font-size:1.5rem;}.modal-subtitle{font-size:0.95rem;}.modal-content{padding:1rem;}.slider-image{height:280px;}.slider-btn{width:38px;height:38px;}.slider-btn.prev{left:0.5rem;}.slider-btn.next{right:0.5rem;}.details-section{padding:1rem;}.section-title{font-size:1.05rem;margin-bottom:1rem;}.modal-footer{padding:1rem 1.25rem;}.action-button{padding:0.85rem 1.25rem;font-size:0.9rem;}.metric-value{font-size:1.5rem;}.metric-label{font-size:0.65rem;}}@media (max-width:360px){.projects-grid{padding:0 0.5rem;}.media-container, .project-image{height:180px;}.project-info, .showcase-info{padding:1rem;}.project-title, .showcase-title{font-size:1.1rem;}.slider-image{height:240px;}.modal-title{font-size:1.35rem;}}@keyframes shimmer{0%{background-position:-1000px 0;}100%{background-position:1000px 0;}}.loading{background:linear-gradient(90deg, rgba(255, 255, 255, 0.03) 25%, rgba(255, 255, 255, 0.06) 50%, rgba(255, 255, 255, 0.03) 75%);background-size:1000px 100%;animation:shimmer 2s infinite;}body.light-theme .loading{background:linear-gradient(90deg, rgba(0, 0, 0, 0.03) 25%, rgba(0, 0, 0, 0.06) 50%, rgba(0, 0, 0, 0.03) 75%);}@media print{.project-modal-overlay, .slider-btn, .slider-dots, .close-button, .action-buttons{display:none !important;}.project-modal{max-height:none;overflow:visible;}}.action-button:focus, .close-button:focus, .slider-btn:focus, .slider-dot:focus{outline:3px solid #007AFF;outline-offset:3px;}@media (prefers-reduced-motion:reduce){*, *::before, *::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;}}