/* Material Design 3 Button Animations */

/* State Layer Animations */
.md-filled-button,
.md-outlined-button {
  position: relative;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
              background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* MD3 Filled Button Shifting Animation */
.md-filled-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: transparent;
  border-radius: inherit;
  pointer-events: none;
  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.md-filled-button:hover {
  transform: translateY(-2px);
}

.md-filled-button:hover::before {
  background-color: rgba(255, 255, 255, 0.08); /* State layer for hover */
}

.md-filled-button:active {
  transform: translateY(0);
}

.md-filled-button:active::before {
  background-color: rgba(255, 255, 255, 0.12); /* State layer for pressed */
}

/* MD3 Outlined Button Shifting Animation */
.md-outlined-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: transparent;
  border-radius: inherit;
  pointer-events: none;
  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.md-outlined-button:hover {
  transform: translateY(-2px);
  border-color: var(--md-primary);
}

.md-outlined-button:hover::before {
  background-color: rgba(103, 80, 164, 0.08); /* Primary color with 8% opacity */
}

.md-outlined-button:active {
  transform: translateY(0);
}

.md-outlined-button:active::before {
  background-color: rgba(103, 80, 164, 0.12); /* Primary color with 12% opacity */
}

/* Focus Ring Animation */
.md-filled-button:focus-visible,
.md-outlined-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(103, 80, 164, 0.2);
}

/* Unified button shifting animation for both container and content */
.cta-buttons .md-filled-button,
.cta-buttons .md-outlined-button {
  transform: translateY(0);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* The entire button shifts up on hover */
.cta-buttons .md-filled-button:hover,
.cta-buttons .md-outlined-button:hover {
  transform: translateY(-2px);
}

/* The entire button shifts back on active/press */
.cta-buttons .md-filled-button:active,
.cta-buttons .md-outlined-button:active {
  transform: translateY(0);
}