/* ===================================================================
   CompatiQuiz - Main Stylesheet
   Design system: violet-to-purple gradient theme, clean cards
   =================================================================== */

/* -- CSS Custom Properties (design tokens) -------------------------- */
:root {
  --cq-primary:      #7c3aed;
  --cq-primary-dark: #6d28d9;
  --cq-primary-light:#ede9fe;
  --cq-accent:       #a855f7;
  --cq-accent2:      #6366f1;
  --cq-grad:         linear-gradient(to right, #000000 0%, #333333 100%);
  --cq-grad-soft:    linear-gradient(135deg, #ede9fe 0%, #f0f4ff 50%, #ffffff 100%);
  --cq-grad-dark:    linear-gradient(135deg, #6d28d9 0%, #7c3aed 50%, #4f46e5 100%);
  --cq-text:         #1a1a2e;
  --cq-muted:        #64748b;
  --cq-border:       #e2e8f0;
  --cq-bg:           #fafbff;
  --cq-radius:       14px;
  --cq-shadow:       0 2px 16px rgba(124,58,237,.10);
  --cq-font-display: 'Poppins', sans-serif;
  --cq-font-body:    'Inter',   sans-serif;
}

/* -- Base resets ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--cq-font-body);
  background:  linear-gradient(160deg, #f5f0ff 0%, #eef2ff 40%, #faf5ff 70%, #ffffff 100%);
  background-attachment: fixed;
  color:       var(--cq-text);
  margin:      0;
  min-height:  100vh;
  display:     flex;
  flex-direction: column;
}

main { flex: 1; }

h1,h2,h3,h4,h5,h6 { font-family: var(--cq-font-display); }

.text-pink { color: var(--cq-primary) !important; }

/* -- Navigation Bar ------------------------------------------------- */
.cq-navbar {
  background: var(--cq-grad);
  box-shadow: 0 2px 16px rgba(124,58,237,.30);
}

.cq-brand {
  font-family:     var(--cq-font-display);
  font-weight:     800;
  font-size:       1.4rem;
  text-decoration: none;
  display:         flex;
  align-items:     center;
  gap:             8px;
  background:      linear-gradient(90deg, #ff4e8e, #ff2d55, #ff6b35);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing:  0.5px;
  letter-spacing:  0;
  filter:          drop-shadow(0 0 8px rgba(255,45,85,0.45));
  transition:      filter .2s;
}
.cq-brand:hover {
  filter: drop-shadow(0 0 14px rgba(255,45,85,0.75));
}

/* Brand text used on white/light backgrounds */
.cq-brand-dark {
  font-family:     var(--cq-font-display);
  font-weight:     800;
  font-size:       1.6rem;
  background:      linear-gradient(90deg, #e8003d, #ff2d55, #ff6b35);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing:  0;
  filter:          drop-shadow(0 0 6px rgba(232,0,61,0.25));
}

/* -- Hero Banner ---------------------------------------------------- */
.cq-hero {
  background: var(--cq-grad-soft);
  border-bottom: 1px solid var(--cq-border);
}
.cq-hero-emoji    { font-size: 3.5rem; margin-bottom: .5rem; }
.cq-hero-title    { font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 800; color: var(--cq-text); }
.cq-hero-subtitle { font-size: 1.1rem; color: var(--cq-muted); max-width: 500px; margin: .5rem auto 0; }

/* -- Section Titles ------------------------------------------------- */
.cq-section-title {
  font-family: var(--cq-font-display);
  font-size:   1.25rem;
  font-weight: 700;
  color:       var(--cq-text);
}

/* -- Cards ---------------------------------------------------------- */
.cq-card {
  background:    linear-gradient(145deg, #ffffff 60%, #f5f0ff 100%);
  border:        1px solid var(--cq-border);
  border-radius: var(--cq-radius);
  box-shadow:    var(--cq-shadow);
}

/* -- Quiz Cards (home page grid) ------------------------------------ */
.cq-quiz-card {
  background:    linear-gradient(145deg, #ffffff 60%, #f5f0ff 100%);
  border:        1px solid var(--cq-border);
  border-radius: var(--cq-radius);
  box-shadow:    var(--cq-shadow);
  transition:    transform .2s ease, box-shadow .2s ease;
  overflow:      hidden;
  display:       flex;
  flex-direction:column;
}
.cq-quiz-card:hover {
  transform:  translateY(-4px);
  box-shadow: 0 8px 30px rgba(124,58,237,.18);
}

.cq-card-cover {
  height:   180px;
  overflow: hidden;
  background: var(--cq-grad-soft);
}
.cq-card-cover img {
  width:  100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}
.cq-quiz-card:hover .cq-card-cover img { transform: scale(1.04); }

.cq-card-cover-placeholder {
  width:       100%;
  height:      100%;
  display:     flex;
  align-items: center;
  justify-content: center;
  font-size:   3rem;
  background:  var(--cq-grad-soft);
}

.cq-card-body  { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; }
.cq-card-title { font-family: var(--cq-font-display); font-weight: 700; font-size: 1.1rem; margin-bottom: .3rem; }
.cq-card-desc  { font-size: .875rem; flex: 1; }

/* -- Leaderboard ---------------------------------------------------- */
.cq-leaderboard-card {
  background:    linear-gradient(145deg, #ffffff 60%, #f0f4ff 100%);
  border:        1px solid var(--cq-border);
  border-radius: var(--cq-radius);
  box-shadow:    var(--cq-shadow);
  overflow:      hidden;
}
.cq-lb-row {
  display:     flex;
  align-items: center;
  gap:         10px;
  padding:     10px 16px;
  border-bottom: 1px solid var(--cq-border);
  transition:  background .15s;
}
.cq-lb-row:last-child { border-bottom: none; }
.cq-lb-row:hover      { background: var(--cq-grad-soft); }
.cq-lb-rank       { width: 32px; text-align: center; font-size: 1.2rem; }
.cq-rank-num      { font-weight: 700; color: var(--cq-muted); font-size: .85rem; }
.cq-lb-names      { font-weight: 600; font-size: .9rem; }
.cq-lb-quiz       { font-size: .75rem; }
.cq-lb-score      { font-family: var(--cq-font-display); font-weight: 700; font-size: 1.1rem; text-align: right; }
.cq-lb-emoji      { font-size: .9rem; }

/* -- Buttons -------------------------------------------------------- */
.cq-btn-primary {
  background:    var(--cq-grad);
  border:        none;
  color:         #fff;
  border-radius: 10px;
  font-weight:   600;
  padding:       .6rem 1.4rem;
  transition:    opacity .2s, transform .1s, box-shadow .2s;
  box-shadow:    0 2px 10px rgba(124,58,237,.30);
}
.cq-btn-primary:hover  {
  opacity: .9;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 18px rgba(124,58,237,.40);
}
.cq-btn-primary:active { transform: translateY(0); }

.cq-btn-outline {
  background:    transparent;
  border:        2px solid var(--cq-primary);
  color:         var(--cq-primary);
  border-radius: 10px;
  font-weight:   600;
  padding:       .55rem 1.4rem;
  transition:    all .2s;
}
.cq-btn-outline:hover {
  background: var(--cq-grad);
  border-color: transparent;
  color: #fff;
}

.cq-btn-whatsapp { background: #25d366; color: #fff; border-radius: 10px; font-weight: 600; }
.cq-btn-whatsapp:hover { background: #128c7e; color: #fff; }
.cq-btn-telegram { background: #229ed9; color: #fff; border-radius: 10px; font-weight: 600; }
.cq-btn-telegram:hover { background: #1a7cbf; color: #fff; }

/* -- Form inputs ---------------------------------------------------- */
.cq-input {
  border:        1.5px solid var(--cq-border);
  border-radius: 10px;
  padding:       .6rem .9rem;
  font-family:   var(--cq-font-body);
  transition:    border-color .2s, box-shadow .2s;
}
.cq-input:focus {
  border-color: var(--cq-primary);
  box-shadow:   0 0 0 3px rgba(124,58,237,.12);
  outline:      none;
}

/* -- Modal ---------------------------------------------------------- */
.cq-modal .modal-content {
  border-radius: 18px;
  border:        none;
  box-shadow:    0 8px 40px rgba(124,58,237,.18);
}

/* -- Progress Bar --------------------------------------------------- */
.cq-progress { height: 8px; border-radius: 99px; background: var(--cq-border); overflow: hidden; }
.cq-progress-bar {
  background: var(--cq-grad);
  border-radius: 99px;
  transition: width .4s ease;
}

.cq-badge-respondent {
  background: var(--cq-grad);
  color:      #fff;
  font-weight: 600;
  font-size: .8rem;
  padding: .35rem .75rem;
  border-radius: 99px;
}

/* -- Question Card -------------------------------------------------- */
.cq-question-card {
  background:    linear-gradient(145deg, #ffffff 60%, #f5f0ff 100%);
  border:        1px solid var(--cq-border);
  border-radius: var(--cq-radius);
  box-shadow:    var(--cq-shadow);
  padding:       2rem;
}

.cq-quiz-tag {
  display:       inline-flex;
  align-items:   center;
  background:    var(--cq-grad);
  color:         #fff;
  font-size:     .8rem;
  font-weight:   600;
  padding:       .25rem .75rem;
  border-radius: 99px;
}

.cq-question-text { font-size: clamp(1rem, 2.5vw, 1.3rem); font-weight: 700; line-height: 1.5; }

/* -- Answer Options ------------------------------------------------- */
.cq-options-grid { display: flex; flex-direction: column; gap: 12px; }
.cq-option {
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  background:    linear-gradient(145deg, #ffffff, #faf5ff);
  border:        2px solid var(--cq-border);
  border-radius: var(--cq-radius);
  padding:       .9rem 1.2rem;
  cursor:        pointer;
  transition:    border-color .2s, background .2s, transform .15s;
  user-select:   none;
}
.cq-option:hover {
  border-color: var(--cq-primary);
  background:   var(--cq-grad-soft);
  transform:    translateX(4px);
}
.cq-option.selected {
  border-color: var(--cq-primary);
  background:   var(--cq-grad-soft);
}
.cq-option-text  { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.cq-option-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; }
.cq-option-check { color: var(--cq-primary); opacity: 0; transition: opacity .2s; font-size: 1.1rem; }
.cq-option.selected .cq-option-check { opacity: 1; }

.cq-btn-ready { animation: pulse .4s ease; }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.03); } }

/* -- Media Preview Panel -------------------------------------------- */
.cq-preview-panel {
  background:    var(--cq-grad-soft);
  border:        2px dashed var(--cq-border);
  border-radius: var(--cq-radius);
  min-height:    300px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  overflow:      hidden;
  position:      sticky;
  top:           80px;
}
.cq-preview-placeholder { text-align: center; padding: 2rem; }

/* -- Share Page ----------------------------------------------------- */
.cq-waiting-anim { font-size: 3.5rem; animation: spin 3s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.cq-share-box .form-control { background: var(--cq-bg); border-radius: 10px 0 0 10px; }
.cq-waiting-msg {
  font-size:   .9rem;
  color:       var(--cq-muted);
  padding:     1rem;
  background:  var(--cq-grad-soft);
  border-radius: 10px;
  border:      1px solid var(--cq-border);
}

/* -- Results Page --------------------------------------------------- */
.cq-result-hero {
  background:    linear-gradient(145deg, #ffffff 50%, #f5f0ff 100%);
  border:        1px solid var(--cq-border);
  border-radius: var(--cq-radius);
  box-shadow:    var(--cq-shadow);
}
.cq-result-names { font-size: clamp(1.2rem, 3vw, 1.8rem); }
.cq-name-a, .cq-name-b { color: var(--cq-primary); }
.cq-heart-sep { margin: 0 .5rem; color: var(--cq-primary); animation: heartbeat 1.5s ease infinite; }
@keyframes heartbeat { 0%,100% { transform: scale(1); } 50% { transform: scale(1.3); } }

.cq-score-ring-wrap {
  position: relative;
  display:  inline-block;
  width:    140px;
  height:   140px;
}
.cq-score-ring  { width: 140px; height: 140px; }
.cq-score-number {
  position:  absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--cq-font-display);
  font-size:   1.8rem;
  font-weight: 800;
  color:       var(--cq-text);
}
.cq-compat-label {
  font-family: var(--cq-font-display);
  font-size:   1.4rem;
  font-weight: 700;
}
.cq-compat-emoji { font-size: 1.6rem; margin-right: .3rem; }

.cq-breakdown-wrap { border-radius: var(--cq-radius); overflow: hidden; border: 1px solid var(--cq-border); }
.cq-breakdown-table { margin-bottom: 0; }
.cq-breakdown-table th { background: var(--cq-grad); color: #fff; font-weight: 600; }
.cq-row-match { background: rgba(22,163,74,.05); }
.cq-consent-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* -- Footer --------------------------------------------------------- */
.cq-footer {
  background: linear-gradient(135deg, #f5f0ff 0%, #eef2ff 100%);
  border-top: 1px solid var(--cq-border);
}

/* -- Flash Messages ------------------------------------------------- */
.cq-flash { border-radius: 10px; }

/* -- Empty State ---------------------------------------------------- */
.cq-empty-state {
  text-align: center;
  padding:    3rem 1rem;
  color:      var(--cq-muted);
}
.cq-empty-icon { font-size: 2.5rem; margin-bottom: .75rem; }

/* -- Error Page ----------------------------------------------------- */
.cq-error-page { padding: 3rem 1rem; }

/* -- Ad Slots ------------------------------------------------------- */
.cq-ad-slot {
  background: var(--cq-grad-soft);
  border: 1px dashed var(--cq-primary);
  border-radius: var(--cq-radius);
  padding: 1rem;
}
.cq-ad-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--cq-muted); margin-bottom: .5rem; }

/* -- Login Background ----------------------------------------------- */
.cq-login-bg {
  background: linear-gradient(160deg, #ede9fe 0%, #e0e7ff 50%, #f5f0ff 100%);
  background-attachment: fixed;
}
.cq-login-card {
  background:    linear-gradient(145deg, #ffffff 70%, #f5f0ff 100%);
  border:        1px solid var(--cq-border);
  border-radius: 20px;
  box-shadow:    0 8px 40px rgba(124,58,237,.15);
  width:         100%;
  max-width:     420px;
}
.cq-input-icon { background: var(--cq-grad-soft); border-color: var(--cq-border); color: var(--cq-primary); }

/* -- User Profile / Avatar ------------------------------------------ */
.cq-avatar-wrap { flex-shrink: 0; }
.cq-avatar {
  width:         120px;
  height:        120px;
  border-radius: 50%;
  object-fit:    cover;
  border:        3px solid var(--cq-primary);
  display:       block;
}
.cq-avatar-placeholder {
  width:           120px;
  height:          120px;
  border-radius:   50%;
  background:      var(--cq-grad);
  color:           #fff;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       3rem;
  border:          3px solid var(--cq-border);
}

/* -- Blog Post Content ---------------------------------------------- */
.cq-blog-content {
  font-size:   1.05rem;
  line-height: 1.8;
  color:       var(--cq-text);
}
.cq-blog-content h1,
.cq-blog-content h2,
.cq-blog-content h3 { margin-top: 1.5rem; font-family: var(--cq-font-display); }
.cq-blog-content img { max-width: 100%; border-radius: var(--cq-radius); }
.cq-blog-content blockquote {
  border-left: 4px solid var(--cq-primary);
  padding:     .5rem 1rem;
  color:       var(--cq-muted);
  margin:      1rem 0;
  background:  var(--cq-grad-soft);
  border-radius: 0 var(--cq-radius) var(--cq-radius) 0;
}

/* -- Profile Comments ----------------------------------------------- */
.cq-comment-row {
  display:     flex;
  gap:         .75rem;
  padding:     .85rem 0;
  border-bottom: 1px solid var(--cq-border);
}
.cq-comment-row:last-child { border-bottom: none; }
.cq-comment-avatar {
  width:           38px;
  height:          38px;
  border-radius:   50%;
  background:      var(--cq-grad);
  color:           #fff;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-weight:     700;
  font-size:       1rem;
  flex-shrink:     0;
}

/* -- GIF Gallery ---------------------------------------------------- */
.cq-gif-card {
  border-radius: var(--cq-radius);
  overflow: hidden;
  transition: transform .18s, box-shadow .18s;
}
.cq-gif-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(124,58,237,.20);
}
.cq-gif-thumb {
  position: relative;
  overflow: hidden;
  border-radius: var(--cq-radius);
  background: var(--cq-grad-soft);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cq-gif-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cq-gif-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(124,58,237,.55), rgba(99,102,241,.55));
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .18s;
}
.cq-gif-card:hover .cq-gif-overlay { opacity: 1; }
.cq-gif-tags { min-height: 1.5rem; overflow: hidden; }

/* -- Violet/Gradient badge ------------------------------------------ */
.bg-pink { background: var(--cq-grad) !important; color: #fff !important; }

/* -- Results actions card responsive divider ------------------------ */
@media (max-width: 767px) {
  #actionsCard .col-md-6 { border-right: none !important; }
  #actionsCard .order-1  { border-bottom: 1px solid var(--cq-border); }
}

/* -- Responsive tweaks ---------------------------------------------- */
@media (max-width: 768px) {
  .cq-question-card  { padding: 1.25rem; }
  .cq-result-hero    { padding: 1.5rem !important; }
  .cq-hero-emoji     { font-size: 2.5rem; }
}

/* -- Icon Animations ------------------------------------------------ */
@keyframes cq-float    { 0%,100%{transform:translateY(0)}  50%{transform:translateY(-5px)} }
@keyframes cq-pulse-sc { 0%,100%{transform:scale(1)}       50%{transform:scale(1.22)} }
@keyframes cq-spin     { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes cq-wiggle   { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-12deg)} 75%{transform:rotate(12deg)} }
@keyframes cq-bounce   { 0%,100%{transform:translateY(0)} 40%{transform:translateY(-6px)} 60%{transform:translateY(-3px)} }
@keyframes cq-shake    { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
@keyframes cq-swing    { 0%,100%{transform:rotate(0deg)} 20%{transform:rotate(10deg)} 60%{transform:rotate(-8deg)} 80%{transform:rotate(5deg)} }
@keyframes cq-tada     { 0%,100%{transform:scale(1) rotate(0)} 20%{transform:scale(1.15) rotate(-6deg)} 40%{transform:scale(1.15) rotate(6deg)} 60%{transform:scale(1.1) rotate(-3deg)} 80%{transform:scale(1.05) rotate(3deg)} }
@keyframes cq-ping     { 0%,100%{transform:scale(1);opacity:1} 60%{transform:scale(1.35);opacity:.5} }
@keyframes cq-rubberband { 0%,100%{transform:scaleX(1) scaleY(1)} 30%{transform:scaleX(1.2) scaleY(.8)} 60%{transform:scaleX(.85) scaleY(1.1)} 80%{transform:scaleX(1.05) scaleY(.95)} }

/* All icons: inline-block so transforms work */
[class*="bi-"] { display: inline-block; }

/* === DEFAULT: every icon floats gently === */
i[class*="bi-"] {
  animation: cq-float 3s ease-in-out infinite;
}

/* === Context overrides (specific icons get specific animations) === */

/* Heart → heartbeat pulse */
i.bi-heart-fill, i.bi-suit-heart-fill, i.bi-heartbreak-fill {
  animation: cq-pulse-sc 1.2s ease-in-out infinite;
}

/* Send arrow → bounce diagonally via float */
i.bi-send-fill, i.bi-send, i.bi-arrow-right-circle-fill, i.bi-box-arrow-up-right {
  animation: cq-bounce 1.8s ease-in-out infinite;
}

/* Trash / delete → wiggle */
i.bi-trash-fill, i.bi-trash3-fill, i.bi-x-lg, i.bi-x-circle-fill {
  animation: cq-wiggle 2.2s ease-in-out infinite;
}

/* Pencil / edit → swing */
i.bi-pencil-fill, i.bi-pencil-square, i.bi-pen-fill {
  animation: cq-swing 2.5s ease-in-out infinite;
}

/* Search → shake side to side */
i.bi-search, i.bi-zoom-in, i.bi-zoom-out {
  animation: cq-shake 2.5s ease-in-out infinite;
}

/* Person / user icons → bounce */
i.bi-person-fill, i.bi-person-circle, i.bi-person-plus-fill,
i.bi-person-badge-fill, i.bi-people-fill {
  animation: cq-bounce 2.8s ease-in-out infinite;
}

/* Trophy / award / star → tada */
i.bi-trophy-fill, i.bi-award-fill, i.bi-star-fill, i.bi-gem {
  animation: cq-tada 2.5s ease-in-out infinite;
}

/* Bell / notification → swing */
i.bi-bell-fill, i.bi-megaphone-fill, i.bi-exclamation-circle-fill {
  animation: cq-swing 1.8s ease-in-out infinite;
}

/* Check / success → pulse */
i.bi-check-circle-fill, i.bi-patch-check-fill, i.bi-shield-fill-check {
  animation: cq-ping 2s ease-in-out infinite;
}

/* Thumbs up/down → bounce */
i.bi-hand-thumbs-up-fill  { animation: cq-bounce 2s ease-in-out infinite; }
i.bi-hand-thumbs-down-fill{ animation: cq-wiggle 2s ease-in-out infinite; }

/* Upload / cloud → float (higher amplitude) */
i.bi-cloud-upload-fill, i.bi-cloud-download-fill, i.bi-upload {
  animation: cq-float 2s ease-in-out infinite;
}

/* Image / GIF → rubberband */
i.bi-image-fill, i.bi-film, i.bi-camera-fill {
  animation: cq-rubberband 3s ease-in-out infinite;
}

/* Key / lock → swing */
i.bi-key-fill, i.bi-lock-fill, i.bi-unlock-fill {
  animation: cq-swing 3s ease-in-out infinite;
}

/* Spinner / loading icons → spin */
i.bi-arrow-repeat, i.bi-hourglass-split, i.bi-hourglass {
  animation: cq-spin 1.5s linear infinite;
}

/* Emoji → bounce */
i.bi-emoji-smile-fill, i.bi-emoji-heart-eyes-fill, i.bi-emoji-laughing-fill {
  animation: cq-bounce 1.6s ease-in-out infinite;
}

/* Chat icons → ping */
i.bi-chat-fill, i.bi-chat-quote-fill, i.bi-chat-dots-fill {
  animation: cq-ping 2.2s ease-in-out infinite;
}

/* Plus / add icons → spin (quarter turn back and forth = swing) */
i.bi-plus-lg, i.bi-plus, i.bi-plus-circle-fill {
  animation: cq-swing 2.5s ease-in-out infinite;
}

/* Eye / view → float */
i.bi-eye-fill, i.bi-eye {
  animation: cq-float 2s ease-in-out infinite;
}

/* House / home → bounce */
i.bi-house-fill, i.bi-house {
  animation: cq-bounce 3s ease-in-out infinite;
}

/* Calendar → swing */
i.bi-calendar3, i.bi-calendar-fill {
  animation: cq-swing 3s ease-in-out infinite;
}

/* Geo / location → bounce */
i.bi-geo-alt-fill, i.bi-geo-fill, i.bi-pin-map-fill {
  animation: cq-bounce 2s ease-in-out infinite;
}

/* Collection / list / grid → float */
i.bi-collection-fill, i.bi-grid-fill, i.bi-list {
  animation: cq-float 3.5s ease-in-out infinite;
}

/* Floppy / save → pulse */
i.bi-floppy-fill, i.bi-save-fill {
  animation: cq-ping 2.5s ease-in-out infinite;
}

/* Clipboard → swing */
i.bi-clipboard-fill, i.bi-clipboard {
  animation: cq-swing 3s ease-in-out infinite;
}

/* Patch / question → bounce */
i.bi-patch-question-fill, i.bi-question-circle-fill {
  animation: cq-bounce 2.5s ease-in-out infinite;
}

/* Box arrow / external link → bounce */
i.bi-box-arrow-in-right, i.bi-box-arrow-right {
  animation: cq-bounce 2s ease-in-out infinite;
}

/* Gender icon → spin (slow) */
i.bi-gender-ambiguous, i.bi-gender-female, i.bi-gender-male {
  animation: cq-spin 6s linear infinite;
}

/* Dot icon → ping */
i.bi-dot { animation: cq-ping 1.5s ease-in-out infinite; }

/* === Hover: speed up whatever animation is playing === */
[class*="bi-"]:hover {
  animation-duration: .4s !important;
}