/* ══ live glyph + glitch ══════════════════════════════════════════════════
   Ported from the AWMY marketing landing (`deploy/product-view.{css,js}`,
   the `.pv-livesym` inline glyph) and from its design-lab sibling
   `03-design/svg-motion/symbol-mark.css`, which is where the RGB-split
   glitch was actually authored. Two things live here:

   `.glyph`  — a small square that shows one of the cube's 31 symbols as a
               CSS mask, turns in quarter-turns and occasionally coughs.
               Inline size is 13px, the reduced variant from the landing;
               `--lg` is the 16px one.
   `.glitch` — a text run that splits into an accent ghost and an ink ghost
               during a cough. On the landing the ghosts were teal + ink;
               here the second colour is the site accent, since this system
               has no teal.

   The landing shipped the glyph without a reduced-motion guard — that was a
   gap, not a decision, so the guard from `symbol-mark.css` is carried over
   to both parts here: the glyph rests on one symbol, the text never splits. */

.glyph {
  display: inline-block;
  width: 13px; height: 13px;
  margin-right: 7px;
  vertical-align: -2px;
}
.glyph--lg { width: 16px; height: 16px; }

/* The mask carrier. The SVG is a stencil — colour comes from the background,
   so the glyph inherits whatever ink its context uses. */
.glyph i {
  display: block; width: 100%; height: 100%;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
  transition: transform .55s cubic-bezier(.5, 0, .2, 1),
              opacity var(--dur-fast) linear;
}

/* ---- the cough ----------------------------------------------------------
   On the landing a cough was never one effect: the glyph jittered, blinked
   out, flickered through other symbols and sometimes went dark for a longer
   beat. A text run cannot swap symbols, so the same four moves are spelled
   out here as four independent states, and the driver mixes them per frame:

   .is-glitch — ink and accent ghosts pulled apart, whole run displaced
   .is-blank  — the run itself drops out, leaving only the coloured ghosts
   .is-gone   — everything off for a longer beat (the rare blackout)
   the rule   — the underline slides and stretches on its own numbers      */

/* The padding is what the underline stands in: the rule is a child, and a child
   hanging below its parent's box would be cut by anything that clips. */
.glitch { position: relative; display: inline-block; padding-bottom: 4px; }
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute; left: 0; top: 0;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}
.glitch::before { color: var(--accent); }
.glitch::after  { color: var(--text); }

.glitch.is-glitch { transform: translate(var(--gl-jx, 0px), var(--gl-jy, 0px)); }
.glitch.is-glitch::before { opacity: .85; transform: translateX(var(--gl-split, 1.2px)); }
.glitch.is-glitch::after  { opacity: .55; transform: translateX(calc(-1 * var(--gl-split, 1.2px))); }

/* The run drops out but the ghosts do not — colour, not opacity, so the
   pseudo-elements keep their own. */
.glitch.is-blank { color: transparent; }
.glitch.is-gone  { opacity: 0; }

/* The underline. A real element rather than a border, so it can be displaced
   and stretched independently of the word sitting above it. */
.glitch__rule {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--text);
  transform-origin: left center;
}
.glitch.is-glitch .glitch__rule {
  background: var(--accent);
  transform: translateX(var(--gl-bx, 0px)) scaleX(var(--gl-bw, 1));
}
.glitch.is-blank .glitch__rule { background: var(--text); }
.hero__caption a:hover .glitch__rule { background: var(--accent-text); }

@media (prefers-reduced-motion: reduce) {
  .glyph i { transition: none; transform: none !important; opacity: 1 !important; }
  .glitch.is-glitch { transform: none !important; }
  .glitch.is-glitch::before,
  .glitch.is-glitch::after { opacity: 0 !important; transform: none !important; }
  .glitch.is-blank { color: inherit !important; }
  .glitch.is-gone { opacity: 1 !important; }
  .glitch.is-glitch .glitch__rule { background: var(--text); transform: none !important; }
}