/* index only */

/* Hero title: gradient text that animates across the words on hover.
   The gradient is wider than the text (200%) so shifting background-position
   moves the colour stops through the words rather than off the edge. */
.hero-title {
  background: linear-gradient(90deg,
    rgb(230, 0, 111), rgb(99, 102, 241), rgb(6, 182, 212), rgb(230, 0, 111));
  background-size: 200% 100%;
  background-position: 0% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.hero-title:hover,
h1:hover .hero-title {
  animation: hero-gradient 3s linear infinite;
}
@keyframes hero-gradient {
  to { background-position: -200% 0; }
}

/* index uses a diagonal, full-cover sweep rather than the shared left-to-right one */
.light-sweep::after {
  top: -100%; left: -100%; width: 300%; height: 300%;
  background: linear-gradient(45deg, transparent, var(--c-sweep), transparent);
  pointer-events: none;
}
.light-sweep:hover::after { top: 0; left: 0; }

/* ---------------------------------------------------------------
   Hero architecture diagram.

   Drawn in markup rather than as an SVG/image so the labels stay real
   text (selectable, translatable, readable by AT), the colours follow
   the theme tokens, and the hero adds no extra bytes to first paint.
   --------------------------------------------------------------- */

/* --c-line is white in dark and a light grey in light, so a single opacity
   can't serve both: 12% white reads on the dark panel, 12% grey is invisible
   on white. Each theme gets its own edge strength. */
:root { --arch-edge: rgb(var(--c-line) / 0.85); --arch-edge-soft: rgb(var(--c-line) / 1); }
.dark { --arch-edge: rgb(var(--c-line) / 0.12); --arch-edge-soft: rgb(var(--c-line) / 0.22); }

.arch-node,
.arch-base {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.625rem 0.875rem;
  border-radius: 0.5rem;
  border: 1px solid var(--arch-edge);
  background: rgb(var(--c-surface) / 0.6);
}

/* The entry point is not something we build, so it reads as an actor:
   dashed edge, no fill, muted. */
.arch-node--entry {
  border-style: dashed;
  border-color: var(--arch-edge-soft);
  background: transparent;
}

/* Infrastructure underpins the stack rather than sitting in the request
   path, so it gets a foundation treatment instead of an arrow into it. */
.arch-base {
  margin-top: 0.75rem;
  border-color: rgb(var(--c-primary) / 0.3);
  background: rgb(var(--c-primary) / 0.06);
  box-shadow: 0 -1px 0 0 rgb(var(--c-primary) / 0.12);
}

.arch-node-name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
}

.arch-node-detail {
  display: block;
  margin-top: 2px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.02em;
  line-height: 1.35;
  color: rgb(var(--c-body) / 0.6);
}

/* Connector between layers: a hairline that fades into a chevron, so the
   direction of flow is legible without an icon-font dependency. */
.arch-link {
  display: block;
  width: 1px;
  height: 22px;
  margin: 0 auto;
  position: relative;
  background: linear-gradient(to bottom, rgb(var(--c-primary) / 0.2), rgb(var(--c-primary) / 0.75));
}

/* Arrowhead. Sized and weighted to still read at the hero's rendered scale —
   a 5px hairline chevron disappears against the panel. */
.arch-link::after {
  content: '';
  position: absolute;
  bottom: 1px;
  left: 50%;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid rgb(var(--c-primary) / 0.85);
  border-bottom: 1.5px solid rgb(var(--c-primary) / 0.85);
  transform: translateX(-50%) rotate(45deg);
}