/* Smooth scroll behavior */
html{
  scroll-behavior:smooth;
}

/* Subtle gradient background overlay */
body::before{
  content:'';
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:radial-gradient(circle at 20% 50%, rgba(95, 97, 242, 0.02) 0%, transparent 50%),
             radial-gradient(circle at 80% 80%, rgba(165, 180, 252, 0.02) 0%, transparent 50%);
  pointer-events:none;
  z-index:0;
}
html:not(.dark) body::before{
  background:radial-gradient(circle at 20% 50%, rgba(95, 97, 242, 0.015) 0%, transparent 50%),
             radial-gradient(circle at 80% 80%, rgba(165, 180, 252, 0.015) 0%, transparent 50%);
}
body > *{
  position:relative;
  z-index:1;
}

/* Hero title styling */
.hero-title{
  font-family:'Plus Jakarta Sans', sans-serif;
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:1.1;
  position:relative;
}

.hero-highlight{
  color:#5F61F2;
  font-weight:800;
}

.dark .hero-highlight{
  color:#A5B4FC;
}

/* Section label decorative styling */
.text-sm.text-\[\#5F61F2\],
.text-sm.dark\:text-\[\#A5B4FC\]{
  position:relative;
  font-weight:600;
  letter-spacing:0.05em;
}

/* About page highlight styling */
html:not(.dark) .about-highlight{
  color:#5F61F2 !important;
  font-weight:500;
}

html.dark .about-highlight{
  color:#A5B4FC !important;
  font-weight:500;
}

/* Hero social links hover styling */
.hero-social-link{
  transition:all 0.2s ease;
  position:relative;
  padding-bottom:2px;
}

.hero-social-link::after{
  content:'';
  position:absolute;
  left:0;
  bottom:0;
  width:0;
  height:2px;
  background:#5F61F2;
  transition:width 0.3s ease;
}

.dark .hero-social-link::after{
  background:#A5B4FC;
}

.hero-social-link:hover::after{
  width:100%;
}

html:not(.dark) .hero-social-link:hover{
  color:#5F61F2 !important;
}

html.dark .hero-social-link:hover{
  color:#A5B4FC !important;
}

/* Wave hand animation */
.wave-hand{
  display:inline-block;
  animation:wave 2.5s ease-in-out infinite;
  transform-origin:70% 70%;
  color:#5F61F2;
  width:28px;
  height:28px;
}
.dark .wave-hand{
  color:#A5B4FC;
}
@keyframes wave{
  0%, 100%{transform:rotate(0deg);}
  10%, 30%{transform:rotate(14deg);}
  20%{transform:rotate(-8deg);}
  40%{transform:rotate(-4deg);}
  50%{transform:rotate(10deg);}
  60%{transform:rotate(0deg);}
}

/* Scrolling skills bar animation */
.scroll-container{
  display:flex;
  overflow:hidden;
}
.scroll-content{
  display:flex;
  gap:2rem;
  animation:scroll 30s linear infinite;
  white-space:nowrap;
}
.scroll-item{
  font-size:1.5rem;
  font-weight:500;
  color:#9ca3af;
  display:inline-flex;
  align-items:center;
}
.dark .scroll-item{
  color:#9ca3af;
}
.scroll-divider{
  color:#d1d5db;
  font-size:1rem;
  display:inline-flex;
  align-items:center;
}
.dark .scroll-divider{
  color:#6b7280;
}
@keyframes scroll{
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}

/* Project cards grid container */
.projects-grid{
  display:grid;
  gap:2rem;
  margin-bottom:5rem;
}
@media (min-width: 768px) {
  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
    margin-bottom:8rem;
  }
}

/* Project cards */
.project-card{
  border-radius:1.5rem;
  overflow:hidden;
  transition:transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  cursor:pointer;
  border:1px solid #e5e7eb;
  background-color:white;
  box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}
.dark .project-card{
  background-color:#1f1f1f !important;
  border:1px solid #333333;
  box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
}
.project-card:hover{
  transform:translateY(-8px);
  border-color:#5F61F2;
  box-shadow:0 0 0 4px rgba(95, 97, 242, 0.1), 0 20px 40px rgba(0, 0, 0, 0.15);
}
.dark .project-card:hover{
  border-color:#A5B4FC;
  box-shadow:0 0 0 4px rgba(165, 180, 252, 0.15), 0 20px 40px rgba(0, 0, 0, 0.6);
}
/* Staggered layout - offset every even card in desktop view */
@media (min-width: 768px) {
  .project-card:nth-child(even) {
    transform: translateY(3rem);
  }
  .project-card:nth-child(even):hover {
    transform: translateY(calc(3rem - 8px));
  }
}

.project-card-image{
  aspect-ratio:4/3;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2rem;
}
.project-card-image img{
  border-radius:1rem;
  width:100%;
  height:100%;
  object-fit:contain;
  box-shadow:0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.project-card-content{
  padding:1.5rem;
}
.project-card-title{
  font-size:1.5rem;
  font-weight:700;
  margin-bottom:0.75rem;
}
.project-card-meta{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
}
.project-card-type{
  color:#6b7280;
}
.dark .project-card-type{
  color:#d1d5db;
}
.project-card-year{
  font-size:0.875rem;
  color:#9ca3af;
}
.dark .project-card-year{
  color:#9ca3af;
}

/* Page fade-in animation */
@keyframes fadeIn{
  from{opacity:0;transform:translateY(10px);}
  to{opacity:1;transform:translateY(0);}
}
main{
  animation:fadeIn 0.6s ease-out;
}

/* Fade-in on scroll animation */
.fade-in-section{
  opacity:0;
  transform:translateY(30px);
  transition:opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fade-in-section.visible{
  opacity:1;
  transform:translateY(0);
}

/* Reveal text character animation - Typewriter style with double layer */
.reveal-text{
  display:flex;
  flex-wrap:wrap;
  gap:0.25rem;
  justify-content:center;
}
.reveal-text .char{
  position:relative;
  display:inline-block;
}
.reveal-text .char .char-inner{
  position:absolute;
  top:0;
  left:0;
  color:#9ca3af;
  z-index:0;
}
.dark .reveal-text .char .char-inner{
  color:#9ca3af;
}
.reveal-text .char .char-visible{
  position:relative;
  z-index:1;
  opacity:0;
  color:#111827;
  transition:opacity 0.1s ease-out;
}
.dark .reveal-text .char .char-visible{
  color:#ffffff;
}

/* Smooth transitions for theme switching */
body, header, main, footer, .btn-primary, .btn-outline, .input, .card, .faq, .navlink.active::after, a{
  transition:background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
/* Scroll effects for navigation */
#nav{
  transition:background-color 0.3s ease, color 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease;
  background-color:#f9fafb !important;
}
.dark #nav{
  background-color:#0D0D0D !important;
}
/* White background with blur on scroll */
#nav.scrolled{
  background-color:rgba(255, 255, 255, 0.95) !important;
  backdrop-filter:blur(10px);
  box-shadow:0 2px 10px rgba(0, 0, 0, 0.05);
}
.dark #nav.scrolled{
  background-color:rgba(13, 13, 13, 0.95) !important;
  backdrop-filter:blur(10px);
  box-shadow:0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Logo hover effect */
#nav a[href="index.html"].font-semibold,
#nav a[href="../index.html"].font-semibold{
  transition:color 0.2s ease, transform 0.2s ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
#nav a[href="index.html"].font-semibold:hover,
#nav a[href="../index.html"].font-semibold:hover{
  color:#5F61F2 !important;
  transform:scale(1.1);
}
.dark #nav a[href="index.html"].font-semibold:hover,
.dark #nav a[href="../index.html"].font-semibold:hover{
  color:#A5B4FC !important;
}

/* Theme toggle button styling */
#themeToggle{
  width:40px;
  height:40px;
  border-radius:50%;
  border:2px solid #e0e0e0;
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  font-size:20px;
}
.dark #themeToggle{
  border-color:#404040;
}
#themeToggle:hover{
  background:rgba(0,0,0,0.05);
}
.dark #themeToggle:hover{
  background:rgba(255,255,255,0.1);
}

/* Unified button styles - all outline style */
.btn-primary, .btn-outline{
  padding:.5rem 1rem;
  border-radius:9999px;
  font-weight:500;
  transition:all 0.2s ease;
  text-decoration:none;
  display:inline-block;
  background-color:white;
  color:black;
  border:1px solid #000;
  box-shadow:0 2px 4px rgba(0, 0, 0, 0.05);
}

.btn-primary:hover, .btn-outline:hover{
  background-color:#5F61F2;
  border-color:#5F61F2;
  color:white;
  transform:translateY(-2px) scale(1.05);
  box-shadow:0 6px 16px rgba(95, 97, 242, 0.4);
}

/* Dark mode styles */
.dark .btn-primary, .dark .btn-outline{
  background-color:#0D0D0D;
  color:white;
  border-color:#fff;
  box-shadow:0 2px 4px rgba(0, 0, 0, 0.3);
}

.dark .btn-primary:hover, .dark .btn-outline:hover{
  background-color:#A5B4FC;
  border-color:#A5B4FC;
  color:#0D0D0D;
  transform:translateY(-2px) scale(1.05);
  box-shadow:0 6px 16px rgba(165, 180, 252, 0.4);
}
.input{
  padding:.75rem 1rem;
  border-radius:.75rem;
  border:1px solid #ccc;
  background-color:white;
  color:black;
  transition:border-color 0.2s ease, box-shadow 0.2s ease;
}
.input:focus{
  outline:none;
  border-color:#5F61F2;
  box-shadow:0 0 0 3px rgba(95, 97, 242, 0.1);
}
.dark .input{
  border-color:#404040;
  background-color:#1f1f1f;
  color:white;
}
.dark .input:focus{
  border-color:#A5B4FC;
  box-shadow:0 0 0 3px rgba(165, 180, 252, 0.1);
}
.navlink{
  position:relative;
  padding:0.5rem 0.75rem;
  border-radius:0.5rem;
  transition:background-color 0.2s ease, color 0.2s ease;
}
/* Reduce navigation spacing on mobile */
@media (max-width: 767px) {
  .navlink {
    padding:0.5rem 0.4rem;
    font-size:0.813rem;
  }
}
.navlink:hover, .navlink:focus{
  background-color:rgba(99, 102, 241, 0.15);
  color:#4F46E5;
  outline:none;
}
.dark .navlink:hover, .dark .navlink:focus{
  background-color:rgba(165, 180, 252, 0.2);
  color:#C7D2FE;
}
.navlink.active::after{content:'';position:absolute;bottom:2px;left:50%;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background:#5F61F2;}
.dark .navlink.active::after{background:#A5B4FC;}
.card{
  border:1px solid #ddd;
  border-radius:1rem;
  overflow:hidden;
  background-color:white;
  transition:transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow:0 2px 8px rgba(0, 0, 0, 0.05);
}
.dark .card{
  border-color:#333;
  background-color:#1a1a1a;
  box-shadow:0 2px 8px rgba(0, 0, 0, 0.3);
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 24px rgba(0, 0, 0, 0.12);
}
.dark .card:hover{
  box-shadow:0 8px 24px rgba(0, 0, 0, 0.5);
}
.faq{
  padding:1.125rem 1.5rem;
  border:1px solid #e5e7eb;
  border-radius:1rem;
  background-color:white;
  transition:all 0.2s ease;
  cursor:pointer;
  box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.03), 0 1px 2px -1px rgba(0, 0, 0, 0.02);
}
.dark .faq{
  border-color:#2a2a2a;
  background-color:#0D0D0D;
  box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 1px 2px -1px rgba(0, 0, 0, 0.15);
}
.faq:hover{
  border-color:#d1d5db;
  box-shadow:0 4px 8px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.03);
  transform:translateY(-1px);
}
.dark .faq:hover{
  border-color:#404040;
  box-shadow:0 4px 8px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.25);
}
.faq[open]{
  background-color:white;
  border-color:#d1d5db;
}
.dark .faq[open]{
  background-color:#0D0D0D;
  border-color:#404040;
}
.faq summary{
  font-weight:500;
  font-size:0.938rem;
  cursor:pointer;
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#1f2937;
}
.dark .faq summary{
  color:#ffffff;
}
.faq summary::-webkit-details-marker{
  display:none;
}
.faq summary::after{
  content:'↓';
  font-size:0.875rem;
  color:#5F61F2;
  transition:transform 0.3s ease;
  flex-shrink:0;
  margin-left:1rem;
}
.dark .faq summary::after{
  color:#A5B4FC;
}
.faq[open] summary::after{
  transform:rotate(180deg);
}
.faq p{
  margin-top:0.875rem;
  padding-top:0.875rem;
  border-top:1px solid #f3f4f6;
  color:#6b7280;
  line-height:1.7;
  font-size:0.875rem;
}
.dark .faq p{
  border-top-color:#1a1a1a;
  color:#d1d5db;
}

/* Footer Section */
.footer-section{
  border-top:1px solid rgba(0, 0, 0, 0.1);
  background-color:#f9fafb;
}
.dark .footer-section{
  border-top-color:rgba(255, 255, 255, 0.1);
  background-color:#0D0D0D;
}

.footer-heading{
  font-size:1.25rem;
  font-weight:600;
  color:#111827;
  margin-bottom:0.75rem;
  letter-spacing:-0.02em;
}
.dark .footer-heading{
  color:#eeeeee;
}

.footer-subtext{
  font-size:0.875rem;
  line-height:1.4;
  color:#6b7280;
  margin-bottom:0.25rem;
}
.dark .footer-subtext{
  color:#d1d5db;
}

.footer-email{
  display:inline-block;
  font-size:0.875rem;
  font-weight:500;
  color:#5F61F2;
  text-decoration:none;
  transition:opacity 0.2s ease;
}
.dark .footer-email{
  color:#A5B4FC;
}
.footer-email:hover{
  opacity:0.8;
}

.footer-divider{
  width:1px;
  height:24px;
  background-color:#e5e7eb;
}
.dark .footer-divider{
  background-color:#333333;
}

.footer-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:50%;
  background-color:#e5e7eb;
  color:#4b5563;
  transition:background-color 0.2s ease, color 0.2s ease;
  text-decoration:none;
}
.footer-icon svg{
  width:16px;
  height:16px;
}
.dark .footer-icon{
  background-color:#1f1f1f;
  color:#d1d5db;
  border:1px solid #333333;
}
.footer-icon:hover{
  background-color:#5F61F2;
  color:white;
}
.dark .footer-icon:hover{
  background-color:#A5B4FC;
  color:#0D0D0D;
}

.footer-copyright{
  font-size:0.75rem;
  color:#9ca3af;
  margin:0;
}
.dark .footer-copyright{
  color:#9ca3af;
}

/* Form status messages */
.form-status-success{
  padding:1rem;
  border-radius:0.5rem;
  margin-top:0.5rem;
  background-color:#F5F3FF !important;
  color:#5F61F2 !important;
  border:1px solid #E0E7FF !important;
}
.dark .form-status-success{
  background-color:rgba(99, 102, 241, 0.1) !important;
  color:#A5B4FC !important;
  border:1px solid rgba(165, 180, 252, 0.2) !important;
}

.form-status-error{
  padding:1rem;
  border-radius:0.5rem;
  margin-top:0.5rem;
  background-color:#FEF2F2 !important;
  color:#DC2626 !important;
  border:1px solid #FECACA !important;
}
.dark .form-status-error{
  background-color:rgba(220, 38, 38, 0.1) !important;
  color:#FCA5A5 !important;
  border:1px solid rgba(252, 165, 165, 0.2) !important;
}

/* Skills Section */
.skill-category{
  background-color:white;
  border-radius:1rem;
  padding:2rem;
  border:1px solid #e5e7eb;
  box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}
.dark .skill-category{
  background-color:#1f1f1f;
  border:1px solid #333333;
  box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
}
.skill-category:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
}
.dark .skill-category:hover{
  box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
}

.skill-category-title{
  font-size:1.25rem;
  font-weight:700;
  color:#5F61F2;
  margin-bottom:1rem;
  padding-bottom:0.75rem;
  border-bottom:2px solid #5F61F2;
}
.dark .skill-category-title{
  color:#A5B4FC;
  border-bottom-color:#A5B4FC;
}

.skill-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:0.5rem;
}
.skill-list li{
  color:#4b5563;
  padding-left:1.25rem;
  position:relative;
}
.dark .skill-list li{
  color:#d1d5db;
}
.skill-list li::before{
  content:'▹';
  position:absolute;
  left:0;
  color:#5F61F2;
  font-weight:700;
}
.dark .skill-list li::before{
  color:#E0E7FF;
}
.skill-subtext{
  font-size:0.875rem;
  font-weight:400;
  opacity:0.7;
}

/* Timeline Section */
.timeline{
  position:relative;
  padding-left:2rem;
}
/* Vertical line */
.timeline::before{
  content:'';
  position:absolute;
  left:0.5rem;
  top:0;
  bottom:0;
  width:2px;
  background:linear-gradient(to bottom, #5F61F2, #A5B4FC);
}
.dark .timeline::before{
  background:linear-gradient(to bottom, #A5B4FC, #5F61F2);
}

.timeline-item{
  position:relative;
  padding-bottom:3rem;
}
.timeline-item:last-child{
  padding-bottom:0;
}

.timeline-dot{
  position:absolute;
  left:-1.9rem;
  top:0.375rem;
  width:1rem;
  height:1rem;
  background-color:#5F61F2;
  border-radius:50%;
  border:3px solid white;
  z-index:1;
}
.dark .timeline-dot{
  background-color:#A5B4FC;
  border-color:#0D0D0D;
}

.timeline-content{
  background-color:white;
  border-radius:0.75rem;
  padding:1.5rem;
  border:1px solid #e5e7eb;
  box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}
.dark .timeline-content{
  background-color:#1f1f1f;
  border:1px solid #333333;
  box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
}

.timeline-date{
  display:inline-block;
  font-size:0.875rem;
  font-weight:600;
  color:#5F61F2;
  background-color:rgba(95, 97, 242, 0.1);
  padding:0.25rem 0.75rem;
  border-radius:9999px;
  margin-bottom:0.75rem;
}
.dark .timeline-date{
  color:#A5B4FC;
  background-color:rgba(165, 180, 252, 0.1);
}

.timeline-title{
  font-size:1.25rem;
  font-weight:700;
  margin-bottom:0.25rem;
  color:#111827;
}
.dark .timeline-title{
  color:#f3f4f6;
}

.timeline-role{
  font-size:1rem;
  font-weight:500;
  color:#6b7280;
  margin-bottom:0.5rem;
}
.dark .timeline-role{
  color:#d1d5db;
}

.timeline-description{
  font-size:0.875rem;
  color:#4b5563;
  line-height:1.6;
}
.dark .timeline-description{
  color:#d1d5db;
}

/* About page hero image - darken in dark mode */
.about-hero-image{
  transition:filter 0.3s ease;
}
.dark .about-hero-image{
  filter:brightness(0.7);
}

/* Reduced motion preferences for accessibility */
@media (prefers-reduced-motion: reduce) {
  /* Remove all animations and transitions */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Make typewriter text immediately visible */
  .reveal-text .char .char-visible {
    opacity: 1 !important;
  }

  /* Keep hover effects but remove transitions */
  .project-card:hover {
    transform: none;
  }
  .project-card:nth-child(even):hover {
    transform: translateY(3rem);
  }

  /* Keep staggered layout but remove transform animations */
  html {
    scroll-behavior: auto !important;
  }
}