/* FlowText — Animation Keyframes */

@keyframes tap-blink {
    0%,100% { opacity:1; }
    50%      { opacity:0; }
}

/* Split reveal — opacity+filter work on display:inline */
@keyframes tap-splitFadeIn {
    0%   { opacity:0; filter:blur(6px); }
    70%  { opacity:1; filter:blur(0.5px); }
    100% { opacity:1; filter:none; }
}

/* ── CHAR FLOP — each character rotates forward on X-axis, flopping into place ── */
@keyframes tap-charFlop {
    0%   { opacity:0; transform:translateY(-14px) rotateX(80deg); }
    55%  { opacity:1; transform:translateY(3px)   rotateX(-11deg); }
    75%  { transform:translateY(-1px) rotateX(4deg); }
    90%  { transform:translateY(0.5px) rotateX(-1deg); }
    100% { opacity:1; transform:translateY(0) rotateX(0deg); }
}

/* ── FADE ── */
@keyframes tap-fadeIn {
    from { opacity:0; }
    to   { opacity:1; }
}
@keyframes tap-fadeInUp {
    0%   { opacity:0; transform:translateY(28px); }
    60%  { opacity:1; transform:translateY(-2px); }
    100% { opacity:1; transform:translateY(0); }
}
@keyframes tap-fadeInDown {
    0%   { opacity:0; transform:translateY(-28px); }
    60%  { opacity:1; transform:translateY(2px); }
    100% { opacity:1; transform:translateY(0); }
}
@keyframes tap-fadeInLeft {
    0%   { opacity:0; transform:translateX(-36px); }
    60%  { opacity:1; transform:translateX(2px); }
    100% { opacity:1; transform:translateX(0); }
}
@keyframes tap-fadeInRight {
    0%   { opacity:0; transform:translateX(36px); }
    60%  { opacity:1; transform:translateX(-2px); }
    100% { opacity:1; transform:translateX(0); }
}

/* ── SLIDE ── */
@keyframes tap-slideInUp {
    0%   { opacity:0; transform:translateY(50px); }
    65%  { opacity:1; transform:translateY(-3px); }
    100% { opacity:1; transform:translateY(0); }
}
@keyframes tap-slideInDown {
    0%   { opacity:0; transform:translateY(-50px); }
    65%  { opacity:1; transform:translateY(3px); }
    100% { opacity:1; transform:translateY(0); }
}
@keyframes tap-slideInLeft {
    0%   { opacity:0; transform:translateX(-50px); }
    65%  { opacity:1; transform:translateX(3px); }
    100% { opacity:1; transform:translateX(0); }
}
@keyframes tap-slideInRight {
    0%   { opacity:0; transform:translateX(50px); }
    65%  { opacity:1; transform:translateX(-3px); }
    100% { opacity:1; transform:translateX(0); }
}

/* ── ZOOM ── */
@keyframes tap-zoomIn {
    0%   { opacity:0; transform:scale(0.6); }
    65%  { opacity:1; transform:scale(1.02); }
    100% { opacity:1; transform:scale(1); }
}
@keyframes tap-zoomInBounce {
    0%   { opacity:0; transform:scale(0.5); }
    55%  { opacity:1; transform:scale(1.07); }
    75%  { opacity:1; transform:scale(0.97); }
    90%  { opacity:1; transform:scale(1.02); }
    100% { opacity:1; transform:scale(1); }
}
@keyframes tap-zoomOut {
    0%   { opacity:0; transform:scale(1.5); }
    65%  { opacity:1; transform:scale(0.98); }
    100% { opacity:1; transform:scale(1); }
}
@keyframes tap-scaleX {
    0%   { opacity:1; transform:scaleX(0); transform-origin:left center; }
    70%  { opacity:1; transform:scaleX(1.03); transform-origin:left center; }
    100% { opacity:1; transform:scaleX(1); transform-origin:left center; }
}

/* ── ROTATE / FLIP ── */
@keyframes tap-rotateIn {
    0%   { opacity:0; transform:rotate(-160deg) scale(0.6); }
    70%  { opacity:1; transform:rotate(4deg) scale(1); }
    100% { opacity:1; transform:rotate(0deg) scale(1); }
}
@keyframes tap-rotateDownLeft {
    0%   { opacity:0; transform-origin:left bottom; transform:rotate(-90deg); }
    65%  { opacity:1; transform-origin:left bottom; transform:rotate(8deg); }
    100% { opacity:1; transform-origin:left bottom; transform:rotate(0deg); }
}
@keyframes tap-flipInX {
    0%   { opacity:0; transform:perspective(500px) rotateX(75deg); }
    65%  { opacity:1; transform:perspective(500px) rotateX(-5deg); }
    100% { opacity:1; transform:perspective(500px) rotateX(0deg); }
}
@keyframes tap-flipInY {
    0%   { opacity:0; transform:perspective(500px) rotateY(75deg); }
    65%  { opacity:1; transform:perspective(500px) rotateY(-5deg); }
    100% { opacity:1; transform:perspective(500px) rotateY(0deg); }
}

/* ── BOUNCE ── */
@keyframes tap-bounceIn {
    0%   { opacity:0; transform:scale(0.4); }
    55%  { opacity:1; transform:scale(1.08); }
    75%  { opacity:1; transform:scale(0.96); }
    90%  { opacity:1; transform:scale(1.03); }
    100% { opacity:1; transform:scale(1); }
}
@keyframes tap-bounceInUp {
    0%   { opacity:0; transform:translateY(45px); }
    55%  { opacity:1; transform:translateY(-10px); }
    75%  { opacity:1; transform:translateY(5px); }
    90%  { opacity:1; transform:translateY(-2px); }
    100% { opacity:1; transform:translateY(0); }
}
@keyframes tap-bounceInDown {
    0%   { opacity:0; transform:translateY(-45px); }
    55%  { opacity:1; transform:translateY(10px); }
    75%  { opacity:1; transform:translateY(-5px); }
    90%  { opacity:1; transform:translateY(2px); }
    100% { opacity:1; transform:translateY(0); }
}

/* ── SPECIAL FX ── */
@keyframes tap-blur {
    0%   { opacity:0; filter:blur(14px); transform:scale(1.04); }
    60%  { opacity:1; filter:blur(1px);  transform:scale(1.01); }
    100% { opacity:1; filter:blur(0);    transform:scale(1); }
}
@keyframes tap-glitch {
    0%   { opacity:0; transform:translate(0,0) skewX(0); clip-path:inset(0 0 100% 0); filter:contrast(2.2) saturate(2); text-shadow:none; }
    4%   { opacity:1; transform:translate(-14px,2px) skewX(16deg); clip-path:inset(64% 0 18% 0); filter:contrast(3) saturate(3); text-shadow:-5px 0 0 rgba(255,0,80,.85), 5px 0 0 rgba(0,220,255,.85); }
    8%   { opacity:1; transform:translate(11px,-2px) skewX(-12deg); clip-path:inset(8% 0 72% 0); text-shadow:4px 0 0 rgba(255,0,80,.8), -4px 0 0 rgba(0,220,255,.8), 0 5px 0 rgba(255,255,255,.25); }
    13%  { opacity:1; transform:translate(-7px,1px); clip-path:inset(38% 0 43% 0); filter:contrast(2.6) brightness(1.35); }
    17%  { opacity:.92; transform:translate(9px,0) skewX(8deg); clip-path:inset(0 0 0 0); text-shadow:-3px 0 0 rgba(255,0,80,.75), 3px 0 0 rgba(0,220,255,.75); }
    22%  { opacity:1; transform:translate(-10px,-1px); clip-path:inset(75% 0 6% 0); filter:contrast(3.2) saturate(2.5); }
    27%  { opacity:.88; transform:translate(6px,2px) skewX(-7deg); clip-path:inset(18% 0 58% 0); text-shadow:5px 0 0 rgba(0,220,255,.7), -5px 0 0 rgba(255,0,80,.7); }
    34%  { opacity:1; transform:translate(-3px,0); clip-path:inset(48% 0 32% 0); filter:contrast(2); }
    42%  { opacity:1; transform:translate(3px,0); clip-path:inset(0 0 0 0); text-shadow:-2px 0 0 rgba(255,0,80,.55), 2px 0 0 rgba(0,220,255,.55); }
    55%  { opacity:1; transform:translate(-2px,0); filter:contrast(1.45); text-shadow:0 2px 0 rgba(255,255,255,.18); }
    70%  { opacity:1; transform:translate(1px,0); filter:contrast(1.15); text-shadow:-1px 0 0 rgba(255,0,80,.25), 1px 0 0 rgba(0,220,255,.25); }
    100% { opacity:1; transform:translate(0,0) skewX(0); clip-path:inset(0 0 0 0); filter:none; text-shadow:none; }
}
@keyframes tap-wave {
    0%   { transform:translateY(0); }
    35%  { transform:translateY(-10px); }
    65%  { transform:translateY(4px); }
    100% { transform:translateY(0); }
}
@keyframes tap-shake {
    0%   { opacity:0; transform:translate(-3px,-2px) rotate(-1deg); }
    5%   { opacity:1; transform:translate(3px, 2px) rotate(1deg); }
    10%  { opacity:1; transform:translate(-4px, 1px) rotate(-2deg); }
    15%  { opacity:1; transform:translate(4px,-1px) rotate(2deg); }
    20%  { opacity:1; transform:translate(-3px, 3px) rotate(-1deg); }
    25%  { opacity:1; transform:translate(3px,-3px) rotate(1deg); }
    30%  { opacity:1; transform:translate(-2px, 2px) rotate(-1deg); }
    35%  { opacity:1; transform:translate(2px,-2px) rotate(0deg); }
    40%  { opacity:1; transform:translate(-3px, 1px); }
    45%  { opacity:1; transform:translate(3px,-1px); }
    50%  { opacity:1; transform:translate(-2px, 2px); }
    55%  { opacity:1; transform:translate(2px,-2px); }
    60%  { opacity:1; transform:translate(-1px, 1px); }
    70%  { opacity:1; transform:translate(1px,-1px); }
    80%  { opacity:1; transform:translate(-1px,0); }
    90%  { opacity:1; transform:translate(0,0); }
    100% { opacity:1; transform:translate(0,0) rotate(0); }
}
@keyframes tap-swing {
    0%   { opacity:0; transform:rotate(-18deg); transform-origin:top center; }
    45%  { opacity:1; transform:rotate(7deg);   transform-origin:top center; }
    68%  { opacity:1; transform:rotate(-4deg);  transform-origin:top center; }
    84%  { opacity:1; transform:rotate(2deg);   transform-origin:top center; }
    100% { opacity:1; transform:rotate(0deg);   transform-origin:top center; }
}
@keyframes tap-rubberBand {
    0%   { opacity:0; transform:scale(0.6); }
    40%  { opacity:1; transform:scaleX(1.18) scaleY(0.84); }
    62%  { opacity:1; transform:scaleX(0.92) scaleY(1.06); }
    80%  { opacity:1; transform:scaleX(1.03) scaleY(0.98); }
    100% { opacity:1; transform:scale(1); }
}
@keyframes tap-neon {
    0%   { opacity:0;   text-shadow: none; }
    40%  { opacity:0.9; text-shadow: 0 0 8px currentColor, 0 0 20px currentColor; }
    70%  { opacity:1;   text-shadow: 0 0 8px currentColor, 0 0 20px currentColor, 0 0 40px currentColor; }
    100% { opacity:1;   text-shadow: 0 0 4px currentColor, 0 0 14px currentColor; }
}
@keyframes tap-glow {
    0%   { opacity:0;   text-shadow: none; }
    40%  { opacity:0.8; text-shadow: 0 0 8px currentColor, 0 0 16px currentColor; }
    70%  { opacity:1;   text-shadow: 0 0 6px currentColor, 0 0 20px currentColor, 0 0 40px currentColor; }
    100% { opacity:1;   text-shadow: 0 0 4px currentColor, 0 0 12px currentColor, 0 0 24px currentColor; }
}
@keyframes tap-spotlight {
    0%   { opacity:0;   filter:brightness(0.5); }
    40%  { opacity:0.8; filter:brightness(1.6) drop-shadow(0 0 6px currentColor); }
    70%  { opacity:1;   filter:brightness(2)   drop-shadow(0 0 14px currentColor) drop-shadow(0 0 28px currentColor); }
    100% { opacity:1;   filter:brightness(1.3) drop-shadow(0 0 5px currentColor)  drop-shadow(0 0 16px currentColor); }
}
@keyframes tap-pop {
    0%   { opacity:0; transform:scale(0.75); }
    50%  { opacity:1; transform:scale(1.12); }
    75%  { opacity:1; transform:scale(0.96); }
    90%  { opacity:1; transform:scale(1.04); }
    100% { opacity:1; transform:scale(1); }
}
@keyframes tap-rise {
    0%   { opacity:0; transform:translateY(22px) skewY(2deg); filter:blur(5px); }
    65%  { opacity:1; transform:translateY(-1px) skewY(0deg); filter:blur(0); }
    100% { opacity:1; transform:translateY(0) skewY(0); }
}
@keyframes tap-stamp {
    0%   { opacity:0; transform:scale(3) rotate(-2deg); filter:blur(4px); }
    50%  { opacity:1; transform:scale(0.97) rotate(0.5deg); filter:blur(0); }
    72%  { opacity:1; transform:scale(1.02); }
    100% { opacity:1; transform:scale(1) rotate(0); }
}
@keyframes tap-splitReveal {
    0%   { opacity:0; letter-spacing:0.35em; }
    65%  { opacity:1; letter-spacing:0.02em; }
    100% { opacity:1; letter-spacing:normal; }
}
@keyframes tap-lineReveal {
    0%   { opacity:0; transform:translateY(34px); clip-path:inset(100% 0 0 0); filter:blur(5px); }
    58%  { opacity:1; transform:translateY(-2px); clip-path:inset(0 0 0 0); filter:blur(0.5px); }
    100% { opacity:1; transform:translateY(0); clip-path:inset(0 0 0 0); filter:none; }
}
@keyframes tap-maskWipe {
    0%   { opacity:1; transform:translateX(-16px); clip-path:inset(0 100% 0 0); filter:blur(2px); }
    62%  { opacity:1; transform:translateX(1px); clip-path:inset(0 0 0 0); filter:blur(0); }
    100% { opacity:1; transform:translateX(0); clip-path:inset(0 0 0 0); filter:none; }
}
@keyframes tap-scrambleDecode {
    0%   { opacity:0; transform:translateX(-2px); filter:contrast(2); text-shadow:-3px 0 0 rgba(255,0,80,.65), 3px 0 0 rgba(0,220,255,.65); }
    18%  { opacity:1; transform:translateX(2px); filter:contrast(1.8); text-shadow:3px 0 0 rgba(255,0,80,.55), -3px 0 0 rgba(0,220,255,.55); }
    42%  { opacity:1; transform:translateX(-1px); filter:contrast(1.45); text-shadow:-2px 0 0 rgba(255,0,80,.4), 2px 0 0 rgba(0,220,255,.4); }
    72%  { opacity:1; transform:translateX(1px); filter:contrast(1.15); text-shadow:0 0 8px currentColor; }
    100% { opacity:1; transform:translateX(0); filter:none; text-shadow:none; }
}
@keyframes tap-pixelate {
    0%   { opacity:0; transform:scale(1.12) translate(-8px,-4px); filter:contrast(2.8) saturate(.25); text-shadow:-14px 0 0 currentColor, 14px 0 0 currentColor, 0 10px 0 currentColor, 0 -10px 0 currentColor; }
    12%  { opacity:.35; transform:scale(1.10) translate(7px,3px); text-shadow:-12px 0 0 currentColor, 12px 0 0 currentColor, 0 9px 0 currentColor, 0 -9px 0 currentColor; }
    24%  { opacity:.6; transform:scale(1.08) translate(-5px,2px); filter:contrast(2.4) saturate(.35); text-shadow:-10px 0 0 currentColor, 10px 0 0 currentColor, 0 7px 0 currentColor; }
    38%  { opacity:.78; transform:scale(1.06) translate(4px,-2px); text-shadow:-8px 0 0 currentColor, 8px 0 0 currentColor, 0 6px 0 currentColor; }
    52%  { opacity:.9; transform:scale(1.04) translate(-2px,1px); filter:contrast(1.8) saturate(.55); text-shadow:-6px 0 0 currentColor, 6px 0 0 currentColor, 0 4px 0 currentColor; }
    68%  { opacity:1; transform:scale(1.025) translate(1px,0); text-shadow:-4px 0 0 currentColor, 4px 0 0 currentColor; }
    82%  { opacity:1; transform:scale(1.01); filter:contrast(1.25) saturate(.8); text-shadow:-2px 0 0 currentColor, 2px 0 0 currentColor; }
    100% { opacity:1; transform:scale(1); filter:none; text-shadow:none; }
}