.header-hidden {
  transform: translateY(-100%);
}

#site-header {
  transition: transform 0.3s ease;
}

.button::before,
.button::after {
  content: "";
  position: absolute;
  inset: var(--space);
  transition: all 0.5s ease-in-out;
  border-radius: calc(var(--round) - var(--space));
  z-index: 0;
}
.button::before {
  --space: 1px;
  background: linear-gradient(177.95deg, rgba(255, 255, 255, 0.19) 0%, rgba(255, 255, 255, 0) 100%);
}
.button::after {
  --space: 2px;
  background: radial-gradient(65.28% 65.28% at 50% 100%, rgba(30, 64, 175, 0.8) 0%, rgba(30, 64, 175, 0) 100%), linear-gradient(0deg, #1e3a8a, #1e3a8a);
}
.button:active {
  transform: scale(0.95);
}

@keyframes floating-points {
  0% {
    transform: translateY(0);
  }
  85% {
    opacity: 0;
  }
  100% {
    transform: translateY(-55px);
    opacity: 0;
  }
}
.button:focus svg.icon {
  fill: white;
}
.button:hover svg.icon {
  fill: transparent;
  animation: dasharray 1s linear forwards, filled 0.1s linear forwards 0.95s;
}
@keyframes dasharray {
  from {
    stroke-dasharray: 0 0 0 0;
  }
  to {
    stroke-dasharray: 68 68 0 0;
  }
}
@keyframes filled {
  to {
    fill: white;
  }
}

/* Letter Animation Styles */
.animated-heading .letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(50px) rotateX(90deg);
  animation: letterReveal 0.8s ease-out forwards;
}

@keyframes letterReveal {
  0% {
    opacity: 0;
    transform: translateY(50px) rotateX(90deg) scale(0.8);
  }
  50% {
    opacity: 0.7;
    transform: translateY(0) rotateX(45deg) scale(1.1);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotateX(0deg) scale(1);
  }
}

.animated-heading:hover .letter {
  animation: letterBounce 0.3s ease-out forwards;
}

@keyframes letterBounce {
  0%, 100% {
    transform: translateY(0) rotateX(0deg) scale(1);
  }
  50% {
    transform: translateY(-10px) rotateX(15deg) scale(1.05);
  }
}
/* Tab Styles */
.month-tab {
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.month-tab::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: width 0.3s ease;
}

.month-tab:hover::before {
  width: 100%;
}

.month-tab.active {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(168, 85, 247, 0.1));
  transform: translateX(5px);
}

.month-content {
  animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
  from {
      opacity: 0;
      transform: translateY(10px);
  }

  to {
      opacity: 1;
      transform: translateY(0);
  }
}