/* Whispers of Alara, the coming-soon page (K, 4 Oct 2026: "a cleaner coming soon page, maybe just a rotating ring").
   One screen on white: the stacked logo, the Sinan Expressions Ring turning, the words, the sign-up, Instagram. The site's
   site.css gives the tokens, the type, the buttons and the Inner Circle form; this file lays out the page. */
.pg-soon { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }      /* the page and its © line in one screen */
.soon-page { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px var(--gut) 24px; }
main.soon-page > .soon-top { flex: none; margin-top: 0; }                   /* site.css leaves a header's height above main's first child */
.soon-logo { display: block; height: 64px; width: auto; }               /* WEB-BRAND-SPEC 1.1: 64 px at rest, 48 on a phone */

/* the ring: as large as the screen allows beside the words; its 760 px frames stay sharp to 380 px on a 2x screen, 460 at most */
.soon-ring { position: relative; margin: 8px 0 0; width: clamp(220px, calc(100svh - 490px), 460px); aspect-ratio: 1; }   /* the height the words leave */
.soon-still { display: block; width: 100%; height: 100%; }
.soon-video { display: block; width: 100%; height: 100%; object-fit: contain; background: #fff; }

.soon-copy { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; width: min(760px, 100%); margin-top: 4px; }
.soon-h { font-family: var(--display); font-weight: 300; font-size: clamp(32px, 22px + 1.6vw, 48px); line-height: 1.08; letter-spacing: 0; text-wrap: balance; }
.soon-copy .lede { max-width: 30em; text-wrap: balance; }
/* the line under the title (K, 4 Oct 2026: wider, Title Case, the brand's poetic voice): one sentence to a line where the
   screen allows, the surprise on its own line */
.soon-copy .soon-line { max-width: none; width: 100%; }
@media (min-width: 640px) { .soon-line span { display: block; } }
.soon-copy .circle-form { width: min(460px, 100%); margin-top: 10px; text-align: left; }
.soon-follow { margin-top: 6px; font-size: 15px; }
.soon-foot { text-align: center; padding: 8px var(--gut) 24px; font-size: 13px; color: var(--c80); }

/* the form's states (WEB-BRAND-SPEC 2.2) */
.soon-msg { min-height: 1.5em; margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 6px; text-align: center; }
.soon-msg svg { width: 16px; height: 16px; flex: none; }
.soon-msg.is-error { color: var(--burgundy); }
.circle-row input[aria-invalid="true"] { border-color: var(--burgundy); }
.soon-done .circle-row { display: none; }
.soon-done .soon-msg { margin-top: 0; padding: 16px 24px; border-radius: var(--r); background: var(--lav); font-size: 17px; color: var(--charcoal); }
.soon-done .soon-msg svg { width: 20px; height: 20px; }
.btn[aria-busy="true"] { color: transparent; cursor: progress; }
.btn[aria-busy="true"]::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--white); box-shadow: -12px 0 0 var(--white), 12px 0 0 var(--white); animation: soon-dots 1s var(--ease-io) infinite; }
@keyframes soon-dots { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
[tabindex="-1"]:focus { outline: none; }                               /* the thank-you, focused by script, takes no ring */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* a quiet arrival: the ring first, then the words */
@media (prefers-reduced-motion: no-preference) {
  .soon-ring, .soon-copy > * { animation: soon-in 1.1s var(--ease) both; }
  .soon-copy > * { animation-delay: .25s; }
  .soon-copy > :nth-child(n+3) { animation-delay: .4s; }
}
@keyframes soon-in { from { opacity: 0; transform: translate3d(0, 16px, 0); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .btn[aria-busy="true"]::after { animation: none; } }

@media (max-width: 767px) {
  .soon-page { padding-top: 16px; padding-bottom: 12px; }
  .soon-logo { height: 48px; }
  .soon-ring { width: clamp(168px, min(78vw, calc(100svh - 492px)), 340px); }
  .soon-copy { gap: 12px; }
  .circle-row { flex-direction: column; }
  .circle-row .btn { width: 100%; }
}

/* the 404, thank-you and try-again pages: the logo and a few words, centred on the screen */
.soon-small { justify-content: center; gap: 40px; }
.soon-small .soon-copy { gap: 18px; }