/*
 * Coming Soon page (production gate).
 *
 * Served beside the standalone HTML document that src/middleware.ts builds
 * (src/lib/coming-soon/page.ts) while COMING_SOON is on. It is not part of the
 * React design system: nothing under src/ imports it, and its palette is the
 * Claude Design file's (m2-docs/design/coming-soon/Aurora2 Coming Soon.dc.html),
 * translated from that file's inline styles into classes. Values follow the
 * design unless a comment says why they do not.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #0B0A12;
}

body {
  color: #F3E4CE;
  font-family: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@keyframes cs-rise {
  from { opacity: 0; transform: translateY(12px); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: none; }
}

@keyframes cs-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes cs-ember {
  0% { transform: translate(0, 0) scale(1); opacity: 0; }
  12% { opacity: 0.9; }
  100% { transform: translate(var(--dx), -78vh) scale(0.4); opacity: 0; }
}

@keyframes cs-ray {
  0%, 100% { opacity: 0.25; transform: translateX(-2%) skewX(-18deg); }
  50% { opacity: 0.6; transform: translateX(2%) skewX(-18deg); }
}

@keyframes cs-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(228,178,104,0.45), 0 0 0 0 rgba(108,120,255,0.38), 0 14px 38px -12px rgba(88,101,242,0.75); }
  50% { box-shadow: 0 0 0 1px rgba(243,205,142,0.75), 0 0 0 10px rgba(108,120,255,0), 0 18px 52px -10px rgba(88,101,242,0.95); }
}

/* The screen. The design's min-height: 480px is dropped: html and body never
   scroll, so on a short landscape phone it would clip the CTA instead of
   letting the column fit (see the max-height query at the end). */
.cs {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: #0B0A12;
}

.cs-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cs-sky {
  background-image:
    radial-gradient(90% 38% at 50% 84%, rgba(236,150,72,0.55), rgba(236,150,72,0) 70%),
    radial-gradient(60% 40% at 22% 30%, rgba(96,64,170,0.35), rgba(96,64,170,0) 70%),
    radial-gradient(55% 36% at 80% 22%, rgba(60,90,170,0.3), rgba(60,90,170,0) 70%),
    linear-gradient(to bottom, #090C1C 0%, #141433 30%, #2A1A3E 56%, #5A2E2C 78%, #8A4A24 88%, #24130B 100%);
}

/* Background artwork. The inlined placeholder (a 32x18 WebP data URI set on
   .cs-bg__placeholder by the page) paints on first frame; the real image
   fades in over it once it has loaded. */
.cs-bg {
  overflow: hidden;
}

.cs-bg__placeholder {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  filter: blur(24px);
  transform: scale(1.12);
}

.cs-bg__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 1.6s ease-out;
}

.cs-bg__img.is-loaded {
  opacity: 1;
}

.cs-fx {
  overflow: hidden;
}

.cs-rays span {
  position: absolute;
  top: -10%;
  height: 85%;
  filter: blur(18px);
  animation-name: cs-ray;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.cs-rays span:nth-child(1) { left: 8%; width: 14%; background: linear-gradient(to bottom, rgba(140,120,255,0.16), rgba(0,0,0,0)); animation-duration: 11s; animation-delay: 0s; }
.cs-rays span:nth-child(2) { left: 30%; width: 9%; background: linear-gradient(to bottom, rgba(255,196,120,0.14), rgba(0,0,0,0)); animation-duration: 14s; animation-delay: -4s; }
.cs-rays span:nth-child(3) { left: 56%; width: 16%; background: linear-gradient(to bottom, rgba(120,170,255,0.13), rgba(0,0,0,0)); animation-duration: 13s; animation-delay: -7s; }
.cs-rays span:nth-child(4) { left: 78%; width: 10%; background: linear-gradient(to bottom, rgba(255,170,100,0.14), rgba(0,0,0,0)); animation-duration: 16s; animation-delay: -2s; }

.cs-shade-vertical {
  background: linear-gradient(to bottom, rgba(6,5,10,0.7) 0%, rgba(6,5,10,0.15) 26%, rgba(6,5,10,0.1) 62%, rgba(6,4,3,0.82) 100%);
}

.cs-shade-centre {
  background: radial-gradient(ellipse 58% 52% at 50% 48%, rgba(10,7,6,0.62) 0%, rgba(10,7,6,0.3) 55%, rgba(10,7,6,0) 80%);
}

.cs-shade-vignette {
  background: radial-gradient(ellipse 120% 100% at 50% 50%, rgba(0,0,0,0) 45%, rgba(5,3,2,0.9) 100%);
}

/* Embers: the design file's seeded layout (Lehmer PRNG, seed 7), baked into
   static rules so the page needs no script to place them. */
.cs-embers span {
  position: absolute;
  border-radius: 50%;
  background: #F2B066;
  box-shadow: 0 0 8px 2px rgba(242,150,70,0.7);
  animation-name: cs-ember;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.cs-embers span:nth-child(4),
.cs-embers span:nth-child(7),
.cs-embers span:nth-child(17) {
  background: #A9B4FF;
  box-shadow: 0 0 8px 2px rgba(140,150,255,0.6);
}

.cs-embers span:nth-child(1) { left: 28.924%; bottom: 2.317%; width: 1.5px; height: 1.5px; --dx: 3.67vw; animation-duration: 16.327s; animation-delay: -6.586s; }
.cs-embers span:nth-child(2) { left: 54.285%; bottom: 16.535%; width: 3.756px; height: 3.756px; --dx: 2.175vw; animation-duration: 19.168s; animation-delay: -4.84s; }
.cs-embers span:nth-child(3) { left: 69.805%; bottom: -2.383%; width: 2.623px; height: 2.623px; --dx: 2.943vw; animation-duration: 15.679s; animation-delay: -18.448s; }
.cs-embers span:nth-child(4) { left: 51.306%; bottom: 23.695%; width: 3.922px; height: 3.922px; --dx: 3.016vw; animation-duration: 17.438s; animation-delay: -11.549s; }
.cs-embers span:nth-child(5) { left: 37.225%; bottom: 6.062%; width: 4.236px; height: 4.236px; --dx: 5.395vw; animation-duration: 14.323s; animation-delay: -3.051s; }
.cs-embers span:nth-child(6) { left: 29.487%; bottom: 24.118%; width: 2.393px; height: 2.393px; --dx: 0.918vw; animation-duration: 18.293s; animation-delay: -17.557s; }
.cs-embers span:nth-child(7) { left: 56.063%; bottom: 11.264%; width: 1.676px; height: 1.676px; --dx: -1.257vw; animation-duration: 12.929s; animation-delay: -18.179s; }
.cs-embers span:nth-child(8) { left: 34.412%; bottom: 15.933%; width: 1.665px; height: 1.665px; --dx: 6.79vw; animation-duration: 16.149s; animation-delay: -3.311s; }
.cs-embers span:nth-child(9) { left: 36.446%; bottom: 8.719%; width: 2.717px; height: 2.717px; --dx: -2.679vw; animation-duration: 16.317s; animation-delay: -12.281s; }
.cs-embers span:nth-child(10) { left: 45.784%; bottom: 21.89%; width: 2.2px; height: 2.2px; --dx: 2.162vw; animation-duration: 17.343s; animation-delay: -10.325s; }
.cs-embers span:nth-child(11) { left: 93.957%; bottom: 7.902%; width: 3.015px; height: 3.015px; --dx: 3.332vw; animation-duration: 13.511s; animation-delay: -11.737s; }
.cs-embers span:nth-child(12) { left: 39.143%; bottom: 19.842%; width: 2.552px; height: 2.552px; --dx: 6.041vw; animation-duration: 12.111s; animation-delay: -16.384s; }
.cs-embers span:nth-child(13) { left: 15.357%; bottom: -1.663%; width: 1.733px; height: 1.733px; --dx: 7.939vw; animation-duration: 13.2s; animation-delay: -12.647s; }
.cs-embers span:nth-child(14) { left: 59.292%; bottom: 0.134%; width: 1.933px; height: 1.933px; --dx: 6.75vw; animation-duration: 19.846s; animation-delay: -17.811s; }
.cs-embers span:nth-child(15) { left: 76.113%; bottom: 4.263%; width: 4.156px; height: 4.156px; --dx: -7.832vw; animation-duration: 13.483s; animation-delay: -1.521s; }
.cs-embers span:nth-child(16) { left: 23.138%; bottom: 18.234%; width: 1.505px; height: 1.505px; --dx: -0.17vw; animation-duration: 17.875s; animation-delay: -4.761s; }
.cs-embers span:nth-child(17) { left: 37.395%; bottom: 22.828%; width: 4.146px; height: 4.146px; --dx: -6.106vw; animation-duration: 15.893s; animation-delay: -0.059s; }
.cs-embers span:nth-child(18) { left: 92.212%; bottom: -3.37%; width: 4.239px; height: 4.239px; --dx: 6.401vw; animation-duration: 12.881s; animation-delay: -19.375s; }
.cs-embers span:nth-child(19) { left: 26.627%; bottom: 2.683%; width: 3.196px; height: 3.196px; --dx: -4.657vw; animation-duration: 16.644s; animation-delay: -1.047s; }
.cs-embers span:nth-child(20) { left: 71.408%; bottom: 10.946%; width: 3.808px; height: 3.808px; --dx: -7.476vw; animation-duration: 12.103s; animation-delay: -18.381s; }
.cs-embers span:nth-child(21) { left: 89.302%; bottom: -2.888%; width: 1.892px; height: 1.892px; --dx: 6.13vw; animation-duration: 19.614s; animation-delay: -19.855s; }
.cs-embers span:nth-child(22) { left: 41.96%; bottom: 3.446%; width: 4.363px; height: 4.363px; --dx: 3.643vw; animation-duration: 19.822s; animation-delay: -7.966s; }
.cs-embers span:nth-child(23) { left: 88.699%; bottom: 12.763%; width: 2.204px; height: 2.204px; --dx: -2.377vw; animation-duration: 17.215s; animation-delay: -14.698s; }
.cs-embers span:nth-child(24) { left: 42.275%; bottom: 1.959%; width: 2.505px; height: 2.505px; --dx: -3.013vw; animation-duration: 20.855s; animation-delay: -19.883s; }
.cs-embers span:nth-child(25) { left: 91.832%; bottom: 1.986%; width: 3.397px; height: 3.397px; --dx: 2.323vw; animation-duration: 12.354s; animation-delay: -9.949s; }
.cs-embers span:nth-child(26) { left: 94.577%; bottom: 10.462%; width: 3.172px; height: 3.172px; --dx: -5.006vw; animation-duration: 15.467s; animation-delay: -3.322s; }

/* Corner frame. */
.cs-frame {
  position: absolute;
  inset: clamp(12px, 2.2vmin, 34px);
  pointer-events: none;
  animation: cs-fade 2s ease-out 0.4s both;
}

.cs-frame__corner {
  position: absolute;
  width: clamp(36px, 7vmin, 84px);
  height: clamp(36px, 7vmin, 84px);
  border: 0 solid rgba(228,178,104,0.5);
}

.cs-frame__corner--tl { left: 0; top: 0; border-top-width: 1px; border-left-width: 1px; }
.cs-frame__corner--tr { right: 0; top: 0; border-top-width: 1px; border-right-width: 1px; }
.cs-frame__corner--bl { left: 0; bottom: 0; border-bottom-width: 1px; border-left-width: 1px; }
.cs-frame__corner--br { right: 0; bottom: 0; border-bottom-width: 1px; border-right-width: 1px; }

.cs-frame__gem {
  position: absolute;
  width: 7px;
  height: 7px;
  background: #E4B268;
  transform: rotate(45deg);
}

.cs-frame__gem--tl { left: -3px; top: -3px; }
.cs-frame__gem--tr { right: -3px; top: -3px; }
.cs-frame__gem--bl { left: -3px; bottom: -3px; }
.cs-frame__gem--br { right: -3px; bottom: -3px; }

.cs-frame__rule {
  position: absolute;
  left: 50%;
  width: min(28vw, 320px);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(to right, rgba(228,178,104,0), rgba(228,178,104,0.4), rgba(228,178,104,0));
}

.cs-frame__rule--top { top: 0; }
.cs-frame__rule--bottom { bottom: 0; }

/* Content column. */
.cs-main {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* When the column does not fit (a viewport under ~400px tall, 200% zoom)
     it starts at the top and scrolls instead of clipping both ends out of
     reach. Horizontal overflow stays hidden, so the note's scrim cannot add
     a horizontal scrollbar. */
  justify-content: safe center;
  overflow-x: hidden;
  overflow-y: auto;
  padding: clamp(40px, 7vh, 80px) 28px clamp(56px, 9vh, 96px);
  text-align: center;
}

.cs-wordmark {
  position: relative;
  margin: 0;
  font-family: 'Cinzel', 'Trajan Pro', Georgia, serif;
  font-weight: 700;
  font-size: clamp(46px, min(12.5vw, 13vh), 148px);
  line-height: 1;
  letter-spacing: 0.07em;
  padding-left: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #E4B268;
  filter: drop-shadow(0 0 28px rgba(228,168,90,0.42)) drop-shadow(0 2px 1px rgba(0,0,0,0.6));
  animation: cs-rise 1.4s cubic-bezier(.2,.7,.2,1) 0.2s both;
}

/* Preserve the original title's footprint without showing its legacy text. */
.cs-wordmark__metrics {
  visibility: hidden;
}

.cs-wordmark__logo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cs-chapter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: clamp(14px, 2.4vh, 28px);
  animation: cs-rise 1.2s cubic-bezier(.2,.7,.2,1) 0.9s both;
}

.cs-chapter__rule {
  width: clamp(36px, 8vw, 110px);
  height: 1px;
  background: linear-gradient(to right, rgba(228,178,104,0), rgba(228,178,104,0.75));
}

.cs-chapter__rule--end {
  background: linear-gradient(to left, rgba(228,178,104,0), rgba(228,178,104,0.75));
}

.cs-chapter__gem {
  width: 5px;
  height: 5px;
  background: #E4B268;
  transform: rotate(45deg);
}

.cs-chapter__label {
  font-family: 'Saira Condensed', sans-serif;
  font-size: clamp(12px, 1.6vh, 16px);
  font-weight: 600;
  /* Saira Condensed's own "normal", pinned so a font swap cannot move the
     column (the design leaves it at normal). */
  line-height: 1.5625;
  letter-spacing: 0.46em;
  padding-left: 0.46em;
  text-transform: uppercase;
  color: #D6B47E;
}

.cs-subtitle {
  margin: clamp(4px, 0.8vh, 10px) 0 0;
  font-family: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(26px, 4.4vh, 48px);
  line-height: 1.15;
  color: #F3E4CE;
  text-shadow: 0 0 22px rgba(228,178,104,0.28), 0 2px 8px rgba(0,0,0,0.7);
  animation: cs-rise 1.2s cubic-bezier(.2,.7,.2,1) 1.2s both;
}

.cs-soon {
  margin: clamp(26px, 5.4vh, 64px) 0 0;
  font-family: 'Saira Condensed', sans-serif;
  font-weight: 700;
  font-size: clamp(30px, min(8.4vw, 7.4vh), 82px);
  line-height: 1;
  letter-spacing: 0.24em;
  padding-left: 0.24em;
  text-transform: uppercase;
  color: #F7EEE1;
  text-shadow: 0 0 30px rgba(236,150,72,0.35), 0 3px 12px rgba(0,0,0,0.75);
  white-space: nowrap;
  animation: cs-rise 1.3s cubic-bezier(.2,.7,.2,1) 1.6s both;
}

.cs-tagline {
  margin: clamp(10px, 1.8vh, 20px) 0 0;
  max-width: 34ch;
  font-size: clamp(15px, 2vh, 20px);
  line-height: 1.5;
  color: #E2D3BE;
  text-wrap: balance;
  text-shadow: 0 2px 10px rgba(0,0,0,0.8);
  animation: cs-rise 1.2s cubic-bezier(.2,.7,.2,1) 1.9s both;
}

.cs-cta-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1.6vh, 16px);
  margin-top: clamp(24px, 4.6vh, 52px);
  animation: cs-rise 1.2s cubic-bezier(.2,.7,.2,1) 2.2s both;
}

/* The Discord CTA. Two departures from the design, both for WCAG AA:
   - the font floor is 19px, not 17px, so the white label is always large
     bold text (>= 18.66px). At 17px it would need 4.5:1, and the design's
     own hover (brightness 1.1) takes the button's lightest band to about
     3.9:1;
   - the focus ring is :focus-visible, so it shows for keyboard focus, and
     the outline is transparent rather than none, so forced-colours mode
     still draws one. */
.cs-cta {
  /* Above the note's scrim, which reaches up under the button. */
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: clamp(56px, 7.2vh, 72px);
  padding: 0 clamp(28px, 3.2vw, 44px);
  border-radius: 999px;
  border: 1px solid rgba(243,205,142,0.7);
  background: linear-gradient(180deg, #6571F4 0%, #5865F2 45%, #4752C4 100%);
  color: #FFFFFF;
  font-family: 'Saira Condensed', sans-serif;
  font-size: clamp(19px, 2.3vh, 22px);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  outline: 2px solid transparent;
  outline-offset: 4px;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
  animation: cs-pulse 3.2s ease-in-out infinite;
}

.cs-cta svg {
  flex: none;
}

.cs-cta:hover {
  color: #FFFFFF;
  filter: brightness(1.1) saturate(1.05);
  transform: translateY(-2px);
  animation: none;
  box-shadow: 0 0 0 1px rgba(243,205,142,0.95), 0 0 34px 2px rgba(108,120,255,0.55), 0 20px 46px -12px rgba(88,101,242,1);
}

.cs-cta:focus-visible {
  color: #FFFFFF;
  animation: none;
  box-shadow: 0 0 0 2px #0B0A12, 0 0 0 4px #F3CD8E, 0 0 36px 4px rgba(108,120,255,0.6);
}

.cs-cta:active {
  transform: translateY(1px) scale(0.985);
  filter: brightness(0.94);
  box-shadow: 0 0 0 1px rgba(243,205,142,0.8), 0 6px 18px -8px rgba(88,101,242,0.9);
}

.cs-cta-note {
  position: relative;
  isolation: isolate;
  margin: 0;
  font-size: clamp(13px, 1.6vh, 15px);
  line-height: 1.5;
  color: #C9B8A1;
  text-shadow: 0 1px 8px rgba(0,0,0,0.85);
}

/* Not in the design: a soft scrim behind the note. The line sits on the
   painting's sunrise, and without it the small cream text falls to about
   2:1 against the brightest pixels (WCAG AA needs 4.5:1). Sized from the
   note itself, so it follows the text at every viewport and moves nothing. */
.cs-cta-note::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -28px -40%;
  background: radial-gradient(closest-side, rgba(6,4,3,0.62), rgba(6,4,3,0.55) 60%, rgba(6,4,3,0));
  pointer-events: none;
}

.cs-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(20px, 3.4vh, 44px);
  z-index: 2;
  display: flex;
  justify-content: center;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.25;
  letter-spacing: 0.14em;
  color: #B6A48F;
  animation: cs-fade 1.6s ease-out 2.6s both;
}

/* Short landscape screens (a phone on its side): tighten the column's
   padding so it still clears the footer without scrolling. */
@media (max-height: 480px) {
  .cs-main {
    padding-top: 12px;
    padding-bottom: 52px;
  }

  .cs-footer {
    bottom: 12px;
  }
}

/* Reduced motion: a designed still frame, not shortened animations. Content
   shows at once in its settled state, the embers are gone, the rays hold one
   skewed, mid-strength pose (below the 0.6 peak the contrast check assumed),
   and the CTA keeps the pulse's resting ring. Hover, focus and active still
   restyle the CTA (their selectors outrank this one); nothing transitions. */
@media (prefers-reduced-motion: reduce) {
  .cs-frame,
  .cs-chapter,
  .cs-subtitle,
  .cs-soon,
  .cs-tagline,
  .cs-cta-group,
  .cs-footer {
    animation: none;
  }

  /* The animated wordmark settles on filter: none (cs-rise's end state
     overrides its drop-shadow), so the still frame matches it. */
  .cs-wordmark {
    animation: none;
    filter: none;
  }

  .cs-embers {
    display: none;
  }

  .cs-rays span {
    animation: none;
    opacity: 0.4;
    transform: skewX(-18deg);
  }

  .cs-cta {
    animation: none;
    box-shadow: 0 0 0 1px rgba(228,178,104,0.45), 0 0 0 0 rgba(108,120,255,0.38), 0 14px 38px -12px rgba(88,101,242,0.75);
  }

  .cs-bg__img,
  .cs-cta {
    transition: none;
  }
}