/* ======================================
   1. Base & Global Styles
   ====================================== */
html, body {
  margin: 0;
  padding: 0;
  background-color: #0a0a0a;
  color: #fcefdc;
  font-family: 'Sour Gummy', sans-serif;
  box-sizing: border-box;
  scroll-behavior: smooth;
}
*, *::before, *::after { box-sizing: inherit; }
a { text-decoration: none; color: #fcefdc; transition: color 0.3s; }
a:hover { color: #ffcc99; }
section { padding: 4rem 2rem; }
h2 { font-size: 3rem; font-weight: 900; margin: 0; }
strong { color: #ffcc99; }


.social-icons {
  display: flex;
  gap: 10px;
}

.icon-link img {
  transition: transform 0.3s ease, filter 0.3s ease;
}

.social-icons {
  display: flex;
  gap: 10px;
}

.icon-link {
  background-color: #fcefdc;
  border-radius: 50%;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.icon-link img {
  filter: invert(0%) brightness(0);
  width: 30px;
  height: 30px;
}

.icon-link:hover {
  transform: scale(1.1);
}

/* ======================================
   2. Reveal on Scroll Animation
   ====================================== */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s ease-in-out, transform 1s ease-in-out;
  will-change: opacity, transform;
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ======================================
   3. Navigation, About, Skills
   ====================================== */
nav {
  position: sticky; top: 0; left: 0; width: 100%;
  background-color: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(10px);
  z-index: 1000;
  display: flex; justify-content: center; gap: 2rem;
  padding: 1.5rem; font-size: 1.2rem; border-bottom: 1px solid #333;
}
#about { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 2rem; max-width: 1200px; margin: 0 auto; }
.about-left { flex: 1.5; min-width: 300px; text-align: center; }
#picLandy img { max-width: 100%; width: 700px; display: block; margin: 0 auto; }
#picLandy figcaption { font-family: 'Inter', sans-serif; margin-top: 1.5rem; font-size: 1.1rem; line-height: 1.5; }
.graduation-icon { font-size: 1.2rem; vertical-align: middle; margin-right: 0.4rem; }
.about-right {
  flex: 1; min-width: 280px; display: flex; flex-direction: column;
  align-items: flex-start; justify-content: center; gap: 2rem; padding-left: 2rem;
}
.social-icons { display: flex; gap: 1.5rem; }
.social-icons a img { width: 2.5rem; transition: transform 0.2s; }
.social-icons a:hover img { transform: scale(1.2); }
.role-item {
  font-weight: 700; font-size: 1.1rem; display: flex; align-items: center;
  gap: 1rem; text-transform: uppercase; letter-spacing: 2px;
}
.role-item::before { content: "↳"; font-size: 1.5rem; display: inline-block; color: #ffcc99; }
#skills { display: flex; align-items: flex-start; gap: 2rem; flex-wrap: wrap; max-width: 1200px; margin: 0 auto; }
.skills-left { flex: 1; min-width: 200px; }
.skills-right { flex: 2; max-width: 800px; width: 100%; }
.skills-box { border: 2px solid #fcefdc; border-radius: 40px; padding: 2rem; display: flex; align-items: center; gap: 2.5rem; }
.skills-icon { width: 4rem; filter: brightness(0) invert(1); }
.skills-text p { font-family: 'Inter', sans-serif; font-size: 1.1rem; line-height: 1.6; }

/* ======================================
   4. Projects Grid
   ====================================== */
#projects { text-align: center; }
#projects h2 { text-align: center; width: 100%; margin-bottom: 3rem; }

.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

@media (min-width: 1024px) {
    #projects .project-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.project-card {
    border: 2px solid #fcefdc;
    border-radius: 40px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}
.project-card:hover {
    transform: translateY(-10px);
    background: #fcefdc;
    color: #0a0a0a;
}
.project-image {
    width: 100%;
    height: 220px;
    object-fit: cover;
}
.project-info {
    padding: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.project-info h3 {
    font-size: 1.8rem;
    margin: 0 0 0.5rem 0;
}
.project-info p {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    flex-grow: 1;
}
.tech-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}
.tech-tag {
    background-color: #fcefdc;
    border: 1px solid #0a0a0a;
    color: #0a0a0a;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
}
.project-card:hover .tech-tag {
    background-color: #0a0a0a;
    border-color: #0a0a0a;
    color: #fcefdc;
}

/* ======================================
   5. Creative Community Section
   ====================================== */
.full-width-section {
    padding: 5rem 0;
    background-color: #111; /* Darker background for contrast */
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4"%3E%3Cpath fill="%23222" fill-opacity="0.4" d="M1 3h1v1H1V3zm2-2h1v1H3V1z"%3E%3C/path%3E%3C/svg%3E');
    background-attachment: fixed; /* Parallax effect */
}
.community-grid-creative {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2.5rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}
.community-card-creative {
    border-radius: 30px;
    overflow: hidden;
    position: relative;
    height: 420px;
    background-size: cover;
    background-position: center;
    border: 2px solid #333;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.community-card-creative::before {
    content: '';
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.community-card-creative:hover::before {
    transform: scale(1.05);
}
.card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10,10,10,0.98) 30%, rgba(10,10,10,0.1));
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: #fcefdc;
    border-radius: 30px;
    transition: background 0.4s ease;
}
.community-card-creative:hover .card-overlay {
    background: linear-gradient(to top, rgba(10,10,10,0.9) 20%, transparent);
}
.card-overlay h4 {
    font-size: 2rem;
    margin: 0 0 0.5rem 0;
    color: #fcefdc;
}
.card-overlay p {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    opacity: 0.9;
}
.card-overlay .button-secondary {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    align-self: flex-start;
}
.community-card-creative:hover .button-secondary {
    opacity: 1;
    transform: translateY(0);
}


/* ======================================
   6. Awards Timeline
   ====================================== */
#awards { display: flex; flex-direction: column; align-items: center; padding-bottom: 5rem; max-width: 1200px; margin: 0 auto; }
.awards-header { text-align: center; margin-bottom: 3rem; }
.awards-header p { font-family: 'Inter', sans-serif; font-size: 1.1rem; color: #b0a8ba; }
.awards-timeline { width: 100%; position: relative; padding: 2rem 0; }
.timeline-items { display: flex; justify-content: space-between; position: relative; }
.timeline-line { position: absolute; top: 25px; left: 5%; width: 90%; height: 2px; background-color: #333; z-index: -1; }
.timeline-item { display: flex; flex-direction: column; align-items: center; position: relative; width: 22%; /* Adjusted for 4 items */ }
.timeline-dot { width: 20px; height: 20px; background-color: #fcefdc; border-radius: 50%; border: 4px solid #0a0a0a; margin-bottom: 1rem; }
.timeline-date { font-family: 'Sour Gummy', sans-serif; font-size: 1.5rem; font-weight: 700; color: #ffcc99; margin-bottom: 1rem; }
.timeline-content {
    background-color: #1c1c2e; border: 1px solid #333; border-radius: 15px; padding: 1.5rem;
    width: 100%; text-align: center; transition: transform 0.3s ease;
}
.timeline-content:hover { transform: translateY(-5px); border-color: #ffcc99; }
.timeline-content h3 { font-family: 'Sour Gummy', sans-serif; font-size: 1.2rem; margin: 0 0 0.5rem 0; }
.timeline-content p { font-family: 'Inter', sans-serif; font-size: 0.95rem; line-height: 1.5; margin: 0; }

/* ======================================
   7. Outside-Tech & Footer
   ====================================== */
.section-header { text-align: center; margin-bottom: 3rem; }
.outside-tech-container { display: flex; align-items: center; justify-content: center; gap: 3rem; max-width: 900px; margin: 0 auto; flex-wrap: wrap; }
.outside-tech-text { flex: 1; min-width: 300px; }
.outside-tech-text p { font-family: 'Inter', sans-serif; font-size: 1.1rem; line-height: 1.8; text-align: left; }
.outside-tech-image { flex: 0 1 300px; }
.outside-tech-image img { width: 100%; height: auto; display: block; border-radius: 20px; }
footer {
    padding: 3rem 2rem; text-align: center;
    border-top: 1px solid #333; margin-top: 2rem;
    font-family: 'Inter', sans-serif;
}

/* ======================================
   8. Modal Styles
   ====================================== */
.modal {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.85);
    backdrop-filter: blur(5px); z-index: 2000; align-items: center; justify-content: center; padding: 2rem;
}
.modal.show { display: flex; }
.modal-content {
    background: #1c1c2e; border: 2px solid #fcefdc; border-radius: 40px; max-width: 900px;
    width: 95%; padding: 2rem 2.5rem; position: relative; text-align: left;
}
.modal-close {
    position: absolute; top: 1rem; right: 1.5rem; font-size: 2.5rem;
    background: none; border: none; color: #fcefdc; cursor: pointer; line-height: 1;
}
.modal-header {
    display: flex; justify-content: space-between; align-items: center;
    padding-bottom: 1rem; border-bottom: 2px solid #fcefdc; margin-bottom: 1.5rem;
}
.modal-header h3 { font-size: 2.2rem; margin: 0; }
.button-secondary {
    background: transparent; color: #fcefdc; border: 2px solid #fcefdc;
    padding: 0.5rem 1.5rem; border-radius: 30px; font-family: 'Inter', sans-serif;
    font-weight: bold; text-decoration: none; transition: all 0.3s;
}
.button-secondary:hover { background: #fcefdc; color: #0a0a0a; }
.modal-body { display: flex; gap: 2rem; }
.modal-image-container { flex: 0 0 40%; }
.modal-image { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; max-height: 500px; }
.modal-text-container {
    flex: 1; max-height: 65vh; overflow-y: auto; padding-right: 1rem;
    scrollbar-width: thin; scrollbar-color: #fcefdc #1c1c2e;
}
.modal-text-container::-webkit-scrollbar { width: 8px; }
.modal-text-container::-webkit-scrollbar-track { background: #1c1c2e; }
.modal-text-container::-webkit-scrollbar-thumb { background-color: #fcefdc; border-radius: 20px; }
.modal-text-container h4 { font-size: 1.5rem; margin-top: 1rem; margin-bottom: 0.5rem; color: #ffcc99; }
.modal-text-container h4:first-child { margin-top: 0; }
.modal-text-container p, .modal-text-container ul { font-family: 'Inter', sans-serif; line-height: 1.7; }
.modal-text-container ul { padding-left: 20px; margin-bottom: 1rem; }

/* ======================================
   9. Responsive Adjustments
   ====================================== */
@media (max-width: 950px) { /* Adjusted breakpoint for timeline scroll */
    .awards-timeline { 
        overflow-x: auto; 
        padding-bottom: 2rem;
        scrollbar-width: thin;
        scrollbar-color: #ffcc99 #1c1c2e;
    }
    .awards-timeline::-webkit-scrollbar { height: 8px; }
    .awards-timeline::-webkit-scrollbar-track { background: #1c1c2e; }
    .awards-timeline::-webkit-scrollbar-thumb { background-color: #ffcc99; border-radius: 20px; }
    
    .timeline-items { 
        width: max-content; 
        padding: 0 2rem; 
        justify-content: flex-start; 
        gap: 4rem; 
    }
    .timeline-item {
        width: 280px; /* Fixed width for scrolling items */
    }
    .timeline-line { 
        left: 2rem; 
        width: calc(100% - 4rem); 
    }
}

@media (max-width: 850px) {
    .modal-body { flex-direction: column; }
    .modal-text-container { max-height: none; overflow-y: visible; padding-right: 0; }
}
@media (max-width: 768px) {
    h2 { font-size: 2.5rem; }
    #about, #skills { flex-direction: column; text-align: center; }
    .about-right { align-items: center; padding-left: 0; }
    .skills-left { text-align: center; width: 100%; }
    .skills-box { flex-direction: column; text-align: center; }
    .outside-tech-container { text-align: center; }
    .outside-tech-text p { text-align: center; }
}