/* ==========================================
   MONT3 GLITCH SYSTEM
   Digital Scramble on the "3" (JS-driven)
   ========================================== */

.hero-title .three {
  display: inline-block;
  position: relative;
}

/* Overlay for scramble characters — absolutely positioned so it never affects layout */
.hero-title .three .scramble-overlay {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  white-space: nowrap;
}

/* Hide the real "3" while scrambling */
.hero-title .three.glitch-scramble > span:first-child {
  visibility: hidden;
}

/* --- MONT subtle text-shadow glitch when scramble fires --- */
.hero-title.mont-glitch .filled {
  animation: montGlitch 0.8s steps(3) forwards;
}

@keyframes montGlitch {
  0%   { text-shadow: none; }
  10%  { text-shadow: -3px 0 var(--accent), 3px 0 var(--accent2); }
  20%  { text-shadow: none; }
  30%  { text-shadow: 3px 0 var(--accent2), -3px 0 var(--accent); }
  40%  { text-shadow: -2px 0 var(--accent), 2px 0 var(--accent2); }
  50%  { text-shadow: none; }
  60%  { text-shadow: -4px 0 var(--accent), 4px 0 var(--accent2); }
  70%  { text-shadow: 2px 0 var(--accent2), -2px 0 var(--accent); }
  80%  { text-shadow: none; }
  90%  { text-shadow: -1px 0 var(--accent), 1px 0 var(--accent2); }
  100% { text-shadow: none; }
}