/* css/style.css - Clean Rebuild */

/* ===== Global Styles & Variables ===== */
:root {
    --primary-color: #9333ea; /* Vibrant Purple */
    --secondary-color: #00d1ff; /* Nebula Cyan - Accent */
    --accent-color: #facc15; /* Star Yellow - Accent */
    --background-dark: #0f0518; /* Deep Space Background */
    --background-medium: #1a0f2a; /* Darker Panel */
    --background-light: #2a1a40; /* Lighter Panel / Card */
    --text-primary: #ffffff; /* Pure White */
    --text-primary-hover: #f0f0f0; /* Slightly off-white */
    --text-secondary: #a0a0c0; /* Asteroid Grey */
    --text-darker: #707090; /* Shadow Grey */
    --border-color: rgba(147, 51, 234, 0.25); /* Faint Purple Border */
    --border-hover: rgba(0, 209, 255, 0.7); /* Brighter Cyan Border */
    --font-primary: 'Outfit', sans-serif;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --border-radius: 8px;
    --transition-speed: 0.3s;
    --gradient-primary: linear-gradient(135deg, var(--primary-color), #581c87);
    --gradient-secondary: linear-gradient(135deg, var(--secondary-color), #0e7490);
    --box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    --box-shadow-hover: 0 8px 25px rgba(147, 51, 234, 0.35);
    --text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    --underline-width-anim: 60px; /* For potential JS animation */
}

/* --- Base & Reset --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
    font-family: var(--font-primary); background-color: var(--background-dark);
    color: var(--text-primary); line-height: 1.7; font-weight: var(--font-weight-normal);
    overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
body::-webkit-scrollbar { display: none; }
body { -ms-overflow-style: none; scrollbar-width: none; }
::selection { background-color: var(--secondary-color); color: var(--background-dark); }

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 { font-weight: var(--font-weight-bold); line-height: 1.3; margin-bottom: 1rem; color: var(--text-primary); }
h2.section-title { text-shadow: 0 2px 4px rgba(0,0,0,0.3); }
h1 { font-size: clamp(2.5rem, 6vw, 4rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); margin-bottom: 2rem; }
h3 { font-size: clamp(1.2rem, 3vw, 1.5rem); margin-bottom: 0.8rem; }
p { margin-bottom: 1.5rem; color: var(--text-secondary); font-weight: var(--font-weight-light); }
a { color: var(--secondary-color); text-decoration: none; transition: color var(--transition-speed) ease; }
a:hover, a:focus { color: var(--text-primary-hover); text-decoration: none; }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
button { cursor: pointer; background: none; border: none; font-family: inherit; }

/* --- Layout & Container --- */
.container { width: 90%; max-width: 1200px; margin: 0 auto; padding: 0 15px; }
.content-section { padding: clamp(4rem, 10vw, 6rem) 0; overflow: hidden; }

/* --- Buttons --- */
.btn { display: inline-block; padding: 0.8rem 1.8rem; border-radius: var(--border-radius); font-weight: var(--font-weight-semibold); text-align: center; transition: all var(--transition-speed) ease; cursor: pointer; border: 2px solid transparent; font-size: 0.95rem; line-height: 1.5; text-transform: uppercase; letter-spacing: 0.5px; }
.btn i { margin-left: 0.5rem; }
.btn-primary { background: var(--gradient-primary); color: var(--text-primary); border-color: var(--primary-color); box-shadow: 0 4px 10px rgba(147, 51, 234, 0.2); }
.btn-primary:hover { background: var(--gradient-secondary); color: var(--background-dark); border-color: var(--secondary-color); transform: translateY(-3px); box-shadow: 0 6px 15px rgba(0, 209, 255, 0.3); }
.btn-secondary { background-color: transparent; color: var(--secondary-color); border-color: var(--secondary-color); }
.btn-secondary:hover { background-color: var(--secondary-color); color: var(--background-dark); transform: translateY(-3px); box-shadow: 0 6px 15px rgba(0, 209, 255, 0.2); }
.btn-small { padding: 0.5rem 1rem; font-size: 0.8rem; }

/* --- Preloader --- */
#preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--background-dark); display: flex; justify-content: center; align-items: center; z-index: 9999; opacity: 1; visibility: visible; transition: opacity 0.5s ease-out, visibility 0s linear 0.5s; }
#preloader.hidden { opacity: 0; visibility: hidden; }
.loader { width: 50px; height: 50px; border: 5px solid var(--border-color); border-top-color: var(--secondary-color); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* ===== Header / Navigation ===== */
.header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; padding: 1rem 0; background-color: rgba(15, 5, 24, 0.85); backdrop-filter: blur(10px); transition: background-color var(--transition-speed) ease, padding var(--transition-speed) ease, border-color var(--transition-speed) ease; border-bottom: 1px solid transparent; }
.header.scrolled { background-color: rgba(15, 5, 24, 0.98); padding: 0.8rem 0; border-bottom: 1px solid var(--border-color); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); }
.header-container { display: flex; justify-content: space-between; align-items: center; }
.logo-link { text-decoration: none; }
.logo-text { font-size: 1.5rem; font-weight: var(--font-weight-bold); color: var(--text-primary); letter-spacing: 1px; transition: color var(--transition-speed) ease; }
.logo-text:hover { color: var(--secondary-color); }
.main-nav { display: flex; align-items: center; }
.nav-list { display: flex; align-items: center; gap: 1.5rem; }
.nav-link { color: var(--text-secondary); font-weight: var(--font-weight-semibold); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; padding: 0.5rem 0; position: relative; transition: color var(--transition-speed) ease; }
.nav-link::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background-color: var(--secondary-color); transition: width var(--transition-speed) ease; }
.nav-link:hover, .nav-link.active { color: var(--text-primary); }
.nav-link:hover::after, .nav-link.active::after { width: 100%; }
.nav-link .mobile-only { display: none; }
.nav-link i { font-size: 1.1rem; vertical-align: middle; }
.nav-link.external-link i, .nav-link.resume-link i { margin-right: 0; }
.nav-toggle { display: none; flex-direction: column; justify-content: space-around; width: 30px; height: 25px; background: transparent; border: none; cursor: pointer; padding: 0; z-index: 1001; }
.nav-toggle span { display: block; width: 100%; height: 3px; background: var(--text-primary); border-radius: 3px; transition: all 0.3s ease-in-out; position: relative; }
.nav-toggle.open span:nth-child(1) { transform: translateY(11px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }

/* ===== Hero Section ===== */
.hero-section {
    min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; position: relative; padding: 6rem 0; color: var(--text-primary); overflow: hidden;
 }
/* Removed old particles style */
/* #particles-js { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; } */

/* Added styles for new canvas */
.hero-canvas-container {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0;
}
#hero-canvas {
    display: block; width: 100%; height: 100%;
}

.hero-content { position: relative; z-index: 1; } /* Keep content above canvas */
.hero-title { margin-bottom: 0.5rem; font-size: clamp(3rem, 8vw, 5.5rem); font-weight: var(--font-weight-bold); letter-spacing: -1px; color: var(--text-primary); text-shadow: 0 3px 10px rgba(0, 0, 0, 0.6); }
.hero-subtitle { font-size: clamp(1.2rem, 3vw, 1.8rem); font-weight: var(--font-weight-light); color: var(--text-secondary); margin-bottom: 1.5rem; text-shadow: var(--text-shadow); }
.hero-tagline { font-size: clamp(1rem, 2.5vw, 1.2rem); font-weight: var(--font-weight-normal); color: var(--text-secondary); max-width: 700px; margin: 0 auto 2.5rem auto; text-shadow: var(--text-shadow); }
.scroll-down-indicator { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 2; animation: bounce 2s infinite; }
.scroll-down-indicator a { color: var(--text-secondary); font-size: 1.5rem; }
.scroll-down-indicator a:hover { color: var(--text-primary); }
@keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translate(-50%, 0); } 40% { transform: translate(-50%, -10px); } 60% { transform: translate(-50%, -5px); } }

/* ===== Section Title Styling ===== */
.section-title { text-align: center; margin-bottom: 4rem; position: relative; color: var(--text-primary); font-weight: var(--font-weight-semibold); letter-spacing: 1px; padding-bottom: 1rem; --underline-width-anim: 60px; }
.section-title::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: var(--underline-width-anim); height: 3px; background: var(--gradient-secondary); border-radius: 2px; transition: width 0.7s ease-out 0.3s; }

/* --- About Section --- */
.about-section { background-color: var(--background-medium); }
.about-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 3rem; align-items: flex-start; }
.about-text p { color: var(--text-secondary); }
.about-text p:last-of-type { margin-bottom: 2rem; }
.about-links { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; }
.about-links .btn-secondary { color: var(--secondary-color); border-color: var(--secondary-color); }
.about-links .btn-secondary:hover { background-color: var(--secondary-color); color: var(--background-dark); }
.skills-title { color: var(--secondary-color); margin-bottom: 1.5rem; font-size: 1.3rem; }
.skills-list { padding-left: 0; columns: 2; column-gap: 2rem; }
.skills-list li { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1rem; font-size: 0.95rem; color: var(--text-secondary); font-weight: var(--font-weight-light); }
.skills-list i { color: var(--secondary-color); width: 20px; text-align: center; font-size: 1.1rem; }

/* --- Works Section --- */
.project-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2.5rem; }
.project-card { background-color: var(--background-light); border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--box-shadow); display: flex; flex-direction: column; border: 1px solid var(--border-color); transform-style: preserve-3d; perspective: 1000px; transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow var(--transition-speed) ease, border-color var(--transition-speed) ease; }
.project-card:hover { border-color: var(--border-hover); box-shadow: 0 15px 35px rgba(0, 209, 255, 0.2), inset 0 0 20px rgba(0, 209, 255, 0.1); }
.project-image-container { position: relative; overflow: hidden; }
.project-image { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.project-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(15, 5, 24, 0.75); backdrop-filter: blur(4px); display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; transition: opacity var(--transition-speed) ease; gap: 1rem; padding: 1rem; }
.project-card:hover .project-overlay { opacity: 1; }
.btn-overlay { background: none; border: 2px solid var(--secondary-color); color: var(--secondary-color); padding: 0.6rem 1.2rem; font-size: 0.85rem; transform: translateY(10px); opacity: 0; transition: all 0.4s ease 0.1s; border-radius: var(--border-radius); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.5rem; }
.btn-overlay:last-child { margin-bottom: 0; }
.btn-overlay.secondary { border-color: var(--text-secondary); color: var(--text-secondary); transition-delay: 0.15s; }
.btn-overlay.tertiary { border-color: var(--text-darker); color: var(--text-darker); transition-delay: 0.2s; }
.project-card:hover .btn-overlay { transform: translateY(0); opacity: 1; }
.btn-overlay:hover { background-color: var(--secondary-color); color: var(--background-dark); border-color: var(--secondary-color); }
.btn-overlay.secondary:hover { background-color: var(--text-secondary); color: var(--background-dark); border-color: var(--text-secondary); }
.btn-overlay.tertiary:hover { background-color: var(--text-darker); color: var(--text-primary); border-color: var(--text-darker); }
.project-info { padding: 1.5rem; flex-grow: 1; display: flex; flex-direction: column; }
.project-title { margin-bottom: 0.5rem; font-size: 1.2rem; color: var(--text-primary); }
.project-description { font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 1rem; flex-grow: 1; }
.project-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: auto; }
.project-tags span { background-color: var(--background-medium); color: var(--text-darker); padding: 0.3rem 0.7rem; border-radius: 4px; font-size: 0.75rem; font-weight: var(--font-weight-semibold); border: 1px solid var(--border-color); }

/* --- Playground Section --- */
.playground-section { background-color: var(--background-dark); }
.section-subtitle { text-align: center; max-width: 600px; margin: -3rem auto 4rem auto; color: var(--text-secondary); font-size: 1.1rem; }
.hobby-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2.5rem; }
.hobby-card { background-color: var(--background-light); border-radius: var(--border-radius); padding: 1.5rem; text-align: center; box-shadow: var(--box-shadow); border: 1px solid var(--border-color); transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease, border-color var(--transition-speed) ease; }
.hobby-card:hover { border-color: var(--border-hover); transform: translateY(-5px); box-shadow: var(--box-shadow-hover); }
.hobby-image { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: calc(var(--border-radius) - 4px); margin-bottom: 1.5rem; }
.hobby-title { font-size: 1.2rem; color: var(--text-primary); margin-bottom: 0.8rem; }
.hobby-description { font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 1.5rem; }
.hobby-card .btn { margin: 0.3rem; }
.hobby-card .btn-secondary { color: var(--secondary-color); border-color: var(--secondary-color); }
.hobby-card .btn-secondary:hover { background-color: var(--secondary-color); color: var(--background-dark); }

/* --- Contact Section --- */
.contact-section { background: var(--background-medium); padding: clamp(5rem, 12vw, 7rem) 0; }
.contact-section .section-title { color: var(--text-primary); }
.contact-section .section-title::after { background: var(--gradient-secondary); }
.contact-content { max-width: 700px; margin: 0 auto; text-align: center; }
.contact-text { font-size: 1.1rem; color: var(--text-primary-hover); margin-bottom: 1.5rem; }
.contact-links { margin-top: 2.5rem; display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap; }
.contact-links .btn-primary { background: var(--gradient-secondary); color: var(--background-dark); border-color: var(--secondary-color); }
.contact-links .btn-primary:hover { background: var(--gradient-primary); color: var(--text-primary); border-color: var(--primary-color); box-shadow: 0 6px 15px rgba(147, 51, 234, 0.35); }
.contact-links .btn-secondary { color: var(--text-primary); border-color: var(--text-primary); }
.contact-links .btn-secondary:hover { background-color: var(--text-primary); color: var(--background-dark); }


/* --- Footer --- */
.footer { background-color: var(--background-medium); padding: 2rem 0; text-align: center; border-top: 1px solid var(--border-color); margin-top: auto; }
.footer p { font-size: 0.85rem; color: var(--text-darker); margin-bottom: 0.5rem; }
.footer-inspiration { font-style: italic; font-size: 0.75rem; opacity: 0.7; }
.footer-link { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 3px; }
.footer-link:hover { color: var(--text-primary-hover); }

/* --- Back to Top Button --- */
.back-to-top { position: fixed; bottom: 25px; right: 25px; width: 45px; height: 45px; background: var(--gradient-secondary); color: var(--background-dark); border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 1.2rem; box-shadow: 0 4px 10px rgba(0, 209, 255, 0.3); opacity: 0; visibility: hidden; transform: translateY(20px) scale(0.9); transition: all var(--transition-speed) cubic-bezier(0.25, 0.46, 0.45, 0.94); z-index: 999; }
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.back-to-top:hover { background: var(--gradient-primary); color: var(--text-primary); box-shadow: 0 6px 15px rgba(147, 51, 234, 0.4); transform: translateY(-3px) scale(1.05); }

/* --- Animation Classes (Used by JS) --- */
.animate-fade-in-up { opacity: 0; transform: translateY(30px); }
.animate-on-scroll { opacity: 0; /* Start hidden */ }
.no-animations .animate-fade-in-up, .no-animations .animate-on-scroll { opacity: 1; transform: none; }


/* ===== Project Detail Page Specific Styles ===== */
/* (Keep existing detail page styles if needed, otherwise they can be removed if not used) */
body.project-detail-page { background-color: var(--background-dark); }
body.project-detail-page .header { background-color: rgba(15, 5, 24, 0.95); border-bottom: 1px solid var(--border-color); }
body.project-detail-page .header .back-link { color: var(--text-secondary); padding: 0.5rem 1rem; border: 1px solid var(--border-color); border-radius: var(--border-radius); margin-left: 1rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; transition: all 0.2s ease; }
body.project-detail-page .header .back-link:hover { color: var(--text-primary); border-color: var(--secondary-color); background-color: rgba(0, 209, 255, 0.1); }
body.project-detail-page .header .back-link i { margin-right: 0.5rem; }
body.project-detail-page .header .btn-small { font-size: 0.8rem; padding: 0.5rem 1rem; color: var(--secondary-color); border-color: var(--secondary-color); }
body.project-detail-page .header .btn-small:hover { background-color: var(--secondary-color); color: var(--background-dark); }

/* Ensure main content area respects header padding */
main.project-detail-main-content {
    display: block; /* Ensure it takes block layout */
    padding-top: 90px; /* Adjust based on your fixed header height */
    position: relative; /* Needed for z-index context if children use absolute */
    z-index: 1;
}

/* Styles for the project specific header section */
section.project-detail-header {
    display: block; /* Explicitly block */
    visibility: visible; /* Explicitly visible */
    opacity: 1; /* Explicitly opaque */
    position: relative; /* Relative positioning */
    z-index: 5; /* Above particles, below main header */
    padding: clamp(5rem, 12vh, 7rem) 0 clamp(3rem, 7vh, 4rem) 0;
    background: linear-gradient(rgba(15, 5, 24, 0.85), rgba(15, 5, 24, 0.98)), var(--gradient-primary);
    text-align: center;
    overflow: hidden;
    border-bottom: 1px solid var(--border-color);
}

#particles-js-detail {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0; /* Behind content */
}

section.project-detail-header .container {
    position: relative;
    z-index: 10; /* Above particles */
}

section.project-detail-header h1,
section.project-detail-header p,
section.project-detail-header div {
     position: relative; /* Ensure stacking context */
     z-index: 15; /* Above container bg if any */
}

/* ===== Dark Angels Banner Styling ===== */
/* (Included from original style.css, keep if used) */
.dark-angels-banner {
    background-color: #0a3d20; /* Dark Angels Green */
    border: 1px solid #c5b8a7; /* Bone white border */
    border-radius: var(--border-radius);
    padding: 1.5rem 1rem;
    margin-bottom: 3rem; /* Space before the gallery */
    text-align: center;
    box-shadow: 0 0 15px rgba(10, 61, 32, 0.5), inset 0 0 10px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden; /* Hide overflowing glow */
}

.dark-angels-banner img {
    display: block;
    max-width: 100px; /* Adjust size as needed */
    height: auto;
    margin: 0 auto 0.8rem auto; /* Center logo and add space below */
}

/* The "爆點" effect - pulsing glow */
.da-logo-glow {
     /* Use filter for a sharper glow, adjust color and size */
     filter: drop-shadow(0 0 6px #90ee90) drop-shadow(0 0 12px #90ee90); /* Light green glow */
     animation: pulseGlow 3s ease-in-out infinite;
}

@keyframes pulseGlow {
    0% {
        filter: drop-shadow(0 0 5px rgba(144, 238, 144, 0.6)) drop-shadow(0 0 10px rgba(144, 238, 144, 0.5));
    }
    50% {
        filter: drop-shadow(0 0 10px rgba(144, 238, 144, 1)) drop-shadow(0 0 20px rgba(144, 238, 144, 0.8)); /* Brighter glow */
    }
    100% {
         filter: drop-shadow(0 0 5px rgba(144, 238, 144, 0.6)) drop-shadow(0 0 10px rgba(144, 238, 144, 0.5));
    }
}


.da-motto {
    font-family: 'Times New Roman', Times, serif; /* More thematic font */
    font-size: 1.3rem;
    font-weight: bold;
    color: #dcd1c2; /* Bone white color */
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}

/* Responsive adjustments if needed */
@media (max-width: 576px) {
    .dark-angels-banner img {
        max-width: 80px;
    }
    .da-motto {
        font-size: 1.1rem;
    }
}
.project-detail-title { font-size: clamp(2.2rem, 6vw, 3.8rem); color: var(--text-primary); margin-bottom: 0.5rem; text-shadow: 0 2px 8px rgba(0,0,0,0.5); }
.project-detail-subtitle { font-size: clamp(1.1rem, 3vw, 1.4rem); color: var(--text-secondary); font-weight: var(--font-weight-light); margin-bottom: 2.5rem; max-width: 700px; margin-left: auto; margin-right: auto; }
.project-detail-links { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.project-detail-links .btn { background-color: rgba(255,255,255, 0.08); border: 1px solid rgba(255,255,255, 0.3); color: var(--text-primary-hover); backdrop-filter: blur(4px); font-size: 0.85rem; padding: 0.7rem 1.3rem; }
.project-detail-links .btn:hover { background-color: rgba(0, 209, 255, 0.15); border-color: var(--secondary-color); color: var(--secondary-color); }

/* Styles for the main content area below the header */
.project-detail-content { padding: clamp(3rem, 8vw, 5rem) 0; background-color: var(--background-dark); }
.project-detail-hero-image { margin-bottom: 4rem; border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--box-shadow); border: 1px solid var(--border-color); }
.project-detail-hero-image img, .project-detail-hero-image video { display: block; width: 100%; }
.project-detail-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 3rem 4rem; margin-bottom: 4rem; }
.project-detail-main h3, .project-detail-sidebar h3 { color: var(--secondary-color); font-size: 1.4rem; font-weight: var(--font-weight-semibold); margin-bottom: 1.5rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--border-color); position: relative; }
.project-detail-main h3::after, .project-detail-sidebar h3::after { content: ''; position: absolute; left: 0; bottom: -1px; height: 2px; width: 50px; background: var(--gradient-secondary); }
.project-detail-main p { color: var(--text-secondary); margin-bottom: 1.5rem; line-height: 1.8; }
.project-detail-main ul { list-style: none; padding-left: 0; margin-top: 1.5rem; }
.project-detail-main li { padding-left: 1.8rem; position: relative; margin-bottom: 1rem; color: var(--text-secondary); }
.project-detail-main li::before { content: '\f005'; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--accent-color); position: absolute; left: 0; top: 0.1em; font-size: 0.9em; }
.project-detail-sidebar { background-color: var(--background-medium); padding: 2rem; border-radius: var(--border-radius); border: 1px solid var(--border-color); height: fit-content; position: sticky; top: 100px; }
.project-detail-sidebar ul { list-style: none; padding: 0; }
.project-detail-sidebar li { color: var(--text-secondary); margin-bottom: 1.2rem; display: flex; align-items: flex-start; gap: 0.8rem; font-size: 0.9rem; }
.project-detail-sidebar li:last-child { margin-bottom: 0; }
.project-detail-sidebar i { color: var(--secondary-color); margin-top: 0.2em; width: 20px; text-align: center; flex-shrink: 0; font-size: 1rem; }
.project-detail-sidebar strong { font-weight: var(--font-weight-semibold); color: var(--text-primary); display: block; margin-bottom: 0.2rem; line-height: 1.4; }
.project-detail-sidebar span { line-height: 1.6; }
.project-tags-detail { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.5rem; }
.project-tags-detail span { background-color: var(--background-light); color: var(--text-secondary); padding: 0.4rem 0.8rem; border-radius: 4px; font-size: 0.75rem; font-weight: var(--font-weight-semibold); border: 1px solid var(--border-color); text-transform: uppercase; letter-spacing: 0.5px; }
.project-detail-gallery { margin-top: 4rem; }
.project-detail-gallery h3 { color: var(--secondary-color); font-size: 1.4rem; margin-bottom: 2rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--border-color); position: relative; }
.project-detail-gallery h3::after { content: ''; position: absolute; left: 0; bottom: -1px; height: 2px; width: 50px; background: var(--gradient-secondary); }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; }
.gallery-grid img { width: 100%; border-radius: var(--border-radius); border: 1px solid var(--border-color); transition: transform 0.3s ease, box-shadow 0.3s ease; display: block; }
.gallery-grid a { display: block; }
.gallery-grid a:hover img { transform: scale(1.03); box-shadow: var(--box-shadow-hover); }
body.project-detail-page .footer { background-color: var(--background-dark); padding: 1.5rem 0; border-top: 1px solid var(--border-color); }
body.project-detail-page .footer p { margin-bottom: 0.3rem; color: var(--text-darker); }
body.project-detail-page .footer .footer-link { color: var(--secondary-color); font-weight: var(--font-weight-semibold); text-decoration: underline; text-underline-offset: 3px; }
body.project-detail-page .footer .footer-link:hover { color: var(--text-primary); }

/* --- Responsive Design --- */
@media (max-width: 991.98px) { .skills-list { columns: 1; } .about-grid { gap: 2rem; } .project-detail-grid { grid-template-columns: 1fr; } .project-detail-sidebar { position: static; margin-top: 3rem; } }
@media (max-width: 767.98px) { .header { padding: 0.8rem 0; } .header.scrolled { padding: 0.6rem 0; } .nav-list { position: fixed; top: 0; right: -100%; width: 70%; max-width: 300px; height: 100vh; background-color: var(--background-medium); flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: 6rem 2rem 2rem 2rem; gap: 1.5rem; transition: right 0.4s ease-in-out; box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2); border-left: 1px solid var(--border-color); overflow-y: auto; } .nav-list.open { right: 0; } .nav-link { font-size: 1rem; width: 100%; padding: 0.8rem 0; } .nav-link::after { bottom: 0px; } .nav-link .mobile-only { display: inline; margin-left: 0.5rem; } .nav-link i { margin-right: 0.5rem; width: 20px; } .nav-link.external-link i, .nav-link.resume-link i { margin-right: 0.5rem; } .nav-toggle { display: flex; } .project-grid { grid-template-columns: 1fr; } .hobby-grid { grid-template-columns: 1fr; } .content-section { padding: 3rem 0; } .section-title { margin-bottom: 2.5rem; } .section-subtitle { margin: -2rem auto 2.5rem auto; font-size: 1rem; } .about-grid { grid-template-columns: 1fr; } .about-skills { margin-top: 2rem; } .contact-links { flex-direction: column; align-items: center; } .contact-links .btn { width: 100%; max-width: 300px; } body.project-detail-page .header .main-nav { display: flex; } body.project-detail-page .project-detail-main-content { padding-top: 70px; } .project-detail-header { padding: 4rem 0 2rem 0; } .project-detail-title { font-size: 1.8rem; } .project-detail-subtitle { font-size: 1rem; } .project-detail-links .btn { font-size: 0.8rem; padding: 0.5rem 1rem; } .project-detail-content { padding: 2rem 0; } .project-detail-grid { gap: 2rem; } .project-detail-main h3, .project-detail-sidebar h3, .project-detail-gallery h3 { font-size: 1.2rem; } .gallery-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; } }
@media (max-width: 575.98px) { h1 { font-size: 2rem; } h2 { font-size: 1.5rem; } .container { width: 95%; } .btn { padding: 0.7rem 1.5rem; font-size: 0.85rem; } .back-to-top { width: 40px; height: 40px; font-size: 1rem; right: 15px; bottom: 15px;} .nav-list { width: 80%; } .gallery-grid { grid-template-columns: 1fr; } }
/* ===== Iframe Container Styles (Add to style.css) ===== */
.iframe-container {
    position: relative;
    width: 100%;
    /* Optional: Maintain aspect ratio for the container */
    /* padding-bottom: 65%; /* Adjust percentage for desired aspect ratio */
    /* height: 0; */
    overflow: hidden;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    border: 1px solid var(--border-color);
    background-color: var(--background-light); /* Loading background */
}

.iframe-container iframe {
    /* If using padding-bottom trick for aspect ratio: */
    /* position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; */

    /* If not using padding-bottom trick: */
     display: block; /* Remove potential extra space below iframe */
     width: 100%; /* Takes width from container */
     /* Height is set directly in the HTML iframe tag */
     border: none; /* Remove default iframe border */
}

/* Specific class names if needed */
.pdf-viewer {
    /* Add specific styles for PDF viewers if needed */
}

.figma-preview {
     /* Add specific styles for Figma embeds if needed */
     /* Example: Ensure Figma UI fits well */
     background-color: #1e1e1e; /* Dark background often suits Figma */
}

/* Adjustments for showcase item spacing */
.showcase-item {
    margin-bottom: 4rem; /* Ensure spacing between items */
}

.showcase-item h3 {
    color: var(--secondary-color); /* Or adjust as needed */
    margin-bottom: 1.5rem;
    text-align: center;
    font-size: 1.5rem; /* Adjust title size */
    font-weight: var(--font-weight-semibold);
}

@media (max-width: 767.98px) {
    .showcase-item h3 {
        font-size: 1.3rem;
    }
    .iframe-container iframe {
        /* Adjust height on smaller screens if needed */
        /* height: 450px; */
    }
}