/* ═══════════════════════════════════════════════════════════════════════
   TEXT DECODE EFFECT — Cipher/Matrix text reveal on hover & scroll
   All classes prefixed with .zd- to avoid collisions
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Decode on hover ── */
.zd-decode {
  cursor: default;
  position: relative;
  display: inline;
}

/* While decoding, use mono font for character swaps */
.zd-decode.zd-decode--active {
  font-family: var(--z-font-mono, 'JetBrains Mono', monospace);
}

/* Individual character span during animation */
.zd-char {
  display: inline-block;
  min-width: 0.1em;
  transition: color 0.1s ease;
}

.zd-char--scrambled {
  color: var(--z-accent, #f59e0b);
  text-shadow: 0 0 8px rgba(245, 158, 11, 0.3);
}

.zd-char--resolved {
  color: inherit;
  text-shadow: none;
}

/* ── Section Reveal (scroll-triggered decode) ── */
.zd-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.zd-reveal.zd-reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Scramble cursor (blinking underscore after text) ── */
.zd-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--z-accent, #f59e0b);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: zd-cursorBlink 0.8s step-end infinite;
  opacity: 0;
}

.zd-decode--active .zd-cursor {
  opacity: 1;
}

@keyframes zd-cursorBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* ── Counter Decode (numbers counting up) ── */
.zd-counter {
  font-family: var(--z-font-mono, 'JetBrains Mono', monospace);
  font-variant-numeric: tabular-nums;
}

.zd-counter.zd-counter--active {
  color: var(--z-accent, #f59e0b);
  text-shadow: 0 0 8px rgba(245, 158, 11, 0.2);
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  .zd-decode,
  .zd-reveal,
  .zd-char,
  .zd-cursor,
  .zd-counter {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .zd-char--scrambled {
    color: inherit;
    text-shadow: none;
  }
}