/* TSIQ feedback — interaction & celebration effects (2026-10-26).
   Pure CSS, no external libraries (CSP: self only). All motion is disabled
   under prefers-reduced-motion at the bottom of this file. */

/* ---------- Page entrance: cards rise in one after another ---------- */
.tsiq-fx .question-container{animation:tsiq-rise .55s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--tsiq-i,0) * 70ms);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;position:relative}
.tsiq-fx .question-container:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(16,24,40,.10)!important}
.tsiq-fx .question-container:focus-within{border-color:var(--tsiq-accent)!important;box-shadow:0 0 0 4px rgba(99,102,241,.12),0 16px 36px rgba(16,24,40,.10)!important}

/* Answered state: accent bar grows down the left edge + check badge pops in */
.tsiq-fx .question-container::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:4px;border-radius:0 4px 4px 0;background:linear-gradient(var(--tsiq-teal),var(--tsiq-accent));transform:scaleY(0);transform-origin:top;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.tsiq-fx .question-container.tsiq-answered::before{transform:scaleY(1)}
.tsiq-badge{position:absolute;top:14px;right:14px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#12b76a;color:#fff;font-size:14px;font-weight:800;transform:scale(0);transition:transform .35s cubic-bezier(.34,1.56,.64,1);pointer-events:none}
.tsiq-answered>.tsiq-badge{transform:scale(1)}

/* Choices pop when picked */
.tsiq-fx .survey-form-container input[type=radio]:checked,.tsiq-fx .survey-form-container input[type=checkbox]:checked{animation:tsiq-pop .32s cubic-bezier(.34,1.56,.64,1)}
.tsiq-fx .survey-form-container .answer-item label,.tsiq-fx .survey-form-container .form-check-label{transition:color .2s}
.tsiq-fx .survey-form-container .answer-item:hover label{color:var(--tsiq-accent)}

/* Emoji rating: lift on hover, wobble when chosen, label tooltip */
.tsiq-rating button{transition:transform .2s cubic-bezier(.34,1.56,.64,1),border-color .2s,background .2s;position:relative;cursor:pointer}
.tsiq-rating button:hover{transform:translateY(-4px) scale(1.06);border-color:var(--tsiq-accent)}
.tsiq-rating button:hover span{animation:tsiq-wobble .5s}
.tsiq-rating button.active{transform:translateY(-2px) scale(1.08);box-shadow:0 8px 20px rgba(99,102,241,.25)}
.tsiq-rating button[data-label]::after{content:attr(data-label);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%,4px);background:var(--tsiq-ink);color:var(--tsiq-surface);font-size:11px;font-weight:600;white-space:nowrap;padding:4px 8px;border-radius:6px;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s}
.tsiq-rating button:hover::after,.tsiq-rating button:focus-visible::after{opacity:1;transform:translate(-50%,0)}

/* Buttons: gradient sheen, lift, ripple, loading spinner */
.tsiq-fx .survey-form-container .btn{position:relative;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease}
.tsiq-fx .survey-form-container .btn-primary{background-size:200% 100%!important;background-image:linear-gradient(135deg,var(--tsiq-navy),var(--tsiq-accent),var(--tsiq-teal))!important}
.tsiq-fx .survey-form-container .btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(30,58,138,.25)}
.tsiq-fx .survey-form-container .btn-primary:hover{animation:tsiq-sheen 1.6s linear infinite}
.tsiq-fx .survey-form-container .btn:active{transform:translateY(0) scale(.98)}
.tsiq-ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.45);transform:scale(0);animation:tsiq-ripple .6s ease-out forwards;pointer-events:none}
.tsiq-fx .btn.tsiq-loading{pointer-events:none;color:transparent!important}
.tsiq-fx .btn.tsiq-loading::after{content:"";position:absolute;inset:0;margin:auto;width:20px;height:20px;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;animation:tsiq-spin .7s linear infinite}

/* Milestone toast */
.tsiq-toast{position:fixed;left:50%;bottom:24px;z-index:100;transform:translate(-50%,140%);background:var(--tsiq-surface);color:var(--tsiq-ink);border:1px solid var(--tsiq-line);border-radius:999px;padding:10px 18px;font-weight:650;font-size:14px;box-shadow:0 14px 34px rgba(16,24,40,.18);display:flex;gap:8px;align-items:center;transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.tsiq-toast.show{transform:translate(-50%,0)}
.tsiq-toast span{font-size:20px}

/* Progress ring breathes when it moves */
.tsiq-ring.tsiq-bump{animation:tsiq-pop .45s cubic-bezier(.34,1.56,.64,1)}

/* ---------- Completion celebration ---------- */
.tsiq-celebrate{position:relative;max-width:640px;margin:6vh auto 24px;padding:44px 28px 32px;text-align:center;border:1px solid var(--tsiq-line);border-radius:28px;background:var(--tsiq-surface);box-shadow:0 24px 60px rgba(16,24,40,.12);overflow:hidden;animation:tsiq-card-in .7s cubic-bezier(.2,.8,.2,1) both}
.tsiq-celebrate::before{content:"";position:absolute;inset:0;background:radial-gradient(420px 200px at 15% 0%,rgba(239,119,0,.10),transparent 70%),radial-gradient(420px 220px at 90% 100%,rgba(101,53,147,.10),transparent 70%);z-index:0;animation:tsiq-glow 6s ease-in-out infinite alternate}
.tsiq-celebrate>*{position:relative;z-index:1}
.tsiq-check{width:112px;height:112px;margin:0 auto 18px;position:relative}
.tsiq-check svg{width:100%;height:100%;overflow:visible}
.tsiq-check circle{fill:none;stroke:#12b76a;stroke-width:5;stroke-linecap:round;stroke-dasharray:302;stroke-dashoffset:302;transform:rotate(-90deg);transform-origin:center;animation:tsiq-draw .8s .25s ease-out forwards}
.tsiq-check .fill{fill:#12b76a;stroke:none;transform:scale(0);transform-origin:center;animation:tsiq-fillpop .45s 1s cubic-bezier(.34,1.56,.64,1) forwards}
.tsiq-check path{fill:none;stroke:#fff;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60;animation:tsiq-draw .4s 1.25s ease-out forwards}
.tsiq-check::before,.tsiq-check::after{content:"";position:absolute;inset:0;border-radius:50%;border:3px solid rgba(18,183,106,.45);opacity:0;animation:tsiq-ring-out 1.4s 1.2s ease-out 2}
.tsiq-check::after{animation-delay:1.5s}
.tsiq-celebrate h1{font-size:clamp(26px,5vw,36px);font-weight:800;margin:6px 0 8px;background:linear-gradient(90deg,var(--tsiq-navy),var(--tsiq-accent),var(--tsiq-teal),var(--tsiq-navy));background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:tsiq-rise .6s 1.1s both,tsiq-sheen 5s 1.7s linear infinite}
.tsiq-celebrate p.lead{color:var(--tsiq-muted);font-size:16px;margin:0 auto 22px;max-width:440px;animation:tsiq-rise .6s 1.3s both}
.tsiq-emojis{display:flex;justify-content:center;gap:14px;font-size:30px;margin-bottom:22px}
.tsiq-emojis span{display:inline-block;animation:tsiq-rise .5s both,tsiq-float 3s ease-in-out infinite;animation-delay:calc(1.45s + var(--d) * 120ms),calc(2s + var(--d) * 300ms)}
.tsiq-again{border:0;border-radius:999px;padding:11px 22px;font-weight:700;color:#fff;cursor:pointer;background:linear-gradient(135deg,var(--tsiq-navy),var(--tsiq-accent));box-shadow:0 10px 24px rgba(99,102,241,.3);transition:transform .2s;animation:tsiq-rise .5s 1.8s both}
.tsiq-again:hover{transform:translateY(-2px) scale(1.04)}
.tsiq-celebrate+*{animation:tsiq-rise .6s 1.6s both}
.tsiq-fx-done .completed-heading,.tsiq-fx-done .completed-Content{display:none}

/* Particles: confetti, streamers and firework sparks (driven by CSS vars) */
.tsiq-party{position:fixed;inset:0;pointer-events:none;z-index:99;overflow:hidden}
.tsiq-party i{position:absolute;left:var(--x);top:var(--y);width:var(--w,9px);height:var(--h,14px);background:var(--c);border-radius:var(--r,2px);opacity:0;will-change:transform,opacity;animation:tsiq-burst var(--t,2.4s) cubic-bezier(.15,.65,.35,1) var(--delay,0s) forwards}
.tsiq-party i.spark{width:6px;height:6px;border-radius:50%;box-shadow:0 0 10px var(--c);animation:tsiq-spark var(--t,1.1s) ease-out var(--delay,0s) forwards}

/* ---------- Keyframes ---------- */
@keyframes tsiq-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes tsiq-pop{0%{transform:scale(1)}45%{transform:scale(1.25)}100%{transform:scale(1)}}
@keyframes tsiq-wobble{25%{transform:rotate(-14deg) scale(1.2)}50%{transform:rotate(10deg) scale(1.2)}75%{transform:rotate(-6deg)}}
@keyframes tsiq-sheen{to{background-position:200% 0}}
@keyframes tsiq-ripple{to{transform:scale(3.2);opacity:0}}
@keyframes tsiq-spin{to{transform:rotate(360deg)}}
@keyframes tsiq-card-in{from{opacity:0;transform:translateY(30px) scale(.94)}to{opacity:1;transform:none}}
@keyframes tsiq-glow{to{opacity:.55}}
@keyframes tsiq-draw{to{stroke-dashoffset:0}}
@keyframes tsiq-fillpop{to{transform:scale(.86)}}
@keyframes tsiq-ring-out{0%{opacity:.9;transform:scale(.9)}100%{opacity:0;transform:scale(1.7)}}
@keyframes tsiq-float{50%{transform:translateY(-8px) rotate(6deg)}}
@keyframes tsiq-burst{0%{opacity:1;transform:translate(0,0) rotate(0) scale(var(--s0,1))}75%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(var(--s1,1))}}
@keyframes tsiq-spark{0%{opacity:1;transform:translate(0,0) scale(1.2)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.2)}}

/* Dark mode surfaces for the tooltip */
body[data-thememode=dark] .tsiq-rating button[data-label]::after{background:#e7ebf5;color:#0b1020}

/* ---------- Respect reduced-motion: keep the visuals, drop the motion ---------- */
@media (prefers-reduced-motion:reduce){
  .tsiq-fx .question-container,.tsiq-celebrate,.tsiq-celebrate::before,.tsiq-celebrate h1,.tsiq-celebrate p.lead,.tsiq-emojis span,.tsiq-again,.tsiq-celebrate+*,.tsiq-rating button span,.tsiq-ring.tsiq-bump,.tsiq-fx .survey-form-container input:checked,.tsiq-fx .survey-form-container .btn-primary:hover{animation:none!important}
  .tsiq-fx .question-container:hover,.tsiq-rating button:hover,.tsiq-fx .survey-form-container .btn:hover{transform:none}
  .tsiq-check circle,.tsiq-check path{animation:none;stroke-dashoffset:0}
  .tsiq-check .fill{animation:none;transform:scale(.86)}
  .tsiq-check::before,.tsiq-check::after,.tsiq-party,.tsiq-ripple{display:none}
  .tsiq-toast{transition:none}
}