/*=============
VARIOUS EFFECTS 
===============*/

.text-box--flip {
transform: rotate(180deg);
transition: transform 0.6s ease;
cursor: pointer;
}

.text-box--flip:hover,
.text-box--flip.flipped {
transform: rotate(0deg);
}

/*======================================
VERTICAL MIRROR (Reflects top to bottom)
========================================*/

.text-box--flip-vertical {
transform: scaleY(-1);
transition: transform 0.5s ease;
}

.text-box--flip-vertical:hover,
.text-box--flip-vertical.flipped {
transform: scaleY(1);
}

/*======================================================
TILTED TEXT (Slight angle at rest, straightens on reveal)
=======================================================*/

.text-box--tilt {
transform: rotate(-8deg);
transition: transform 0.4s ease;
}

.text-box--tilt:hover,
.text-box--tilt.flipped {
transform: rotate(0deg);
}

/*==================================================
SKEWED TEXT (Slanted at rest, straightens on reveal)
====================================================*/

.text-box--skew {
transform: skewX(-12deg);
transition: transform 0.4s ease;
}

.text-box--skew:hover,
.text-box--skew.flipped {
transform: skewX(0deg);
}

/*======================================================
BLURRED FOCUS (Out of focus at rest, sharpens on reveal)
=======================================================*/

.text-box--blur {
filter: blur(6px);
opacity: 0.5;
transition: filter 0.4s ease, opacity 0.4s ease;
}

.text-box--blur:hover,
.text-box--blur.flipped {
filter: blur(0);
opacity: 1;
}

/*=======================================================
ZOOM (Starts small/shrunken, pops to full size on reveal)
========================================================*/

.text-box--zoom {
transform: scale(0.8);
transition: transform 0.35s ease;
}

.text-box--zoom:hover,
.text-box--zoom.flipped {
transform: scale(1);
}

/*=======================
EXTRA BLURRY (NFSW Images)
==========================*/

.mature-image {
filter: blur(20px);
transition: filter 0.4s ease;
}

.mature-image:hover,
.mature-image.revealed {
filter: blur(0);
}

/*==============================================
ANAGRAM SWAP (basic version, no letter animation)
=================================================*/

.anagram {
position: relative;
display: inline-block;
}

.anagram-scrambled {
transition: opacity 0.25s ease;
}

.anagram-solved {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 0.25s ease;
}

.anagram:hover .anagram-scrambled,
.anagram:focus-visible .anagram-scrambled,
.anagram.tap-active .anagram-scrambled {
opacity: 0;
}

.anagram:hover .anagram-solved,
.anagram:focus-visible .anagram-solved,
.anagram.tap-active .anagram-solved {
opacity: 1;
}

/*======
HTML code
---------
<span class="anagram" tabindex="0">
    <span class="anagram-scrambled">TSLI</span>
    <span class="anagram-solved">LIST</span>
</span>
-------
=====*/