/* Home page: the ignition. Default state is the finished lockup and the button.
   home.js adds .ignite on <html> only when the motion should play. The keyframes
   are the approved design page's, verbatim. */
.home { margin: 0; padding: 0; min-height: 100vh; min-height: 100svh; }
.stage {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px 16px;
}
.mark { width: min(86vw, 58vh, 560px); height: auto; display: block; overflow: visible; margin-bottom: calc(min(86vw, 58vh, 560px) * -0.1); }
.cta { position: relative; margin-top: 4px; }

.mark .letters { fill: #ffffff; } /* the pack draws the lockup letters pure white */
.mark .spark { fill: #fff; opacity: 0; transform-origin: 590px 724px; }

.ignite .mark .letters { opacity: 0; transform: translateY(18px); }
.ignite .mark .art { opacity: 0; transform-origin: 590px 724px; transform: scale(.08); }
.ignite .cta { opacity: 0; }
.ignite .mark .spark { animation: spark .9s ease-out forwards; }
.ignite .mark .art { animation: ignite 1.9s cubic-bezier(.15,.85,.2,1) .15s forwards; }
.ignite .mark .monogram { animation: rise 1.1s cubic-bezier(.2,.8,.2,1) 1.0s forwards; }
.ignite .mark .wordmark { animation: rise 1.1s cubic-bezier(.2,.8,.2,1) 1.3s forwards; }
.ignite .cta { animation: fadeIn .8s ease 2.3s forwards; }

@keyframes spark { 0% { opacity: 0; transform: scale(.2); } 30% { opacity: 1; transform: scale(1.6); } 100% { opacity: 0; transform: scale(3); } }
@keyframes ignite { 0% { opacity: 0; transform: scale(.08); filter: brightness(3); } 25% { opacity: 1; transform: scale(1.12); filter: brightness(2.2); } 60% { transform: scale(.98); filter: brightness(1.15); } 100% { opacity: 1; transform: scale(1); filter: brightness(1); } }
@keyframes rise { to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .mark *, .cta { animation: none !important; }
  .mark .letters, .mark .art, .cta { opacity: 1 !important; transform: none !important; filter: none !important; }
  .mark .spark { opacity: 0 !important; }
}