:root {
    --primary-color: #f0f0f0;
    --background-color: #1a1a1a;
    --accent-color: #00aaff;
    --card-background: #2a2a2a;
}

body {
    font-family: 'Roboto', sans-serif;
    background-color: var(--background-color);
    color: var(--primary-color);
    margin: 0;
    line-height: 1.6;
}

.hero {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.hero h1 {
    font-size: 4em;
    margin: 0;
}

.hero p {
    font-size: 1.5em;
    color: var(--accent-color);
}

.arrow {
    font-size: 3em;
    margin-top: 20px;
    animation: bounce 2s infinite;
}

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

main {
    width: 100%;
    overflow-x: hidden; /* Important for preventing horizontal scrollbars during animations */
}

.project {
    display: flex;
    gap: 40px;
    align-items: center;
    max-width: 1100px;
    margin: 150px auto; /* Increased margin for better animation spacing */
    padding: 40px;
    background-color: var(--card-background);
    border-radius: 10px;
}

/* --- NEW ANIMATION STYLES START HERE --- */

.project.hidden {
    opacity: 0; /* Keep elements initially invisible */
}

/* The text description will slide in */
.project-description {
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.project.hidden .project-description {
    transform: translateX(-100px);
}

.project.layout-swapped.hidden .project-description {
    transform: translateX(100px);
}

/* The media will be "revealed" from behind a sliding panel */
.project-media {
    position: relative; /* Needed for the pseudo-element */
    overflow: hidden; /* Hides the part of the image outside the reveal area */
}

.project-media::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--accent-color);
    z-index: 1;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.project.hidden .project-media::before {
    transform: translateX(0%);
}

.project:not(.hidden) .project-media::before {
    transform: translateX(-101%);
}

.project.layout-swapped:not(.hidden) .project-media::before {
    transform: translateX(101%);
}

/* --- NEW ANIMATION STYLES END HERE --- */


/* --- UPDATED LAYOUT STYLES START HERE --- */
.project-media {
    flex: 0 0 40%; /* Media takes up 40% of the width */
}
.project-description {
    flex: 1; /* Description takes the remaining space */
}
/* --- UPDATED LAYOUT STYLES END HERE --- */


.project.layout-swapped {
    flex-direction: row-reverse;
}

.project-media img {
    width: 100%;
    border-radius: 5px;
    display: block;
}

.project-description h2 {
    font-size: 2.5em;
    color: var(--accent-color);
}

.project-description p {
    font-size: 1.1em;
}

/* Responsive YouTube Embed */
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
    border-radius: 5px;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Responsive layout for smaller screens */
@media (max-width: 768px) {
    .project, .project.layout-swapped {
        flex-direction: column;
    }
}