/* animations.css */

/* -----------------------------------
   Key Animations
----------------------------------- */

@keyframes af-float-down {
  0% {
    transform: translateY(-80px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes af-fade-in {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes af-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 1;
  }
}

/* -----------------------------------
   Logo Animation
----------------------------------- */

#logo {
  animation: af-float-down 1s ease forwards;
}

/* -----------------------------------
   Hero Section Animations
----------------------------------- */

.hero-content {
  position: relative;
  z-index: 10;
  overflow: visible;
}

.hero h1,
.hero p {
  opacity: 0;
  transform: translateY(30px);
  animation-fill-mode: forwards;
}

.hero h1 {
  animation: af-fade-in 1s ease 1.2s forwards;
}

.hero p {
  animation: af-fade-in 1s ease 1.4s forwards;
}

/* Fixed hero button */
.hero button {
  opacity: 0;
  position: relative;      /* enable z-index */
  z-index: 11;             /* above other hero elements */
  animation: af-fade-in 1s ease 1.6s forwards;
}

.hero button.pulse {
  animation: af-pulse 2s infinite ease-in-out;
  animation-fill-mode: none;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto;
}

/* -----------------------------------
   Dropdown Nav
----------------------------------- */

#dropdown-nav {
  transition: opacity 0.3s ease;
}

/* -----------------------------------
   Section Fade-In Utility
----------------------------------- */

.fade-in-section {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-section.visible {
  opacity: 1;
  transform: translateY(0);
}

/* -----------------------------------
   Accessibility
----------------------------------- */

.hero button:focus {
  outline: 2px solid var(--pastel-cyan);
  outline-offset: 4px;
}