/* ═══════════════════════════════════════════════════════════════════
   LIQUID ANIMATIONS — Quizzman Animation Library
   Spring physics, scroll reveals, micro-interactions, particles
   v1.0.0 · 2026-03-14
   ═══════════════════════════════════════════════════════════════════ */

/* ─── ENTRANCE ANIMATIONS ───────────────────────────────────────── */
@keyframes lq-fade-in{
  from{opacity:0}to{opacity:1}
}
@keyframes lq-fade-up{
  from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}
}
@keyframes lq-fade-down{
  from{opacity:0;transform:translateY(-24px)}to{opacity:1;transform:translateY(0)}
}
@keyframes lq-fade-left{
  from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:translateX(0)}
}
@keyframes lq-fade-right{
  from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:translateX(0)}
}
@keyframes lq-scale-in{
  from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}
}
@keyframes lq-scale-bounce{
  0%{opacity:0;transform:scale(.6)}
  60%{opacity:1;transform:scale(1.04)}
  100%{opacity:1;transform:scale(1)}
}
@keyframes lq-pop{
  0%{transform:scale(0);opacity:0}
  50%{transform:scale(1.15)}
  70%{transform:scale(.95)}
  100%{transform:scale(1);opacity:1}
}
@keyframes lq-slide-up{
  from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}
}
@keyframes lq-slide-down{
  from{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}
}
@keyframes lq-morph-in{
  from{opacity:0;transform:scale(.9) rotate(-2deg);border-radius:40px}
  to{opacity:1;transform:scale(1) rotate(0);border-radius:var(--lq-radius-lg)}
}
@keyframes lq-blur-in{
  from{opacity:0;filter:blur(12px);transform:scale(1.05)}
  to{opacity:1;filter:blur(0);transform:scale(1)}
}
@keyframes lq-unblur{
  from{filter:blur(12px);opacity:.5}to{filter:blur(0);opacity:1}
}

/* ─── UTILITY CLASSES ───────────────────────────────────────────── */
.lq-anim-fade-in{animation:lq-fade-in var(--lq-dur-slow) var(--lq-spring) both}
.lq-anim-fade-up{animation:lq-fade-up var(--lq-dur-slow) var(--lq-spring) both}
.lq-anim-fade-down{animation:lq-fade-down var(--lq-dur-slow) var(--lq-spring) both}
.lq-anim-fade-left{animation:lq-fade-left var(--lq-dur-slow) var(--lq-spring) both}
.lq-anim-fade-right{animation:lq-fade-right var(--lq-dur-slow) var(--lq-spring) both}
.lq-anim-scale-in{animation:lq-scale-in var(--lq-dur-slow) var(--lq-spring) both}
.lq-anim-scale-bounce{animation:lq-scale-bounce var(--lq-dur-slower) var(--lq-spring) both}
.lq-anim-pop{animation:lq-pop .6s var(--lq-bounce) both}
.lq-anim-slide-up{animation:lq-slide-up var(--lq-dur-slow) var(--lq-spring) both}
.lq-anim-morph{animation:lq-morph-in var(--lq-dur-slower) var(--lq-spring) both}
.lq-anim-blur-in{animation:lq-blur-in var(--lq-dur-slow) var(--lq-spring) both}

/* stagger delays */
.lq-delay-1{animation-delay:.05s}
.lq-delay-2{animation-delay:.1s}
.lq-delay-3{animation-delay:.15s}
.lq-delay-4{animation-delay:.2s}
.lq-delay-5{animation-delay:.25s}
.lq-delay-6{animation-delay:.3s}
.lq-delay-7{animation-delay:.35s}
.lq-delay-8{animation-delay:.4s}
.lq-delay-9{animation-delay:.45s}
.lq-delay-10{animation-delay:.5s}

/* scroll reveal (activated by liquid-motion.js) */
.lq-reveal{opacity:0;transform:translateY(30px);transition:all .7s var(--lq-spring)}
.lq-reveal.lq-revealed{opacity:1;transform:translateY(0)}
.lq-reveal--left{transform:translateX(-30px)}
.lq-reveal--left.lq-revealed{transform:translateX(0)}
.lq-reveal--right{transform:translateX(30px)}
.lq-reveal--right.lq-revealed{transform:translateX(0)}
.lq-reveal--scale{transform:scale(.88);opacity:0}
.lq-reveal--scale.lq-revealed{transform:scale(1);opacity:1}

/* ─── LOOPING ANIMATIONS ────────────────────────────────────────── */
@keyframes lq-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}
@keyframes lq-float-slow{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-12px) rotate(1deg)}
}
@keyframes lq-pulse{
  0%,100%{opacity:1}50%{opacity:.5}
}
@keyframes lq-pulse-ring{
  0%{transform:scale(.8);opacity:.7}
  100%{transform:scale(2.2);opacity:0}
}
@keyframes lq-pulse-glow{
  0%,100%{box-shadow:0 0 0 0 var(--lq-accent-glow)}
  50%{box-shadow:0 0 24px 8px var(--lq-accent-glow)}
}
@keyframes lq-spin{to{transform:rotate(360deg)}}
@keyframes lq-wiggle{
  0%,100%{transform:rotate(0)}
  25%{transform:rotate(-4deg)}
  75%{transform:rotate(4deg)}
}
@keyframes lq-bounce-y{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}
@keyframes lq-breathe{
  0%,100%{transform:scale(1);opacity:.9}
  50%{transform:scale(1.03);opacity:1}
}
@keyframes lq-shimmer-move{
  0%{background-position:200% center}
  100%{background-position:-200% center}
}
@keyframes lq-gradient-shift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

.lq-float{animation:lq-float 3s ease-in-out infinite}
.lq-float-slow{animation:lq-float-slow 5s ease-in-out infinite}
.lq-pulse{animation:lq-pulse 2s ease-in-out infinite}
.lq-pulse-glow{animation:lq-pulse-glow 2s ease-in-out infinite}
.lq-spin{animation:lq-spin 1s linear infinite}
.lq-wiggle{animation:lq-wiggle 2s ease-in-out infinite}
.lq-bounce-y{animation:lq-bounce-y 1.5s ease-in-out infinite}
.lq-breathe{animation:lq-breathe 4s ease-in-out infinite}

/* ─── HOVER MICRO-INTERACTIONS ──────────────────────────────────── */
.lq-hover-lift{transition:transform var(--lq-dur) var(--lq-spring)}
.lq-hover-lift:hover{transform:translateY(-3px)}
.lq-hover-grow{transition:transform var(--lq-dur) var(--lq-spring)}
.lq-hover-grow:hover{transform:scale(1.04)}
.lq-hover-tilt{transition:transform var(--lq-dur) var(--lq-spring);transform-style:preserve-3d}
.lq-hover-tilt:hover{transform:perspective(600px) rotateX(-2deg) rotateY(3deg)}
.lq-hover-glow{transition:box-shadow var(--lq-dur) var(--lq-spring)}
.lq-hover-glow:hover{box-shadow:var(--lq-shadow-glow)}
.lq-hover-shine{position:relative;overflow:hidden}
.lq-hover-shine::before{
  content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);
  transition:left .6s var(--lq-smooth);
}
.lq-hover-shine:hover::before{left:120%}

/* ─── NUMBER COUNTING ───────────────────────────────────────────── */
.lq-count-up{
  font-variant-numeric:tabular-nums;
  transition:all .5s var(--lq-spring);
}

/* ─── CONFETTI BURST (host via liquid-motion.js) ────────────────── */
@keyframes lq-confetti-fall{
  0%{transform:translateY(-100vh) rotate(0);opacity:1}
  100%{transform:translateY(100vh) rotate(720deg);opacity:0}
}
.lq-confetti-piece{
  position:fixed;width:8px;height:8px;z-index:99999;
  pointer-events:none;
  animation:lq-confetti-fall 2.5s linear forwards;
}

/* ─── PARTICLE FLOAT (bg particles by liquid-motion.js) ─────────── */
@keyframes lq-particle-drift{
  0%{transform:translate(0,0) scale(1);opacity:.4}
  50%{opacity:.7}
  100%{transform:translate(var(--lq-px,40px),var(--lq-py,-60px)) scale(.6);opacity:0}
}

/* ─── LIQUID MORPHING ───────────────────────────────────────────── */
@keyframes lq-morph-blob{
  0%,100%{border-radius:60% 40% 30% 70% / 60% 30% 70% 40%}
  25%{border-radius:30% 60% 70% 40% / 50% 60% 30% 60%}
  50%{border-radius:50% 60% 30% 60% / 40% 70% 60% 30%}
  75%{border-radius:60% 30% 60% 40% / 70% 40% 50% 60%}
}
.lq-blob{animation:lq-morph-blob 8s ease-in-out infinite}

/* ─── GLASS RIPPLE EFFECT ───────────────────────────────────────── */
@keyframes lq-ripple{
  0%{transform:scale(0);opacity:.5}
  100%{transform:scale(4);opacity:0}
}
.lq-ripple{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.3),transparent);
  transform:scale(0);animation:lq-ripple .6s ease-out forwards;
  pointer-events:none;
}

/* ─── LOADING STATES ────────────────────────────────────────────── */
.lq-loading-dots{display:flex;gap:6px;align-items:center;justify-content:center}
.lq-loading-dots span{
  width:8px;height:8px;border-radius:50%;background:var(--lq-accent);
  animation:lq-bounce-y 1.4s ease-in-out infinite;
}
.lq-loading-dots span:nth-child(2){animation-delay:.15s}
.lq-loading-dots span:nth-child(3){animation-delay:.3s}

.lq-loading-spinner{
  width:24px;height:24px;border-radius:50%;
  border:3px solid var(--lq-glass-border);
  border-top-color:var(--lq-accent);
  animation:lq-spin .8s linear infinite;
}

.lq-loading-bar{
  height:3px;border-radius:2px;overflow:hidden;background:var(--lq-glass);
}
.lq-loading-bar__fill{
  height:100%;border-radius:2px;
  background:linear-gradient(90deg,var(--lq-accent),#ec4899,var(--lq-accent));
  background-size:200% 100%;
  animation:lq-gradient-shift 2s ease infinite;
}

/* ─── PAGE TRANSITION ───────────────────────────────────────────── */
.lq-page-enter{animation:lq-blur-in .5s var(--lq-spring) both}
.lq-page-exit{animation:lq-blur-in .3s var(--lq-spring) reverse both}

/* ─── TOAST NOTIFICATION ────────────────────────────────────────── */
@keyframes lq-toast-in{
  from{transform:translateX(120%);opacity:0}
  to{transform:translateX(0);opacity:1}
}
@keyframes lq-toast-out{
  from{transform:translateX(0);opacity:1}
  to{transform:translateX(120%);opacity:0}
}
.lq-toast-container{
  position:fixed;top:20px;right:20px;z-index:99999;
  display:flex;flex-direction:column;gap:8px;
}
.lq-toast{
  padding:14px 20px;border-radius:var(--lq-radius);
  background:var(--lq-glass);
  backdrop-filter:blur(24px) saturate(1.8);
  -webkit-backdrop-filter:blur(24px) saturate(1.8);
  border:1px solid var(--lq-glass-border);
  box-shadow:var(--lq-shadow-lg);
  font-size:.9rem;font-weight:500;color:var(--lq-text);
  animation:lq-toast-in .4s var(--lq-bounce) both;
  display:flex;align-items:center;gap:10px;
  max-width:380px;
}
.lq-toast--exit{animation:lq-toast-out .3s var(--lq-spring) both}
.lq-toast__icon{font-size:1.2rem;flex-shrink:0}

/* ─── MODAL ─────────────────────────────────────────────────────── */
@keyframes lq-modal-bg{from{opacity:0}to{opacity:1}}
@keyframes lq-modal-content{
  from{opacity:0;transform:scale(.92) translateY(20px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}
.lq-modal-overlay{
  position:fixed;inset:0;z-index:10000;
  background:rgba(0,0,0,.35);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;
  animation:lq-modal-bg .3s var(--lq-smooth) both;
}
.lq-modal{
  width:90%;max-width:520px;
  padding:var(--lq-space-xl);
  background:var(--lq-glass-active);
  backdrop-filter:blur(40px) saturate(2);
  -webkit-backdrop-filter:blur(40px) saturate(2);
  border:1px solid var(--lq-glass-border);
  border-radius:var(--lq-radius-xl);
  box-shadow:var(--lq-shadow-xl);
  animation:lq-modal-content .4s var(--lq-bounce) both;
}

/* ─── PROGRESS BAR ──────────────────────────────────────────────── */
.lq-progress{
  height:8px;border-radius:4px;overflow:hidden;
  background:var(--lq-glass);
}
.lq-progress__bar{
  height:100%;border-radius:4px;
  background:linear-gradient(90deg,var(--lq-accent),#ec4899);
  transition:width .6s var(--lq-spring);
  position:relative;
}
.lq-progress__bar::after{
  content:'';position:absolute;top:0;right:0;width:40%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.25));
  animation:lq-shimmer-move 2s infinite;
}

/* ─── REDUCED MOTION ────────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .lq-reveal{opacity:1;transform:none}
}