.next-decode-card {
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
position: relative;
background: transparent;
}
.next-decode-card__inner {
width: 100%;
position: relative;
overflow: hidden;
background-color: transparent;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.next-decode-card__pattern {
pointer-events: none;
}
.next-decode-card__pattern-gradient {
position: absolute;
inset: 0;
mask-image: linear-gradient(white, transparent);
-webkit-mask-image: linear-gradient(white, transparent);
opacity: 0;
transition: opacity var(--fade-duration) var(--fade-easing);
}
.next-decode-card__inner:hover .next-decode-card__pattern-gradient {
opacity: 0.5;
}
.next-decode-card__pattern-motion {
position: absolute;
inset: 0;
background: linear-gradient(to right, var(--gradient-left), var(--gradient-right));
opacity: 0;
transition: opacity var(--fade-duration) var(--fade-easing);
backdrop-filter: blur(var(--backdrop-filter));
}
.next-decode-card__inner:hover .next-decode-card__pattern-motion {
opacity: 1;
}
.next-decode-card__pattern-text {
position: absolute;
inset: 0;
opacity: 0;
mix-blend-mode: overlay;
transition: opacity var(--fade-duration) var(--fade-easing);
}
.next-decode-card__inner:hover .next-decode-card__pattern-text {
opacity: 1;
}
.next-decode-card__random-text {
position: absolute;
inset-inline: 0;
height: 100%;
word-break: break-all;
white-space: pre-wrap;
font-family: monospace;
transition: duration 0.5s;
margin: 0;
}
.next-decode-card__content {
position: relative;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
}
.next-decode-card__hover-container {
position: relative;
height: var(--content-size);
width: var(--content-size);
border-radius: var(--content-radius);
display: flex;
align-items: center;
justify-content: center;
}
.next-decode-card__hover-container::before {
content: '';
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
background-color: var(--content-color);
filter: blur(var(--content-blur));
border-radius: var(--content-radius);
}
[data-include-characters="0"] .next-decode-card__random-text {
display: none;
}