/* Animations */

/* Reveal Text Animation */
.reveal-text {
    position: relative;
    opacity: 1;
    transform: none;
    animation: none;
  }
  
  .delay-1 {
    animation: none;
  }
  
  .delay-2 {
    animation: none;
  }
  
  @keyframes reveal {
    0% {
      transform: translateY(4rem);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  /* Skill Bar Animation */
  @keyframes fillBar {
    from { width: 0; }
    to { width: var(--progress); }
  }
  
  /* Fade In Animation */
  .fade-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
  
  .fade-in.visible {
    opacity: 1;
    transform: none;
  }
  
  /* Page Transition Animation */
  @keyframes pageEnter {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(-100%);
    }
  }
  
  @keyframes pageExit {
    0% {
      transform: translateY(-100%);
    }
    100% {
      transform: translateY(0);
    }
  }
  
  /* Mobile Menu Animation */
  .mobile-menu-toggle.active span:nth-child(1) {
    transform: translateY(0.9rem) rotate(45deg);
  }
  
  .mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
  }
  
  .mobile-menu-toggle.active span:nth-child(3) {
    transform: translateY(-0.9rem) rotate(-45deg);
  }
  
  /* Work Filter Animation */
  .work-item {
    transition: none;
  }
  
  .work-item.hidden {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  
  .work-item.visible {
    animation: none;
  }
  
  @keyframes workItemAppear {
    from {
      opacity: 0;
      transform: scale(0.9);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  
  /* Parallax Effect */
  .parallax-element {
    transform: none !important;
    transition: none !important;
  }
  
  /* Hover Animation for Nav Links */
  .main-nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 0.2rem;
    background-color: var(--color-primary);
    transition: width 0.3s ease, left 0.3s ease;
  }
  
  .main-nav a:hover::after,
  .main-nav a.active::after {
    width: 50%;
    left: 25%;
  }
  
  /* Pulse Animation */
  @keyframes pulse {
    0% {
      transform: scale(1);
      box-shadow: 0 0 0 0 rgba(0, 113, 227, 0.7);
    }
    70% {
      transform: scale(1.05);
      box-shadow: 0 0 0 10px rgba(0, 113, 227, 0);
    }
    100% {
      transform: scale(1);
      box-shadow: 0 0 0 0 rgba(0, 113, 227, 0);
    }
  }
  
  .timeline-dot::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: var(--color-primary);
    z-index: -1;
    animation: none;
  }
  
  /* Floating Animation */
  @keyframes float {
    0% {
      transform: translateY(0px);
    }
    50% {
      transform: translateY(-10px);
    }
    100% {
      transform: translateY(0px);
    }
  }
  
  .shape {
    animation: none;
  }
  
  .shape-1 {
    animation: none;
  }
  
  .shape-2 {
    animation: none;
  }
  
  .shape-3 {
    animation: none;
  }
  
  /* Form Input Animation */
  .form-group input:focus + label,
  .form-group textarea:focus + label,
  .form-group input:valid + label,
  .form-group textarea:valid + label {
    transform: translateY(-2.4rem) scale(0.8);
    color: var(--color-primary);
  }
  
  /* Rotate Animation */
  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  
  /* Loader Animation */
  @keyframes loader {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  
  .loader {
    width: 4.8rem;
    height: 4.8rem;
    border: 0.4rem solid var(--color-gray-200);
    border-radius: 50%;
    border-top-color: var(--color-primary);
    animation: none;
  }
  
  /* Button Hover Animation */
  @keyframes ripple {
    0% {
      transform: scale(0);
      opacity: 1;
    }
    100% {
      transform: scale(4);
      opacity: 0;
    }
  }
  
  .btn::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(255,255,255,0.3) 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(0);
    opacity: 0;
    transition: transform 0.3s, opacity 0.5s;
  }
  
  .btn:active::after {
    transform: scale(0);
    opacity: 0.3;
    transition: 0s;
  }
  
  /* Shake Animation */
  @keyframes shake {
    0%, 100% {transform: translateX(0);}
    10%, 30%, 50%, 70%, 90% {transform: translateX(-5px);}
    20%, 40%, 60%, 80% {transform: translateX(5px);}
  }
  
  .shake {
    animation: none;
  }
  
  /* Section Title Animation */
  .section-title::after {
    animation: none;
    transform: scaleX(1);
  }
  
  @keyframes expandWidth {
    from {
      transform: scaleX(0);
    }
    to {
      transform: scaleX(1);
    }
  }