/* Primary (filled) and secondary (text) buttons, including the rolling-label hover. */

/* Primary labels get a 1.3em window (padding trimmed to keep the button the same size) so French
   accents (É, À) on the hidden label can't peek in, and are centred since the box fits the longer one. */

.primary-button {
  max-width: 100%;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-family: var(--font-body);
  color: var(--color-text);
  font-size: var(--b3);
  text-transform: uppercase;
  background-color: #ffffff2e;
  justify-content: center;
  align-items: center;
  padding: 7.6px 10px;
  font-weight: 400;
  line-height: 1em;
  text-decoration: none;
  display: flex;
}

.primary-button.cta {
  color: var(--color-text);
  background-color: var(--color-orange);
}

.primary-button-block {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  height: 1.3em;
  display: flex;
  overflow: hidden;
}

.primary-button-text {
  font-family: var(--font-body);
  color: var(--color-bg);
  text-align: center;
  font-weight: 700;
  line-height: 1.3em;
}

.secondary-button {
  max-width: 100%;
  height: 1em;
  font-family: var(--font-body);
  color: var(--color-text);
  font-size: var(--b3);
  text-transform: uppercase;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  font-weight: 400;
  line-height: 1em;
  text-decoration: none;
  display: flex;
  overflow: hidden;
}

.secondary-button-text {
  font-family: var(--font-body);
  color: var(--color-teal);
  letter-spacing: 3px;
  padding-left: 0;
  padding-right: 18px;
}

/* Hover: the label stack slides up one line (600ms inOutCubic), revealing the second label. */
.primary-button-text,
.secondary-button-text {
  transition: transform .6s var(--ease);
}

.primary-button:hover .primary-button-text { transform: translateY(-1.3em); }
.secondary-button:hover .secondary-button-text { transform: translateY(-1em); }

@media screen and (max-width: 767px) {
  .primary-button.cta { font-size: var(--b4); }
}