#fw-section-password {
--font-heading-scale: 1.4;
--font-body-scale: 1.6;
}
#fw-section-password {

/* Center wrapper layout */
.glitch-wrapper {
  background-color: #0b0b0b;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

/* Base text setup */
.glitch {
  position: relative;
  color: #ffffff;
  font-size: 5rem;
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
}

/* Common properties for both glitch layers */
.glitch::before,
.glitch::after {
  content: attr(data-text); /* Pulls text from HTML attribute */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #0b0b0b; /* Matches wrapper background */
}

/* Cyan layer (left split) */
.glitch::before {
  left: 3px;
  text-shadow: -2px 0 #00ffff;
  clip-path: rect(44px 450px 56px 0);
  animation: glitch-anim-1 2s infinite linear alternate-reverse;
}

/* Magenta layer (right split) */
.glitch::after {
  left: -3px;
  text-shadow: -2px 0 #ff00ff;
  clip-path: rect(85px 450px 140px 0);
  animation: glitch-anim-2 2s infinite linear alternate-reverse;
}

/* Keyframes for Top/Cyan Layer */
@keyframes glitch-anim-1 {
  0% { clip-path: inset(40% 0 61% 0); transform: skew(0.3deg); }
  20% { clip-path: inset(92% 0 1% 0); transform: skew(-0.5deg); }
  40% { clip-path: inset(15% 0 80% 0); transform: skew(0.1deg); }
  60% { clip-path: inset(80% 0 5% 0); transform: skew(0.8deg); }
  80% { clip-path: inset(3% 0 92% 0); transform: skew(-0.2deg); }
  100% { clip-path: inset(50% 0 43% 0); transform: skew(0.4deg); }
}

/* Keyframes for Bottom/Magenta Layer */
@keyframes glitch-anim-2 {
  0% { clip-path: inset(25% 0 58% 0); transform: skew(-0.4deg); }
  20% { clip-path: inset(70% 0 10% 0); transform: skew(0.3deg); }
  40% { clip-path: inset(5% 0 85% 0); transform: skew(-0.8deg); }
  60% { clip-path: inset(55% 0 30% 0); transform: skew(0.1deg); }
  80% { clip-path: inset(88% 0 3% 0); transform: skew(0.5deg); }
  100% { clip-path: inset(12% 0 78% 0); transform: skew(-0.3deg); }
}

}