.asmirel-entry {
  --opening-duration: 3400ms;
  --approach-delay: 1700ms;
  --approach-duration: 3500ms;
  --reveal-delay: 3300ms;
  --reveal-duration: 1700ms;
  background: #735678;
  transition: opacity var(--reveal-duration) ease-out;
  --approach-easing: cubic-bezier(.45, 0, .25, 1);
}
.asmirel-entry::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, #fff 18%, #fffaf0 57%, #f6dfb9 100%);
  opacity: 0;
  transition: opacity 1800ms ease 250ms;
}
.asmirel-entry-opening::before { opacity: 1; }
.asmirel-entry-reveal { opacity: 0; }
.asmirel-entry-stage {
  transition: transform var(--approach-duration) var(--approach-easing);
}
.asmirel-entry-opening .asmirel-entry-stage { box-shadow: none; }
.asmirel-entry-approach .asmirel-entry-stage {
  transform: translate3d(0, 0, 0) scale(4.4);
}
.asmirel-home-scene { transform-origin: center top; }
.asmirel-entry[open] ~ .asmirel-home-scene {
  transform: translate3d(0, 5vh, 0) scale(.91);
}
.asmirel-entry[open].asmirel-entry-approach ~ .asmirel-home-scene {
  transform: translate3d(0, 0, 0) scale(1);
  transition: transform 3500ms cubic-bezier(.45, 0, .25, 1);
}
@media (prefers-reduced-motion: reduce) {
  .asmirel-entry-stage, .asmirel-entry[open] ~ .asmirel-home-scene { transition: none; }
}

@media (max-width: 650px) and (orientation: portrait) {
  .asmirel-entry[open] {
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  }
  .asmirel-entry-stage {
    width: max(110vw, 60dvh);
    box-shadow: none;
  }
  .asmirel-entry-button {
    bottom: max(8%, calc((100% - 100dvh) / 2 + 5dvh + env(safe-area-inset-bottom)));
  }
}

.asmirel-falling-piece {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.asmirel-falling-piece.lilas { filter: brightness(1.13) saturate(.82); }
.asmirel-falling-piece.violet { filter: hue-rotate(14deg) brightness(1.06) saturate(.96); }
.asmirel-entry-opening .asmirel-falling-piece {
  animation: asmirel-fall var(--duration) linear var(--delay) both;
}
@keyframes asmirel-fall {
  0% { opacity: 0; transform: translate(0, -90px) rotate(0deg); }
  16% { opacity: 1; }
  64% { opacity: .93; }
  100% { opacity: 0; transform: translate(var(--drift), 1080px) rotate(var(--turn)); }
}
@media (prefers-reduced-motion: reduce) {
  .asmirel-entry-opening .asmirel-falling-piece { animation: none; }
}