/* ============================================ */
/* SCRAMBLED TEXT DECRYPTION EFFECT             */
/* ============================================ */

/* Word wrapper - keeps letters together */
.scramble-word {
  display: inline-block !important;
  white-space: nowrap !important;
  vertical-align: baseline !important;
}

/* Individual character wrapper */
.scramble-char {
  display: inline-block !important;
  transition: color 0.15s ease, opacity 0.15s ease;
  text-align: center !important;
  vertical-align: baseline !important;
}

/* Encrypted characters use monospace to prevent width changes */
.scramble-char.encrypted {
  font-family: 'Courier New', monospace !important;
  font-size: 0.95em !important;
}

/* Revealed characters use original font */
.scramble-char.revealed {
  font-family: inherit !important;
  font-size: inherit !important;
}

/* Preserve spaces and line breaks */
.scramble-char.space {
  width: 0.25em;
}

.scramble-char.linebreak {
  display: block;
  height: 0;
}

/* ============================================ */
/* CHARACTER STATES                             */
/* ============================================ */

/* Encrypted state - faded blue, scrambled characters */
.scramble-char.encrypted {
  color: rgba(var(--color-primary-dark-rgb), var(--opacity-strong));
  opacity: 0.6;
}

/* Revealing state - transitioning to normal */
.scramble-char.revealing {
  color: rgba(var(--color-primary-dark-rgb), var(--opacity-semitransparent));
  opacity: 0.85;
}

/* Revealed state - normal text color */
.scramble-char.revealed {
  color: var(--color-primary-dark);
  opacity: 1;
}

/* ============================================ */
/* STYLE VARIANTS                               */
/* ============================================ */

/* Variant 1: Subtle Professional (default) */
.scramble-display.subtle .scramble-char.encrypted {
  color: rgba(var(--color-primary-dark-rgb), var(--opacity-strong));
  opacity: 0.6;
  filter: blur(0.5px);
}

.scramble-display.subtle .scramble-char.revealing {
  color: rgba(var(--color-primary-dark-rgb), var(--opacity-semitransparent));
  opacity: 0.85;
  filter: blur(0.2px);
}

.scramble-display.subtle .scramble-char.revealed {
  color: var(--color-primary-dark);
  opacity: 1;
  filter: none;
}

/* Variant 2: Matrix Green */
.scramble-display.matrix .scramble-char.encrypted {
  color: rgba(0, 255, 178, 0.3);
  opacity: 0.5;
  text-shadow: 0 0 2px rgba(0, 255, 178, 0.3);
}

.scramble-display.matrix .scramble-char.revealing {
  color: rgba(0, 255, 178, 0.7);
  opacity: 0.8;
  text-shadow: 0 0 4px rgba(0, 255, 178, 0.5);
}

.scramble-display.matrix .scramble-char.revealed {
  color: #00ffb2;
  opacity: 1;
  text-shadow: 0 0 8px rgba(0, 255, 178, 0.6);
}

/* Variant 3: Glitch Effect */
.scramble-display.glitch .scramble-char.encrypted {
  color: rgba(var(--color-primary-dark-rgb), var(--opacity-strong));
  opacity: 0.4;
  animation: glitchFlicker 0.8s infinite;
}

.scramble-display.glitch .scramble-char.revealing {
  color: rgba(var(--color-primary-dark-rgb), var(--opacity-semitransparent));
  opacity: 0.8;
  animation: glitchPulse 0.4s ease-in-out;
}

.scramble-display.glitch .scramble-char.revealed {
  color: var(--color-primary-dark);
  opacity: 1;
  animation: none;
}

@keyframes glitchFlicker {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.2; }
}

@keyframes glitchPulse {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.05);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ============================================ */
/* ACCESSIBILITY & PERFORMANCE                  */
/* ============================================ */

/* Ensure screen readers read the original text */
.scramble-original-text {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Reduce motion for users with preference */
@media (prefers-reduced-motion: reduce) {
  .scramble-char {
    transition: none !important;
  }

  .scramble-display.glitch .scramble-char.encrypted,
  .scramble-display.glitch .scramble-char.revealing {
    animation: none !important;
  }

  .scramble-display.subtle .scramble-char.encrypted {
    filter: none !important;
  }
}

/* ============================================ */
/* RESPONSIVE ADJUSTMENTS                       */
/* ============================================ */

/* Mobile: Reduce blur and effects for performance */
@media (max-width: 809.98px) {
  .scramble-display.subtle .scramble-char.encrypted {
    filter: none;
  }

  .scramble-display.subtle .scramble-char.revealing {
    filter: none;
  }

  .scramble-display.matrix .scramble-char {
    text-shadow: none;
  }
}

/* Tablet: Moderate effects */
@media (min-width: 810px) and (max-width: 1199.98px) {
  .scramble-display.subtle .scramble-char.encrypted {
    filter: blur(0.3px);
  }

  .scramble-display.matrix .scramble-char.encrypted {
    text-shadow: 0 0 1px rgba(0, 255, 178, 0.2);
  }

  .scramble-display.matrix .scramble-char.revealing {
    text-shadow: 0 0 2px rgba(0, 255, 178, 0.3);
  }

  .scramble-display.matrix .scramble-char.revealed {
    text-shadow: 0 0 4px rgba(0, 255, 178, 0.4);
  }
}

/* ============================================ */
/* CUSTOM CHARACTER SETS                        */
/* ============================================ */

/* Different character sets for scrambling effect */
.scramble-display[data-charset="alphanumeric"] .scramble-char.encrypted::before {
  /* Uses JavaScript to inject scrambled characters */
  content: attr(data-scrambled);
}

.scramble-display[data-charset="symbols"] .scramble-char.encrypted::before {
  /* Uses JavaScript to inject scrambled symbols */
  content: attr(data-scrambled);
}

.scramble-display[data-charset="mixed"] .scramble-char.encrypted::before {
  /* Uses JavaScript to inject mixed scrambled characters */
  content: attr(data-scrambled);
}