/* =========================================================================
   IDUX coming-soon page. Reuses tokens, components (buttons) and the hero
   block from sections.css; this file only adds the one-screen layout.
   Rule for this page: nothing may look usable unless it works.
   ========================================================================= */

body[data-page="soon"] { display: flex; flex-direction: column; min-height: 100svh; }

/* abstract network behind the content; faded in the middle so text stays clear */
.soon-net {
  position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 62% 56% at 50% 46%, transparent 38%, #000 92%);
  mask-image: radial-gradient(ellipse 62% 56% at 50% 46%, transparent 38%, #000 92%);
}

.soon-top { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); flex: none; position: relative; z-index: 3; }
.soon-tag { letter-spacing: 0.16em; }

.hero.soon { flex: 1; min-height: 0; padding: clamp(12px, 3vh, 40px) 0 clamp(20px, 4vh, 48px); }
.soon .hero-inner { gap: clamp(14px, 2.3vh, 26px); }
.soon .hero-title { font-size: clamp(48px, min(7.8vw, 12.5vh), 124px); }
.soon .hero-orbits { top: 50%; }
.soon-pill { cursor: default; }
.soon-pill:hover { color: var(--muted-foreground); border-color: var(--border); }

/* example questions: plain rotating text. Deliberately not an input or a
   button — search is not open yet, so nothing here should look usable. */
.soon-ask { display: grid; justify-items: center; align-content: center; gap: 8px; min-height: 76px; }
.soon-phrase {
  font-family: var(--font-display); font-style: italic; font-size: clamp(24px, 2.6vw, 36px); line-height: 1.15; letter-spacing: -0.01em;
  color: color-mix(in srgb, var(--foreground) 88%, transparent); text-wrap: balance; cursor: default;
  transition: opacity 0.4s var(--ease-out), transform 0.5s var(--ease-out), filter 0.4s var(--ease-out);
}
.soon-phrase.is-out { opacity: 0; transform: translateY(-8px); filter: blur(6px); }

.soon-ctas { justify-content: center; gap: 12px; margin-top: 4px; }

.soon-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: min(100%, 760px); margin-top: clamp(4px, 1.5vh, 18px); text-align: left; }
.soon-duo li {
  display: grid; gap: 8px; align-content: start; padding: 18px 20px; border-radius: 18px;
  border: 1px solid var(--border); background: color-mix(in srgb, var(--card) 62%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.soon-duo p { font-size: 14.5px; line-height: 1.5; color: var(--muted-foreground); }

.soon-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; padding-block: 18px 22px; flex: none; font-size: 13px; color: var(--muted-foreground); position: relative; z-index: 3; }
.soon-foot a:hover { color: var(--foreground); }

@media (max-width: 640px) {
  .soon-duo { grid-template-columns: 1fr; }
  .soon-ask { min-height: 96px; }
  .soon-ctas .btn { width: 100%; }
  .soon-foot { justify-content: center; text-align: center; }
}

/* short laptop screens (e.g. 1280x720): keep everything on one screen */
@media (min-width: 641px) and (max-height: 780px) {
  .hero.soon { padding: 4px 0 10px; }
  .soon .hero-inner { gap: 13px; }
  .soon .hero-title { font-size: clamp(44px, min(7vw, 10.6vh), 96px); }
  .soon .hero-lead { font-size: 16.5px; }
  .soon-ask { min-height: 62px; gap: 6px; }
  .soon-phrase { font-size: 26px; }
  .soon-duo li { padding: 13px 16px; gap: 5px; }
  .soon-duo p { font-size: 13.5px; line-height: 1.45; }
  .soon-foot { padding-block: 8px 12px; }
}