/* Animations */
.fade-in {
  opacity: 0;
  visibility: hidden;
}

.slide-up {
  opacity: 0;
  transform: translateY(30px);
}

.slide-left {
  opacity: 0;
  transform: translateX(-30px);
}

.slide-right {
  opacity: 0;
  transform: translateX(30px);
}

/* These classes are used by GSAP to animate elements into view */



/* Form floating labels */
.form-group {
  position: relative;
  margin-bottom: 2rem;
}

.form-control {
  width: 100%;
  padding: 1rem 0 0.5rem;
  border: none;
  border-bottom: 2px solid rgba(0,0,0,0.1);
  background: transparent;
  font-family: var(--ff-body);
  font-size: 1rem;
  transition: border-color var(--transition-fast);
}

.form-control:focus {
  outline: none;
  border-bottom-color: var(--clr-accent);
}

.form-label {
  position: absolute;
  top: 1rem;
  left: 0;
  color: var(--clr-text-light);
  transition: all 0.2s ease-out;
  pointer-events: none;
}

.form-control:focus + .form-label,
.form-control:not(:placeholder-shown) + .form-label {
  top: -10px;
  font-size: 0.8rem;
  color: var(--clr-accent);
}