/* home.css — hero, solution cards, numbers strip, chat demo. */

/* Hero canvas — the login screen's three layers, on the warm palette:
   a gradient ground, a dot lattice over it, and drifting blur orbs.
   Declared here (home.css loads after site.css) so it wins over .dotgrid. */
.hero {
  position: relative; overflow: hidden;
  padding: var(--space-20) 0 var(--space-16);
  background-image:
    radial-gradient(var(--dot-grid-dot) 1px, transparent 1px),
    var(--gradient-chat);
  background-size: var(--dot-grid-size) var(--dot-grid-size), cover;
  background-position: 0 0, center;
}
/* Dissolve the hero into the page below instead of ending on a hard line. */
.hero::before {
  content: ""; position: absolute; inset: auto 0 0 0; height: 180px;
  z-index: 0; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--gradient-canvas));
}
.hero__inner { position: relative; z-index: 1; }
.hero .display { max-width: 18ch; }
.hero__lede { margin: var(--space-6) 0 var(--space-8); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Ambient orbs — the login canvas signature, decorative only.
   Motion mirrors the Studio login: a slow diagonal traverse on a long
   ease-in-out loop, two orbs out of phase so the field never repeats visibly. */
.orb {
  position: absolute; border-radius: var(--radius-pill);
  filter: blur(90px); opacity: 0.55; pointer-events: none; z-index: 0;
  will-change: transform;
}
.orb--a {
  width: 420px; height: 420px; background: var(--accent-glow);
  top: -120px; right: -80px;
  animation: kube-orb-drift 18s ease-in-out infinite;
}
.orb--b {
  width: 300px; height: 300px; background: var(--accent-yellow);
  top: 180px; right: 240px; opacity: 0.32;
  animation: kube-orb-drift-alt 22s ease-in-out infinite;
}
/* The third, largest orb is a radial wave rather than a solid disc — the same
   treatment the login uses for its sweeping layer. No extra markup needed. */
.hero::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 720px; height: 720px; border-radius: var(--radius-pill);
  right: -160px; bottom: -320px;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--accent-500) 30%, transparent) 0%,
    color-mix(in srgb, var(--accent-500) 10%, transparent) 35%,
    transparent 70%);
  filter: blur(60px);
  animation: kube-orb-wave 26s ease-in-out infinite;
  will-change: transform;
}

@keyframes kube-orb-drift {
  0%   { transform: translate(0, 0) scale(1); }
  25%  { transform: translate(-16vw, 5vh) scale(1.08); }
  50%  { transform: translate(-30vw, -4vh) scale(0.94); }
  75%  { transform: translate(-14vw, 8vh) scale(1.06); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes kube-orb-drift-alt {
  0%   { transform: translate(0, 0) scale(1.1); }
  33%  { transform: translate(18vw, 9vh) scale(0.95); }
  66%  { transform: translate(32vw, -5vh) scale(1.18); }
  100% { transform: translate(0, 0) scale(1.1); }
}
@keyframes kube-orb-wave {
  0%   { transform: translate(0, 0) scale(1); }
  30%  { transform: translate(-26vw, -8vh) scale(1.12); }
  60%  { transform: translate(-52vw, 4vh) scale(0.92); }
  100% { transform: translate(0, 0) scale(1); }
}

/* Motion is decoration; the orbs still read as a warm field when it is off. */
@media (prefers-reduced-motion: reduce) {
  .orb, .hero::after { animation: none; }
}

.duo { margin-top: var(--space-8); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--space-5); }
.duo__card { display: flex; flex-direction: column; gap: var(--space-3); }
.duo__kicker { font-size: var(--size-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-accent); font-weight: 700; }
.duo__name { font-size: var(--size-h2, 1.5rem); font-weight: 700; margin: 0; }
.duo__body { color: var(--fg-secondary); font-size: var(--size-body); margin: 0; flex: 1 1 auto; }
.duo__more { color: var(--fg-accent); font-weight: 700; font-size: var(--size-body); text-decoration: none; }
.duo__more:hover { text-decoration: underline; }

.stats { margin-top: var(--space-10); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: var(--space-5); }
.stat { border-top: 3px solid var(--accent-500); padding-top: var(--space-4); }
.stat__value { font-size: var(--size-display); font-weight: 200; line-height: var(--line-tight); letter-spacing: var(--tracking-hero); }
.stat__label { font-size: var(--size-caption); color: var(--fg-tertiary); margin: var(--space-2) 0 0; }

.closing { margin-top: var(--space-8); background: var(--gradient-rail); color: var(--fg-on-dark); border-radius: var(--radius-xl); padding: var(--space-12) var(--space-8); }
.closing .section-title { color: var(--fg-on-dark); }
.closing p { color: var(--fg-on-dark-muted); }
/* Breathing room between the sentence and the actions it leads into. */
.closing .hero__actions { margin-top: var(--space-10); }
/* The ghost button inherits --fg-primary, which is near-black — invisible on the
   dark closing panel. On a dark surface it takes the on-dark ink instead. */
.closing .btn--ghost {
  color: var(--fg-on-dark);
  border-color: color-mix(in srgb, var(--fg-on-dark) 34%, transparent);
}
.closing .btn--ghost:hover {
  background: color-mix(in srgb, var(--fg-on-dark) 12%, transparent);
  border-color: var(--fg-on-dark);
}

/* ── Chat demo ── */
.chat {
  border: 0.5px solid var(--border-card); border-radius: var(--radius-xl);
  background: var(--gradient-chat); padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.chat__log { min-height: 240px; max-height: 380px; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-3); }
.chat__bubble {
  max-width: 78%; padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg); font-size: var(--size-body);
  box-shadow: var(--shadow-bubble); overflow-wrap: anywhere;
}
.chat__bubble--user { align-self: flex-end; background: var(--gradient-bubble-user); color: var(--fg-on-dark); }
.chat__bubble--ai { align-self: flex-start; background: var(--gradient-bubble-ai); color: var(--fg-primary); }
.chat__cite {
  display: inline-block; margin-top: var(--space-2);
  padding: 2px var(--space-2); border-radius: var(--radius-xs);
  background: var(--accent-100); color: var(--fg-secondary); font-size: var(--size-micro);
}
.chat__cta { display: inline-block; margin-top: var(--space-2); font-size: var(--size-caption); color: var(--fg-accent); }
.chat__suggest { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chat__form { display: flex; gap: var(--space-3); }
.chat__input {
  flex: 1 1 auto; min-width: 0; font: inherit;
  padding: var(--space-3) var(--space-4);
  border: 0.5px solid var(--border-card); border-radius: var(--radius-pill);
  background: var(--surface-3); color: var(--fg-primary); box-shadow: var(--shadow-input);
}

/* Decorative entry only — applied after the reply text is already in the DOM. */
@keyframes chat-enter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.chat__bubble.is-entering { animation: chat-enter var(--duration-slow) var(--easing-out) both; }
@media (prefers-reduced-motion: reduce) {
  .chat__bubble.is-entering { animation: none; }
}