/* animations.css – Hoodwink Keyframes & Character Animations */

@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes breathe{0%,100%{opacity:.4}50%{opacity:.8}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes neonPulse{0%,100%{text-shadow:0 0 10px currentColor,0 0 20px currentColor,0 0 40px currentColor}50%{text-shadow:0 0 20px currentColor,0 0 40px currentColor,0 0 80px currentColor}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@keyframes countdownPulse{0%{transform:scale(1.6);opacity:0}20%{opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes crownBounce{0%{transform:translateY(-180px) rotate(-18deg) scale(0);opacity:0}60%{transform:translateY(8px) rotate(4deg) scale(1.1);opacity:1}80%{transform:translateY(-4px) rotate(-2deg) scale(.98)}100%{transform:translateY(0) rotate(0) scale(1);opacity:1}}
@keyframes revealFlip{0%{transform:perspective(600px) rotateY(90deg);opacity:0}100%{transform:perspective(600px) rotateY(0);opacity:1}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}50%{transform:scale(1.08)}70%{transform:scale(.96)}100%{opacity:1;transform:scale(1)}}

.anim-fadeInUp{animation:fadeInUp .6s cubic-bezier(.34,1.56,.64,1) both}
.anim-bounceIn{animation:bounceIn .7s cubic-bezier(.34,1.56,.64,1) both}
.anim-pulse{animation:pulse 2s ease-in-out infinite}
.anim-float{animation:float 3s ease-in-out infinite}
.anim-neonPulse{animation:neonPulse 2s ease-in-out infinite}
.anim-breathe{animation:breathe 3s ease-in-out infinite}
.anim-revealFlip{animation:revealFlip .6s cubic-bezier(.34,1.56,.64,1) both}

/* ═══ CHARACTER AVATAR ═══ */
.char-avatar{border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.3);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.char-face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.char-eyes{display:flex;gap:18%;margin-top:-8%}
.char-eye{width:12%;height:12%;background:#fff;border-radius:50%;position:relative;display:block}
.char-eye::after{content:'';position:absolute;width:55%;height:55%;background:#222;border-radius:50%;top:22%;left:22%}
.char-mouth{width:20%;height:8%;background:rgba(0,0,0,.3);border-radius:0 0 50% 50%;margin-top:6%}
.char-emoji{position:absolute;bottom:2px;right:2px;font-size:40%;line-height:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}

/* Character color borders */
.char-captain{border:3px solid #FF6B6B}
.char-doctor{border:3px solid #4ECDC4}
.char-disco{border:3px solid #A29BFE}
.char-shadow{border:3px solid #636E72}
.char-cosmo{border:3px solid #54A0FF}
.char-bjorn{border:3px solid #E17055}
.char-wanda{border:3px solid #E056A0}
.char-riff{border:3px solid #FDCB6E}

/* ═══ CHARACTER STATES ═══ */
@keyframes charIdle{0%,100%{transform:scale(1) translateY(0)}50%{transform:scale(1.02) translateY(-2px)}}
@keyframes charBlink{0%,95%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}
@keyframes charThink{0%,100%{transform:rotate(0) translateY(0)}25%{transform:rotate(-5deg) translateY(-3px)}75%{transform:rotate(5deg) translateY(-3px)}}
@keyframes charType{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes charHappy{0%,100%{transform:scale(1)}30%{transform:scale(1.15)}60%{transform:scale(.95)}}
@keyframes charCelebrate{0%{transform:translateY(0) rotate(0) scale(1)}25%{transform:translateY(-15px) rotate(10deg) scale(1.1)}50%{transform:translateY(-20px) rotate(0) scale(1.15)}75%{transform:translateY(-10px) rotate(-10deg) scale(1.05)}100%{transform:translateY(0) rotate(0) scale(1)}}
@keyframes charSad{0%,100%{transform:scale(1) translateY(0)}50%{transform:scale(.92) translateY(4px)}}
@keyframes charLaugh{0%,100%{transform:rotate(0) scale(1)}10%{transform:rotate(3deg) scale(1.05)}20%{transform:rotate(-3deg) scale(1.05)}30%{transform:rotate(3deg) scale(1.08)}40%{transform:rotate(-3deg) scale(1.05)}50%{transform:rotate(0) scale(1)}}
@keyframes charConfused{0%,100%{transform:rotate(0)}50%{transform:rotate(-12deg)}}
@keyframes charSubmit{0%{transform:translateY(0) scale(1)}40%{transform:translateY(-25px) scale(1.15)}100%{transform:translateY(0) scale(1)}}
@keyframes charVote{0%{transform:scale(1)}50%{transform:scale(1.1) translateY(-5px)}100%{transform:scale(1)}}
@keyframes charVictory{0%{transform:translateY(0) scale(1) rotate(0)}20%{transform:translateY(-30px) scale(1.2) rotate(5deg)}40%{transform:translateY(-15px) scale(1.1) rotate(-5deg)}60%{transform:translateY(-25px) scale(1.15) rotate(3deg)}80%{transform:translateY(-10px) scale(1.05) rotate(-3deg)}100%{transform:translateY(0) scale(1) rotate(0)}}
@keyframes charEmbarrassed{0%,100%{transform:scale(1)}50%{transform:scale(.85) rotate(-5deg)}}
@keyframes discoShimmer{0%{box-shadow:0 0 10px #A29BFE,0 0 20px #FF6B6B}33%{box-shadow:0 0 10px #FFE66D,0 0 20px #4ECDC4}66%{box-shadow:0 0 10px #FF9FF3,0 0 20px #54A0FF}100%{box-shadow:0 0 10px #A29BFE,0 0 20px #FF6B6B}}

/* Apply states to all 8 characters generically */
[class*="-idle"]{animation:charIdle 3s ease-in-out infinite}
[class*="-idle"] .char-eyes{animation:charBlink 4s ease-in-out infinite}
[class*="-thinking"]{animation:charThink 2s ease-in-out infinite}
[class*="-typing"]{animation:charType .3s ease-in-out infinite}
[class*="-happy"]{animation:charHappy .6s ease-in-out}
[class*="-happy"] .char-mouth,[class*="-celebrate"] .char-mouth,[class*="-victory"] .char-mouth{border-radius:50% 50% 0 0;height:12%}
[class*="-celebrate"]{animation:charCelebrate .8s cubic-bezier(.34,1.56,.64,1)}
[class*="-sad"]{animation:charSad 2s ease-in-out infinite}
[class*="-sad"] .char-mouth{border-radius:0;border-top:2px solid rgba(0,0,0,.3);background:transparent;margin-top:10%;transform:scaleY(-1)}
[class*="-laugh"]{animation:charLaugh .8s ease-in-out}
[class*="-laugh"] .char-mouth{border-radius:50%;width:18%;height:14%;background:rgba(0,0,0,.4)}
[class*="-confused"]{animation:charConfused 1.5s ease-in-out infinite}
[class*="-submit"]{animation:charSubmit .6s cubic-bezier(.34,1.56,.64,1)}
[class*="-vote"]{animation:charVote .5s ease-in-out}
[class*="-victory"]{animation:charVictory 1.2s cubic-bezier(.34,1.56,.64,1)}
[class*="-victory"] .char-mouth{border-radius:50%;width:22%;height:16%;background:rgba(0,0,0,.4)}
[class*="-embarrassed"]{animation:charEmbarrassed 1s ease-in-out}

/* Disco-Bot shimmer */
.char-disco[class*="-idle"]{animation:charIdle 3s ease-in-out infinite,discoShimmer 2s linear infinite}
.char-disco[class*="-celebrate"]{animation:charCelebrate .8s cubic-bezier(.34,1.56,.64,1),discoShimmer 1s linear infinite}
/* Shadow filter */
.char-shadow{opacity:.92;filter:drop-shadow(0 0 8px rgba(45,52,54,.6))}