/* Centralized Animation Keyframes and Classes */

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

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

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

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

@keyframes slideInDown {
  from { opacity: 0; transform: translateY(-50px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

@keyframes glowPulse {
  0% { box-shadow: 0 0 8px #00fff7, 0 0 16px #ff00cc; }
  50% { box-shadow: 0 0 24px #ff00cc, 0 0 32px #00fff7; }
  100% { box-shadow: 0 0 8px #00fff7, 0 0 16px #ff00cc; }
}

@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes slideOutRight {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(100%); opacity: 0; }
}

@keyframes gridMove {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 80px 80px, 120px 80px; }
}

@keyframes neonKeywordPulse {
  0%, 100% { text-shadow: 0 0 8px #00fff7, 0 0 16px #ff00cc; }
  50% { text-shadow: 0 0 12px #00fff7, 0 0 24px #ff00cc, 0 0 32px #ff00cc; }
}

@keyframes underlinePulse {
  0%, 100% { opacity: 0.6; transform: scaleX(0.8); }
  50% { opacity: 1; transform: scaleX(1); }
}

@keyframes iconGlow {
  0%, 100% { filter: drop-shadow(0 0 4px #00fff7); }
  50% { filter: drop-shadow(0 0 8px #00fff7) drop-shadow(0 0 12px #ff00cc); }
}

/* Section visibility control - Sticky Cards */
.section {
  /* Removed conflicting positioning to let main.css handle card positioning */
  width: 100%;
  max-width: 900px;
  margin: 0 auto 20px auto;
  padding: 2rem;
  border-radius: 16px;
  box-shadow: 0 2px 24px 0 #00fff7a0, 0 0 0 2px #ff00cc44;
  background: rgba(20, 22, 40, 0.95);
  border: 1.5px solid #ff00cc;
  height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  overflow-y: auto;
  overflow-x: hidden;
  pointer-events: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  /* Performance optimizations */
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* About section needs special handling for Experience section */
#about {
  /* Removed overflow styles to allow card positioning */
}

/* Experience section needs to break out of About section's overflow */
.section#about .about-infobar {
  position: relative;
  z-index: 1000;
  margin-top: 2rem;
  overflow: visible;
}

/* About Us header needs higher z-index to be visible */
.section#about h1 {
  position: relative;
  z-index: 1000;
  text-align: center;
}

/* Hide scrollbar for Webkit browsers */
.section::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for Webkit browsers */
.section::-webkit-scrollbar {
  display: none;
}

/* Z-index stacking for cards - Contact section should be fully visible */
.section:nth-child(1) { z-index: 100; }
.section:nth-child(2) { z-index: 110; }
.section:nth-child(3) { z-index: 120; }
.section:nth-child(4) { z-index: 130; }
.section:nth-child(5) { z-index: 140; } /* About section */
.section:nth-child(6) { z-index: 200; } /* Contact section - higher z-index to be fully visible */
.section:nth-child(7) { z-index: 250; }

/* Contact section z-index */
.section:nth-child(6) {
  z-index: 200;
  /* Removed conflicting positioning to let main.css handle card positioning */
}

/* Add spacing between sections for proper stacking */


/* First section - same height as others for consistent scrolling */
.section:first-child {
  height: calc(100vh - 40px);
  overflow-y: auto;
}

/* Last section - allow full content height */
.section:last-child {
  min-height: calc(100vh - 40px);
  height: auto;
}



/* Simple scroll-triggered animations */
.scroll-hidden {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform, opacity;
}

.scroll-hidden.scroll-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.scroll-hidden-left {
  opacity: 0;
  transform: translate3d(-50px, 0, 0);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform, opacity;
}

.scroll-hidden-left.scroll-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.scroll-hidden-right {
  opacity: 0;
  transform: translate3d(50px, 0, 0);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform, opacity;
}

.scroll-hidden-right.scroll-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.scroll-hidden-scale {
  opacity: 0;
  transform: scale3d(0.9, 0.9, 1);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform, opacity;
}

.scroll-hidden-scale.scroll-visible {
  opacity: 1;
  transform: scale3d(1, 1, 1);
}

/* Staggered animations */
.scroll-stagger > * {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform, opacity;
}

/* Force visibility for sticky cards */
.section .scroll-stagger > * {
  opacity: 1;
  transform: translateY(0);
}

/* Ensure all content in sections is visible */
.section * {
  opacity: 1;
  visibility: visible;
}

.section .scroll-hidden,
.section .scroll-hidden-left,
.section .scroll-hidden-right,
.section .scroll-hidden-scale {
  opacity: 1;
  transform: none;
}



.scroll-stagger > *:nth-child(1) { transition-delay: 0.1s; }
.scroll-stagger > *:nth-child(2) { transition-delay: 0.2s; }
.scroll-stagger > *:nth-child(3) { transition-delay: 0.3s; }
.scroll-stagger > *:nth-child(4) { transition-delay: 0.4s; }
.scroll-stagger > *:nth-child(5) { transition-delay: 0.5s; }
.scroll-stagger > *:nth-child(6) { transition-delay: 0.6s; }

/* Enhanced hover effects */
.scroll-visible:hover {
  transform: translateY(-2px);
  transition: transform 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none;
    transition: none;
  }
  
  .scroll-hidden,
  .scroll-hidden-left,
  .scroll-hidden-right,
  .scroll-hidden-scale,
  .scroll-stagger > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Mobile responsive adjustments for fixed navbar */
@media (max-width: 768px) {
  .section {
    top: 90px; /* Smaller offset for mobile navbar */
  }
}