/* CSS Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: #FFE135; /* Egg yolk yellow background */
    background-image: url('https://images.unsplash.com/photo-1481627834876-b7833e8f5570?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-blend-mode: overlay;
    color: #000;
    overflow-x: hidden;
    cursor: none;
    height: 175vh; /* 2 pages + 0.25 pages × 3 = 2.75 pages total */
    position: relative;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.6);
    z-index: -1;
    pointer-events: none;
}

/* Main Container */
.main-container {
    position: relative;
    width: 100%;
    height: 175vh; /* 2 pages + 0.25 pages × 3 = 2.75 pages total */
}

/* Page Sections */
.page-section {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: background-color 0.5s ease;
}

.page-section.active {
    background-color: #FFE135;
}

.page-section.hero-page.active {
    background-color: #FFE135;
}

.page-section.nav-page.active {
    background-color: #FFE135;
}

/* Hero Page */
.hero-page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

.name-section {
    text-align: center;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: auto;
    min-height: 100vh;
    width: 100%;
    position: relative;
    padding: 3rem 0;
    box-sizing: border-box;
}

.name-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}

.name-line.top-line {
    margin-bottom: 2rem;
    order: 1; /* Top line comes first */
}

.name-line.bottom-line {
    margin-top: 2rem;
    order: 3; /* Bottom line comes last */
}

.name-part {
    font-size: 8rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 0.8;
    transition: color 0.3s ease;
    opacity: 0;
    transform: scale(0.5) translateY(30px);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55), color 0.3s ease;
}

/* Eye Container */
.eye-container {
    width: 150px;
    height: 150px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Eye Design with Eyeball and Pupil */
.eye {
    width: 120px;
    height: 120px;
    position: relative;
    overflow: hidden;
    background: transparent; /* Clean eye container */
}

.eyeball {
    width: 100%;
    height: 100%;
    background: #fff; /* White eyeball */
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    /* No border - clean circular eye */
}


.pupil {
    width: 40px;
    height: 40px;
    background: #000;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.1s ease;
}

/* Eye disappear animation */
.eye.disappearing {
    opacity: 0;
    transition: opacity 0.1s ease;
}

/* Scroll Down Arrow */
.scroll-arrow {
    order: 5; /* last, below the navigation */
    margin: 0.5rem auto 0 auto;
    cursor: pointer;
    transition: all 0.3s ease;
    animation: bounce 2s infinite;
}

.arrow-icon {
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #000;
    border: 2px solid rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.scroll-arrow:hover .arrow-icon {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(0, 0, 0, 0.4);
    transform: scale(1.1);
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

/* Animation Classes */
.animate-title {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.animate-title.animate {
    opacity: 1;
    transform: translateY(0);
}

.animate-fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.animate-fade-up.animate {
    opacity: 1;
    transform: translateY(0);
}

.animate-slide-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.animate-slide-left.animate {
    opacity: 1;
    transform: translateX(0);
}

.animate-slide-right {
    opacity: 0;
    transform: translateX(50px);
    transition: all 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.animate-slide-right.animate {
    opacity: 1;
    transform: translateX(0);
}

.animate-slide-up {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.animate-slide-up.animate {
    opacity: 1;
    transform: translateY(0);
}

.eye {
    transition: opacity 0.1s ease;
}

/* About Page Styles */
.about-hero {
    text-align: center;
    margin-bottom: 4rem;
}

.about-subtitle {
    margin-top: 1rem;
    font-size: 1.3rem;
    color: rgba(0, 0, 0, 0.8);
    font-weight: 400;
    text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.8);
    position: relative;
    z-index: 15;
}


.about-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
    align-items: start;
    max-width: 100%;
    overflow: visible;
    padding: 1rem 0 2rem 0;
}

.about-text-section {
    padding: 2.5rem 3rem;
    overflow: visible;
    background: rgba(255, 255, 255, 0.98);
    border-radius: 25px;
    border: 2px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
    min-height: 280px;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 25;
}

/* About expanded content styling */
.about-expanded-content {
    display: none;
    opacity: 0;
    transition: all 0.5s ease;
}

.about-expanded-content .about-text-section {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.section-heading {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 2rem;
    color: #000;
    text-align: center;
    position: relative;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.section-heading::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg, #000, transparent);
}

.text-content p {
    margin-bottom: 1.6rem;
    line-height: 1.9;
    color: rgba(0, 0, 0, 0.9);
    font-size: 1.15rem;
    text-align: left;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.about-visual-section {
    position: relative;
}

.visual-container {
    position: relative;
    height: 300px;
    background: linear-gradient(135deg, #f5f5f5, #e8e8e8);
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.floating-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.floating-element {
    position: absolute;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.1);
    animation: float 6s ease-in-out infinite;
}

.element-1 {
    width: 60px;
    height: 60px;
    top: 20%;
    left: 20%;
    animation-delay: 0s;
}

.element-2 {
    width: 40px;
    height: 40px;
    top: 60%;
    right: 30%;
    animation-delay: 2s;
}

.element-3 {
    width: 80px;
    height: 80px;
    bottom: 20%;
    left: 50%;
    animation-delay: 4s;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(180deg);
    }
}

.about-image-placeholder {
    width: 200px;
    height: 200px;
    background: linear-gradient(135deg, #000, #333);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.image-overlay {
    text-align: center;
}

.ntu-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.image-text {
    font-size: 2.5rem;
    font-weight: bold;
    color: white;
    letter-spacing: 2px;
    position: relative;
    z-index: 2;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

.about-skills {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.skills-heading {
    font-size: 1.8rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 3rem;
    color: #000;
}

.skills-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.skill-item {
    text-align: center;
    padding: 2rem 1rem;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 15px;
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.skill-item:hover {
    transform: translateY(-10px);
    background: rgba(0, 0, 0, 0.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.skill-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.skill-item h4 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #000;
}

.skill-item p {
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.6;
    font-size: 0.95rem;
}

/* Portfolio Page Styles */
.portfolio-hero {
    text-align: center;
    margin-bottom: 4rem;
}

.portfolio-subtitle {
    margin-top: 1rem;
    font-size: 1.2rem;
    color: rgba(0, 0, 0, 0.7);
    font-weight: 300;
}

.portfolio-filter {
    margin-bottom: 3rem;
    text-align: center;
}

.filter-buttons {
    display: inline-flex;
    gap: 1rem;
    background: rgba(0, 0, 0, 0.05);
    padding: 0.5rem;
    border-radius: 50px;
}

.filter-btn {
    padding: 0.8rem 2rem;
    border: none;
    background: transparent;
    color: rgba(0, 0, 0, 0.7);
    border-radius: 25px;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.95rem;
}

.filter-btn.active {
    background: #000;
    color: white;
}

.filter-btn:hover {
    background: rgba(0, 0, 0, 0.8);
    color: white;
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.portfolio-item {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.portfolio-item.animate {
    opacity: 1;
    transform: translateY(0);
}

/* Ensure video stability during transitions */
.portfolio-item video {
    position: relative;
    z-index: 1;
}

.portfolio-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.4s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.portfolio-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.card-image {
    position: relative;
    height: 250px;
    overflow: hidden;
}

.card-image video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s ease;
    border-radius: 10px;
}

.card-image video:hover {
    transform: scale(1.02);
}

.card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s ease;
}

.portfolio-card:hover .card-overlay {
    opacity: 1;
}

.overlay-content {
    text-align: center;
    color: white;
}

.overlay-content h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.overlay-content p {
    margin-bottom: 1.5rem;
    opacity: 0.9;
}

.view-project {
    padding: 0.8rem 2rem;
    background: white;
    color: #000;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-weight: 600;
}

.view-project:hover {
    background: rgba(255, 255, 255, 0.9);
}

.card-content {
    padding: 2rem;
}

.card-content h3 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #000;
}

.card-content p {
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tag {
    padding: 0.3rem 0.8rem;
    background: rgba(0, 0, 0, 0.05);
    color: rgba(0, 0, 0, 0.7);
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 500;
}

/* Contact Page Styles */
.contact-hero {
    text-align: center;
    margin-bottom: 4rem;
}

.contact-subtitle {
    margin-top: 1rem;
    font-size: 1.2rem;
    color: rgba(0, 0, 0, 0.7);
    font-weight: 300;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

.contact-methods {
    margin-bottom: 3rem;
}

.contact-method {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 15px;
    transition: all 0.3s ease;
}

.contact-method:hover {
    background: rgba(0, 0, 0, 0.05);
    transform: translateX(10px);
}

.method-icon {
    font-size: 2rem;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 50%;
    flex-shrink: 0;
}

.method-details h3 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #000;
}

.method-details p {
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.5;
    margin-bottom: 0.5rem;
}

.contact-link {
    color: #000;
    text-decoration: none;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
}

.contact-link:hover {
    border-bottom-color: #000;
}

.social-links {
    margin-top: 2rem;
}

.social-links h3 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: #000;
}

.social-icons {
    display: flex;
    gap: 1rem;
}

.social-icon {
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: rgba(0, 0, 0, 0.7);
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    position: relative;
    border: 2px solid transparent;
}

.icon-text {
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
}

.social-icon:hover {
    background: #000;
    color: white;
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    border-color: rgba(0, 0, 0, 0.1);
}

.social-icon:hover .icon-text {
    color: white;
}

.social-icon[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: #000;
    color: white;
    padding: 0.3rem 0.8rem;
    border-radius: 5px;
    font-size: 0.8rem;
    white-space: nowrap;
}

.contact-form-section {
    background: rgba(0, 0, 0, 0.02);
    border-radius: 20px;
    padding: 2rem;
}

.form-container {
    max-width: 100%;
}

.form-heading {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 2rem;
    color: #000;
    text-align: center;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-group {
    position: relative;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 1rem;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: white;
    box-sizing: border-box;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #000;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1rem 2rem;
    background: #000;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 1rem;
}

.submit-btn:hover {
    background: #333;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.btn-arrow {
    transition: transform 0.3s ease;
}

.submit-btn:hover .btn-arrow {
    transform: translateX(5px);
}


/* Navigation Page */
/* Sub-pages */
.sub-page {
    padding: 2rem 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 25vh; /* 0.25 screen height for each sub-page */
    background: linear-gradient(135deg, rgba(212, 171, 88, 0.95), rgba(180, 140, 70, 0.95));
    background-image: url('https://images.unsplash.com/photo-1481627834876-b7833e8f5570?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
    background-size: cover;
    background-position: center;
    background-blend-mode: overlay;
    border-radius: 20px;
    margin: 1rem 0;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.sub-page::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.6);
    z-index: 1;
    pointer-events: none;
    border-radius: 20px;
}

.sub-page:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
    transform: translateY(-5px) scale(1.02);
    background: linear-gradient(135deg, rgba(212, 171, 88, 1), rgba(180, 140, 70, 1));
    border-color: rgba(255, 255, 255, 0.4);
}

.sub-page-content {
    max-width: 1400px;
    width: 100%;
    text-align: center;
    padding: 2rem;
    margin: 0 auto;
    position: relative;
    z-index: 20;
}

.sub-page-content h1 {
    font-size: 4rem;
    font-weight: 900;
    color: #000;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
    cursor: pointer;
    display: flex;
    align-items: center;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    justify-content: center;
    gap: 0.1em;
}


.about-content {
    max-width: 800px;
    margin: 0 auto;
}

/* Sub-page expansion styles */
.sub-page.expanded {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    transform: none;
    background: rgba(212, 171, 88, 0.98);
    background-image: url('https://images.unsplash.com/photo-1481627834876-b7833e8f5570?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
    background-size: cover;
    background-position: center;
    background-blend-mode: overlay;
    backdrop-filter: blur(5px);
    transition: background-color 0.3s ease;
    animation: scrollUnfold 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.sub-page.expanded::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.6);
    z-index: 1;
    pointer-events: none;
}

.sub-page.expanded:hover {
    background: rgba(212, 171, 88, 0.98);
}

.sub-page.expanded::before {
    content: 'Click anywhere to close';
    position: absolute;
    top: 2rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.15);
    color: rgba(0, 0, 0, 0.8);
    padding: 0.6rem 1.2rem;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 600;
    pointer-events: none;
    opacity: 0;
    border: 1px solid rgba(0, 0, 0, 0.2);
    transition: opacity 0.3s ease-in-out;
}

.sub-page.expanded.show-hint::before {
    opacity: 1;
}

/* Close Button */
.close-btn {
    position: absolute;
    top: 2rem;
    right: 2rem;
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.5rem;
    color: rgba(0, 0, 0, 0.7);
    transition: all 0.3s ease;
    z-index: 1001;
    opacity: 0;
    animation: fadeInCloseBtn 0.5s ease 1s both;
}

.close-btn:hover {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(0, 0, 0, 0.4);
    color: rgba(0, 0, 0, 0.9);
    transform: scale(1.1);
}

@keyframes fadeInCloseBtn {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeInOut {
    0%, 100% { opacity: 0; }
    20%, 80% { opacity: 1; }
}

/* Scroll Unfold Animation */
@keyframes scrollUnfold {
    0% {
        transform: scaleX(0.1) scaleY(1);
        opacity: 0;
        border-radius: 50px;
    }
    30% {
        transform: scaleX(1) scaleY(0.3);
        opacity: 0.7;
        border-radius: 30px;
    }
    60% {
        transform: scaleX(1) scaleY(0.8);
        opacity: 0.9;
        border-radius: 15px;
    }
    100% {
        transform: scaleX(1) scaleY(1);
        opacity: 1;
        border-radius: 0;
    }
}

/* Content Fade In Animation */
@keyframes contentFadeIn {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Circle Expand Animation for Portfolio */
@keyframes circleExpand {
    0% {
        clip-path: circle(0% at 50% 50%);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    100% {
        clip-path: circle(150% at 50% 50%);
        opacity: 1;
    }
}

/* Portfolio Content Animation */
@keyframes portfolioContentFadeIn {
    0% {
        opacity: 0;
        transform: scale(0.8) rotate(-5deg);
    }
    50% {
        opacity: 0.7;
        transform: scale(0.95) rotate(-2deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

/* Contact Slide In From Right Animation */
@keyframes contactSlideInFromRight {
    0% {
        opacity: 0;
        transform: translateX(300px) translateY(-30px) scale(0.8);
    }
    60% {
        opacity: 0.9;
        transform: translateX(-15px) translateY(-10px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateX(0) translateY(0) scale(1);
    }
}


.sub-page[data-section="about"].expanded {
    height: 100vh;
    top: 0;
    animation: circleExpand 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.sub-page[data-section="about"] .nav-content {
    display: none;
    opacity: 0;
    transition: all 0.5s ease;
}

.sub-page[data-section="about"].expanded .about-expanded-content {
    display: block !important;
    opacity: 1;
    padding: 2rem 1rem 4rem 1rem;
    animation: portfolioContentFadeIn 1s ease 0.8s both;
    position: relative;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.sub-page[data-section="about"] .nav-content .about-circle {
    width: 0;
    height: 0;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 1s ease;
    position: relative;
    overflow: hidden;
}

.sub-page[data-section="about"].expanded .nav-content .about-circle {
    width: 50vw;
    height: 50vw;
    max-width: 400px;
    max-height: 400px;
}

.circle-text {
    padding: 2rem;
    text-align: center;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.sub-page[data-section="about"].expanded .nav-content .about-circle .circle-text {
    opacity: 1;
}

.circle-text p {
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
}

/* Portfolio expansion */
.sub-page[data-section="portfolio"].expanded {
    height: 100vh;
    top: 0;
    animation: circleExpand 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.sub-page[data-section="portfolio"] .portfolio-content {
    display: none;
    opacity: 0;
    transition: all 0.5s ease;
}

.sub-page[data-section="portfolio"].expanded .portfolio-content {
    display: block !important;
    opacity: 1;
    animation: portfolioContentFadeIn 1s ease 0.8s both;
    position: relative;
    z-index: 20;
}

/* Contact expansion - same as Portfolio */
.sub-page[data-section="contact"].expanded {
    height: 100vh;
    top: 0;
    animation: circleExpand 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.portfolio-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

.portfolio-category {
    background: #fff;
    padding: 2rem;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.portfolio-category h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: #333;
}

.category-image video {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 1rem;
}

.portfolio-category p {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.5;
}

/* Contact page uses normal layout - no black circle */


.main-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

/* Navigation Container */
.navigation {
    order: 4; /* after top-line(1), marquee(2), bottom-line(3) */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    flex-wrap: wrap;
    margin: 3rem auto 1rem auto;
    width: 100%;
    max-width: 800px;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s ease 1.5s forwards;
}

.nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0;
    transform: scale(0.8) translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55), all 0.3s ease;
    position: relative;
    padding: 0;
    margin: 0;
}

.nav-item:hover .nav-text {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(0, 0, 0, 0.5);
    transform: scale(1.05);
}

.nav-text {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    transition: color 0.3s ease;
    color: rgba(0, 0, 0, 0.8);
    padding: 1rem 2rem;
    border: 2px solid rgba(0, 0, 0, 0.3);
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.nav-eye {
    width: 60px;
    height: 60px;
    background: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 900;
    transition: all 0.3s ease;
}

/* Portfolio Submenu - Hidden due to limited space */
.portfolio-submenu {
    display: none;
}

.submenu-item {
    flex: 0 0 200px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.submenu-item:hover {
    transform: translateY(-10px);
}

.submenu-box {
    background: #fff;
    border: 3px solid #000;
    border-radius: 15px;
    padding: 1.5rem;
    text-align: center;
    height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.submenu-box h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #000;
    margin-bottom: 1rem;
}

.image-placeholder {
    background: #f0f0f0;
    border: 2px dashed #ccc;
    border-radius: 10px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 0.9rem;
    font-style: italic;
}

/* Marquee Container in Middle */
.marquee-container {
    width: 100%;
    max-width: 800px; /* Match DANIEL line width */
    height: 60px;
    background: #000;
    border-radius: 30px;
    margin: 2rem auto; /* 置中並添加上下間距 */
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    order: 2; /* Ensure it's in the middle */
    opacity: 0;
    transform: scale(0.3) translateY(-50px);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.marquee-content {
    display: flex;
    animation: marquee 24s linear infinite;
    white-space: nowrap;
}

.marquee-text {
    color: #fff;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0 2rem;
    flex-shrink: 0;
}

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

/* Navigation Items with Expansion */
.nav-item {
    position: relative;
    transition: all 0.5s ease;
}

.nav-item.expanded {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 225, 53, 0.95);
    backdrop-filter: blur(10px);
}

/* About Page Expansion */
.nav-item[data-section="about"].expanded {
    height: 50vh;
    top: 25vh;
}

.nav-item[data-section="about"] .nav-content {
    display: none;
    opacity: 0;
    transition: all 0.5s ease;
}

.nav-item[data-section="about"].expanded .nav-content {
    display: block;
    opacity: 1;
}

.nav-item[data-section="about"] .nav-content .about-circle {
    width: 0;
    height: 0;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 1s ease;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
}

.nav-item[data-section="about"].expanded .nav-content .about-circle {
    width: 50vw;
    height: 50vw;
    max-width: 400px;
    max-height: 400px;
}

.circle-text {
    padding: 2rem;
    text-align: center;
    opacity: 0;
    transition: opacity 0.5s ease 0.5s;
}

.nav-item[data-section="about"].expanded .nav-content .about-circle .circle-text {
    opacity: 1;
}

.circle-text p {
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
}

/* Portfolio Page Expansion */
.nav-item[data-section="portfolio"].expanded {
    height: 100vh;
    top: 0;
}

.nav-item[data-section="portfolio"] .portfolio-content {
    display: none;
    opacity: 0;
    transition: all 0.5s ease;
}

.nav-item[data-section="portfolio"].expanded .portfolio-content {
    display: block;
    opacity: 1;
}

.portfolio-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem;
}

.portfolio-category {
    background: #fff;
    border: 3px solid #000;
    border-radius: 15px;
    padding: 2rem;
    text-align: center;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.portfolio-category:hover {
    transform: translateY(-10px);
}

.portfolio-category h3 {
    font-size: 2rem;
    font-weight: 700;
    color: #000;
    margin-bottom: 1rem;
}

.portfolio-category p {
    font-size: 1rem;
    color: #666;
    line-height: 1.6;
}

.portfolio-category .category-image {
    width: 100%;
    height: 200px;
    background: #f0f0f0;
    border: 2px dashed #ccc;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-style: italic;
    margin: 1rem 0;
    overflow: hidden;
    position: relative;
}

.portfolio-category video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.portfolio-category .video-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: #f0f0f0;
    border: 2px dashed #ccc;
    border-radius: 10px;
    color: #666;
    font-style: italic;
}

/* Contact Page Expansion */
.sub-page[data-section="contact"] .contact-content {
    display: none;
    opacity: 0;
}

.nav-item[data-section="contact"] .contact-content {
    display: none;
    opacity: 0;
    transition: all 0.5s ease;
}

.sub-page[data-section="contact"].expanded .contact-content {
    display: block !important;
    opacity: 1 !important;
    animation: portfolioContentFadeIn 1s ease 0.8s both !important;
    position: relative;
    z-index: 20;
}

.contact-content {
    text-align: center;
    padding: 2rem;
}

.contact-content h2 {
    font-size: 3rem;
    font-weight: 700;
    color: #000;
    margin-bottom: 2rem;
}

.social-links {
    display: flex;
    justify-content: center;
    gap: 3rem;
    flex-wrap: wrap;
}

.social-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #000;
    transition: all 0.3s ease;
    padding: 1.5rem;
    background: #fff;
    border: 3px solid #000;
    border-radius: 15px;
    min-width: 150px;
}

.social-link:hover {
    transform: translateY(-10px);
    background: #FFA500;
    color: #fff;
}

/* Circle Cursor */
.circle-cursor {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: transform 0.1s ease;
}

.circle {
    width: 40px;
    height: 40px;
    background: #666;
    border: 2px solid #000;
    border-radius: 50%;
    position: relative;
}

/* Circle hover effect */
.circle-cursor:hover .circle {
    background: #888;
    transform: scale(1.1);
}

/* Loading Animation Classes - Bounce Effect */
.fade-in {
    opacity: 1 !important;
    transform: scale(1) translateY(0) !important;
}

/* Fixed colors - no theme changes */
.name-part,
.nav-text {
    color: #000;
}

/* Page Background Colors - always light yellow */
.hero-page,
.nav-page {
    background: #FFE135;
}

/* Hover effects for pages */
.page-section:hover {
    background: #FFF176 !important; /* Lighter yellow on hover */
    transition: background-color 0.3s ease;
}


/* Responsive Design */
@media (max-width: 1024px) {
    .name-part {
        font-size: 6rem;
    }
    
    .nav-text {
        font-size: 4rem;
    }
    
    .eye-container {
        width: 120px;
        height: 120px;
    }
    
    .eye {
        width: 100px;
        height: 100px;
    }
    
    .pupil {
        width: 30px;
        height: 30px;
    }
}

@media (max-width: 768px) {
    .name-part {
        font-size: 4rem;
    }
    
    .nav-text {
        font-size: 3rem;
    }
    
    .name-line {
        gap: 1rem;
    }
    
    .eye-container {
        width: 80px;
        height: 80px;
    }
    
    .eye {
        width: 60px;
        height: 60px;
    }
    
    .pupil {
        width: 20px;
        height: 20px;
    }
    
    .nav-eye {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
    
    .portfolio-submenu {
        flex-direction: column;
        align-items: center;
    }
    
    .submenu-item {
        flex: none;
        width: 100%;
        max-width: 300px;
    }
    
    .marquee-text {
        font-size: 0.8rem;
    }
    
    .cat-cursor {
        display: none;
    }
    
    body {
        cursor: auto;
    }
}

@media (max-width: 480px) {
    .name-part {
        font-size: 3rem;
    }
    
    .nav-text {
        font-size: 2.5rem;
    }
    
    .eye-container {
        width: 60px;
        height: 60px;
    }
    
    .eye {
        width: 50px;
        height: 50px;
    }
    
    .pupil {
        width: 15px;
        height: 15px;
    }
    
    .nav-eye {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }
    
    .scroll-arrow {
        bottom: 1rem;
    }
    
    .arrow-icon {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }
    
    .about-circle.active {
        width: 80vw;
        height: 80vw;
    }
    
    /* New responsive styles for redesigned pages */
    
    .about-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        margin-bottom: 2rem;
        padding: 1rem 0;
    }
    
    .about-text-section {
        padding: 1.5rem 2rem;
        background: rgba(255, 255, 255, 0.95);
        border-radius: 15px;
        border: 2px solid rgba(0, 0, 0, 0.15);
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
        min-height: auto;
        max-width: 95%;
        margin: 0 auto;
        margin-bottom: 1rem;
    }
    
    .sub-page[data-section="about"].expanded .nav-content {
        padding: 1rem 0.5rem 2rem 0.5rem;
    }
    
    /* Mobile Close Button */
    .close-btn {
        width: 40px;
        height: 40px;
        top: 1rem;
        right: 1rem;
        font-size: 1.2rem;
    }
    
    /* Mobile Sub-page Content */
    .sub-page-content h1 {
        font-size: 2.5rem;
    }
    
    .sub-page-content p {
        font-size: 0.9rem;
    }
    
    .visual-container {
        height: 250px;
    }
    
    .skills-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .portfolio-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .filter-buttons {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .filter-btn {
        padding: 0.6rem 1.5rem;
        font-size: 0.9rem;
    }
    
    .social-icons {
        justify-content: center;
    }
    
    .contact-form-section {
        padding: 1.5rem;
    }
    
    .visual-container {
        height: 300px;
    }
    
    .about-image-placeholder {
        width: 150px;
        height: 150px;
    }
    
    .image-text {
        font-size: 2rem;
    }
    
    .circle-text p {
        font-size: 1rem;
    }
}

/* Animation Classes */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease forwards;
}

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

/* Smooth Transitions */
* {
    transition: color 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
}

/* Loading Animation */
.loading {
    opacity: 0;
}

.loaded {
    opacity: 1;
}

/* Page Load Animation */
.page-section {
    opacity: 0;
    animation: pageLoadIn 1s ease 0.5s both;
}

.page-section.active {
    opacity: 1;
    animation: pageLoadIn 1s ease 0.5s both;
}

@keyframes pageLoadIn {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .marquee-content {
        animation: none;
    }
    
    .eyelid-top,
    .eyelid-bottom {
        transition: none;
    }
    
    * {
        transition: none;
    }
}

/* Scrollbar Styling */
.portfolio-submenu::-webkit-scrollbar {
    height: 8px;
}

.portfolio-submenu::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

.portfolio-submenu::-webkit-scrollbar-thumb {
    background: #000;
    border-radius: 4px;
}

.portfolio-submenu::-webkit-scrollbar-thumb:hover {
    background: #333;
}
/* ---------------------------------------------------------------
   Live Web Apps — the shareable index of deployed course projects.
   Deliberately outside .portfolio-content, which is display:none and
   never revealed by any script.
   --------------------------------------------------------------- */
.live-projects {
    max-width: 1100px;
    margin: 0 auto 4rem auto;
    padding: 0 1.5rem;
}

.live-projects-title {
    font-size: 2.5rem;
    font-weight: 900;
    letter-spacing: -0.01em;
    margin: 0 0 0.25rem 0;
    text-align: center;
}

.live-projects-sub {
    text-align: center;
    margin: 0 0 2.5rem 0;
    opacity: 0.7;
    font-size: 1rem;
}

.live-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}

.live-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 2rem 1.75rem 1.5rem 1.75rem;
    border: 3px solid #000;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.92);
    text-decoration: none;
    color: inherit;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

/* The final project leads the grid on its own full-width row. */
.live-card-feature {
    grid-column: 1 / -1;
    background: #fff;
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.85);
}

.live-card-feature .live-num {
    align-self: flex-start;
    background: #000;
    color: #FFE135;
    opacity: 1;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.live-card:hover {
    transform: translateY(-6px);
    background: #fff;
    box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.85);
}

.live-num {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    opacity: 0.45;
}

.live-card h3 {
    font-size: 1.35rem;
    font-weight: 800;
    margin: 0.35rem 0 0.6rem 0;
    line-height: 1.2;
}

.live-card p {
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0 0 1.1rem 0;
    opacity: 0.8;
    flex: 1;
}

.live-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1.1rem;
}

.live-tags span {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.3rem 0.7rem;
    border: 2px solid rgba(0, 0, 0, 0.25);
    border-radius: 50px;
}

.live-go {
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}

@media (max-width: 600px) {
    .live-projects-title { font-size: 2rem; }
    .live-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------
   Entrance states that nothing ever cleared

   Two elements were left permanently invisible:

   .nav-item (ABOUT / PORTFOLIO / CONTACT) is declared opacity: 0 with
   a transition, but a transition only runs when some other rule
   changes the value, and nothing here ever does. The resting state is
   now visible and the entrance is a keyframe animation with no
   fill-mode, so the buttons are readable whether or not it plays --
   animations do not advance in a background tab, and a fill-mode of
   both would pin them back to the invisible first frame there.

   .sub-page-title depends on an IntersectionObserver adding .animate.
   The observer's root margin is -50px and the titles sit within a
   pixel or two of that line, so whether the cover appeared came down
   to the window height. Their resting state is now visible, and the
   observer is left to animate whatever it does catch.
   --------------------------------------------------------------- */
.nav-item {
    opacity: 1;
    transform: none;
    animation: navItemIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.nav-item:nth-child(1) { animation-delay: 0.15s; }
.nav-item:nth-child(2) { animation-delay: 0.30s; }
.nav-item:nth-child(3) { animation-delay: 0.45s; }

@keyframes navItemIn {
    from { opacity: 0; transform: scale(0.8) translateY(20px); }
    to   { opacity: 1; transform: none; }
}

.sub-page-title.animate-title {
    opacity: 1;
    transform: none;
}

/* ---------------------------------------------------------------
   Let a long expanded panel scroll

   .sub-page.expanded is a fixed, 100vh overlay with overflow: hidden
   and align-items: center. Any content taller than the viewport is
   centred, so it overflows off *both* edges and the top is not
   reachable by scrolling at all — with the app list in place the
   portfolio panel ran to roughly 1900px and everything above card 04
   was simply unreachable.

   Making the panel itself scroll does not help: a centred flex item
   taller than its container cannot be scrolled back to its own top.
   Capping the content at the viewport height keeps it shorter than
   the panel, so centring is a no-op and it scrolls from its own top.
   --------------------------------------------------------------- */
.sub-page.expanded .sub-page-content {
    max-height: 100vh;
    overflow-y: auto;
    padding-top: 3rem;
    padding-bottom: 3rem;
}