/* Pre-launch "Coming soon" layer.
   Everything here is keyed off the data-coming-soon attribute on <html>.
   At launch: remove data-coming-soon from each page's <html> tag (and point
   the App Store links at the real listing). This file can then be deleted
   along with its <link> tags. */

/* Badges aren't live yet: no clicks, and a butter "Coming soon" sticker. */
[data-coming-soon] .store-badge {
  position: relative;
  pointer-events: none;
  cursor: default;
}

[data-coming-soon] .store-badge::after {
  content: "Coming soon";
  position: absolute;
  top: -11px;
  right: -16px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #ffd64a;
  color: #073d20;
  font-family: "DM Sans", -apple-system, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.9px;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: inset 0 -2px 0 rgba(201, 143, 6, 0.4), 0 6px 14px rgba(7, 61, 32, 0.22);
  transform: rotate(8deg);
  animation: coming-soon-wobble 3.6s ease-in-out infinite;
}

@keyframes coming-soon-wobble {
  0%, 82%, 100% { transform: rotate(8deg) scale(1); }
  88% { transform: rotate(3deg) scale(1.08); }
  94% { transform: rotate(11deg) scale(1.02); }
}

/* Copy that only makes sense before launch ("Coming soon to the App Store"). */
html:not([data-coming-soon]) .coming-soon-only {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  [data-coming-soon] .store-badge::after { animation: none; }
}