/* Shared animations for nav glyphs, decode effect, abyss starfield.
   Pair with assets/glyphs.js for the decode loop. */

.zb-glyph {
  display: inline-block;
  font-family: 'Orbitron', 'Press Start 2P', sans-serif;
  color: var(--zb-primary);
  text-shadow: 0 0 8px var(--zb-primary-glow);
  transition: transform var(--zb-dur-base) var(--zb-ease-out),
              text-shadow var(--zb-dur-base) var(--zb-ease-out),
              color var(--zb-dur-base) var(--zb-ease-out);
  will-change: transform;
}

.zb-glyph--drift {
  animation: zb-glyph-orbit var(--zb-dur-drift) var(--zb-ease-drift) infinite;
}

@keyframes zb-glyph-orbit {
  0%   { transform: translate3d( 0px,   0px, 0) rotate( 0deg); }
  25%  { transform: translate3d(18px, -22px, 0) rotate( 4deg); }
  50%  { transform: translate3d( 4px, -36px, 0) rotate(-2deg); }
  75%  { transform: translate3d(-20px,-18px, 0) rotate( 3deg); }
  100% { transform: translate3d( 0px,   0px, 0) rotate( 0deg); }
}

.zb-glyph:hover,
.zb-glyph--active {
  transform: scale(1.15);
  color: var(--zb-accent);
  text-shadow: 0 0 18px var(--zb-accent-glow), 0 0 2px var(--zb-accent);
}

/* The decoded RESOLVE_WORD swap state */
.zb-glyph--resolved {
  font-family: var(--zb-font-glitch);
  letter-spacing: var(--zb-track-wide);
  color: var(--zb-primary);
}

/* Bioluminescent vein divider */
.zb-vein {
  height: 1px;
  background: var(--zb-grad-vein);
  background-size: 200% 100%;
  animation: zb-vein-slide 4s linear infinite;
}

/* Glitch title: gradient fill + dual offset clones */
.zb-glitch-title {
  position: relative;
  display: inline-block;
  font-family: var(--zb-font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--zb-track-wider);
  background: var(--zb-grad-glitch);
  background-size: 300% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: zb-vein-slide 6s linear infinite;
}
.zb-glitch-title::before,
.zb-glitch-title::after {
  content: attr(data-text);
  position: absolute; inset: 0;
  background: inherit;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  mix-blend-mode: screen;
}
.zb-glitch-title::before { animation: zb-glitch-x 2.2s steps(6) infinite; color: var(--zb-accent); }
.zb-glitch-title::after  { animation: zb-glitch-x 1.6s steps(6) infinite reverse; color: var(--zb-cyan); }