/* --- Basic Setup --- */
body, html {
    height: 100%;
    margin: 0;
    background-color: #0d0d0d;
    color: #00bfff;
    font-family: 'Roboto Mono', monospace;
    overflow-x: hidden;
}

.theme-blue-text {
    color: #00bfff; 
}

.intro-content {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers everything horizontally */
    align: center;
}

.main-logo {
    width: 200px;
    height: auto;
    margin-bottom: 15px;
    border-radius: 50%;
}

/* Apply a fade-in animation to the projects page on load */
body.projects-page {
    animation: fadeInAnimation 1s ease-in forwards;
}

/* --- Intro Section Styles (index.html) --- */
#intro-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    text-align: center;
    padding: 0 20px;
}

#projects-link {
    text-decoration: none;
}

.glitch {
    font-size: 6rem;
    font-weight: 700;
    text-transform: uppercase;
    position: relative;
    color: #ffffff;
    text-shadow: 0 0 5px #00bfff, 0 0 10px #00bfff, 0 0 20px #00bfff;
    cursor: pointer;
    user-select: none;
    animation: pulsate-glow 2s infinite ease-in-out;
}

.subtitle {
    font-size: 1.5rem;
    margin-top: 20px;
    letter-spacing: 3px;
}

/* --- Gallery & Project Styles (projects.html) --- */
#gallery-container {
    padding: 40px 5%;
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center; /* Ensures the project containers themselves are centered */
}

.section-title {
    font-size: 2.5rem;
    text-align: center;
    color: #00bfff;
    margin-bottom: 40px;
    margin-top: 60px;
}

#gallery-container div:first-child .section-title {
    margin-top: 20px;
}

/* --- Featured & Recent Project Styles --- */
#featured-project, #recent-projects {
    width: 100%;
    max-width: 800px; /* Limits width for better readability when centered */
}

.featured-item {
    display: flex; 
    flex-direction: column; /* Stacked for perfect center alignment */
    align-items: center;
    background: #1a1a1a;
    border: 1px solid #00bfff;
    border-radius: 8px;
    text-decoration: none;
    color: #e0e0e0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 30px;
    width: 100%;
}

.featured-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(0, 191, 255, 0.25);
}

.featured-item img {
    max-width: 250px;
    margin: 30px 30px 10px 30px; /* Reduced bottom margin */
    border-radius: 5px;
}

.featured-details {
    padding: 20px 30px 30px 30px;
    text-align: center; /* Centers the text labels */
    width: 100%;
    box-sizing: border-box;
}

.featured-details h3 {
    font-size: 2rem;
    margin-top: 0;
    margin-bottom: 10px;
    color: #00bfff;
}

.featured-details p {
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0 auto;
    max-width: 600px; /* Prevents text from stretching too wide */
}

/* --- Animation Classes --- */
@keyframes fadeInAnimation {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes pulsate-glow {
    0% { text-shadow: 0 0 5px #00bfff, 0 0 10px #00bfff, 0 0 20px #00bfff; }
    50% { text-shadow: 0 0 10px #00bfff, 0 0 20px #00bfff, 0 0 40px #00bfff; }
    100% { text-shadow: 0 0 5px #00bfff, 0 0 10px #00bfff, 0 0 20px #00bfff; }
}

/* Animation for the down arrow */
.scroll-arrow {
    color: #003b99; /* Matches your theme color */
    margin-top: 30px;
    margin-bottom: 10px;
    animation: bounce 2s infinite;
    display: inline-block;
}

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

/* Optional: Subtle glow to match a 'glitch' or tech theme */
.scroll-arrow svg {
    filter: drop-shadow(0 0 5px rgba(0, 59, 153, 0.5));
}

/*
==============================================
MOBILE & RESPONSIVE STYLES
==============================================
*/
@media (max-width: 768px) {
    .glitch {
        font-size: 3.5rem;
    }

    .subtitle {
        font-size: 1rem;
    }

    .section-title {
        font-size: 2rem;
    }
    
    .featured-item img {
        max-width: 70%;
    }
    
    .featured-details h3 {
        font-size: 1.5rem;
    }
}

#gallery-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Add this to your existing style.css */

.music-container {
    background: #1a1a1a;
    border: 1px solid #00bfff; /* Keeps the neon blue theme */
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 80px;
    max-width: 1200px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.music-container:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 191, 255, 0.2);
}

/* Ensure the iframe looks clean inside the container */
#sc-widget {
    border-radius: 4px;
    display: block;
}

/* 1. Define the animation for the arrow container */
.scroll-arrow {
    color: #003b99; /* This sets the 'currentColor' in your SVG */
    margin-top: 20px;
    margin-bottom: 10px;
    display: inline-block;
    
    /* This connects the animation defined below */
    animation: bounce 2s infinite; 
}

/* 2. Define the 'bounce' movement */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

/* Optional: Adds a subtle glow effect to the arrow */
.scroll-arrow svg {
    filter: drop-shadow(0 0 5px rgba(0, 59, 153, 0.4));
}


.back-button-container {
    margin: 20px 0; /* Adjust spacing as needed */
}

.fancy-back-btn {
    display: inline-flex;
    align-items: center;
    padding: 10px 24px;
    background-color: transparent;
    color: #00aaff; /* Match your featured blue */
    text-decoration: none;
    font-family: 'Courier New', Courier, monospace; /* Tech/code feel */
    font-size: 1.1rem;
    font-weight: bold;
    border: 2px solid #00aaff;
    border-radius: 6px;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 0 8px rgba(0, 170, 255, 0.2);
}

.fancy-back-btn .arrow {
    margin-right: 10px;
    font-size: 1.3rem;
    transition: transform 0.3s ease;
}

/* Hover Effects */
.fancy-back-btn:hover {
    background-color: #00aaff;
    color: #0d0d0d; /* Dark text contrast on hover */
    box-shadow: 0 0 15px rgba(0, 170, 255, 0.6);
    transform: translateY(-2px);
}

.fancy-back-btn:hover .arrow {
    transform: translateX(-4px); /* Pushes the arrow left slightly on hover */
}