/* Separate layout, entrance and hover transforms so they never compete. */
.hero-layers {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 1082px;
  aspect-ratio: 2 / 1;
  margin: 58px auto 0;
}
.hero-layer {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26%;
  translate: -50% -50%;
  transform: translateX(var(--offset, 0)) scale(var(--scale, 1));
  animation: hero-fan-in 950ms cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: var(--delay, 0ms);
}
.hero-layer img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 1 !important;
  filter: drop-shadow(0 12px 12px rgb(20 25 40 / 8%));
  transition:
    transform 350ms cubic-bezier(.22, 1, .36, 1),
    box-shadow 500ms cubic-bezier(.22, 1, .36, 1);
}
.hero-layer:not(.hero-layer--phone) img {
  border-radius: 24px;
  corner-shape: squircle;
}
/* Follow the selected site theme, including a saved manual preference. */
.hero-layer .hero-asset--dark,
html[data-theme="dark"] .hero-layer .hero-asset--light {
  display: none;
}
html[data-theme="dark"] .hero-layer .hero-asset--dark {
  display: block;
}
html[data-theme="dark"] .hero-layer:not(.hero-layer--phone) img {
  box-shadow:
    0 1px 0 rgb(255 255 255 / 7%),
    0 16px 36px rgb(0 0 0 / 20%),
    0 32px 80px rgb(0 0 0 / 18%);
}
.hero-layer--theory {
  --offset: -139%;
  --scale: .86;
  --delay: 140ms;
  --hover-shift: -18px;
  --hover-tilt: -6deg;
  z-index: 1;
}
.hero-layer--progress {
  --offset: -76%;
  --delay: 60ms;
  --hover-shift: -18px;
  --hover-tilt: -6deg;
  z-index: 2;
}
.hero-layer--maps {
  --offset: 76%;
  --delay: 100ms;
  --hover-shift: 18px;
  --hover-tilt: 6deg;
  z-index: 2;
}
.hero-layer--flashcards {
  --offset: 139%;
  --scale: .86;
  --delay: 180ms;
  --hover-shift: 18px;
  --hover-tilt: 6deg;
  z-index: 1;
}
.hero-layer--phone {
  width: 24%;
  inset: 0;
  height: fit-content;
  margin: auto;
  translate: none;
  transform: none;
  z-index: 4;
  animation-name: hero-phone-in;
  animation-fill-mode: backwards;
}
.hero-layer--phone img {
  filter: none;
}
@keyframes hero-fan-in {
  from { opacity: 0; transform: translateX(0) translateY(16px) scale(.8); }
  to { opacity: 1; transform: translateX(var(--offset, 0)) scale(var(--scale, 1)); }
}
@keyframes hero-phone-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
@media (hover: hover) and (pointer: fine) {
  .hero-layer:not(.hero-layer--phone):hover { z-index: 3; }
  .hero-layer:not(.hero-layer--phone):hover img {
    transform: translate(var(--hover-shift), -6px) rotate(var(--hover-tilt)) scale(1.05);
  }
}
@media (max-width: 650px) {
  .hero-layers {
    width: 100vw;
    max-width: none;
    aspect-ratio: 5 / 4;
    margin-top: 47px;
    margin-left: 50%;
    transform: translateX(-50%);
  }
  .hero-layer {
    width: 40%;
  }
  .hero-layer--theory {
    --offset: -76%;
    --scale: .8;
  }
  .hero-layer--progress {
    --offset: -32%;
  }
  .hero-layer--maps {
    --offset: 32%;
  }
  .hero-layer--flashcards {
    --offset: 76%;
    --scale: .8;
  }
  .hero-layer--phone {
    width: 36%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-layer { animation: none; }
  .hero-layer img { transition: none; }
}