/*
 * Language selection page: two big "pick one" tiles side by side, on the stage wallpaper.
 * Final states are the resting styles, so reduced motion just removes the animations.
 */
.elx-language {
  --elx-language-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  max-width: 640px;
  margin: 0 auto;
}

.elx-language__eyebrow {
  margin: 0 0 0.375rem;
  font-size: max(0.875rem, var(--elx-size-min));
  font-weight: var(--elx-weight-semibold);
}

.elx-language__heading {
  margin-bottom: 1.75rem;
}

.elx-language__choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

/* A white tile that turns Blue when pressed; hover is the same state, desktop only (Actions board). */
.elx-language__tile {
  width: 100%;
  aspect-ratio: 4 / 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.125rem;
  padding: 1rem;
  font-family: var(--elx-font);
  font-size: var(--elx-h3);
  font-weight: var(--elx-weight-semibold);
  line-height: var(--elx-lh-heading);
  color: var(--elx-blue);
  background: var(--elx-white);
  border: 1px solid var(--elx-blue-light);
  border-radius: var(--elx-radius);
  cursor: pointer;
  transition: transform 150ms var(--elx-language-pop), background-color 200ms ease, color 200ms ease;
  animation: elx-language-pop 600ms var(--elx-language-pop) both;
}
.elx-language__choices form:nth-child(2) .elx-language__tile {
  animation-delay: 100ms;
}
.elx-language__tile:active {
  transform: scale(0.96);
  color: var(--elx-white);
  background: var(--elx-blue);
}
@media (hover: hover) {
  .elx-language__tile:hover {
    color: var(--elx-white);
    background: var(--elx-blue);
  }
  .elx-language__tile:hover .elx-language__flag {
    transform: translateY(-4px);
  }
}

/* Decorative: the language name below it carries the meaning. */
.elx-language__flag {
  height: 3.25rem;
  width: auto;
  border: 1px solid currentColor;
  transition: transform 300ms var(--elx-language-pop);
}

@media (min-width: 768px) {
  .elx-language__tile {
    aspect-ratio: 4 / 3;
  }
}

@keyframes elx-language-pop {
  from { opacity: 0; transform: scale(0.85); }
}

@media (prefers-reduced-motion: reduce) {
  .elx-language__tile,
  .elx-language__flag {
    animation: none;
    transition: none;
  }
}