/* ssgtheme — homepage only: the sky hero and the animated process diagram.
 *
 * Both sit on the dusk surface (--color-dusk-*), which is the same in the light
 * and the dark scheme, so nothing here needs a scheme override.
 */

/* ── Hero ───────────────────────────────────────────────────────────────── */

.hero--sky {
  margin: 0;
  padding-block: var(--space-12) 11rem;
  color: var(--color-dusk-fg);
  background-color: var(--color-dusk-bg);
  /* Bottom layer anchors the tree line; the top layer fades it into the
     diagram panel below so the two read as one scene. */
  background-image: linear-gradient(to top, var(--color-dusk-bg) 4px, transparent 16%),
    var(--hero-scrim-sm), var(--sky-image-sm);
  background-size: cover;
  background-position: center bottom;
}

@media (min-width: 768px) {
  .hero--sky {
    padding-block: var(--space-24) var(--space-32);
    background-image: linear-gradient(to top, var(--color-dusk-bg) 4px, transparent 14%),
      var(--hero-scrim), var(--sky-image);
  }
}

.hero--sky .eyebrow {
  color: var(--color-dusk-accent);
}

.hero--sky p {
  color: var(--color-dusk-fg-secondary);
}

.hero--sky .btn--secondary {
  border-color: var(--color-dusk-fg-muted);
  background: rgb(23 17 16 / 60%);
  color: var(--color-dusk-fg);
}

.hero--sky .btn--secondary:hover {
  border-color: var(--color-dusk-fg);
}

.hero--sky :focus-visible,
.flow-section :focus-visible {
  outline-color: var(--color-dusk-accent);
}

/* ── Process diagram ────────────────────────────────────────────────────── */

.flow-section {
  /* Overlaps the hero by a pixel so no seam shows at fractional heights. */
  margin-block-start: -1px;
  padding-block: var(--space-6) var(--space-16);
  background: var(--color-dusk-bg);
  color: var(--color-dusk-fg);
}

.flow-section .section-title {
  font-size: var(--font-size-3xl);
  margin-block: 0 var(--space-8);
}

.flow {
  --flow-gap: 2.5rem;
  --flow-cycle: 10s;
  /* One stage's share of the cycle: five stages, so cycle / 5. */
  --flow-step: 2s;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--flow-gap);
  grid-template-columns: 1fr;
}

.flow__defs {
  position: absolute;
}

.flow__stage:nth-child(1) { --i: 0; }
.flow__stage:nth-child(2) { --i: 1; }
.flow__stage:nth-child(3) { --i: 2; }
.flow__stage:nth-child(4) { --i: 3; }
.flow__stage:nth-child(5) { --i: 4; }

.flow__chips li:nth-child(1) { --k: 0; }
.flow__chips li:nth-child(2) { --k: 1; }
.flow__chips li:nth-child(3) { --k: 2; }

.flow__stage {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-4);
  row-gap: var(--space-2);
  align-items: center;
  padding: var(--space-4);
  border: 1px solid var(--color-dusk-border);
  border-radius: var(--radius-lg);
  background: var(--color-dusk-surface);
  animation: flow-stage var(--flow-cycle) var(--motion-easing-standard) infinite;
  animation-delay: calc(var(--i) * var(--flow-step));
}

.flow__glyph {
  width: 3.5rem;
  height: 3.5rem;
  grid-row: span 2;
}

.flow__title {
  align-self: end;
  font-family: var(--font-family-display);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-tight);
}

.flow__chips {
  align-self: start;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.flow__chips li {
  padding: 0.125rem var(--space-2);
  border: 1px solid var(--color-dusk-border);
  border-radius: var(--radius-pill);
  color: var(--color-dusk-fg-secondary);
  font-size: var(--font-size-xs);
  white-space: nowrap;
  animation: flow-chip var(--flow-cycle) var(--motion-easing-standard) infinite;
  animation-delay: calc(var(--i) * var(--flow-step) + var(--k) * 0.45s + 0.3s);
}

/* Connector (::after) and the packet that travels along it (::before). On a
   narrow screen the stages stack, so both run downwards. */
.flow__stage:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 2px;
  height: var(--flow-gap);
  margin-left: -1px;
  background: repeating-linear-gradient(180deg, var(--color-dusk-ember) 0 4px, transparent 4px 10px);
  opacity: 0.7;
  animation: flow-dash-y 0.6s linear infinite;
}

.flow__stage:not(:last-child)::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 50%;
  width: 0.75rem;
  height: 0.75rem;
  margin: -0.375rem 0 0 -0.375rem;
  border-radius: 50%;
  background: var(--color-dusk-accent);
  box-shadow: 0 0 14px 4px rgb(244 146 55 / 70%);
  opacity: 0;
  animation: flow-packet-y var(--flow-cycle) linear infinite;
  animation-delay: calc(var(--i) * var(--flow-step));
}

@media (min-width: 900px) {
  .flow {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .flow__stage {
    grid-template-columns: 1fr;
    row-gap: var(--space-3);
    align-content: start;
    padding: var(--space-5);
  }

  .flow__glyph {
    width: 4.5rem;
    height: 4.5rem;
    grid-row: auto;
  }

  .flow__stage:not(:last-child)::after {
    top: 50%;
    left: 100%;
    width: var(--flow-gap);
    height: 2px;
    margin: -1px 0 0;
    background: repeating-linear-gradient(90deg, var(--color-dusk-ember) 0 4px, transparent 4px 10px);
    animation-name: flow-dash-x;
  }

  .flow__stage:not(:last-child)::before {
    top: 50%;
    left: 100%;
    animation-name: flow-packet-x;
  }
}

@keyframes flow-stage {
  0%, 24%, 100% {
    border-color: var(--color-dusk-border);
    box-shadow: none;
  }
  4%, 18% {
    border-color: var(--color-dusk-ember);
    box-shadow: 0 0 0 1px var(--color-dusk-ember), 0 18px 44px -18px rgb(244 146 55 / 65%);
  }
}

@keyframes flow-chip {
  0%, 9%, 100% {
    border-color: var(--color-dusk-border);
    background: transparent;
    color: var(--color-dusk-fg-secondary);
  }
  2%, 6% {
    border-color: var(--color-dusk-ember);
    background: var(--color-dusk-ember);
    color: var(--color-dusk-bg);
  }
}

@keyframes flow-packet-x {
  0%, 15% { opacity: 0; transform: translateX(0); }
  16% { opacity: 1; transform: translateX(0); }
  23% { opacity: 1; transform: translateX(var(--flow-gap)); }
  24%, 100% { opacity: 0; transform: translateX(var(--flow-gap)); }
}

@keyframes flow-packet-y {
  0%, 15% { opacity: 0; transform: translateY(0); }
  16% { opacity: 1; transform: translateY(0); }
  23% { opacity: 1; transform: translateY(var(--flow-gap)); }
  24%, 100% { opacity: 0; transform: translateY(var(--flow-gap)); }
}

@keyframes flow-dash-x {
  to { background-position-x: 10px; }
}

@keyframes flow-dash-y {
  to { background-position-y: 10px; }
}

/* Without motion the diagram is the same list, connectors and all, at rest. */
@media (prefers-reduced-motion: reduce) {
  .flow__stage,
  .flow__stage::before,
  .flow__stage::after,
  .flow__chips li {
    animation: none;
  }
}

/* ── Documentation links ────────────────────────────────────────────────── */

.doc-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}

.doc-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 3rem;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  color: var(--color-fg-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  transition: border-color var(--motion-duration-base) var(--motion-easing-standard);
}

.doc-links a::after {
  content: "→";
  color: var(--color-fg-accent);
}

.doc-links a:hover {
  border-color: var(--color-border-strong);
}

/* ── Fleet ──────────────────────────────────────────────────────────────── */
.fleet-section,
.console-section {
  padding-block: var(--space-16);
}

.screen {
  display: block;
  width: 100%;
  height: auto;
  margin-block: var(--space-8);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.fleet-lead {
  max-width: 44rem;
  color: var(--color-fg-secondary);
  font-size: var(--font-size-lg);
}

.fleet-diagram {
  display: block;
  width: 100%;
  height: auto;
  margin-block: var(--space-8);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xl);
}