/* heyagentic.app — coming-soon placeholder. Full-bleed OpenRouter still. */
:root {
  --cs-ink: #0b1220;
  --cs-brand: #38bdf8;
  --cs-brand-deep: #0369a1;
  --cs-glow: #67e8f9;
  --cs-display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", sans-serif;
  --cs-sans: "Manrope", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--cs-ink);
  color: #f4f8fc;
}

body.coming-soon {
  min-height: 100dvh;
  overflow-x: hidden;
  font-family: var(--cs-sans);
}

.cs {
  position: relative;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 1fr auto;
  isolation: isolate;
}

.cs-plane {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(1100px 640px at 50% 40%, rgba(56, 189, 248, 0.2), transparent 58%),
    radial-gradient(800px 480px at 12% 90%, rgba(3, 105, 161, 0.22), transparent 55%),
    linear-gradient(165deg, #070b14 0%, #101a2a 46%, #0b1220 100%);
}

.cs-hero {
  position: absolute;
  inset: -3% -2%;
  width: 104%;
  height: 106%;
  object-fit: cover;
  object-position: center 42%;
  opacity: 0.94;
  filter: saturate(1.06) contrast(1.05);
  animation: cs-drift 32s ease-in-out infinite alternate;
  transform-origin: center center;
}

@keyframes cs-drift {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to { transform: scale(1.08) translate3d(-1.2%, -0.8%, 0); }
}

.cs-veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(7, 11, 20, 0.55) 0%, rgba(7, 11, 20, 0.12) 38%, rgba(7, 11, 20, 0.72) 100%),
    radial-gradient(ellipse 64% 50% at 50% 42%, transparent 16%, rgba(7, 11, 20, 0.5) 100%);
  pointer-events: none;
}

.cs-grid {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(125, 211, 252, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125, 211, 252, 0.12) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 55% at 50% 45%, #000 20%, transparent 75%);
  pointer-events: none;
}

.cs-sparks {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.cs-sparks span {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cs-glow);
  box-shadow: 0 0 12px 2px color-mix(in srgb, var(--cs-glow) 55%, transparent);
  animation: cs-spark 4.8s ease-in-out infinite;
  opacity: 0;
}
.cs-sparks span:nth-child(1) { left: 18%; top: 28%; animation-delay: 0s; }
.cs-sparks span:nth-child(2) { left: 62%; top: 22%; animation-delay: 1.1s; }
.cs-sparks span:nth-child(3) { left: 74%; top: 48%; animation-delay: 2s; }
.cs-sparks span:nth-child(4) { left: 34%; top: 58%; animation-delay: 2.8s; }
.cs-sparks span:nth-child(5) { left: 52%; top: 34%; animation-delay: 3.6s; }

@keyframes cs-spark {
  0%, 100% { opacity: 0; transform: scale(0.6) translateY(0); }
  35% { opacity: 0.9; transform: scale(1) translateY(-10px); }
  70% { opacity: 0.2; transform: scale(0.8) translateY(-22px); }
}

.cs-copy {
  position: relative;
  z-index: 5;
  align-self: end;
  padding: clamp(24px, 5vw, 56px);
  padding-bottom: 28px;
  max-width: 920px;
  animation: cs-rise 0.7s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes cs-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.cs-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  font-family: var(--cs-display);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: -0.04em;
  color: #fff;
  line-height: 1;
}
.cs-mark {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  flex: 0 0 44px;
  animation: cs-mark 4.2s ease-in-out infinite;
}
@keyframes cs-mark {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.cs-line {
  margin: 0;
  font-family: var(--cs-display);
  font-weight: 800;
  font-size: clamp(28px, 5.2vw, 52px);
  letter-spacing: -0.045em;
  line-height: 1.02;
  color: #f8fbff;
  text-wrap: balance;
  max-width: 16ch;
}

.cs-sub {
  margin: 14px 0 0;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7dd3fc;
}

.cs-foot {
  position: relative;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  justify-content: space-between;
  align-items: center;
  padding: 14px clamp(24px, 5vw, 56px) 22px;
  font-size: 12px;
  color: rgba(244, 248, 252, 0.62);
  border-top: 1px solid rgba(125, 211, 252, 0.12);
  background: linear-gradient(180deg, transparent, rgba(7, 11, 20, 0.55));
}

.version-stamp:empty { display: none; }

@media (max-width: 640px) {
  .cs-line { max-width: none; }
  .cs-hero { object-position: center 35%; }
}