@import 'reset.css';
@import 'variables.css';
@import 'layout.css';
@import 'components.css';

body {
  background-color: var(--color-background);
  color: var(--color-text);
  font-family: 'Inter', system-ui, sans-serif;
}

/* Hero Section */
.hero {
  min-height: 100vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding-top: var(--spacing-xxl);
}

.visit-btn {
    background: transparent !important;
    border: none !important;
    color: var(--color-primary) !important;
    padding: var(--spacing-sm) !important;
    font-size: 1.6rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: var(--transition-normal);
}

.visit-btn:hover {
    transform: scale(1.1);
    opacity: 0.8;
}

/* Timeline Interactivity */
.timeline-content {
    cursor: pointer;
    transition: var(--transition-normal);
}

.timeline-description {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    opacity: 0;
}

.timeline-content:hover .timeline-description,
.timeline-content.expanded .timeline-description {
    max-height: 500px;
    opacity: 1;
}

.timeline-content .fa-chevron-down {
    transition: transform 0.3s ease;
}

.timeline-content:hover .fa-chevron-down,
.timeline-content.expanded .fa-chevron-down {
    transform: rotate(180deg);
}

.hero-lottie-container {
    width: 100%;
    max-width: 600px;
    height: 500px;
    margin: 0 auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 768px) {
    .hero-lottie-container {
        height: 350px;
    }
    
    .visit-btn span {
        display: none;
    }
    
    .visit-btn {
        padding: 0.6rem;
        aspect-ratio: 1;
        justify-content: center;
        font-size: 1.4rem; /* Smaller icon size */
    }
}

.hero h1 {
  font-size: clamp(3.2rem, 5vw, 6.4rem);
  line-height: 1.1;
  margin-bottom: var(--spacing-md);
}

.hero .subtitle {
  font-size: clamp(1.8rem, 2.5vw, 2.4rem);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-xl);
}

/* About Section */
.about-content {
  display: grid;
  gap: var(--spacing-xl);
}

@media (min-width: 768px) {
  .about-content {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
}

.about-text h2 {
    margin-bottom: var(--spacing-lg);
}

.lead-text {
    font-size: 2.2rem;
    color: var(--color-primary);
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: var(--spacing-lg);
}

.about-highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--spacing-md);
    margin: var(--spacing-xl) 0;
}

.highlight-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 1.4rem;
    color: var(--color-text-secondary);
}

.highlight-item i {
    color: var(--color-primary);
    font-size: 1.8rem;
}

.skill-card {
  padding: var(--spacing-md);
  text-align: center;
}

.skill-card img {
  height: 8rem;
  margin-inline: auto;
  margin-bottom: var(--spacing-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Projects Section */
.projects-grid {
  margin-top: 2rem;
  display: grid;
  gap: var(--spacing-lg);
  grid-template-columns: repeat(auto-fill, minmax(min(30rem, 100%), 1fr));
}

/* Blog Section */
.blog-grid {
  margin-top: 2rem;
  display: grid;
  gap: var(--spacing-lg);
  grid-template-columns: repeat(auto-fill, minmax(min(35rem, 100%), 1fr));
}

/* Footer */
.footer {
  padding: var(--spacing-xl) 0;
  text-align: center;
  margin-bottom: 5rem;
}

.social-links {
  display: flex;
  justify-content: center;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.social-links a {
  color: var(--color-text);
  font-size: 2.4rem;
  transition: var(--transition-normal);
}

.social-links a:hover {
  color: var(--color-primary);
}


/* Projects */

/* .project-filters {
  display: flex;
  justify-content: left;
  gap: 1rem;
  margin-bottom: 2rem;
  margin-top: 2rem;
} */

.project-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
  margin-top: 2rem;

  @media (max-width: 768px) {
    grid-template-columns: repeat(4, minmax(50px, 1fr));
    font-size: 1.4rem;
    text-align: center;

    .filter-btn {
      padding: 0;
    }
  }
}

.filter-btn {
  padding: 0.5rem 1.5rem;
  border: none;
  background: var(--card-bg);
  border-radius: 25px;
  cursor: pointer;
  transition: var(--transition);
}

.filter-btn.active {
  background: var(--color-primary);
  color: black;
}

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

.projects-container {
  margin-top: 10rem;
  min-height: 100vh; /* Push footer down */
}

/* Loading Spinner (Maintenance Style) */
.loading {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--color-primary);
  animation: spin 1s linear infinite;
  z-index: 1000; /* Ensure it sits on top */
}

.loading::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: rgba(255, 215, 0, 0.5);
  animation: spin 2s linear infinite reverse;
}

@keyframes spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* 
   Note: The original spin animation was just rotate. 
   Because we are using translate(-50%, -50%) for centering, we must include it in the keyframes 
   OR use a wrapper. 
   
   Better approach: Use a wrapper for positioning, or adjust keyframes. 
   Let's use a wrapper-less approach by adjusting keyframes to include the translate, 
   OR simply use margins for centering if width is fixed.
   
   Actually, applying transform in animation overrides the static transform. 
   Let's use the 'margin' trick for centering since width/height is fixed (60px).
   top: 50%; left: 50%; margin-top: -30px; margin-left: -30px; 
   This avoids the translate conflict in animation.
*/

.loading {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -30px; /* Half of height */
  margin-left: -30px; /* Half of width */
  transform: none; /* Reset transform */
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--color-primary);
  animation: spin 1s linear infinite;
  z-index: 1000;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Blog */

/* .blog-filters {
  display: flex;
  justify-content: left;
  gap: 1rem;
  margin-bottom: 2rem;
  margin-top: 2rem;
} */

.blog-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
  margin-top: 2rem;

  @media (max-width: 768px) {
    grid-template-columns: repeat(4, minmax(50px, 1fr));
    font-size: 1.4rem;
    text-align: center;

    .filter-btn {
      padding: 0;
    }
  }
}

.filter-btn {
  padding: 0.5rem 1.5rem;
  border: none;
  background: var(--card-bg);
  border-radius: 25px;
  cursor: pointer;
  transition: var(--transition);
}

.filter-btn.active {
  background: var(--color-primary);
  color: black;
}

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

.blog-container {
  margin-top: 10rem;
  min-height: 80vh; /* Push footer down */
}

.tabs {
  display: flex;
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  border-radius: 25px;
  overflow: hidden;
  margin-bottom: 1.5rem;
  width: 100%;
  max-width: 300px;
  text-align: center;
  margin: 2rem auto;
}

.tab {
  flex: 1;
  text-align: center;
  padding: 1rem;
}

.tab input {
  display: none;
}

.tab input:checked + span {
  color: var(--color-background);
  background: var(--color-primary);
  border-radius: 25px;
  font-weight: 500;
}

.tab span {
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  color: var(--color-text-secondary);
}

.timeline-edu,
.timeline-exp {
  display: none;
  margin: 1.5rem auto;
}

#experience:checked ~ .timeline-exp {
  display: block;
}

#education:checked ~ .timeline-edu {
  display: block;
}

/* Viewer Specific Styles */
.spacelil {
  margin-left: 1rem;
}

#project-details a {
  text-decoration: none;
  color: #FFD700;
  transition: color 0.3s ease;
}

#project-details a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

#project-details ul,
#project-details ol {
  margin-left: 2rem;
  padding-left: 1rem;
  list-style-position: outside;
}

#project-details li {
  margin-bottom: 0.5rem;
}

/* Table Styles */
#project-details table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
  border: 1px solid var(--glass-border);
  background: var(--glass-background);
  border-radius: var(--radius-lg);
  overflow: hidden; /* For border-radius on tables */
}

#project-details th,
#project-details td {
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid var(--glass-border);
}

#project-details th {
  background: rgba(255, 255, 255, 0.05); /* Slightly lighter for header */
  color: var(--color-primary);
  font-weight: 600;
}

#project-details tr:last-child td {
  border-bottom: none;
}

#project-details tr:hover {
  background: rgba(255, 255, 255, 0.02);
}

@media (max-width: 768px) {
  #project-details table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
/* Error Page */
.error-container {
    padding: var(--spacing-xl);
    animation: errorFadeIn 0.8s ease-out;
}

@keyframes errorFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.error-animation {
    margin-bottom: var(--spacing-lg);
}

/* Skeleton Loaders */
.skeleton {
    background: linear-gradient(90deg, var(--card-bg) 25%, rgba(255, 255, 255, 0.05) 50%, var(--card-bg) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite linear;
    border-radius: var(--radius-md);
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton-card {
    height: 300px;
    width: 100%;
    border: 1px solid var(--glass-border);
}

.skeleton-text {
    height: 1.5rem;
    margin-bottom: 1rem;
    width: 80%;
}