Template:DecryptText/styles.css

/* Template:DecryptText/styles.css
   Hover-to-decrypt text effect with a "trigger once" delay trick */

.dec-scene {
    display: inline-block;
    position: relative;
    vertical-align: bottom;
    cursor: default;
}

/* The real text defines the bounding box of the container */
.dec-real {
    display: inline;
}

/* The mask overlays absolutely, cropping to the exact size of the real text */
.dec-mask {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    overflow: hidden;
    word-break: break-all;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    color: inherit;
}

/* =========================================
   STATE 1: STAY DECRYPTED (Default)
   Uses a 9999s delay to permanently "stick"
   ========================================= */
.dec-stay .dec-real {
    opacity: 0;
    transition: opacity 0s 9999s; /* Magic trick: wait 9999 seconds to hide */
}
.dec-stay:hover .dec-real {
    opacity: 1;
    transition: opacity 0.4s 0.1s; /* Appear smoothly after a 0.1s delay */
}

.dec-stay .dec-mask {
    opacity: 1;
    transition: opacity 0s 9999s;
}
.dec-stay:hover .dec-mask {
    opacity: 0;
    animation: dec-scramble 0.3s steps(4);
    transition: opacity 0.2s 0.2s; /* Glitches for 0.2s, then fades out */
}

/* =========================================
   STATE 2: REVERT ON MOUSE LEAVE
   ========================================= */
.dec-revert .dec-real {
    opacity: 0;
    transition: opacity 0.4s 0.2s; /* Hide smoothly when mouse leaves */
}
.dec-revert:hover .dec-real {
    opacity: 1;
    transition: opacity 0.4s 0.1s;
}

.dec-revert .dec-mask {
    opacity: 1;
    transition: opacity 0.4s 0.2s;
}
.dec-revert:hover .dec-mask {
    opacity: 0;
    animation: dec-scramble 0.3s steps(4);
    transition: opacity 0.2s 0.2s;
}

/* Terminal glitch animation */
@keyframes dec-scramble {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(-2px, 1px); }
    50%  { transform: translate(1px, -1px); }
    75%  { transform: translate(-1px, 2px); }
    100% { transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .dec-stay:hover .dec-mask, 
    .dec-revert:hover .dec-mask {
        animation: none !important;
    }
}