/* Coming-soon page for slidekicks.app: one screen in the hero look of the landing page (styles.css). */
.soon-page { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; background: var(--gold); }
.soon-lang { position: fixed; z-index: 10; top: max(12px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); }

.soon {
  position: relative; flex: 1; display: grid; place-items: center; overflow: hidden; isolation: isolate;
  padding: calc(64px + env(safe-area-inset-top)) 16px 40px;
  background: radial-gradient(120% 90% at 50% 40%, var(--gold-soft), var(--gold) 62%);
}
.soon-inner { display: grid; justify-items: center; gap: 22px; width: 100%; max-width: 900px; text-align: center; }
/* styles.css reorders the landing-page hero for phones; here the source order holds. */
.soon-inner > * { order: 0; }

.soon-logo { margin: 0; }
.soon-logo img { width: min(520px, 84vw); filter: drop-shadow(0 8px 0 rgba(18,38,63,.25)); }
.js .soon-logo.pop { animation-duration: .8s; }

.soon-stamp { position: relative; margin-top: 4px; padding: 0 36px; }
.soon-title { display: grid; justify-items: center; font-family: var(--display); line-height: 1; text-transform: uppercase; letter-spacing: .02em; }
.soon-title .line { font-size: clamp(30px, 7.4vw, 50px); color: var(--ink); }
.soon-title .big { font-size: clamp(42px, 11vw, 82px); color: var(--white); -webkit-text-stroke: 3px var(--ink);
  paint-order: stroke fill; text-shadow: 3px 4px 0 var(--ink); }
.soon-burst { width: clamp(84px, 22vw, 120px); right: -14px; top: -30px; }
.soon-burst span { font-size: clamp(19px, 5vw, 26px); }
.js .soon-burst { opacity: 0; --br: 10deg; animation: burst-in .55s .8s both; }
@media (max-width: 520px) { .soon-burst { right: -24px; top: -36px; } }

.soon-lead { max-width: 32em; }

/* Nine heroes on plates: one row on wide screens, 5 + 4 on phones. */
.soon-crew { --cols: 5; --gap: 4px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px var(--gap); width: min(100%, 880px);
  margin: 6px 0 0; padding: 0; list-style: none; }
.soon-crew li { width: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); }
@media (min-width: 640px) { .soon-crew { --cols: 9; } }
.soon-crew .hop { position: relative; display: block; width: 100%; aspect-ratio: 1.18; padding: 0; border: 0; background: none; cursor: pointer; }
.soon-crew .hop::before { content: ''; position: absolute; left: 10%; right: 10%; top: 22%; bottom: 2%; border: 3px solid var(--ink); border-radius: 50%;
  background: var(--plate, var(--lime)); box-shadow: 0 3px 0 var(--ink); }
.soon-crew img { position: relative; width: 100%; height: 100%; object-fit: contain; transform-origin: 50% 92%; }
.soon-crew [data-plate="sky"] { --plate: var(--sky); } .soon-crew [data-plate="coral"] { --plate: #ffb3a6; }
.soon-crew [data-plate="gold"] { --plate: var(--white); } .soon-crew [data-plate="night"] { --plate: #8b7bd8; }

.soon-mail { min-height: 52px; font-size: 22px; text-transform: none; letter-spacing: .02em; }
.soon-mail svg { width: 26px; height: 26px; }

.soon-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 22px;
  padding: 18px 16px max(18px, env(safe-area-inset-bottom)); background: var(--ink); color: var(--paper); font-size: 15px; font-weight: 600;
}
.soon-foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; }
.soon-foot a { color: var(--gold); text-underline-offset: 3px; }
.soon-foot p { opacity: .75; }

@media (prefers-reduced-motion: reduce) {
  .js .soon-burst { animation: fade .4s .3s both !important; }
}