@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap');

body { font-family: 'Inter', sans-serif; scroll-behavior: smooth; }

.hero { background: linear-gradient(135deg, #0a1729 0%, #1e2937 100%); }

.highlight {
  background: linear-gradient(90deg, #22d3ee, #c026d3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 8s linear infinite;
}

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

.profile-container {
  perspective: 1200px;
  transition: transform 0.3s;
}

.profile-pic {
  width: 380px; height: 380px; object-fit: cover;
  border-radius: 9999px;
  border: 12px solid rgba(34,211,238,0.3);
  box-shadow: 0 0 80px -20px #22d3ee;
  transition: transform 0.1s linear;
}

.btn-primary, .btn-secondary, .btn-resume {
  padding: 18px 42px;
  border-radius: 9999px;
  font-weight: 700;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.btn-primary { background: #22d3ee; color: #0a1729; }
.btn-secondary { border: 2px solid #22d3ee; color: white; }
.btn-resume { background: linear-gradient(45deg, #eab308, #f97316); color: white; }

.btn-primary:hover, .btn-secondary:hover, .btn-resume:hover {
  transform: translateY(-8px) scale(1.05);
  box-shadow: 0 25px 40px -10px #22d3ee;
}

.section-title:after {
  content: ''; position: absolute; bottom: -12px; left: 0;
  width: 80px; height: 4px; background: linear-gradient(to right, #22d3ee, #c026d3);
  border-radius: 9999px;
}

/* Fancy Table + 3D Hover */
.fancy-table th { padding: 24px 32px; background: #18181b; color: #67e8f9; }
.fancy-table td { padding: 28px 32px; background: #27272a; transition: all 0.5s cubic-bezier(0.23,1,0.32,1); }
.fancy-table tr:hover {
  transform: translateY(-15px) rotateX(8deg) rotateY(8deg);
  box-shadow: 0 40px 70px -20px rgba(34,211,238,0.4);
}
.repo-link, .live-link { color: #67e8f9; font-weight: 600; }
.live-link:hover { color: #22d3ee; text-decoration: underline; }

/* Skill Cards */
.skill-card {
  background: #27272a;
  padding: 48px 24px;
  border-radius: 24px;
  text-align: center;
  font-size: 1.3rem;
  font-weight: 700;
  transition: all 0.5s cubic-bezier(0.23,1,0.32,1);
  border: 1px solid transparent;
}
.skill-card:hover {
  transform: translateY(-20px) rotate(5deg);
  border-color: #22d3ee;
  box-shadow: 0 0 70px -15px #22d3ee;
  color: #67e8f9;
}
/* =============================================
   RESPONSIVE MEDIA QUERIES
   ============================================= */

/* 1. Large Laptops (Scaling down the 380px image) */
@media (max-width: 1280px) {
  .profile-pic {
    width: 320px;
    height: 320px;
  }
  .fancy-table th, .fancy-table td {
    padding: 20px 24px;
  }
}

/* 2. Tablets & Small Laptops */
@media (max-width: 1024px) {
  .profile-pic {
    width: 280px;
    height: 280px;
    border-width: 8px;
  }
  .skill-card {
    padding: 32px 20px;
    font-size: 1.1rem;
  }
  .section-title:after {
    width: 60px;
  }
}

/* 3. Mobile Devices (Tablets to Phones) */
@media (max-width: 768px) {
  .profile-pic {
    width: 220px;
    height: 220px;
    border-width: 6px;
    box-shadow: 0 0 50px -15px #22d3ee;
  }

  /* Disable extreme 3D rotations on mobile to prevent layout glitching */
  .fancy-table tr:hover {
    transform: translateY(-5px); 
    box-shadow: 0 10px 30px -10px rgba(34,211,238,0.3);
  }

  .skill-card:hover {
    transform: translateY(-10px);
  }

  /* Ensure buttons don't overflow */
  .btn-primary, .btn-secondary, .btn-resume {
    padding: 14px 28px;
    font-size: 0.9rem;
    display: block;
    width: 100%;
    text-align: center;
    margin-bottom: 1rem;
  }

  /* Table Accessibility: Allow horizontal swipe on small screens */
  .overflow-x-auto {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 24px;
  }
  
  .fancy-table {
    min-width: 600px; /* Forces swipe instead of squishing columns */
  }
}

/* 4. Small Phones */
@media (max-width: 480px) {
  .highlight {
    font-size: 2.5rem; /* Adjust based on your HTML heading size */
  }

  .profile-pic {
    width: 180px;
    height: 180px;
  }

  .fancy-table th, .fancy-table td {
    padding: 12px 15px;
    font-size: 0.85rem;
  }

  .skill-card {
    font-size: 1rem;
    padding: 24px 15px;
  }
}