/* Normal content remains visible by default */

.placeboes-reveal {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 700ms ease, transform 700ms ease;
}

/* JavaScript adds this class to the page */

.placeboes-animations-ready .placeboes-reveal {
  opacity: 0;
  transform: translateY(22px);
}

.placeboes-animations-ready .placeboes-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.placeboes-reveal-delay-1 {
  transition-delay: 140ms;
}

.placeboes-reveal-delay-2 {
  transition-delay: 280ms;
}

/* ==========================================================
   FOUR FRONTIER CARDS
========================================================== */

.placeboes-frontier-card {
  position: relative;
  height: 100%;
  transition: transform .24s ease, box-shadow .24s ease, background-color .24s ease;
}

.placeboes-frontier-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(21,96,130,.14);
}

/* ==========================================================
   FRONTIER ICON
========================================================== */

.placeboes-frontier-icon {
  transition: transform .24s ease, filter .24s ease;
}

.placeboes-frontier-card:hover .placeboes-frontier-icon {
  transform: scale(1.05);
  filter: drop-shadow(0 8px 14px rgba(21,96,130,.18));
}

/* ==========================================================
   FRONTIER TITLE
========================================================== */

.placeboes-frontier-title {
  transition: color .22s ease, transform .22s ease;
}

.placeboes-frontier-card:hover .placeboes-frontier-title {
  color: #156082;
  transform: translateY(-1px);
}

.placeboes-frontier-button {
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.placeboes-frontier-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(21,96,130,.18);
}

/* ==========================================================
   FRONTIER CARD LAYOUT
========================================================== */

.placeboes-frontier-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 30px;
}

.placeboes-frontier-button {
  margin-top: auto;
}