/* ─────────────────────────────────────────────────────────────────────────────
   e14-scramble.css — text scramble / decode effect on hover + glitch reveals
   Depends on: e14-scramble.js (handles character iteration)
───────────────────────────────────────────────────────────────────────────── */

/* Scramble target — cursor signals interactivity */
.scramble-target {
  cursor: default;
  display: inline-block;
}

/* Individual character spans during scramble */
.scramble-char {
  display: inline-block;
  transition: color 0.05s linear;
}

.scramble-char.sc-random {
  color: oklch(74% 0.20 246 / 0.7);
  font-variant-numeric: tabular-nums;
}

.scramble-char.sc-resolved {
  color: inherit;
}

/* Glitch effect on section h2s when they enter viewport */
.section-h2.glitch-ready {
  position: relative;
}

.section-h2.glitch-active::before,
.section-h2.glitch-active::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  pointer-events: none;
}

.section-h2.glitch-active::before {
  color: oklch(74% 0.20 246 / 0.5);
  clip-path: polygon(0 20%, 100% 20%, 100% 40%, 0 40%);
  transform: translateX(-2px);
  animation: glitch-slice-1 0.25s steps(1) forwards;
}

.section-h2.glitch-active::after {
  color: oklch(93% 0.27 122 / 0.5);
  clip-path: polygon(0 60%, 100% 60%, 100% 80%, 0 80%);
  transform: translateX(2px);
  animation: glitch-slice-2 0.25s steps(1) forwards;
}

@keyframes glitch-slice-1 {
  0%   { transform: translateX(-2px); clip-path: polygon(0 20%, 100% 20%, 100% 40%, 0 40%); }
  33%  { transform: translateX(3px);  clip-path: polygon(0 10%, 100% 10%, 100% 30%, 0 30%); }
  66%  { transform: translateX(-1px); clip-path: polygon(0 50%, 100% 50%, 100% 65%, 0 65%); }
  100% { transform: translateX(0);    clip-path: polygon(0 0, 0 0, 0 0, 0 0); }
}

@keyframes glitch-slice-2 {
  0%   { transform: translateX(2px);  clip-path: polygon(0 60%, 100% 60%, 100% 80%, 0 80%); }
  33%  { transform: translateX(-3px); clip-path: polygon(0 70%, 100% 70%, 100% 90%, 0 90%); }
  66%  { transform: translateX(1px);  clip-path: polygon(0 40%, 100% 40%, 100% 55%, 0 55%); }
  100% { transform: translateX(0);    clip-path: polygon(0 0, 0 0, 0 0, 0 0); }
}

/* Reduced motion — disable everything */
@media (prefers-reduced-motion: reduce) {
  .scramble-char.sc-random {
    color: inherit;
  }
  .section-h2.glitch-active::before,
  .section-h2.glitch-active::after {
    display: none;
  }
}