/* R&D hub hero: a lattice of mathematical glyphs behind the copy.
   Markup is generated by scripts/gen_rnd_hero_glyphs.py into
   components/_rnd_hub_hero_glyphs.html; this file only styles it.

   The field replaced a schematic of sensors feeding a chip through validated
   checkpoints. That drawing read as a claim about a system we run, on the one
   page whose whole register is stating what is and is not established, so it
   went. What is left depicts nothing and asserts nothing. */

.rnd-hero-field {
  position: absolute;
  inset: 0;
  /* 0, not -1. A negative index paints the field below its own ancestor
     section, and hit-testing then hands every pointer to that section instead
     of to a cell, which kills the hover. At 0 the field still sits above
     .background-tech (-z-10) and below both .header-bar (z-70) and the hero
     copy, which follows it in the document and shares this level. */
  z-index: 0;
  overflow: hidden;
  /* Same stack as .rnd-note-meta further down the page, so the field and the
     notes index speak in one voice. */
  font-family: ui-monospace, "DejaVu Sans Mono", "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  user-select: none;

  /* Two masks intersected: a left-to-right ramp that thins the field under the
     copy, and a vertical fade that keeps it off the nav row and the bottom
     edge. Because density falls away on its own, the title no longer needs the
     width cap the old artwork forced on it. */
  -webkit-mask-image:
    linear-gradient(96deg, transparent 0%, transparent 22%, rgba(0, 0, 0, 0.30) 40%, rgba(0, 0, 0, 0.72) 58%, #000 76%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.40) 0%, #000 17%, #000 85%, rgba(0, 0, 0, 0.30) 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(96deg, transparent 0%, transparent 22%, rgba(0, 0, 0, 0.30) 40%, rgba(0, 0, 0, 0.72) 58%, #000 76%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.40) 0%, #000 17%, #000 85%, rgba(0, 0, 0, 0.30) 100%);
  mask-composite: intersect;
}

/* The lattice is a fixed canvas pinned to the top-right corner, so a narrow
   viewport crops the left, which the mask has already faded, and keeps the
   right, which carries the field. */
.rnd-hero-field__inner {
  position: absolute;
  top: 0;
  right: 0;
  width: 1680px;
  height: 1180px;
}

.rnd-gc {
  position: absolute;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  font-size: 13px;
  line-height: 1;
  color: #9edcec;
  opacity: var(--o);
  /* Slow out, fast in: the :hover rule below overrides the duration on the way
     in only, so a pointer sweeping the field leaves a trail that decays behind
     it rather than switching off cell by cell. */
  transition:
    opacity 1100ms ease,
    color 1100ms ease,
    transform 1100ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

.rnd-gc:hover {
  opacity: 0.92;
  color: var(--color-accent, #10c7ff);
  transform: scale(1.35);
  transition-duration: 90ms, 90ms, 120ms;
}

/* The glyph is drawn from the attribute rather than sitting in a text node, so
   the field stays out of find-in-page and out of a select-all. */
.rnd-gc i {
  grid-area: 1 / 1;
  font-style: normal;
}

.rnd-gc i::before {
  content: attr(data-g);
}

/* Cycling cells stack two glyphs and hand the visible slot back and forth.
   Periods are drawn per cell and never rounded, so no two cells stay in step
   and the field has no visible repeat. The visible window below is a little
   over half the period, so the two layers overlap briefly and the swap reads
   as a crossfade rather than as the cell blinking out. Change LAYERS in the
   generator and these keyframes have to be rewritten to match. */
.rnd-gc--cycle i {
  opacity: 0;
  animation-name: rnd-glyph-cycle;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes rnd-glyph-cycle {
  0% { opacity: 0; }
  6% { opacity: 1; }
  44% { opacity: 1; }
  54% { opacity: 0; }
  100% { opacity: 0; }
}

/* The hero content sits above the field and would otherwise swallow every
   pointer event before it reached a cell. Scoped to this page's section_class
   so the shared hero component is untouched; the text itself stays selectable
   and its links stay clickable. */
.rnd-hub-hero-copy {
  pointer-events: none;
}

.rnd-hub-hero-copy h1,
.rnd-hub-hero-copy p,
.rnd-hub-hero-copy a {
  pointer-events: auto;
}

@media (max-width: 639px) {
  /* Everything outside the rightmost band is off-canvas on a phone. Dropping
     it rather than leaving it to animate behind the viewport edge takes the
     field from ~880 cells to ~220. */
  .rnd-gc--wide {
    display: none;
  }

  /* Portrait has no room to thin the field horizontally, so it thins downward
     instead and the glyphs sit below the copy rather than through it. */
  .rnd-hero-field {
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 30%, rgba(0, 0, 0, 0.30) 48%, #000 78%);
    -webkit-mask-composite: source-over;
    mask-image: linear-gradient(180deg, transparent 0%, transparent 30%, rgba(0, 0, 0, 0.30) 48%, #000 78%);
    mask-composite: add;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Settle on the first glyph of each cycle and drop the hover decay. The
     still is the same field, just not moving. */
  .rnd-gc--cycle i {
    animation: none;
  }

  .rnd-gc--cycle i:not(:first-child) {
    display: none;
  }

  .rnd-gc--cycle i:first-child {
    opacity: 1;
  }

  .rnd-gc {
    transition: none;
  }
}