:root {--color-primary-dark:#2c3e50;--color-primary-light:#ffffff;--color-secondary-gray:#7f8c8d;--color-background-light:#ffffff;--color-background-dark:#000000;--color-accent-blue:#3498db;--color-border-light:rgba(0,0,0,0.08);--color-border-dark:rgba(255,255,255,0.1);--color-glass-light:rgba(255,255,255,0.9);--color-glass-dark:rgba(0,0,0,0.8);--font-family-primary:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--font-family-display:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--font-size-hero:clamp(2.5rem,5vw,4rem);--font-size-h1:clamp(2rem,4vw,3rem);--font-size-h2:clamp(1.5rem,3vw,2.25rem);--font-size-h3:clamp(1.25rem,2.5vw,1.75rem);--font-size-h4:clamp(1.125rem,2vw,1.5rem);--font-size-body:clamp(1rem,1.5vw,1.125rem);--font-size-small:clamp(0.875rem,1.25vw,1rem);--font-size-caption:clamp(0.75rem,1vw,0.875rem);--font-weight-light:300;--font-weight-regular:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-heavy:800;--line-height-tight:1.2;--line-height-normal:1.5;--line-height-relaxed:1.6;--line-height-loose:1.8;--space-xs:0.5rem;--space-sm:1rem;--space-md:1.5rem;--space-lg:2rem;--space-xl:3rem;--space-2xl:4rem;--space-3xl:6rem;--space-4xl:8rem;--max-width-content:1200px;--max-width-text:65ch;--grid-columns:12;--grid-gap:var(--space-md);--radius-sm:0.25rem;--radius-md:0.5rem;--radius-lg:1rem;--radius-xl:1.5rem;--shadow-sm:0 1px 2px 0 rgba(0,0,0,0.05);--shadow-md:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06);--shadow-lg:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05);--shadow-xl:0 20px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04);--transition-fast:0.15s ease-out;--transition-normal:0.3s ease-out;--transition-slow:0.5s ease-out;--z-dropdown:1000;--z-sticky:1020;--z-fixed:1030;--z-modal-backdrop:1040;--z-modal:1050;--z-popover:1060;--z-tooltip:1070} *,*::before,*::after {box-sizing:border-box} html {scroll-behavior:smooth;-webkit-text-size-adjust:100%} body {font-family:var(--font-family-primary);font-size:var(--font-size-body);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);color:var(--color-primary-dark);background-color:var(--color-background-light);margin:0;padding:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} .text-hero {font-family:var(--font-family-display);font-size:var(--font-size-hero);font-weight:var(--font-weight-bold);line-height:var(--line-height-tight);letter-spacing:-0.02em} h1,.text-h1 {font-family:var(--font-family-display);font-size:var(--font-size-h1);font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight);letter-spacing:-0.01em;margin:0 0 var(--space-md) 0} h2,.text-h2 {font-family:var(--font-family-display);font-size:var(--font-size-h2);font-weight:var(--font-weight-medium);line-height:var(--line-height-tight);margin:0 0 var(--space-sm) 0} h3,.text-h3 {font-family:var(--font-family-display);font-size:var(--font-size-h3);font-weight:var(--font-weight-medium);line-height:var(--line-height-normal);margin:0 0 var(--space-sm) 0} h4,.text-h4 {font-size:var(--font-size-h4);font-weight:var(--font-weight-medium);line-height:var(--line-height-normal);margin:0 0 var(--space-xs) 0} p,.text-body {font-size:var(--font-size-body);font-weight:var(--font-weight-regular);line-height:var(--line-height-relaxed);margin:0 0 var(--space-sm) 0;max-width:var(--max-width-text)} .text-small {font-size:var(--font-size-small);line-height:var(--line-height-normal)} .text-caption {font-size:var(--font-size-caption);color:var(--color-secondary-gray);line-height:var(--line-height-normal)} .font-light {font-weight:var(--font-weight-light)} .font-regular {font-weight:var(--font-weight-regular)} .font-medium {font-weight:var(--font-weight-medium)} .font-semibold {font-weight:var(--font-weight-semibold)} .font-bold {font-weight:var(--font-weight-bold)} .font-heavy {font-weight:var(--font-weight-heavy)} .container {width:100%;max-width:var(--max-width-content);margin:0 auto;padding:0 var(--space-lg)} @media (max-width:768px) {.container {padding:0 var(--space-sm)} } .grid {display:grid;grid-template-columns:repeat(var(--grid-columns),1fr);gap:var(--grid-gap);width:100%} .col-1 {grid-column:span 1} .col-2 {grid-column:span 2} .col-3 {grid-column:span 3} .col-4 {grid-column:span 4} .col-5 {grid-column:span 5} .col-6 {grid-column:span 6} .col-7 {grid-column:span 7} .col-8 {grid-column:span 8} .col-9 {grid-column:span 9} .col-10 {grid-column:span 10} .col-11 {grid-column:span 11} .col-12 {grid-column:span 12} @media (max-width:768px) {.col-sm-1 {grid-column:span 1} .col-sm-2 {grid-column:span 2} .col-sm-3 {grid-column:span 3} .col-sm-4 {grid-column:span 4} .col-sm-6 {grid-column:span 6} .col-sm-12 {grid-column:span 12} .col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11 {grid-column:span 12} } .flex {display:flex} .flex-col {flex-direction:column} .flex-row {flex-direction:row} .flex-wrap {flex-wrap:wrap} .flex-nowrap {flex-wrap:nowrap} .justify-start {justify-content:flex-start} .justify-center {justify-content:center} .justify-end {justify-content:flex-end} .justify-between {justify-content:space-between} .justify-around {justify-content:space-around} .items-start {align-items:flex-start} .items-center {align-items:center} .items-end {align-items:flex-end} .items-stretch {align-items:stretch} .m-0 {margin:0} .m-xs {margin:var(--space-xs)} .m-sm {margin:var(--space-sm)} .m-md {margin:var(--space-md)} .m-lg {margin:var(--space-lg)} .m-xl {margin:var(--space-xl)} .m-2xl {margin:var(--space-2xl)} .m-3xl {margin:var(--space-3xl)} .mt-0 {margin-top:0} .mt-xs {margin-top:var(--space-xs)} .mt-sm {margin-top:var(--space-sm)} .mt-md {margin-top:var(--space-md)} .mt-lg {margin-top:var(--space-lg)} .mt-xl {margin-top:var(--space-xl)} .mt-2xl {margin-top:var(--space-2xl)} .mt-3xl {margin-top:var(--space-3xl)} .mb-0 {margin-bottom:0} .mb-xs {margin-bottom:var(--space-xs)} .mb-sm {margin-bottom:var(--space-sm)} .mb-md {margin-bottom:var(--space-md)} .mb-lg {margin-bottom:var(--space-lg)} .mb-xl {margin-bottom:var(--space-xl)} .mb-2xl {margin-bottom:var(--space-2xl)} .mb-3xl {margin-bottom:var(--space-3xl)} .ml-0 {margin-left:0} .ml-xs {margin-left:var(--space-xs)} .ml-sm {margin-left:var(--space-sm)} .ml-md {margin-left:var(--space-md)} .ml-lg {margin-left:var(--space-lg)} .ml-xl {margin-left:var(--space-xl)} .mr-0 {margin-right:0} .mr-xs {margin-right:var(--space-xs)} .mr-sm {margin-right:var(--space-sm)} .mr-md {margin-right:var(--space-md)} .mr-lg {margin-right:var(--space-lg)} .mr-xl {margin-right:var(--space-xl)} .p-0 {padding:0} .p-xs {padding:var(--space-xs)} .p-sm {padding:var(--space-sm)} .p-md {padding:var(--space-md)} .p-lg {padding:var(--space-lg)} .p-xl {padding:var(--space-xl)} .p-2xl {padding:var(--space-2xl)} .p-3xl {padding:var(--space-3xl)} .pt-0 {padding-top:0} .pt-xs {padding-top:var(--space-xs)} .pt-sm {padding-top:var(--space-sm)} .pt-md {padding-top:var(--space-md)} .pt-lg {padding-top:var(--space-lg)} .pt-xl {padding-top:var(--space-xl)} .pt-2xl {padding-top:var(--space-2xl)} .pt-3xl {padding-top:var(--space-3xl)} .pb-0 {padding-bottom:0} .pb-xs {padding-bottom:var(--space-xs)} .pb-sm {padding-bottom:var(--space-sm)} .pb-md {padding-bottom:var(--space-md)} .pb-lg {padding-bottom:var(--space-lg)} .pb-xl {padding-bottom:var(--space-xl)} .pb-2xl {padding-bottom:var(--space-2xl)} .pb-3xl {padding-bottom:var(--space-3xl)} .pl-0 {padding-left:0} .pl-xs {padding-left:var(--space-xs)} .pl-sm {padding-left:var(--space-sm)} .pl-md {padding-left:var(--space-md)} .pl-lg {padding-left:var(--space-lg)} .pl-xl {padding-left:var(--space-xl)} .pr-0 {padding-right:0} .pr-xs {padding-right:var(--space-xs)} .pr-sm {padding-right:var(--space-sm)} .pr-md {padding-right:var(--space-md)} .pr-lg {padding-right:var(--space-lg)} .pr-xl {padding-right:var(--space-xl)} .section-padding {padding:var(--space-2xl) 0} @media (max-width:768px) {.section-padding {padding:var(--space-xl) 0} } .glass-light {background:var(--color-glass-light);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--color-border-light)} .glass-dark {background:var(--color-glass-dark);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--color-border-dark)} .shadow-sm {box-shadow:var(--shadow-sm)} .shadow-md {box-shadow:var(--shadow-md)} .shadow-lg {box-shadow:var(--shadow-lg)} .shadow-xl {box-shadow:var(--shadow-xl)} .shadow-none {box-shadow:none} .rounded-sm {border-radius:var(--radius-sm)} .rounded-md {border-radius:var(--radius-md)} .rounded-lg {border-radius:var(--radius-lg)} .rounded-xl {border-radius:var(--radius-xl)} .rounded-full {border-radius:50%} .transition-fast {transition:all var(--transition-fast)} .transition-normal {transition:all var(--transition-normal)} .transition-slow {transition:all var(--transition-slow)} .hover-scale:hover {transform:scale(1.02)} .hover-scale-sm:hover {transform:scale(1.01)} .text-primary {color:var(--color-primary-dark)} .text-secondary {color:var(--color-secondary-gray)} .text-accent {color:var(--color-accent-blue)} .text-white {color:var(--color-primary-light)} .bg-primary {background-color:var(--color-primary-dark)} .bg-light {background-color:var(--color-background-light)} .bg-white {background-color:var(--color-primary-light)} .bg-dark {background-color:var(--color-background-dark)} .navbar {width:100%;background:var(--color-glass-light);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--color-border-light);position:fixed;top:0;z-index:var(--z-fixed);transition:all var(--transition-normal);transform:translateY(0)} .navbar.scrolled {background:rgba(255,255,255,0.95);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);border-bottom:1px solid rgba(0,0,0,0.15);box-shadow:var(--shadow-sm)} .navbar.hidden {transform:translateY(-100%)} .navbar-inner {max-width:var(--max-width-content);margin:0 auto;padding:var(--space-sm) var(--space-lg);display:flex;align-items:center;justify-content:space-between} .navbar-toggle {display:none;flex-direction:column;cursor:pointer;padding:var(--space-xs);border:none;background:none;z-index:var(--z-modal)} .navbar-toggle span {width:24px;height:2px;background-color:var(--color-primary-dark);margin:3px 0;transition:all var(--transition-fast);border-radius:1px} .navbar-toggle.active span:nth-child(1) {transform:rotate(45deg) translate(6px,6px)} .navbar-toggle.active span:nth-child(2) {opacity:0} .navbar-toggle.active span:nth-child(3) {transform:rotate(-45deg) translate(6px,-6px)} .navbar-menu {display:flex;align-items:center;gap:var(--space-xs)} .navbar-overlay {display:none;position:fixed;top:0;left:0;width:100%;height:100vh;background:rgba(0,0,0,0.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);z-index:var(--z-modal-backdrop);opacity:0;visibility:hidden;transition:all var(--transition-normal)} .navbar-overlay.active {opacity:1;visibility:visible} .navbar-overlay-content {display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:var(--space-xl)} .navbar-overlay a {color:var(--color-primary-light);font-size:var(--font-size-h3);font-weight:var(--font-weight-medium);text-decoration:none;padding:var(--space-md);border-radius:var(--radius-lg);transition:all var(--transition-fast);text-align:center;min-width:200px} .navbar-overlay a:hover {color:var(--color-accent-blue);background-color:rgba(0,122,255,0.2);transform:scale(1.05)} .navbar-overlay a.active {color:var(--color-accent-blue);background-color:rgba(0,122,255,0.3)} @media (max-width:768px) {.navbar-inner {padding:var(--space-sm)} .navbar-toggle {display:flex} .navbar-menu {display:none} .navbar-overlay {display:block} } .navbar-brand {flex-shrink:0} .brand-link {color:var(--color-primary-dark) !important;font-size:var(--font-size-h4);font-weight:var(--font-weight-semibold);text-decoration:none;padding:var(--space-xs) 0;transition:color var(--transition-fast)} .brand-link:hover {color:var(--color-accent-blue) !important;background:none !important} .navbar a {color:var(--color-primary-dark);display:inline-block;font-size:var(--font-size-body);font-weight:var(--font-weight-medium);padding:var(--space-xs) var(--space-sm);text-decoration:none;border-radius:var(--radius-md);transition:all var(--transition-fast);position:relative} .navbar a:hover {color:var(--color-accent-blue);background-color:rgba(0,122,255,0.1)} .navbar a.active {color:var(--color-accent-blue);background-color:rgba(0,122,255,0.15)} .navbar a.active::after {content:'';position:absolute;bottom:-1px;left:50%;transform:translateX(-50%);width:20px;height:2px;background-color:var(--color-accent-blue);border-radius:1px} .content {max-width:var(--max-width-content);margin:auto;padding:var(--space-2xl) var(--space-lg) var(--space-lg);margin-top:80px} @media (max-width:768px) {.content {padding:var(--space-xl) var(--space-sm) var(--space-sm)} .navbar-inner {padding:var(--space-sm)} } footer {font-size:var(--font-size-small);color:var(--color-secondary-gray);text-align:center;padding:var(--space-3xl) 0 var(--space-2xl) 0;border-top:1px solid var(--color-border-light);margin-top:var(--space-3xl)} footer p,footer a {font-size:var(--font-size-small);color:var(--color-secondary-gray);transition:color var(--transition-fast)} footer a:hover {color:var(--color-accent-blue)} .hero-section {position:relative;height:100vh;min-height:600px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(135deg,var(--color-background-light) 0%,#f0f0f0 100%)} .hero-background {position:absolute;top:0;left:0;width:100%;height:120%;z-index:1} .hero-parallax-layer {position:absolute;top:-10%;left:0;width:100%;height:120%;background:radial-gradient(circle at 20% 80%,rgba(0,122,255,0.1) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(0,122,255,0.05) 0%,transparent 50%),linear-gradient(135deg,transparent 0%,rgba(0,0,0,0.02) 100%);will-change:transform;transition:transform 0.1s ease-out} .hero-content {position:relative;z-index:2;text-align:center;width:100%;padding:0 var(--space-lg)} .hero-text {max-width:800px;margin:0 auto} .hero-title {font-size:var(--font-size-hero);font-weight:var(--font-weight-bold);color:var(--color-primary-dark);margin:0 0 var(--space-sm) 0;letter-spacing:-0.02em;line-height:var(--line-height-tight)} .hero-subtitle {font-size:var(--font-size-h3);font-weight:var(--font-weight-medium);color:var(--color-secondary-gray);margin:0 0 var(--space-md) 0;letter-spacing:-0.01em} .hero-description {font-size:var(--font-size-body);color:var(--color-secondary-gray);line-height:var(--line-height-relaxed);margin:0 0 var(--space-xl) 0;max-width:600px;margin-left:auto;margin-right:auto} .hero-actions {display:flex;gap:var(--space-sm);justify-content:center;flex-wrap:wrap} .btn {display:inline-flex;align-items:center;justify-content:center;padding:var(--space-sm) var(--space-lg);font-size:var(--font-size-body);font-weight:var(--font-weight-medium);text-decoration:none;border-radius:var(--radius-lg);transition:all var(--transition-normal);cursor:pointer;border:none;min-width:140px;position:relative;overflow:hidden} .btn::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} .btn:hover::before {left:100%} .btn-primary {background:var(--color-accent-blue);color:var(--color-primary-light);box-shadow:var(--shadow-md)} .btn-primary:hover {background:#0056b3;transform:translateY(-2px);box-shadow:var(--shadow-lg)} .btn-secondary {background:var(--color-primary-light);color:var(--color-primary-dark);border:2px solid var(--color-border-light);box-shadow:var(--shadow-sm)} .btn-secondary:hover {background:var(--color-primary-dark);color:var(--color-primary-light);border-color:var(--color-primary-dark);transform:translateY(-2px);box-shadow:var(--shadow-md)} .hero-scroll-indicator {position:absolute;bottom:var(--space-xl);left:50%;transform:translateX(-50%);z-index:2;animation:bounce 2s infinite} .scroll-arrow {width:24px;height:24px;border:2px solid var(--color-secondary-gray);border-top:none;border-right:none;transform:rotate(-45deg)} @keyframes bounce {0%,20%,50%,80%,100% {transform:translateX(-50%) translateY(0)} 40% {transform:translateX(-50%) translateY(-10px)} 60% {transform:translateX(-50%) translateY(-5px)} } @media (max-width:768px) {.hero-section {min-height:500px;padding:var(--space-xl) 0} .hero-content {padding:0 var(--space-sm)} .hero-title {font-size:clamp(2rem,8vw,3rem)} .hero-subtitle {font-size:var(--font-size-h4)} .hero-actions {flex-direction:column;align-items:center} .btn {width:100%;max-width:280px} } .final-project-hero {background:linear-gradient(135deg,var(--color-background-light) 0%,#f8f9fa 100%)} .final-project-hero .hero-overlay {position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient( 135deg,rgba(29,29,31,0.1) 0%,rgba(29,29,31,0.05) 50%,rgba(0,122,255,0.1) 100% );z-index:1} .final-project-hero .hero-image {width:100%;height:100%;object-fit:cover;filter:brightness(0.9) contrast(1.1)} .hero-metrics {display:flex;gap:var(--space-xl);margin:var(--space-xl) 0;justify-content:center;flex-wrap:wrap} .metric-item {display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--space-md);background:rgba(255,255,255,0.8);backdrop-filter:blur(10px);border-radius:var(--radius-lg);border:1px solid var(--color-border-light);min-width:120px;transition:all var(--transition-normal)} .metric-item:hover {transform:translateY(-2px);box-shadow:var(--shadow-lg);background:rgba(255,255,255,0.95)} .metric-value {font-size:var(--font-size-h2);font-weight:var(--font-weight-bold);color:var(--color-accent-blue);line-height:1;margin-bottom:var(--space-xs)} .metric-label {font-size:var(--font-size-small);font-weight:var(--font-weight-medium);color:var(--color-secondary-gray);text-transform:uppercase;letter-spacing:0.05em} .final-project-hero .hero-scroll-indicator {color:var(--color-primary-dark)} .final-project-hero .scroll-text {display:block;margin-top:var(--space-xs);font-size:var(--font-size-caption);color:var(--color-secondary-gray);text-transform:uppercase;letter-spacing:0.1em} @media (max-width:768px) {.hero-metrics {gap:var(--space-md);margin:var(--space-lg) 0} .metric-item {min-width:100px;padding:var(--space-sm)} .metric-value {font-size:var(--font-size-h3)} .metric-label {font-size:var(--font-size-caption)} } .projects-section {padding:var(--space-3xl) 0;background:var(--color-primary-light)} .section-header {text-align:center;margin-bottom:var(--space-3xl);max-width:600px;margin-left:auto;margin-right:auto} .section-header h2 {font-size:var(--font-size-h1);font-weight:var(--font-weight-semibold);color:var(--color-primary-dark);margin-bottom:var(--space-sm)} .section-description {font-size:var(--font-size-body);color:var(--color-secondary-gray);line-height:var(--line-height-relaxed)} .masonry-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--space-xl);margin-top:var(--space-2xl);align-items:start} @media (min-width:768px) {.masonry-grid {grid-template-columns:repeat(auto-fit,minmax(350px,1fr))} } @media (min-width:1024px) {.masonry-grid {grid-template-columns:repeat(3,1fr)} } @media (max-width:767px) {.masonry-grid {grid-template-columns:1fr;gap:var(--space-lg)} } .project-card {background:var(--color-primary-light);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-md);transition:all var(--transition-normal);position:relative;cursor:pointer;border:1px solid var(--color-border-light)} .project-card:hover {transform:translateY(-6px);box-shadow:var(--shadow-xl);border-color:rgba(0,122,255,0.2)} .project-card.featured {border:2px solid var(--color-accent-blue);background:linear-gradient(135deg,var(--color-primary-light) 0%,rgba(0,122,255,0.02) 100%)} .project-card.featured::before {content:'Featured';position:absolute;top:var(--space-sm);left:var(--space-sm);background:var(--color-accent-blue);color:var(--color-primary-light);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-md);font-size:var(--font-size-caption);font-weight:var(--font-weight-semibold);z-index:2} .project-card.compact .project-image {height:150px} .project-card.compact .project-content {padding:var(--space-md)} .project-image {position:relative;width:100%;height:220px;overflow:hidden;background:var(--color-background-light)} .project-image img {width:100%;height:100%;object-fit:cover;transition:transform var(--transition-slow)} .project-card:hover .project-image img {transform:scale(1.08)} .project-overlay {position:absolute;top:0;right:0;padding:var(--space-sm);z-index:2} .project-status {padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-md);font-size:var(--font-size-caption);font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:0.5px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} .project-status {background:rgba(34,197,94,0.9);color:var(--color-primary-light)} .project-status.in-progress {background:rgba(251,191,36,0.9);color:var(--color-primary-dark)} .project-status.upcoming {background:rgba(156,163,175,0.9);color:var(--color-primary-light)} .project-content {padding:var(--space-lg);position:relative} .project-title {font-size:var(--font-size-h4);font-weight:var(--font-weight-semibold);color:var(--color-primary-dark);margin:0 0 var(--space-xs) 0;line-height:var(--line-height-tight);padding-right:var(--space-xl)} .project-summary {font-size:var(--font-size-body);color:var(--color-secondary-gray);line-height:var(--line-height-relaxed);margin:0 0 var(--space-sm) 0} .project-meta {display:flex;gap:var(--space-xs);margin-bottom:var(--space-sm);flex-wrap:wrap} .project-date,.project-category,.project-duration {font-size:var(--font-size-small);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-md);font-weight:var(--font-weight-medium)} .project-date {background:rgba(0,122,255,0.1);color:var(--color-accent-blue)} .project-category {background:var(--color-background-light);color:var(--color-secondary-gray)} .project-duration {background:rgba(34,197,94,0.1);color:#059669} .project-details {margin-top:var(--space-sm);padding-top:var(--space-sm);border-top:1px solid var(--color-border-light);opacity:0;max-height:0;overflow:hidden;transition:all var(--transition-normal)} .project-details.expanded {opacity:1;max-height:500px;overflow:visible} .project-description {margin-bottom:var(--space-md)} .project-description p {font-size:var(--font-size-small);color:var(--color-secondary-gray);line-height:var(--line-height-relaxed);margin-bottom:var(--space-sm)} .project-description h4 {font-size:var(--font-size-small);font-weight:var(--font-weight-semibold);color:var(--color-primary-dark);margin:var(--space-sm) 0 var(--space-xs) 0;text-transform:uppercase;letter-spacing:0.5px} .project-description ul {margin:0 0 var(--space-sm) 0;padding-left:var(--space-sm)} .project-description li {font-size:var(--font-size-small);color:var(--color-secondary-gray);line-height:var(--line-height-normal);margin-bottom:var(--space-xs)} .project-tags {display:flex;flex-wrap:wrap;gap:var(--space-xs);margin-top:var(--space-xs)} .tag {font-size:var(--font-size-caption);padding:var(--space-xs) var(--space-sm);background:var(--color-background-light);color:var(--color-secondary-gray);border-radius:var(--radius-sm);border:1px solid var(--color-border-light);font-weight:var(--font-weight-medium)} .project-actions {display:flex;gap:var(--space-sm);margin-top:var(--space-md);flex-wrap:wrap} .project-link {display:inline-flex;align-items:center;font-size:var(--font-size-small);font-weight:var(--font-weight-medium);text-decoration:none;padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-md);transition:all var(--transition-fast);border:1px solid transparent} .project-link.primary {background:var(--color-accent-blue);color:var(--color-primary-light)} .project-link.primary:hover {background:#0056b3;transform:translateY(-1px)} .project-link.secondary {background:transparent;color:var(--color-accent-blue);border-color:var(--color-accent-blue)} .project-link.secondary:hover {background:var(--color-accent-blue);color:var(--color-primary-light)} .project-link.disabled {background:var(--color-background-light);color:var(--color-secondary-gray);cursor:not-allowed;opacity:0.6} .project-link.disabled:hover {transform:none;background:var(--color-background-light);color:var(--color-secondary-gray)} .project-toggle {position:absolute;top:var(--space-sm);right:var(--space-sm);width:36px;height:36px;border:none;background:var(--color-primary-light);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition-fast);box-shadow:var(--shadow-sm);border:1px solid var(--color-border-light);z-index:1} .project-toggle:hover {background:var(--color-accent-blue);color:var(--color-primary-light);transform:scale(1.1);box-shadow:var(--shadow-md)} .toggle-icon {font-size:20px;font-weight:var(--font-weight-bold);transition:transform var(--transition-fast);line-height:1} .project-toggle.expanded .toggle-icon {transform:rotate(45deg)} .project-card[aria-expanded="true"] .project-details {opacity:1;max-height:none} .project-toggle:focus {outline:2px solid var(--color-accent-blue);outline-offset:2px} .project-card:focus-within {outline:2px solid var(--color-accent-blue);outline-offset:2px} @media (prefers-reduced-motion:no-preference) {.project-card {animation:fadeInUp 0.6s ease-out forwards;opacity:0;transform:translateY(20px)} .project-card:nth-child(1) {animation-delay:0.1s} .project-card:nth-child(2) {animation-delay:0.2s} .project-card:nth-child(3) {animation-delay:0.3s} .project-card:nth-child(4) {animation-delay:0.4s} } @keyframes fadeInUp {to {opacity:1;transform:translateY(0)} } .project-filters {margin-bottom:var(--space-2xl);padding:var(--space-lg);background:var(--color-primary-light);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);border:1px solid var(--color-border-light)} .filter-section {display:flex;flex-direction:column;gap:var(--space-lg);margin-bottom:var(--space-md)} @media (min-width:768px) {.filter-section {flex-direction:row;align-items:flex-start;justify-content:space-between} } .search-container {position:relative;flex:1;max-width:400px} .search-input {width:100%;padding:var(--space-sm) var(--space-xl) var(--space-sm) var(--space-md);border:2px solid var(--color-border-light);border-radius:var(--radius-lg);font-size:var(--font-size-body);font-family:var(--font-family-primary);background:var(--color-background-light);transition:all var(--transition-normal);outline:none} .search-input:focus {border-color:var(--color-accent-blue);box-shadow:0 0 0 3px rgba(0,122,255,0.1);background:var(--color-primary-light)} .search-input::placeholder {color:var(--color-secondary-gray)} .search-icon {position:absolute;right:var(--space-sm);top:50%;transform:translateY(-50%);color:var(--color-secondary-gray);pointer-events:none;transition:color var(--transition-normal)} .search-input:focus + .search-icon {color:var(--color-accent-blue)} .filter-controls {display:flex;flex-direction:column;gap:var(--space-md);flex:2} @media (min-width:768px) {.filter-controls {flex-direction:row;justify-content:flex-end;align-items:flex-start} } .filter-group {display:flex;flex-direction:column;gap:var(--space-xs)} @media (min-width:768px) {.filter-group {align-items:flex-start} } .filter-label {font-size:var(--font-size-small);font-weight:var(--font-weight-medium);color:var(--color-primary-dark);margin-bottom:var(--space-xs)} .filter-buttons {display:flex;flex-wrap:wrap;gap:var(--space-xs)} .filter-btn {padding:var(--space-xs) var(--space-md);border:2px solid var(--color-border-light);border-radius:var(--radius-md);background:var(--color-primary-light);color:var(--color-primary-dark);font-size:var(--font-size-small);font-weight:var(--font-weight-medium);font-family:var(--font-family-primary);cursor:pointer;transition:all var(--transition-normal);outline:none;white-space:nowrap} .filter-btn:hover {border-color:var(--color-accent-blue);background:rgba(0,122,255,0.05);transform:translateY(-1px)} .filter-btn:focus {box-shadow:0 0 0 3px rgba(0,122,255,0.1)} .filter-btn.active {background:var(--color-accent-blue);color:var(--color-primary-light);border-color:var(--color-accent-blue);box-shadow:var(--shadow-sm)} .filter-btn.active:hover {background:#0056b3;border-color:#0056b3} .sort-select {padding:var(--space-xs) var(--space-md);border:2px solid var(--color-border-light);border-radius:var(--radius-md);background:var(--color-primary-light);color:var(--color-primary-dark);font-size:var(--font-size-small);font-weight:var(--font-weight-medium);font-family:var(--font-family-primary);cursor:pointer;transition:all var(--transition-normal);outline:none;min-width:150px} .sort-select:hover {border-color:var(--color-accent-blue)} .sort-select:focus {border-color:var(--color-accent-blue);box-shadow:0 0 0 3px rgba(0,122,255,0.1)} .filter-results {display:flex;justify-content:space-between;align-items:center;padding-top:var(--space-md);border-top:1px solid var(--color-border-light)} .results-count {font-size:var(--font-size-small);color:var(--color-secondary-gray);font-weight:var(--font-weight-medium)} .clear-filters {padding:var(--space-xs) var(--space-md);border:1px solid var(--color-secondary-gray);border-radius:var(--radius-md);background:transparent;color:var(--color-secondary-gray);font-size:var(--font-size-small);font-weight:var(--font-weight-medium);font-family:var(--font-family-primary);cursor:pointer;transition:all var(--transition-normal);outline:none} .clear-filters:hover {border-color:var(--color-primary-dark);color:var(--color-primary-dark);background:rgba(0,0,0,0.05)} .clear-filters:focus {box-shadow:0 0 0 3px rgba(0,0,0,0.1)} .project-card.filtered-out {opacity:0;transform:scale(0.8);pointer-events:none;transition:all var(--transition-normal)} .project-card.filtered-in {opacity:1;transform:scale(1);pointer-events:auto;transition:all var(--transition-normal)} .no-results {text-align:center;padding:var(--space-3xl) var(--space-lg);color:var(--color-secondary-gray)} .no-results h3 {font-size:var(--font-size-h3);font-weight:var(--font-weight-medium);margin-bottom:var(--space-sm);color:var(--color-primary-dark)} .no-results p {font-size:var(--font-size-body);line-height:var(--line-height-relaxed)} @media (max-width:767px) {.project-filters {padding:var(--space-md)} .filter-controls {gap:var(--space-lg)} .filter-buttons {justify-content:flex-start} .filter-results {flex-direction:column;gap:var(--space-sm);align-items:flex-start} } html {scroll-behavior:smooth} .content {margin-top:0} .bio-hero-section {background:linear-gradient(135deg,var(--color-background-light) 0%,#f0f0f0 100%);padding:var(--space-3xl) 0 var(--space-2xl) 0;margin-top:80px;text-align:center;position:relative;overflow:hidden} .bio-hero-section::before {content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 30% 70%,rgba(0,122,255,0.08) 0%,transparent 50%),radial-gradient(circle at 70% 30%,rgba(0,122,255,0.05) 0%,transparent 50%);pointer-events:none} .bio-hero-content {position:relative;z-index:2} .bio-title {font-size:var(--font-size-hero);font-weight:var(--font-weight-bold);color:var(--color-primary-dark);margin:0 0 var(--space-sm) 0;letter-spacing:-0.02em;line-height:var(--line-height-tight)} .bio-subtitle {font-size:var(--font-size-h3);font-weight:var(--font-weight-medium);color:var(--color-secondary-gray);margin:0;letter-spacing:-0.01em} .bio-section {padding:var(--space-3xl) 0} .bio-split-layout {display:grid;grid-template-columns:1fr 2fr;gap:var(--space-3xl);align-items:start} @media (max-width:1024px) {.bio-split-layout {grid-template-columns:1fr;gap:var(--space-2xl)} } .bio-photo-section {position:sticky;top:calc(80px + var(--space-xl))} .bio-photo-container {position:relative;margin-bottom:var(--space-xl);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-lg);transition:all var(--transition-normal)} .bio-photo-container:hover {transform:translateY(-4px);box-shadow:var(--shadow-xl)} .bio-photo {width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block;transition:transform var(--transition-slow)} .bio-photo-container:hover .bio-photo {transform:scale(1.05)} .photo-overlay {position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient( 135deg,rgba(0,122,255,0.1) 0%,transparent 30%,transparent 70%,rgba(0,0,0,0.1) 100% );opacity:0;transition:opacity var(--transition-normal)} .bio-photo-container:hover .photo-overlay {opacity:1} .photo-effects {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60px;height:60px;border:2px solid var(--color-primary-light);border-radius:50%;background:rgba(255,255,255,0.2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;opacity:0;transform:translate(-50%,-50%) scale(0.8);transition:all var(--transition-normal)} .bio-photo-container:hover .photo-effects {opacity:1;transform:translate(-50%,-50%) scale(1)} .photo-effects::after {content:'👁';font-size:24px} .contact-info {background:var(--color-primary-light);border-radius:var(--radius-xl);padding:var(--space-xl);box-shadow:var(--shadow-md);border:1px solid var(--color-border-light)} .contact-info h3 {font-size:var(--font-size-h4);font-weight:var(--font-weight-semibold);color:var(--color-primary-dark);margin:0 0 var(--space-md) 0;text-align:center} .contact-items {display:flex;flex-direction:column;gap:var(--space-sm)} .contact-item {display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm);border-radius:var(--radius-md);text-decoration:none;color:var(--color-primary-dark);transition:all var(--transition-fast);border:1px solid transparent} .contact-item:hover {background:var(--color-background-light);border-color:var(--color-border-light);transform:translateX(4px)} .contact-item[href]:hover {color:var(--color-accent-blue)} .contact-icon {font-size:20px;width:24px;text-align:center;flex-shrink:0} .contact-text {font-size:var(--font-size-small);font-weight:var(--font-weight-medium)} .bio-content-section {max-width:none} .bio-intro {margin-bottom:var(--space-3xl)} .bio-lead {font-size:var(--font-size-h4);font-weight:var(--font-weight-medium);color:var(--color-primary-dark);line-height:var(--line-height-relaxed);margin-bottom:var(--space-md)} .bio-intro p {font-size:var(--font-size-body);color:var(--color-secondary-gray);line-height:var(--line-height-relaxed);margin-bottom:var(--space-sm)} .bio-expandable-sections {display:flex;flex-direction:column;gap:var(--space-lg)} .expandable-section {background:var(--color-primary-light);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);border:1px solid var(--color-border-light);overflow:hidden;transition:all var(--transition-normal)} .expandable-section:hover {box-shadow:var(--shadow-lg);border-color:rgba(0,122,255,0.2)} .section-toggle {width:100%;padding:var(--space-xl);background:none;border:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;text-align:left;transition:all var(--transition-fast)} .section-toggle:hover {background:var(--color-background-light)} .section-toggle h3 {font-size:var(--font-size-h3);font-weight:var(--font-weight-semibold);color:var(--color-primary-dark);margin:0} .toggle-indicator {font-size:24px;font-weight:var(--font-weight-bold);color:var(--color-accent-blue);transition:transform var(--transition-fast);width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(0,122,255,0.1)} .section-toggle[aria-expanded="true"] .toggle-indicator {transform:rotate(45deg);background:var(--color-accent-blue);color:var(--color-primary-light)} .section-content {padding:0 var(--space-xl) var(--space-xl);max-height:0;overflow:hidden;opacity:0;transition:all var(--transition-normal)} .expandable-section[data-expanded="true"] .section-content {max-height:2000px;opacity:1} .section-content p {font-size:var(--font-size-body);color:var(--color-secondary-gray);line-height:var(--line-height-relaxed);margin-bottom:var(--space-sm)} .education-timeline {margin-top:var(--space-lg);position:relative;padding-left:var(--space-lg)} .education-timeline::before {content:'';position:absolute;left:12px;top:0;bottom:0;width:2px;background:var(--color-border-light)} .timeline-item {position:relative;margin-bottom:var(--space-lg)} .timeline-item:last-child {margin-bottom:0} .timeline-marker {position:absolute;left:-18px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--color-accent-blue);border:3px solid var(--color-primary-light);box-shadow:var(--shadow-sm)} .timeline-content h4 {font-size:var(--font-size-h4);font-weight:var(--font-weight-semibold);color:var(--color-primary-dark);margin:0 0 var(--space-xs) 0} .timeline-date {font-size:var(--font-size-small);color:var(--color-accent-blue);font-weight:var(--font-weight-medium);display:block;margin-bottom:var(--space-xs)} .timeline-content p {font-size:var(--font-size-small);color:var(--color-secondary-gray);margin:0} .skills-categories {display:grid;gap:var(--space-xl);margin-top:var(--space-lg)} .skill-category h4 {font-size:var(--font-size-h4);font-weight:var(--font-weight-semibold);color:var(--color-primary-dark);margin:0 0 var(--space-md) 0;padding-bottom:var(--space-xs);border-bottom:2px solid var(--color-accent-blue)} .skill-items {display:flex;flex-direction:column;gap:var(--space-md)} .skill-item {display:flex;align-items:center;gap:var(--space-md)} .skill-name {font-size:var(--font-size-small);font-weight:var(--font-weight-medium);color:var(--color-primary-dark);min-width:140px;flex-shrink:0} .skill-progress {flex:1;height:8px;background:var(--color-background-light);border-radius:var(--radius-sm);overflow:hidden;position:relative} .skill-bar {height:100%;background:linear-gradient(90deg,var(--color-accent-blue),#0056b3);border-radius:var(--radius-sm);transition:width 1s ease-out;position:relative} .skill-bar::after {content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);animation:shimmer 2s infinite} @keyframes shimmer {0% {left:-100%} 100% {left:100%} } .interests-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--space-lg);margin:var(--space-lg) 0} .interest-item {text-align:center;padding:var(--space-lg);background:var(--color-background-light);border-radius:var(--radius-lg);border:1px solid var(--color-border-light);transition:all var(--transition-fast)} .interest-item:hover {transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:rgba(0,122,255,0.3)} .interest-icon {font-size:48px;margin-bottom:var(--space-sm);display:block} .interest-item h4 {font-size:var(--font-size-h4);font-weight:var(--font-weight-semibold);color:var(--color-primary-dark);margin:0 0 var(--space-sm) 0} .interest-item p {font-size:var(--font-size-small);color:var(--color-secondary-gray);line-height:var(--line-height-relaxed);margin:0} .philosophy-quote {margin:var(--space-xl) 0 0 0;padding:var(--space-lg);background:var(--color-background-light);border-left:4px solid var(--color-accent-blue);border-radius:var(--radius-md);font-size:var(--font-size-body);font-style:italic;color:var(--color-primary-dark);line-height:var(--line-height-relaxed);position:relative} .philosophy-quote::before {content:'"';font-size:48px;color:var(--color-accent-blue);position:absolute;top:-8px;left:var(--space-sm);font-family:Georgia,serif} @media (max-width:768px) {.bio-hero-section {padding:var(--space-2xl) 0 var(--space-xl) 0} .bio-title {font-size:clamp(2rem,6vw,3rem)} .bio-subtitle {font-size:var(--font-size-h4)} .bio-section {padding:var(--space-2xl) 0} .bio-photo-section {position:static} .contact-info {padding:var(--space-lg)} .section-toggle {padding:var(--space-lg)} .section-content {padding:0 var(--space-lg) var(--space-lg)} .interests-grid {grid-template-columns:1fr;gap:var(--space-md)} .skills-categories {gap:var(--space-lg)} .skill-name {min-width:120px} } .section-toggle:focus {outline:2px solid var(--color-accent-blue);outline-offset:2px} .contact-item:focus {outline:2px solid var(--color-accent-blue);outline-offset:2px} @media (prefers-reduced-motion:no-preference) {.expandable-section {animation:fadeInUp 0.6s ease-out forwards;opacity:0;transform:translateY(20px)} .expandable-section:nth-child(1) {animation-delay:0.1s} .expandable-section:nth-child(2) {animation-delay:0.2s} .expandable-section:nth-child(3) {animation-delay:0.3s} } @media (prefers-reduced-motion:no-preference) {.timeline-item {opacity:0;transform:translateX(-20px);animation:slideInLeft 0.6s ease-out forwards} .timeline-item:nth-child(1) {animation-delay:0.2s} .timeline-item:nth-child(2) {animation-delay:0.4s} .timeline-item:nth-child(3) {animation-delay:0.6s} .timeline-item:nth-child(4) {animation-delay:0.8s} } @keyframes slideInLeft {to {opacity:1;transform:translateX(0)} } .skill-bar {position:relative;overflow:hidden} .skill-bar::before {content:'';position:absolute;top:0;left:0;height:100%;width:100%;background:linear-gradient(90deg,var(--color-accent-blue),#0056b3);transform:translateX(-100%);transition:transform 1s ease-out} .skill-item.animate .skill-bar::before {transform:translateX(0)} .skill-item {position:relative} .skill-item::after {content:attr(data-percentage);position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:var(--font-size-caption);font-weight:var(--font-weight-semibold);color:var(--color-accent-blue);opacity:0;transition:opacity var(--transition-fast);pointer-events:none} .skill-item:hover::after {opacity:1} .timeline-marker {position:relative} .timeline-marker::before {content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:20px;height:20px;border-radius:50%;background:rgba(0,122,255,0.3);animation:pulse 2s infinite} @keyframes pulse {0% {transform:translate(-50%,-50%) scale(1);opacity:1} 70% {transform:translate(-50%,-50%) scale(1.4);opacity:0} 100% {transform:translate(-50%,-50%) scale(1);opacity:0} } .timeline-item:hover .timeline-content {transform:translateX(4px);transition:transform var(--transition-fast)} .timeline-item:hover .timeline-marker {transform:scale(1.2);transition:transform var(--transition-fast)} .skill-category:hover h4 {color:var(--color-accent-blue);transition:color var(--transition-fast)} .skill-category:hover .skill-item {transform:translateX(4px);transition:transform var(--transition-fast)} .skill-progress {position:relative} .skill-progress::after {content:'';position:absolute;top:0;left:0;height:100%;width:100%;background:linear-gradient(90deg,transparent,rgba(0,122,255,0.4),transparent);transform:translateX(-100%);transition:transform 0.8s ease-out} .skill-item.animate .skill-progress::after {transform:translateX(100%)} .responsive-image-picture {display:block;position:relative;overflow:hidden;background:var(--color-background-light);border-radius:var(--radius-md);transition:all var(--transition-normal)} .responsive-image-img {width:100%;height:auto;display:block;transition:opacity var(--transition-normal),transform var(--transition-normal);object-fit:cover} .image-loading {position:relative} .image-loading .responsive-image-img {opacity:0.7} .image-loading::before {content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient( 90deg,transparent,rgba(255,255,255,0.4),transparent );animation:imageShimmer 1.5s infinite;z-index:1;border-radius:var(--radius-md)} @keyframes imageShimmer {0% {left:-100%} 100% {left:100%} } .image-loaded .responsive-image-img {opacity:1} .image-error {position:relative} .image-error .responsive-image-img {opacity:0.6;filter:grayscale(100%)} .image-error::after {content:'⚠';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;background:rgba(239,68,68,0.1);border:2px solid #ef4444;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;color:#ef4444;z-index:2;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)} .responsive-image-picture:hover {transform:translateY(-2px);box-shadow:var(--shadow-lg)} .responsive-image-picture:hover .responsive-image-img {transform:scale(1.02)} .responsive-image-picture[data-aspect="square"] {aspect-ratio:1/1} .responsive-image-picture[data-aspect="landscape"] {aspect-ratio:16/9} .responsive-image-picture[data-aspect="portrait"] {aspect-ratio:4/5} .responsive-image-picture[data-aspect="wide"] {aspect-ratio:21/9} .responsive-image-small {max-width:320px} .responsive-image-medium {max-width:640px} .responsive-image-large {max-width:1024px} .responsive-image-full {width:100%} .responsive-image-premium {border-radius:var(--radius-xl);box-shadow:var(--shadow-md);border:1px solid var(--color-border-light)} .responsive-image-premium:hover {box-shadow:var(--shadow-xl);border-color:rgba(0,122,255,0.2)} .responsive-image-premium .responsive-image-img {border-radius:var(--radius-xl)} .responsive-image-glass::before {content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient( 135deg,rgba(255,255,255,0.1) 0%,transparent 30%,transparent 70%,rgba(0,0,0,0.05) 100% );opacity:0;transition:opacity var(--transition-normal);border-radius:var(--radius-md);pointer-events:none;z-index:1} .responsive-image-glass:hover::before {opacity:1} .responsive-image-featured {position:relative;border:2px solid var(--color-accent-blue);background:linear-gradient(135deg,var(--color-primary-light) 0%,rgba(0,122,255,0.02) 100%)} .responsive-image-featured::after {content:'Featured';position:absolute;top:var(--space-sm);left:var(--space-sm);background:var(--color-accent-blue);color:var(--color-primary-light);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-md);font-size:var(--font-size-caption);font-weight:var(--font-weight-semibold);z-index:2;text-transform:uppercase;letter-spacing:0.5px} @media (max-width:768px) {.responsive-image-picture:hover {transform:none} .responsive-image-picture:hover .responsive-image-img {transform:none} } @media (prefers-reduced-motion:reduce) {.responsive-image-img,.image-loading::before,.responsive-image-picture {animation:none !important;transition:none !important} } @media (prefers-contrast:high) {.responsive-image-picture {border:2px solid} .image-error::after {border-width:3px;background:#ef4444;color:white} } @media print {.responsive-image-picture {break-inside:avoid;box-shadow:none;border:1px solid #ccc} .image-loading::before {display:none} } .glass-ultra {background:rgba(255,255,255,0.1);backdrop-filter:blur(40px) saturate(180%);-webkit-backdrop-filter:blur(40px) saturate(180%);border:1px solid rgba(255,255,255,0.2);box-shadow:0 8px 32px rgba(0,0,0,0.1),inset 0 1px 0 rgba(255,255,255,0.2)} .glass-premium {background:rgba(255,255,255,0.15);backdrop-filter:blur(30px) saturate(150%);-webkit-backdrop-filter:blur(30px) saturate(150%);border:1px solid rgba(255,255,255,0.25);box-shadow:0 4px 24px rgba(0,0,0,0.08),inset 0 1px 0 rgba(255,255,255,0.15)} .glass-subtle {background:rgba(255,255,255,0.08);backdrop-filter:blur(20px) saturate(120%);-webkit-backdrop-filter:blur(20px) saturate(120%);border:1px solid rgba(255,255,255,0.1);box-shadow:0 2px 16px rgba(0,0,0,0.06),inset 0 1px 0 rgba(255,255,255,0.1)} .glass-dark-ultra {background:rgba(0,0,0,0.2);backdrop-filter:blur(40px) saturate(180%);-webkit-backdrop-filter:blur(40px) saturate(180%);border:1px solid rgba(255,255,255,0.1);box-shadow:0 8px 32px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.1)} .micro-bounce {transition:transform var(--transition-fast)} .micro-bounce:hover {transform:translateY(-2px);animation:microBounce 0.6s ease-out} @keyframes microBounce {0% {transform:translateY(-2px)} 50% {transform:translateY(-4px)} 100% {transform:translateY(-2px)} } .micro-scale {transition:transform var(--transition-fast)} .micro-scale:hover {transform:scale(1.02)} .micro-scale:active {transform:scale(0.98)} .micro-glow {position:relative;transition:all var(--transition-fast)} .micro-glow::before {content:'';position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;background:linear-gradient(45deg,var(--color-accent-blue),#00d4ff,var(--color-accent-blue));border-radius:inherit;opacity:0;z-index:-1;transition:opacity var(--transition-fast);filter:blur(8px)} .micro-glow:hover::before {opacity:0.3} .btn-premium {position:relative;overflow:hidden;background:linear-gradient(135deg,var(--color-accent-blue),#0056b3);border:none;box-shadow:0 4px 16px rgba(0,122,255,0.3),inset 0 1px 0 rgba(255,255,255,0.2);transition:all var(--transition-normal)} .btn-premium::before {content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);transition:left 0.6s ease} .btn-premium:hover::before {left:100%} .btn-premium:hover {transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,122,255,0.4),inset 0 1px 0 rgba(255,255,255,0.3)} .btn-premium:active {transform:translateY(-1px)} .card-premium {position:relative;background:var(--color-primary-light);border-radius:var(--radius-xl);border:1px solid rgba(255,255,255,0.2);box-shadow:0 4px 24px rgba(0,0,0,0.08),inset 0 1px 0 rgba(255,255,255,0.1);transition:all var(--transition-normal);overflow:hidden} .card-premium::before {content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(0,122,255,0.5),transparent);opacity:0;transition:opacity var(--transition-fast)} .card-premium:hover::before {opacity:1} .card-premium:hover {transform:translateY(-8px);box-shadow:0 12px 40px rgba(0,0,0,0.15),inset 0 1px 0 rgba(255,255,255,0.2);border-color:rgba(0,122,255,0.3)} .float-animation {animation:float 6s ease-in-out infinite} @keyframes float {0%,100% {transform:translateY(0px)} 50% {transform:translateY(-10px)} } .float-animation:nth-child(2n) {animation-delay:-2s} .float-animation:nth-child(3n) {animation-delay:-4s} .gradient-shift {background:linear-gradient(-45deg,#007aff,#00d4ff,#007aff,#0056b3);background-size:400% 400%;animation:gradientShift 8s ease infinite} @keyframes gradientShift {0% {background-position:0% 50%} 50% {background-position:100% 50%} 100% {background-position:0% 50%} } .morph-circle {border-radius:50%;transition:border-radius var(--transition-slow)} .morph-circle:hover {border-radius:20%} .morph-square {border-radius:var(--radius-md);transition:border-radius var(--transition-slow)} .morph-square:hover {border-radius:50%} .loading-shimmer {position:relative;overflow:hidden;background:var(--color-background-light)} .loading-shimmer::before {content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient( 90deg,transparent,rgba(255,255,255,0.6),transparent );animation:shimmerMove 2s infinite} @keyframes shimmerMove {0% {left:-100%} 100% {left:100%} } .particle-container {position:relative;overflow:hidden} .particle {position:absolute;width:4px;height:4px;background:rgba(0,122,255,0.6);border-radius:50%;pointer-events:none;animation:particleFloat 8s linear infinite} @keyframes particleFloat {0% {transform:translateY(100vh) rotate(0deg);opacity:0} 10% {opacity:1} 90% {opacity:1} 100% {transform:translateY(-100px) rotate(360deg);opacity:0} } .particle:nth-child(2n) {animation-delay:-2s;animation-duration:6s} .particle:nth-child(3n) {animation-delay:-4s;animation-duration:10s} .hover-lift {transition:all var(--transition-normal)} .hover-lift:hover {transform:translateY(-4px);box-shadow:0 8px 32px rgba(0,0,0,0.12)} .hover-glow {transition:all var(--transition-normal)} .hover-glow:hover {box-shadow:0 0 20px rgba(0,122,255,0.3),0 4px 16px rgba(0,0,0,0.1)} .hover-rotate {transition:transform var(--transition-normal)} .hover-rotate:hover {transform:rotate(2deg)} .focus-premium:focus {outline:none;box-shadow:0 0 0 3px rgba(0,122,255,0.2),0 0 20px rgba(0,122,255,0.1);border-color:var(--color-accent-blue)} .stagger-fade-in {opacity:0;transform:translateY(20px);animation:staggerFadeIn 0.6s ease-out forwards} .stagger-fade-in:nth-child(1) {animation-delay:0.1s} .stagger-fade-in:nth-child(2) {animation-delay:0.2s} .stagger-fade-in:nth-child(3) {animation-delay:0.3s} .stagger-fade-in:nth-child(4) {animation-delay:0.4s} .stagger-fade-in:nth-child(5) {animation-delay:0.5s} @keyframes staggerFadeIn {to {opacity:1;transform:translateY(0)} } .navbar-premium {background:rgba(255,255,255,0.1);backdrop-filter:blur(30px) saturate(150%);-webkit-backdrop-filter:blur(30px) saturate(150%);border-bottom:1px solid rgba(255,255,255,0.2);box-shadow:0 4px 24px rgba(0,0,0,0.08),inset 0 1px 0 rgba(255,255,255,0.15)} .modal-premium {background:rgba(255,255,255,0.95);backdrop-filter:blur(40px) saturate(180%);-webkit-backdrop-filter:blur(40px) saturate(180%);border:1px solid rgba(255,255,255,0.3);box-shadow:0 20px 60px rgba(0,0,0,0.15),inset 0 1px 0 rgba(255,255,255,0.2)} .breathe {animation:breathe 4s ease-in-out infinite} @keyframes breathe {0%,100% {transform:scale(1)} 50% {transform:scale(1.05)} } .ripple {position:relative;overflow:hidden} .ripple::before {content:'';position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:rgba(255,255,255,0.5);transform:translate(-50%,-50%);transition:width 0.6s,height 0.6s} .ripple:active::before {width:300px;height:300px} .project-modal-backdrop {position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.9);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);z-index:var(--z-modal-backdrop);opacity:0;visibility:hidden;transition:opacity var(--transition-normal),visibility var(--transition-normal)} .project-modal-backdrop.active {opacity:1;visibility:visible} .project-modal {position:fixed;top:0;left:0;width:100%;height:100%;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;padding:var(--space-lg);opacity:0;visibility:hidden;transform:scale(0.95);transition:opacity var(--transition-normal),visibility var(--transition-normal),transform var(--transition-normal)} .project-modal.active {opacity:1;visibility:visible;transform:scale(1)} .project-modal-content {width:100%;max-width:1200px;max-height:90vh;background:var(--color-primary-light);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);overflow-y:auto;position:relative;scrollbar-width:thin;scrollbar-color:var(--color-secondary-gray) transparent} .project-modal-content::-webkit-scrollbar {width:8px} .project-modal-content::-webkit-scrollbar-track {background:transparent} .project-modal-content::-webkit-scrollbar-thumb {background:var(--color-secondary-gray);border-radius:4px} .project-modal-content::-webkit-scrollbar-thumb:hover {background:var(--color-primary-dark)} .project-modal-close {position:absolute;top:var(--space-lg);right:var(--space-lg);width:44px;height:44px;background:rgba(0,0,0,0.1);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:none;border-radius:50%;color:var(--color-primary-dark);cursor:pointer;z-index:10;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast)} .project-modal-close:hover {background:rgba(0,0,0,0.2);transform:scale(1.1)} .project-modal-close:focus {outline:2px solid var(--color-accent-blue);outline-offset:2px} .project-modal-header {padding:var(--space-2xl) var(--space-2xl) var(--space-lg);border-bottom:1px solid var(--color-border-light)} .project-modal-title {font-size:var(--font-size-h1);font-weight:var(--font-weight-bold);color:var(--color-primary-dark);margin:0 0 var(--space-md) 0;line-height:var(--line-height-tight)} .project-modal-meta {display:flex;flex-wrap:wrap;gap:var(--space-md);align-items:center} .project-modal-meta span {padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-md);font-size:var(--font-size-small);font-weight:var(--font-weight-medium)} .project-week {background:var(--color-accent-blue);color:var(--color-primary-light)} .project-category {background:var(--color-background-light);color:var(--color-secondary-gray);border:1px solid var(--color-border-light)} .project-status {text-transform:capitalize} .project-status.completed {background:#4CAF50;color:var(--color-primary-light)} .project-status.in-progress {background:#FF9800;color:var(--color-primary-light)} .project-status.upcoming {background:var(--color-secondary-gray);color:var(--color-primary-light)} .project-modal-nav {position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);display:flex;justify-content:space-between;align-items:center;padding:0 var(--space-lg);pointer-events:none;z-index:5} .project-nav-btn {width:48px;height:48px;background:rgba(255,255,255,0.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:none;border-radius:50%;color:var(--color-primary-dark);cursor:pointer;pointer-events:auto;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);box-shadow:var(--shadow-md)} .project-nav-btn:hover:not(:disabled) {background:var(--color-primary-light);transform:scale(1.1);box-shadow:var(--shadow-lg)} .project-nav-btn:disabled {opacity:0.5;cursor:not-allowed} .project-nav-btn:focus {outline:2px solid var(--color-accent-blue);outline-offset:2px} .project-counter {background:rgba(255,255,255,0.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-lg);font-size:var(--font-size-small);font-weight:var(--font-weight-medium);color:var(--color-primary-dark);pointer-events:auto;box-shadow:var(--shadow-sm)} .project-media-gallery {padding:var(--space-lg) var(--space-2xl)} .gallery-title {font-size:var(--font-size-h3);font-weight:var(--font-weight-semibold);color:var(--color-primary-dark);margin:0 0 var(--space-lg) 0} .project-image-gallery {margin-bottom:var(--space-2xl)} .image-gallery-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--space-md)} .gallery-image-container {position:relative;border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;transition:transform var(--transition-fast)} .gallery-image-container:hover {transform:scale(1.02)} .gallery-image {width:100%;height:200px;object-fit:cover;transition:transform var(--transition-normal)} .gallery-image-container:hover .gallery-image {transform:scale(1.05)} .project-video-gallery {margin-bottom:var(--space-2xl)} .video-gallery-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:var(--space-lg)} .gallery-video-container {border-radius:var(--radius-lg);overflow:hidden;background:var(--color-primary-dark)} .project-modal-content-section {padding:0 var(--space-2xl) var(--space-2xl)} .project-modal-content-section h1,.project-modal-content-section h2,.project-modal-content-section h3,.project-modal-content-section h4 {color:var(--color-primary-dark);margin-top:var(--space-xl);margin-bottom:var(--space-md)} .project-modal-content-section h1 {font-size:var(--font-size-h2);font-weight:var(--font-weight-bold)} .project-modal-content-section h2 {font-size:var(--font-size-h3);font-weight:var(--font-weight-semibold)} .project-modal-content-section h3 {font-size:var(--font-size-h4);font-weight:var(--font-weight-semibold)} .project-modal-content-section p {color:var(--color-primary-dark);line-height:var(--line-height-relaxed);margin-bottom:var(--space-md)} .project-modal-content-section ul,.project-modal-content-section ol {margin-bottom:var(--space-md);padding-left:var(--space-lg)} .project-modal-content-section li {color:var(--color-primary-dark);line-height:var(--line-height-relaxed);margin-bottom:var(--space-xs)} .project-modal-content-section .project-tags {display:flex;flex-wrap:wrap;gap:var(--space-xs);margin-top:var(--space-md)} .project-modal-content-section .tag {padding:var(--space-xs) var(--space-sm);background:var(--color-background-light);color:var(--color-secondary-gray);border:1px solid var(--color-border-light);border-radius:var(--radius-sm);font-size:var(--font-size-caption);font-weight:var(--font-weight-medium)} .project-lightbox {position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.95);z-index:calc(var(--z-modal) + 10);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity var(--transition-normal),visibility var(--transition-normal)} .project-lightbox.active {opacity:1;visibility:visible} .lightbox-content {position:relative;max-width:90vw;max-height:90vh;display:flex;flex-direction:column;align-items:center} .lightbox-image {max-width:100%;max-height:80vh;object-fit:contain;border-radius:var(--radius-lg);box-shadow:var(--shadow-xl)} .lightbox-caption {margin-top:var(--space-md);padding:var(--space-sm) var(--space-md);background:rgba(255,255,255,0.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:var(--radius-lg);color:var(--color-primary-dark);font-size:var(--font-size-small);text-align:center;max-width:600px} .lightbox-close {position:absolute;top:-60px;right:0;width:44px;height:44px;background:rgba(255,255,255,0.2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:none;border-radius:50%;color:var(--color-primary-light);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast)} .lightbox-close:hover {background:rgba(255,255,255,0.3);transform:scale(1.1)} .lightbox-close:focus {outline:2px solid var(--color-accent-blue);outline-offset:2px} @media (max-width:768px) {.project-modal {padding:var(--space-md)} .project-modal-content {max-height:95vh;border-radius:var(--radius-lg)} .project-modal-close {top:var(--space-md);right:var(--space-md);width:40px;height:40px} .project-modal-header {padding:var(--space-xl) var(--space-lg) var(--space-md)} .project-modal-title {font-size:var(--font-size-h2)} .project-media-gallery {padding:var(--space-md) var(--space-lg)} .project-modal-content-section {padding:0 var(--space-lg) var(--space-lg)} .image-gallery-grid {grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-sm)} .gallery-image {height:150px} .video-gallery-grid {grid-template-columns:1fr;gap:var(--space-md)} .project-nav-btn {width:40px;height:40px} .project-modal-nav {padding:0 var(--space-md)} .lightbox-content {max-width:95vw;max-height:95vh} .lightbox-image {max-height:70vh} .lightbox-close {top:-50px;width:40px;height:40px} } @media (prefers-reduced-motion:reduce) {.project-modal-backdrop,.project-modal,.project-lightbox,.gallery-image-container,.gallery-image,.project-nav-btn,.project-modal-close,.lightbox-close {transition:none !important;animation:none !important} .gallery-image-container:hover,.gallery-image-container:hover .gallery-image,.project-nav-btn:hover,.project-modal-close:hover,.lightbox-close:hover {transform:none !important} } @media (prefers-contrast:high) {.project-modal-backdrop {background:rgba(0,0,0,0.95)} .project-modal-content {border:2px solid var(--color-primary-dark)} .project-nav-btn,.project-modal-close,.lightbox-close {border:2px solid var(--color-primary-dark)} .project-counter {border:1px solid var(--color-primary-dark)} } @media (prefers-color-scheme:dark) {.project-modal-content {background:var(--color-primary-dark);color:var(--color-primary-light)} .project-modal-header {border-bottom-color:var(--color-border-dark)} .project-modal-title,.gallery-title,.project-modal-content-section h1,.project-modal-content-section h2,.project-modal-content-section h3,.project-modal-content-section h4,.project-modal-content-section p,.project-modal-content-section li {color:var(--color-primary-light)} .project-modal-close {background:rgba(255,255,255,0.1);color:var(--color-primary-light)} .project-modal-close:hover {background:rgba(255,255,255,0.2)} .project-nav-btn {background:rgba(0,0,0,0.8);color:var(--color-primary-light)} .project-nav-btn:hover:not(:disabled) {background:var(--color-primary-dark)} .project-counter {background:rgba(0,0,0,0.8);color:var(--color-primary-light)} .lightbox-caption {background:rgba(0,0,0,0.9);color:var(--color-primary-light)} } @media print {.project-modal-backdrop,.project-modal,.project-lightbox {display:none !important} }

/* Scroll-Based Animations Styles */
/* Requirements: 9.4, 9.5 */

/* Smooth scroll enhancements */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  
  .reduced-motion * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transform: none !important;
  }
}

/* Parallax container optimizations */
.hero-section,
.final-project-hero,
.bio-hero-section {
  overflow: hidden;
  position: relative;
}

.hero-parallax-layer {
  will-change: transform;
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Enhanced scroll indicators */
.hero-scroll-indicator {
  position: absolute;
  bottom: var(--space-xl);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  cursor: pointer;
  transition: all var(--transition-normal);
}

.scroll-progress-circle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}

.scroll-progress-circle svg {
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(-90deg);
  transition: stroke-dashoffset 0.3s ease;
}

.scroll-progress-circle .scroll-arrow {
  width: 16px;
  height: 16px;
  border: 2px solid var(--color-accent-blue);
  border-top: none;
  border-right: none;
  transform: rotate(-45deg);
  animation: scrollBounce 2s infinite;
}

@keyframes scrollBounce {
  0%, 20%, 50%, 80%, 100% {
    transform: rotate(-45deg) translateY(0);
  }
  40% {
    transform: rotate(-45deg) translateY(-8px);
  }
  60% {
    transform: rotate(-45deg) translateY(-4px);
  }
}

/* Fade-in animation base styles */
.fade-in-element {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-element.animated {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered animations for grids */
.masonry-grid .project-card {
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.masonry-grid .project-card:nth-child(1) { transition-delay: 0.1s; }
.masonry-grid .project-card:nth-child(2) { transition-delay: 0.2s; }
.masonry-grid .project-card:nth-child(3) { transition-delay: 0.3s; }
.masonry-grid .project-card:nth-child(4) { transition-delay: 0.4s; }
.masonry-grid .project-card:nth-child(5) { transition-delay: 0.5s; }
.masonry-grid .project-card:nth-child(6) { transition-delay: 0.6s; }

/* Enhanced parallax effects for project images */
.project-card .project-image {
  overflow: hidden;
}

.project-card .project-image img {
  transition: transform var(--transition-slow);
  will-change: transform;
}

.project-card:hover .project-image img {
  transform: scale(1.05) translateY(-2px);
}

/* Scroll-based navbar enhancements */
.navbar {
  transition: all var(--transition-normal);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
}

.navbar.navbar-transparent {
  background: rgba(255, 255, 255, 0.1);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.navbar.scrolled {
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: var(--shadow-sm);
}

/* Scroll-based micro-interactions */
.is-scrolling .project-card {
  pointer-events: none;
}

.is-scrolling .project-card.hover-active {
  transform: translateY(-4px) scale(1.01);
  box-shadow: var(--shadow-lg);
}

/* Section-based theme transitions */
body[data-current-section*="hero"] .navbar {
  --navbar-text-color: var(--color-primary-dark);
}

body[data-current-section*="dark"] .navbar {
  --navbar-text-color: var(--color-primary-light);
  background: rgba(0, 0, 0, 0.8);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* Enhanced project card animations */
.project-card {
  transition: all var(--transition-normal);
  transform-origin: center;
}

.project-card.scroll-revealed {
  animation: slideInUp 0.6s ease-out forwards;
}

.project-card.scroll-revealed:nth-child(even) {
  animation: slideInLeft 0.6s ease-out forwards;
}

.project-card.scroll-revealed:nth-child(odd) {
  animation: slideInRight 0.6s ease-out forwards;
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-40px) translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(40px) translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
  }
}

/* Timeline animations */
.timeline-item {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.timeline-item.animated {
  opacity: 1;
  transform: translateY(0);
}

.timeline-item:nth-child(odd) {
  transform: translateX(-30px) translateY(30px);
}

.timeline-item:nth-child(even) {
  transform: translateX(30px) translateY(30px);
}

.timeline-item.animated:nth-child(odd),
.timeline-item.animated:nth-child(even) {
  transform: translateX(0) translateY(0);
}

/* Skills animation enhancements */
.skill-item {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.skill-item.animated {
  opacity: 1;
  transform: translateX(0);
}

.skill-item:nth-child(1) { transition-delay: 0.1s; }
.skill-item:nth-child(2) { transition-delay: 0.2s; }
.skill-item:nth-child(3) { transition-delay: 0.3s; }
.skill-item:nth-child(4) { transition-delay: 0.4s; }
.skill-item:nth-child(5) { transition-delay: 0.5s; }

/* Enhanced glassmorphism with scroll */
.glass-premium {
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all var(--transition-normal);
}

.glass-premium:hover {
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(0, 122, 255, 0.3);
}

/* Performance optimizations */
.performance-low .hero-parallax-layer,
.performance-low [data-parallax] {
  transform: none !important;
}

.performance-low .glass-premium {
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* Mobile optimizations */
@media (max-width: 768px) {
  .hero-parallax-layer {
    transform: none !important;
  }
  
  .project-card .project-image img {
    transform: none !important;
  }
  
  .scroll-progress-circle {
    width: 32px;
    height: 32px;
  }
  
  .scroll-progress-circle .scroll-arrow {
    width: 12px;
    height: 12px;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .glass-premium {
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid var(--color-primary-dark);
  }
  
  .navbar {
    background: var(--color-primary-light);
    border-bottom: 2px solid var(--color-primary-dark);
  }
}

/* Print styles - disable animations */
@media print {
  * {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}
/* Additional performance optimization classes */
.performance-medium .hero-parallax-layer {
  transform: translateZ(0) !important;
}

.performance-high .hero-parallax-layer {
  will-change: transform;
  transform-style: preserve-3d;
}

/* Additional glassmorphism classes */
.glass-ultra {
  backdrop-filter: blur(40px) saturate(200%);
  -webkit-backdrop-filter: blur(40px) saturate(200%);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-subtle {
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

/* Additional micro-interaction classes */
.micro-bounce {
  transition: transform var(--transition-fast);
}

.micro-bounce:hover {
  transform: translateY(-2px);
  animation: microBounce 0.6s ease-out;
}

.micro-scale {
  transition: transform var(--transition-fast);
}

.micro-scale:hover {
  transform: scale(1.05);
}

.micro-glow {
  transition: box-shadow var(--transition-fast);
}

.micro-glow:hover {
  box-shadow: 0 0 20px rgba(0, 122, 255, 0.3);
}

.btn-premium {
  position: relative;
  overflow: hidden;
}

.btn-premium::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;
}

.btn-premium:hover::before {
  left: 100%;
}

/* Additional keyframes for enhanced visual effects */
@keyframes microBounce {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-3px); }
  50% { transform: translateY(-6px); }
  75% { transform: translateY(-3px); }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes particleFloat {
  0% { 
    transform: translateY(0px) rotate(0deg); 
    opacity: 0; 
  }
  10% { 
    opacity: 1; 
  }
  90% { 
    opacity: 1; 
  }
  100% { 
    transform: translateY(-100vh) rotate(360deg); 
    opacity: 0; 
  }
}

/* Enhanced animation classes */
.animate-in {
  animation-duration: 0.8s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Particle styles */
.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(0, 122, 255, 0.3);
  border-radius: 50%;
  animation: particleFloat 8s linear infinite;
  pointer-events: none;
}

/* Enhanced navbar premium class */
.navbar-premium {
  backdrop-filter: blur(30px) saturate(150%);
  -webkit-backdrop-filter: blur(30px) saturate(150%);
}

/* GPU acceleration hints */
.hero-parallax-layer,
.project-card .project-image img,
.navbar,
.glass-premium,
.glass-ultra,
.card-premium {
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

/* Performance optimization classes */
.performance-low .glass-premium,
.performance-low .glass-ultra,
.performance-low .navbar-premium {
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.performance-medium .glass-premium,
.performance-medium .glass-ultra {
  backdrop-filter: blur(20px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
}

.performance-high .glass-premium,
.performance-high .glass-ultra {
  backdrop-filter: blur(40px) saturate(200%) brightness(1.2) !important;
  -webkit-backdrop-filter: blur(40px) saturate(200%) brightness(1.2) !important;
}

/* Additional card effects */
.card-premium {
  transition: all var(--transition-normal);
  transform-origin: center;
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

.hover-glow:hover {
  box-shadow: 0 0 30px rgba(0, 122, 255, 0.3);
}

.hover-rotate:hover {
  transform: rotate(2deg);
}

/* Loading states */
.loading-shimmer {
  position: relative;
  overflow: hidden;
}

.loading-shimmer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: shimmerMove 1.5s infinite;
}

.stagger-fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.6s ease-out forwards;
}

/* Morphing effects */
/* Removed morph-circle class - keeping consistent rounded corners */

.morph-square {
  border-radius: 0;
  transition: border-radius var(--transition-slow);
}

.morph-square:hover {
  border-radius: var(--radius-lg);
}

/* Particle effects */
.particle-container {
  position: relative;
  overflow: hidden;
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(0, 122, 255, 0.3);
  border-radius: 50%;
  animation: particleFloat 8s linear infinite;
  pointer-events: none;
}

/* Focus states */
.focus-premium:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.3);
  border-color: var(--color-accent-blue);
}
/* Additional scroll progress styles */
.progress-ring {
  stroke-dasharray: 113;
  stroke-dashoffset: 113;
  transition: stroke-dashoffset 0.3s ease;
}

/* Additional performance classes */
.performance-medium {
  --animation-duration: 0.3s;
}

.performance-high {
  --animation-duration: 0.6s;
}

/* Additional navbar premium class */
.navbar-premium {
  backdrop-filter: blur(30px) saturate(150%);
  -webkit-backdrop-filter: blur(30px) saturate(150%);
}
/* GPU acceleration hints */
.hero-parallax-layer,
.project-card .project-image img,
.navbar {
  transform: translate3d(0, 0, 0);
}

/* Enhanced Glassmorphism Effects for Task 10.2 */
.glass-premium-enhanced {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(30px) saturate(180%) brightness(1.1);
  -webkit-backdrop-filter: blur(30px) saturate(180%) brightness(1.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

.glass-premium-enhanced::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.8s ease;
}

.glass-premium-enhanced:hover::before {
  left: 100%;
}

.glass-premium-enhanced:hover {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(40px) saturate(200%) brightness(1.2);
  -webkit-backdrop-filter: blur(40px) saturate(200%) brightness(1.2);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

/* Premium Modal Glassmorphism */
.modal-glass-premium {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(50px) saturate(200%) brightness(1.1);
  -webkit-backdrop-filter: blur(50px) saturate(200%) brightness(1.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Enhanced State Transitions */
.state-transition {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.state-transition-slow {
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.state-transition-bounce {
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Premium Loading States */
.loading-premium {
  position: relative;
  overflow: hidden;
}

.loading-premium::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 122, 255, 0.1) 20%,
    rgba(0, 122, 255, 0.2) 50%,
    rgba(0, 122, 255, 0.1) 80%,
    transparent 100%
  );
  animation: premiumShimmer 2s infinite;
  pointer-events: none;
}

@keyframes premiumShimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Enhanced Micro-interactions */
.micro-premium {
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
}

.micro-premium:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 
    0 10px 30px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(0, 122, 255, 0.1);
}

.micro-premium:active {
  transform: translateY(-1px) scale(0.98);
  transition-duration: 0.1s;
}

/* Breathing Animation for Featured Elements */
.breathe-premium {
  animation: breathePremium 4s ease-in-out infinite;
}

@keyframes breathePremium {
  0%, 100% { 
    transform: scale(1);
    box-shadow: 0 4px 20px rgba(0, 122, 255, 0.1);
  }
  50% { 
    transform: scale(1.02);
    box-shadow: 0 8px 30px rgba(0, 122, 255, 0.2);
  }
}

/* Premium Gradient Animations */
.gradient-premium {
  background: linear-gradient(
    45deg,
    var(--color-accent-blue),
    #00d4ff,
    var(--color-accent-blue)
  );
  background-size: 200% 200%;
  animation: gradientPremium 3s ease infinite;
}

@keyframes gradientPremium {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Enhanced Focus States */
.focus-premium-enhanced:focus {
  outline: none;
  box-shadow: 
    0 0 0 3px rgba(0, 122, 255, 0.3),
    0 0 20px rgba(0, 122, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  border-color: var(--color-accent-blue);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Premium Card Hover Effects */
.card-hover-premium {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.card-hover-premium::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(0, 122, 255, 0.05) 0%,
    transparent 50%,
    rgba(0, 122, 255, 0.05) 100%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.card-hover-premium:hover::before {
  opacity: 1;
}

.card-hover-premium:hover {
  transform: translateY(-8px) rotateX(5deg);
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(0, 122, 255, 0.1);
}

/* Enhanced Button Ripple Effect */
.ripple-premium {
  position: relative;
  overflow: hidden;
}

.ripple-premium::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.ripple-premium:active::after {
  width: 300px;
  height: 300px;
}

/* Premium Loading Spinner */
.spinner-premium {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(0, 122, 255, 0.1);
  border-top: 3px solid var(--color-accent-blue);
  border-radius: 50%;
  animation: spinPremium 1s linear infinite;
  position: relative;
}

.spinner-premium::after {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border: 3px solid transparent;
  border-top: 3px solid rgba(0, 122, 255, 0.3);
  border-radius: 50%;
  animation: spinPremium 2s linear infinite reverse;
}

@keyframes spinPremium {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Enhanced Navbar Glassmorphism */
.navbar-premium-enhanced {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(40px) saturate(180%) brightness(1.1);
  -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(1.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 
    0 4px 20px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.navbar-premium-enhanced.scrolled {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(50px) saturate(200%) brightness(1.2);
  -webkit-backdrop-filter: blur(50px) saturate(200%) brightness(1.2);
  border-bottom-color: rgba(255, 255, 255, 0.3);
  box-shadow: 
    0 8px 30px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Premium Tooltip */
.tooltip-premium {
  position: relative;
}

.tooltip-premium::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: white;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-md);
  font-size: var(--font-size-small);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: var(--z-tooltip);
}

.tooltip-premium:hover::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-4px);
}

/* Enhanced Glassmorphism for Cards and Overlays - Task 10.2 */
.glass-premium {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(30px) saturate(180%) brightness(1.1);
  -webkit-backdrop-filter: blur(30px) saturate(180%) brightness(1.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-premium:hover {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(40px) saturate(200%) brightness(1.2);
  -webkit-backdrop-filter: blur(40px) saturate(200%) brightness(1.2);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}

/* Ultra Premium Glassmorphism */
.glass-ultra {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(40px) saturate(200%) brightness(1.15);
  -webkit-backdrop-filter: blur(40px) saturate(200%) brightness(1.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

.glass-ultra::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transition: left 0.8s ease;
}

.glass-ultra:hover::before {
  left: 100%;
}

/* Subtle Glassmorphism */
.glass-subtle {
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(15px) saturate(140%);
  -webkit-backdrop-filter: blur(15px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* Premium Button Effects */
.btn-premium {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-accent-blue), #0056b3);
  box-shadow: 
    0 4px 20px rgba(0, 122, 255, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-premium::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.6s ease;
}

.btn-premium:hover::before {
  left: 100%;
}

.btn-premium:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 
    0 8px 30px rgba(0, 122, 255, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn-premium:active {
  transform: translateY(-1px) scale(0.98);
  transition-duration: 0.1s;
}

/* Enhanced Micro-interactions */
.micro-bounce {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.micro-bounce:hover {
  transform: translateY(-3px);
  animation: microBounce 0.6s ease-out;
}

.micro-scale {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.micro-scale:hover {
  transform: scale(1.05);
}

.micro-glow {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.micro-glow:hover {
  box-shadow: 
    0 0 30px rgba(0, 122, 255, 0.4),
    0 8px 25px rgba(0, 122, 255, 0.2);
  transform: translateY(-2px);
}

/* Premium Card Effects */
.card-premium {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.card-premium::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(0, 122, 255, 0.05) 0%,
    transparent 50%,
    rgba(0, 122, 255, 0.05) 100%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.card-premium:hover::after {
  opacity: 1;
}

.card-premium:hover {
  transform: translateY(-8px) rotateX(2deg);
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(0, 122, 255, 0.1);
}

/* Hover Effects */
.hover-lift {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 
    0 15px 35px rgba(0, 0, 0, 0.15),
    0 5px 15px rgba(0, 0, 0, 0.08);
}

.hover-glow {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-glow:hover {
  box-shadow: 
    0 0 40px rgba(0, 122, 255, 0.4),
    0 8px 25px rgba(0, 122, 255, 0.2);
  transform: translateY(-2px);
}

.hover-rotate {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-rotate:hover {
  transform: rotate(3deg) scale(1.02);
}

/* Breathing Animation for Featured Elements */
.breathe {
  animation: breathe 4s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { 
    transform: scale(1);
    box-shadow: 0 4px 20px rgba(0, 122, 255, 0.1);
  }
  50% { 
    transform: scale(1.02);
    box-shadow: 0 8px 30px rgba(0, 122, 255, 0.2);
  }
}

/* Floating Animation */
.float-animation {
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

/* Gradient Shift Animation */
.gradient-shift {
  background: linear-gradient(
    45deg,
    var(--color-accent-blue),
    #00d4ff,
    var(--color-accent-blue)
  );
  background-size: 200% 200%;
  animation: gradientShift 3s ease infinite;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Morphing Effects */
/* Removed duplicate morph-circle class - keeping consistent rounded corners */

.morph-square {
  border-radius: var(--radius-sm);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.morph-square:hover {
  border-radius: 50%;
  transform: scale(1.05);
}

/* Enhanced Loading States */
.loading-shimmer {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e0e0e0 50%,
    #f0f0f0 75%
  );
  background-size: 200% 100%;
  animation: shimmerMove 1.5s infinite;
}

@keyframes shimmerMove {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.stagger-fade-in {
  opacity: 0;
  transform: translateY(30px);
  animation: staggerFadeIn 0.8s ease-out forwards;
}

@keyframes staggerFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Premium Focus States */
.focus-premium:focus {
  outline: none;
  box-shadow: 
    0 0 0 3px rgba(0, 122, 255, 0.3),
    0 0 20px rgba(0, 122, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  border-color: var(--color-accent-blue);
}

/* Ripple Effect */
.ripple {
  position: relative;
  overflow: hidden;
}

.ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  transform: scale(0);
  animation: rippleAnimation 0.6s linear;
  pointer-events: none;
}

@keyframes rippleAnimation {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* Performance-aware animations */
@media (prefers-reduced-motion: reduce) {
  .glass-premium,
  .glass-ultra,
  .micro-bounce,
  .micro-scale,
  .micro-glow,
  .card-premium,
  .hover-lift,
  .hover-glow,
  .hover-rotate,
  .breathe,
  .float-animation,
  .gradient-shift,
  .morph-circle,
  .morph-square {
    animation: none !important;
    transition: none !important;
  }
  
  .glass-premium:hover,
  .glass-ultra:hover,
  .micro-bounce:hover,
  .micro-scale:hover,
  .micro-glow:hover,
  .card-premium:hover,
  .hover-lift:hover,
  .hover-glow:hover,
  .hover-rotate:hover,
  .morph-circle:hover,
  .morph-square:hover {
    transform: none !important;
  }
}

/* Enhanced Bio Photo Styling - Consistent Rectangular Design */
.bio-photo-container {
  border-radius: var(--radius-xl) !important;
  overflow: hidden;
  transition: all var(--transition-normal);
  box-shadow: var(--shadow-lg);
}

.bio-photo-container:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
  border-radius: var(--radius-xl) !important; /* Maintain consistent corners */
}

.bio-photo {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-xl) !important;
  transition: transform var(--transition-normal);
}

.bio-photo:hover {
  transform: scale(1.02);
}

/* Override any circular morphing effects for bio photo */
.bio-photo-container.morph-circle,
.bio-photo-container.morph-circle:hover {
  border-radius: var(--radius-xl) !important;
}

/* Ensure no circular styling is applied */
.bio-photo-container * {
  border-radius: var(--radius-xl) !important;
}

/* Enhanced lighter theme adjustments */
.hero-section {
  background: linear-gradient(135deg, var(--color-background-light) 0%, #f8f9fa 100%);
}

.bio-hero-section {
  background: linear-gradient(135deg, var(--color-background-light) 0%, #f8f9fa 100%);
}

.final-project-hero {
  background: linear-gradient(135deg, var(--color-background-light) 0%, #f8f9fa 100%);
}

/* Improved contrast for better readability */
.navbar {
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid var(--color-border-light);
}

.navbar.scrolled {
  background: rgba(255, 255, 255, 0.98);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

/* Enhanced card styling for lighter theme */
.project-card {
  background: var(--color-primary-light);
  border: 1px solid var(--color-border-light);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.project-card:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
  border-color: var(--color-accent-blue);
}

/* Better button styling for lighter theme */
.btn-primary {
  background: var(--color-accent-blue);
  box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);
}

.btn-primary:hover {
  background: #2980b9;
  box-shadow: 0 4px 15px rgba(52, 152, 219, 0.4);
}

.btn-secondary {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  border: 2px solid var(--color-border-light);
}

.btn-secondary:hover {
  background: var(--color-primary-dark);
  color: var(--color-primary-light);
  border-color: var(--color-primary-dark);
}
/* Force rectangular bio photo - override any circular styling */
.bio-photo-container,
.bio-photo-container *,
.bio-photo,
.bio-photo-container img {
  border-radius: var(--radius-xl) !important;
}

/* Remove any circular classes that might be applied dynamically */
.bio-photo-container.morph-circle,
.bio-photo-container.morph-circle *,
.bio-photo-container.morph-circle img {
  border-radius: var(--radius-xl) !important;
}

/* Ensure no 50% border radius is applied anywhere */
.bio-photo-container[style*="border-radius: 50%"],
.bio-photo[style*="border-radius: 50%"] {
  border-radius: var(--radius-xl) !important;
}
/* ULTIMATE FIX: Force rectangular bio photo - override ALL circular styling */
.bio-photo-container,
.bio-photo-container *,
.bio-photo,
.bio-photo-container img,
.bio-photo-container .bio-photo,
.bio-photo-section .bio-photo-container,
.bio-photo-section .bio-photo-container *,
.bio-photo-section .bio-photo,
.bio-photo-section img {
  border-radius: var(--radius-xl) !important;
  clip-path: none !important;
}

/* Override any JavaScript-applied circular styles */
.bio-photo-container[style*="border-radius"],
.bio-photo[style*="border-radius"],
.bio-photo-container img[style*="border-radius"] {
  border-radius: var(--radius-xl) !important;
}

/* Remove any transform that might make it appear circular */
.bio-photo-container.morph-circle,
.bio-photo-container.morph-circle:hover,
.bio-photo-container.morph-circle *,
.bio-photo-container.morph-circle img {
  border-radius: var(--radius-xl) !important;
  transform: none !important;
}

/* Hide timeline styling completely */
.education-timeline,
.timeline-item,
.timeline-marker,
.timeline-content {
  display: none !important;
}
/* Clean education list styling */
.education-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}

.education-item {
  padding: var(--space-md);
  background: var(--color-primary-light);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
}

.education-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-accent-blue);
}

.education-item h4 {
  color: var(--color-primary-dark);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--space-xs) 0;
}

.education-date {
  display: inline-block;
  background: var(--color-accent-blue);
  color: var(--color-primary-light);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-sm);
}

.education-item p {
  color: var(--color-secondary-gray);
  font-size: var(--font-size-body);
  line-height: var(--line-height-relaxed);
  margin: var(--space-sm) 0 0 0;
}
/* Enhanced scroll indicator styling - override existing */
.hero-scroll-indicator {
  position: absolute !important;
  bottom: var(--space-xl) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 2 !important;
  animation: bounce 2s infinite !important;
  cursor: pointer !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: var(--space-xs) !important;
  padding: var(--space-sm) !important;
  border-radius: var(--radius-lg) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid var(--color-border-light) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all var(--transition-normal) !important;
}

.hero-scroll-indicator:hover {
  background: rgba(255, 255, 255, 1) !important;
  box-shadow: var(--shadow-md) !important;
  transform: translateX(-50%) translateY(-2px) !important;
}

.scroll-arrow {
  width: 24px !important;
  height: 24px !important;
  border: 2px solid var(--color-accent-blue) !important;
  border-top: none !important;
  border-right: none !important;
  transform: rotate(-45deg) !important;
  transition: all var(--transition-normal) !important;
}

.hero-scroll-indicator:hover .scroll-arrow {
  border-color: var(--color-primary-dark) !important;
}

.scroll-text {
  font-size: var(--font-size-small) !important;
  color: var(--color-secondary-gray) !important;
  font-weight: var(--font-weight-medium) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  transition: color var(--transition-normal) !important;
}

.hero-scroll-indicator:hover .scroll-text {
  color: var(--color-primary-dark) !important;
}
/* Fix Project Overview text alignment */
.section-header {
  text-align: center !important;
  margin-bottom: var(--space-3xl) !important;
  max-width: 800px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.section-title {
  font-size: var(--font-size-h1) !important;
  font-weight: var(--font-weight-semibold) !important;
  color: var(--color-primary-dark) !important;
  margin-bottom: var(--space-sm) !important;
  text-align: center !important;
  line-height: var(--line-height-tight) !important;
}

.section-subtitle {
  font-size: var(--font-size-body) !important;
  color: var(--color-secondary-gray) !important;
  line-height: var(--line-height-relaxed) !important;
  text-align: center !important;
  max-width: 600px !important;
  margin: 0 auto !important;
}

/* Ensure all documentation sections have proper alignment */
.documentation-section .section-header,
.overview-section .section-header {
  text-align: center !important;
  width: 100% !important;
}

.documentation-section .section-title,
.overview-section .section-title {
  text-align: center !important;
  width: 100% !important;
  display: block !important;
}
/* JavaScript override prevention for bio photo */
.bio-photo-container {
  border-radius: var(--radius-xl) !important;
  overflow: hidden !important;
}

.bio-photo-container img,
.bio-photo-container .bio-photo {
  border-radius: var(--radius-xl) !important;
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* Prevent any circular transforms */
.bio-photo-container,
.bio-photo-container *,
.bio-photo-container img {
  clip-path: none !important;
  mask: none !important;
  -webkit-mask: none !important;
}

/* Force rectangular shape with JavaScript override */
.bio-photo-container[class*="morph"],
.bio-photo-container[class*="circle"],
.bio-photo-container[style*="border-radius: 50%"],
.bio-photo-container img[style*="border-radius: 50%"] {
  border-radius: var(--radius-xl) !important;
}
/* Fix duplicate scroll indicators */
.hero-scroll-indicator .scroll-progress-circle .scroll-arrow {
  display: none !important;
}

/* Ensure only one scroll arrow per indicator */
.hero-scroll-indicator > .scroll-arrow {
  display: block !important;
}

/* Hide any extra scroll arrows that might be created */
.hero-scroll-indicator .scroll-arrow + .scroll-arrow {
  display: none !important;
}

/* Clean final project hero background */
.final-project-hero .hero-image {
  display: none !important;
}

.final-project-hero .hero-parallax-layer {
  background: none !important;
}

.final-project-hero {
  background: linear-gradient(135deg, var(--color-background-light) 0%, #f8f9fa 100%) !important;
}
/* COMPLETE FIX: Hide all scroll indicators and text */
.hero-scroll-indicator {
  display: none !important;
}

.scroll-text {
  display: none !important;
}

.scroll-arrow {
  display: none !important;
}

.scroll-progress-circle {
  display: none !important;
}

/* Progressive Disclosure System Styles */
.progressive-disclosure {
  margin-bottom: var(--space-xl);
}

.disclosure-level {
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.disclosure-level:not(.active) {
  display: none;
}

.disclosure-toggle {
  background: linear-gradient(135deg, var(--color-accent-blue), #2980b9);
  color: var(--color-primary-light);
  border: none;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-body);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-lg);
  transition: all var(--transition-normal);
  box-shadow: var(--shadow-md);
}

.disclosure-toggle:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  background: linear-gradient(135deg, #2980b9, var(--color-accent-blue));
}

.disclosure-toggle:focus {
  outline: 2px solid var(--color-accent-blue);
  outline-offset: 2px;
}

.toggle-icon {
  font-size: 1.2em;
  transition: transform var(--transition-normal);
}

/* Project Gallery Styles */
.project-gallery-section {
  background: linear-gradient(135deg, var(--color-background-light) 0%, #f8f9fa 100%);
  padding: var(--space-xl) 0;
}

.main-showcase {
  margin-bottom: var(--space-xl);
}

.showcase-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

@media (min-width: 768px) {
  .showcase-grid {
    grid-template-columns: 2fr 1fr 1fr;
  }
}

.showcase-item {
  background: var(--color-primary-light);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: all var(--transition-normal);
}

.showcase-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

.showcase-item.featured {
  grid-row: span 2;
}

.showcase-media {
  position: relative;
  overflow: hidden;
}

.showcase-media img,
.model-viewer-container,
.video-container {
  width: 100%;
  height: auto;
  display: block;
}

.showcase-info {
  padding: var(--space-lg);
}

.showcase-info h3 {
  margin: 0 0 var(--space-sm) 0;
  color: var(--color-primary-dark);
  font-size: 1.25rem;
  font-weight: 600;
}

.showcase-specs {
  display: flex;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
  flex-wrap: wrap;
}

.spec-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.spec-label {
  font-size: 0.875rem;
  color: var(--color-secondary-gray);
  margin-bottom: var(--space-xs);
}

.spec-value {
  font-weight: 600;
  color: var(--color-primary-dark);
  font-size: 1rem;
}

/* Component Breakdown */
.component-breakdown {
  margin-bottom: var(--space-xl);
}

.component-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}

.component-card {
  background: var(--color-primary-light);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: all var(--transition-normal);
}

.component-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.component-visual {
  height: 200px;
  overflow: hidden;
  background: #f8f9fa;
}

.component-visual img,
.component-visual .model-viewer-container {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.component-details {
  padding: var(--space-lg);
}

.component-details h4 {
  margin: 0 0 var(--space-sm) 0;
  color: var(--color-primary-dark);
  font-size: 1.125rem;
  font-weight: 600;
}

.component-features {
  list-style: none;
  padding: 0;
  margin: var(--space-sm) 0 0 0;
}

.component-features li {
  padding: var(--space-xs) 0;
  color: var(--color-secondary-gray);
  font-size: 0.9rem;
  position: relative;
  padding-left: var(--space-lg);
}

.component-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-accent-blue);
  font-weight: bold;
}

/* Development Progress */
.development-progress {
  margin-top: var(--space-xl);
}

.progress-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}

.progress-item {
  display: flex;
  gap: var(--space-lg);
  align-items: flex-start;
  padding: var(--space-lg);
  background: var(--color-primary-light);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
}

.progress-item:hover {
  box-shadow: var(--shadow-md);
  transform: translateX(4px);
}

.progress-item.completed {
  border-left: 4px solid #27ae60;
}

.progress-item.in-progress {
  border-left: 4px solid var(--color-accent-blue);
}

.progress-item.planned {
  border-left: 4px solid var(--color-secondary-gray);
}

.progress-marker {
  font-size: 1.5rem;
  min-width: 40px;
  text-align: center;
}

.progress-content {
  flex: 1;
}

.progress-content h4 {
  margin: 0 0 var(--space-sm) 0;
  color: var(--color-primary-dark);
  font-size: 1.125rem;
  font-weight: 600;
}

.progress-media {
  margin-top: var(--space-lg);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.progress-media img,
.progress-media .model-viewer-container {
  width: 100%;
  height: auto;
  display: block;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .showcase-grid {
    grid-template-columns: 1fr;
  }
  
  .showcase-item.featured {
    grid-row: span 1;
  }
  
  .component-grid {
    grid-template-columns: 1fr;
  }
  
  .progress-item {
    flex-direction: column;
    text-align: center;
  }
  
  .progress-marker {
    align-self: center;
  }
  
  .showcase-specs {
    justify-content: center;
  }
}

/* Tech Grid Styling for Week 1 Assignment */
.tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-lg);
  margin: var(--space-xl) 0;
}

.tech-item {
  background: var(--color-primary-light);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
}

.tech-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(0, 122, 255, 0.2);
}

.tech-item h4 {
  color: var(--color-accent-blue);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--space-sm) 0;
}

.tech-item p {
  color: var(--color-secondary-gray);
  font-size: var(--font-size-body);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

@media (max-width: 768px) {
  .tech-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
}
/* Assignment page title spacing adjustment */
.content h1 {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
}

/* Make project cards clickable while keeping toggle functionality */
.project-card {
  position: relative;
}

.project-card-link {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  text-decoration: none;
  color: inherit;
}

.project-toggle {
  z-index: 10;
  position: relative;
}

.project-content {
  position: relative;
  z-index: 1;
  pointer-events: none;
}

.project-content * {
  pointer-events: auto;
}

/* Fix text overflow in tech grid */
.tech-item h4 {
  font-size: var(--font-size-small);
  line-height: var(--line-height-tight);
  word-wrap: break-word;
  hyphens: auto;
}

.tech-item p {
  font-size: var(--font-size-small);
  line-height: var(--line-height-normal);
}

@media (max-width: 768px) {
  .tech-item h4 {
    font-size: var(--font-size-caption);
  }
  
  .tech-item p {
    font-size: var(--font-size-caption);
  }
}
/* Enhanced project card clickability */
.project-card {
  cursor: pointer;
}

.project-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
  border-color: rgba(0,122,255,0.2);
}

.project-toggle {
  cursor: pointer;
}

.project-toggle:hover {
  background: var(--color-accent-blue);
  color: var(--color-primary-light);
  transform: scale(1.1);
  box-shadow: var(--shadow-md);
}
/* Enhanced Footer Styling - Override existing styles */
footer {
  font-size: var(--font-size-caption) !important;
  color: var(--color-secondary-gray) !important;
  text-align: center !important;
  padding: var(--space-lg) var(--space-md) !important;
  border-top: 1px solid var(--color-border-light) !important;
  margin-top: var(--space-2xl) !important;
  max-width: 600px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

footer p {
  font-size: var(--font-size-caption) !important;
  color: var(--color-secondary-gray) !important;
  transition: color var(--transition-fast) !important;
  margin: var(--space-xs) 0 !important;
  line-height: var(--line-height-normal) !important;
}

footer a {
  font-size: var(--font-size-caption) !important;
  color: var(--color-secondary-gray) !important;
  transition: color var(--transition-fast) !important;
  text-decoration: none !important;
}

footer a:hover {
  color: var(--color-accent-blue) !important;
  text-decoration: underline !important;
}

@media (max-width: 768px) {
  footer {
    padding: var(--space-md) var(--space-sm) !important;
    max-width: 100% !important;
  }
  
  footer p {
    font-size: var(--font-size-caption) !important;
  }
}
/* Final Project Page Spacing */
.final-project-hero + .project-documentation .section-header {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
}

/* Fix component card title overflow */
.component-card h4,
.architecture-diagram .component-card h4 {
  font-size: var(--font-size-small) !important;
  line-height: var(--line-height-tight) !important;
  word-wrap: break-word !important;
  hyphens: auto !important;
  margin-bottom: var(--space-xs) !important;
}

@media (max-width: 768px) {
  .component-card h4,
  .architecture-diagram .component-card h4 {
    font-size: var(--font-size-caption) !important;
  }
}
/* Documentation Tabs Styling */
.documentation-tabs-section {
  padding: var(--space-2xl) 0;
  background: var(--color-background-light);
}

.documentation-tabs {
  max-width: 1200px;
  margin: 0 auto;
}

.tab-navigation {
  display: flex;
  gap: var(--space-xs);
  margin-bottom: var(--space-xl);
  border-bottom: 2px solid var(--color-border-light);
  overflow-x: auto;
  padding-bottom: var(--space-sm);
}

.tab-btn {
  padding: var(--space-sm) var(--space-lg);
  border: none;
  background: transparent;
  color: var(--color-secondary-gray);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family-primary);
  cursor: pointer;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  transition: all var(--transition-normal);
  white-space: nowrap;
  position: relative;
}

.tab-btn:hover {
  color: var(--color-primary-dark);
  background: rgba(0, 122, 255, 0.05);
}

.tab-btn.active {
  color: var(--color-accent-blue);
  background: var(--color-primary-light);
  border-bottom: 3px solid var(--color-accent-blue);
  font-weight: var(--font-weight-semibold);
}

.tab-content-container {
  position: relative;
}

.tab-content {
  display: none;
  animation: fadeIn 0.3s ease-in-out;
}

.tab-content.active {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .tab-navigation {
    gap: var(--space-xs);
  }
  
  .tab-btn {
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-size-small);
  }
}

/* Documentation Tabs Section */
.documentation-tabs-section {
  padding: var(--space-lg) 0;
  background: var(--color-background-light);
}

.documentation-tabs {
  max-width: var(--max-width-content);
  margin: 0 auto;
}

.tab-navigation {
  display: flex;
  gap: 2px;
  margin-bottom: var(--space-md);
  border-bottom: 2px solid var(--color-border-light);
  overflow-x: auto;
  padding-bottom: var(--space-xs);
  justify-content: center;
  flex-wrap: wrap;
}

.tab-btn {
  padding: var(--space-xs) var(--space-sm);
  border: none;
  background: transparent;
  color: var(--color-secondary-gray);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family-primary);
  cursor: pointer;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  transition: all var(--transition-normal);
  white-space: nowrap;
  position: relative;
  min-width: auto;
}

.tab-btn:hover {
  color: var(--color-primary-dark);
  background: rgba(0, 122, 255, 0.05);
}

.tab-btn.active {
  color: var(--color-accent-blue);
  background: var(--color-primary-light);
  border-bottom: 2px solid var(--color-accent-blue);
  margin-bottom: -2px;
}

.tab-content-container {
  position: relative;
  min-height: 300px;
}

.tab-content {
  display: none;
  padding: var(--space-lg);
  background: var(--color-primary-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  animation: fadeIn 0.3s ease-in-out;
}

.tab-content.active {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .tab-navigation {
    gap: 1px;
    padding-bottom: var(--space-xs);
    justify-content: center;
  }
  
  .tab-btn {
    padding: var(--space-xs) var(--space-xs);
    font-size: var(--font-size-caption);
    min-width: auto;
    flex: 1;
    text-align: center;
  }
  
  .tab-content {
    padding: var(--space-md);
  }
}

/* Project Gallery Section */
.project-gallery-section {
  padding: var(--space-xl) 0 var(--space-lg) 0;
  background: var(--color-background-light);
}

.project-gallery-section .section-header {
  margin-bottom: var(--space-lg);
}

.project-gallery-section .section-title {
  margin-top: var(--space-sm);
}

.main-showcase {
  margin-top: var(--space-md);
}

.showcase-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 768px) {
  .showcase-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}

.showcase-item {
  background: var(--color-primary-light);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: all var(--transition-normal);
  border: 1px solid var(--color-border-light);
}

.showcase-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.showcase-item.featured {
  grid-column: 1 / -1;
  border: 2px solid var(--color-accent-blue);
}

@media (min-width: 768px) {
  .showcase-item.featured {
    grid-column: span 2;
  }
}

.showcase-media {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.showcase-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.showcase-item:hover .showcase-media img {
  transform: scale(1.05);
}

.showcase-info {
  padding: var(--space-md);
}

.showcase-info h3 {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-dark);
  margin: 0 0 var(--space-sm) 0;
}

.showcase-info p {
  font-size: var(--font-size-body);
  color: var(--color-secondary-gray);
  line-height: var(--line-height-relaxed);
  margin: 0 0 var(--space-md) 0;
}

.showcase-specs {
  display: flex;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.spec-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.spec-label {
  font-size: var(--font-size-small);
  color: var(--color-secondary-gray);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.spec-value {
  font-size: var(--font-size-h4);
  color: var(--color-primary-dark);
  font-weight: var(--font-weight-semibold);
  margin-top: var(--space-xs);
}

/* Component Grid for Tab Content */
.component-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-xl);
  margin-top: var(--space-xl);
}

.component-visual {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-background-light);
}

.component-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.component-details {
  padding: var(--space-lg) 0 0 0;
}

.component-details h4 {
  font-size: var(--font-size-h4) !important;
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-dark);
  margin: 0 0 var(--space-sm) 0;
  line-height: var(--line-height-tight) !important;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.component-details p {
  font-size: var(--font-size-body);
  color: var(--color-secondary-gray);
  line-height: var(--line-height-relaxed);
  margin: 0 0 var(--space-md) 0;
}

.component-features {
  list-style: none;
  padding: 0;
  margin: 0;
}

.component-features li {
  font-size: var(--font-size-small);
  color: var(--color-secondary-gray);
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--color-border-light);
  position: relative;
  padding-left: var(--space-md);
}

.component-features li:before {
  content: '•';
  color: var(--color-accent-blue);
  position: absolute;
  left: 0;
  font-weight: bold;
}

.component-features li:last-child {
  border-bottom: none;
}

/* Design Highlights */
.design-highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

.highlight-item {
  padding: var(--space-lg);
  background: var(--color-background-light);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-light);
  transition: all var(--transition-normal);
}

.highlight-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.highlight-item h4 {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-dark);
  margin: 0 0 var(--space-sm) 0;
}

.highlight-item p {
  font-size: var(--font-size-body);
  color: var(--color-secondary-gray);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

/* Key Features */
.key-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-lg);
  background: var(--color-background-light);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-light);
  transition: all var(--transition-normal);
}

.feature-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.feature-icon {
  font-size: 2rem;
  margin-bottom: var(--space-sm);
}

.feature-item h4 {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-dark);
  margin: 0 0 var(--space-sm) 0;
}

.feature-item p {
  font-size: var(--font-size-body);
  color: var(--color-secondary-gray);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

/* Tech Stack */
.tech-stack {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

.tech-category {
  padding: var(--space-lg);
  background: var(--color-background-light);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-light);
}

.tech-category h4 {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-dark);
  margin: 0 0 var(--space-md) 0;
}

.tech-category ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tech-category li {
  font-size: var(--font-size-body);
  color: var(--color-secondary-gray);
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--color-border-light);
  position: relative;
  padding-left: var(--space-md);
}

.tech-category li:before {
  content: '✓';
  color: var(--color-accent-blue);
  position: absolute;
  left: 0;
  font-weight: bold;
}

.tech-category li:last-child {
  border-bottom: none;
}

/* Test Results Grid */
.test-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

.test-category {
  padding: var(--space-lg);
  background: var(--color-background-light);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-light);
}

.test-category h4 {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-dark);
  margin: 0 0 var(--space-md) 0;
}

.test-category ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.test-category li {
  font-size: var(--font-size-body);
  color: var(--color-secondary-gray);
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--color-border-light);
  position: relative;
  padding-left: var(--space-md);
}

.test-category li:before {
  content: '→';
  color: var(--color-accent-blue);
  position: absolute;
  left: 0;
  font-weight: bold;
}

.test-category li:last-child {
  border-bottom: none;
}

@media (max-width: 768px) {
  .component-grid,
  .design-highlights,
  .key-features,
  .tech-stack,
  .test-results-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  
  .component-details h4 {
    font-size: var(--font-size-body) !important;
  }
  
  .showcase-specs {
    gap: var(--space-md);
  }
  
  .spec-item {
    flex: 1;
    min-width: 80px;
  }
}
/* Fix Component Details alignment issues */
.component-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-xl);
  margin-top: var(--space-xl);
  align-items: start;
}

.component-card {
  background: var(--color-primary-light);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: all var(--transition-normal);
  border: 1px solid var(--color-border-light);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.component-visual {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--color-background-light);
  flex-shrink: 0;
}

.component-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.component-details {
  padding: var(--space-lg);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.component-details h4 {
  font-size: var(--font-size-h4) !important;
  font-weight: var(--font-weight-semibold) !important;
  color: var(--color-primary-dark) !important;
  margin: 0 0 var(--space-sm) 0 !important;
  line-height: var(--line-height-tight) !important;
  text-align: left !important;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.component-details p {
  font-size: var(--font-size-body) !important;
  color: var(--color-secondary-gray) !important;
  line-height: var(--line-height-relaxed) !important;
  margin: 0 0 var(--space-md) 0 !important;
  text-align: left !important;
  flex-grow: 1;
}

.component-features {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.component-features li {
  font-size: var(--font-size-small) !important;
  color: var(--color-secondary-gray) !important;
  padding: var(--space-xs) 0 !important;
  border-bottom: 1px solid var(--color-border-light) !important;
  position: relative !important;
  padding-left: var(--space-md) !important;
  text-align: left !important;
  line-height: var(--line-height-normal) !important;
}

.component-features li:before {
  content: '•' !important;
  color: var(--color-accent-blue) !important;
  position: absolute !important;
  left: 0 !important;
  font-weight: bold !important;
}

.component-features li:last-child {
  border-bottom: none !important;
}

@media (max-width: 768px) {
  .component-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  
  .component-details h4 {
    font-size: var(--font-size-body) !important;
  }
  
  .component-details p {
    font-size: var(--font-size-small) !important;
  }
}
/* Expandable Sections for Week 2 */
.software-testing-sections {
  margin-top: var(--space-xl);
}

.expandable-section {
  margin-bottom: var(--space-lg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-primary-light);
}

.section-toggle {
  width: 100%;
  padding: var(--space-lg);
  background: var(--color-background-light);
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-family-primary);
  transition: all var(--transition-normal);
}

.section-toggle:hover {
  background: rgba(0, 122, 255, 0.05);
}

.section-toggle h3 {
  margin: 0;
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-dark);
  text-align: left;
}

.toggle-indicator {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-blue);
  transition: transform var(--transition-normal);
}

.section-toggle[aria-expanded="true"] .toggle-indicator {
  transform: rotate(45deg);
}

.section-content {
  padding: 0 var(--space-lg) var(--space-lg) var(--space-lg);
  display: none;
}

.section-content.active {
  display: block;
  animation: fadeIn 0.3s ease-in-out;
}

.design-process,
.blender-process,
.sculptgl-results,
.meshy-tests,
.sketchup-result {
  margin-top: var(--space-lg);
}

.process-step,
.test-result,
.result-image {
  margin-bottom: var(--space-xl);
  padding: var(--space-lg);
  background: var(--color-background-light);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-light);
}

.process-step img,
.test-result img,
.result-image img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  margin: var(--space-sm) 0;
  box-shadow: var(--shadow-sm);
}

.process-step p,
.test-result p,
.result-image p {
  margin: var(--space-sm) 0;
  color: var(--color-secondary-gray);
  line-height: var(--line-height-relaxed);
}

.test-result h5 {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-dark);
  margin: 0 0 var(--space-sm) 0;
}

@media (max-width: 768px) {
  .section-toggle {
    padding: var(--space-md);
  }
  
  .section-toggle h3 {
    font-size: var(--font-size-h4);
  }
  
  .section-content {
    padding: 0 var(--space-md) var(--space-md) var(--space-md);
  }
  
  .process-step,
  .test-result,
  .result-image {
    padding: var(--space-md);
  }
}