/* ============================================================
   xw-logo.css — xWildChat animated logo
   Sizes: .sc-logo-sm (sidebar/nav 22px) | .sc-logo-md (auth 34px)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@900&display=swap');

/* ── BASE ────────────────────────────────────────────────── */
.sc-logo {
  display: inline-flex;
  align-items: center;
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.5px;
  position: relative;
}

.sc-logo .sc-sparks {
  color: #f63090;
  animation: scSparksIn 0.7s cubic-bezier(0.34,1.56,0.64,1) both;
}
.sc-logo .sc-chat {
  color: #f771b2;
  animation: scChatIn 0.7s cubic-bezier(0.34,1.56,0.64,1) 0.15s both;
}
.sc-logo .sc-sparks:hover { animation: scShake 0.5s ease; cursor: default; }
.sc-logo .sc-chat:hover   { animation: scGlow  0.5s ease; cursor: default; }

/* ── BUBBLE ──────────────────────────────────────────────── */
.sc-bubble {
  position: relative;
  flex-shrink: 0;
  animation: scBubbleIn 0.6s cubic-bezier(0.34,1.56,0.64,1) 0.07s both;
}
.sc-bb { /* back bubble — blue */
  position: absolute;
  top: 0; right: 0;
  background: #f771b2;
  border-radius: 50% 50% 50% 15%;
  animation: scPulse 3s ease-in-out 1.2s infinite;
}
.sc-bf { /* front bubble — light blue */
  position: absolute;
  bottom: 0; left: 0;
  background: #fd91c5;
  border-radius: 50% 50% 15% 50%;
  animation: scPulse 3s ease-in-out 1.5s infinite;
}
.sc-db, .sc-df { /* dot rows */
  position: absolute;
  display: flex;
  align-items: center;
}
.sc-db { top: 0; right: 0; z-index: 2; }
.sc-df { bottom: 0; left: 0; z-index: 3; }
.sc-dot {
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
}
.sc-db .sc-dot:nth-child(1) { animation: scDot 1.4s ease-in-out 1.30s infinite; }
.sc-db .sc-dot:nth-child(2) { animation: scDot 1.4s ease-in-out 1.50s infinite; }
.sc-db .sc-dot:nth-child(3) { animation: scDot 1.4s ease-in-out 1.70s infinite; }
.sc-df .sc-dot:nth-child(1) { animation: scDot 1.4s ease-in-out 1.60s infinite; }
.sc-df .sc-dot:nth-child(2) { animation: scDot 1.4s ease-in-out 1.80s infinite; }
.sc-df .sc-dot:nth-child(3) { animation: scDot 1.4s ease-in-out 2.00s infinite; }

/* ── SPARKLE STARS (md only) ─────────────────────────────── */
.sc-stars {
  position: absolute;
  pointer-events: none;
  animation: scFadeUp 0.6s ease 0.3s both;
}
.sc-star {
  position: absolute;
  color: #f5c030;
  animation: scStarPop 0.5s cubic-bezier(0.34,1.56,0.64,1) both,
             scStarTwinkle 2.5s ease-in-out infinite;
}
.sc-star::before, .sc-star::after {
  content: '';
  position: absolute;
  background: #f5c030;
  border-radius: 2px;
  transform: translate(-50%, -50%);
}
.sc-star::before { width: 2px; height: 100%; top: 50%; left: 50%; }
.sc-star::after  { width: 100%; height: 2px; top: 50%; left: 50%; }
.sc-sdot {
  position: absolute;
  border-radius: 50%;
  background: #f5c030;
  animation: scStarPop 0.5s cubic-bezier(0.34,1.56,0.64,1) both,
             scStarTwinkle 2.5s ease-in-out infinite;
}

/* ── SIZE: SM — sidebar & topnav (22px) ──────────────────── */
.sc-logo-sm { font-size: 22px; }
.sc-logo-sm .sc-bubble  { width: 26px; height: 22px; margin: 0 2px; }
.sc-logo-sm .sc-bb      { width: 17px; height: 17px; }
.sc-logo-sm .sc-bf      { width: 15px; height: 15px; }
.sc-logo-sm .sc-db      { top: 4px; right: 2px; gap: 2px; }
.sc-logo-sm .sc-df      { bottom: 3px; left: 2px; gap: 2px; }
.sc-logo-sm .sc-dot     { width: 3px; height: 3px; }
.sc-logo-sm .sc-stars   { display: none; } /* stars only on md (auth pages) */

/* ── SIZE: MD — auth pages (34px) ────────────────────────── */
.sc-logo-md { font-size: 34px; letter-spacing: -0.8px; }
.sc-logo-md .sc-bubble  { width: 40px; height: 34px; margin: 0 3px; }
.sc-logo-md .sc-bb      { width: 26px; height: 26px; }
.sc-logo-md .sc-bf      { width: 24px; height: 24px; }
.sc-logo-md .sc-db      { top: 7px; right: 4px; gap: 3px; }
.sc-logo-md .sc-df      { bottom: 5px; left: 4px; gap: 3px; }
.sc-logo-md .sc-dot     { width: 4px; height: 4px; }
/* Stars positioned above "Sparks" */
.sc-logo-md .sc-stars   { top: -22px; left: -4px; width: 100px; height: 22px; }
.sc-logo-md .sc-star.s1 { width:11px; height:11px; top:10px; left:4px;   animation-delay:0.30s,1.2s; }
.sc-logo-md .sc-star.s2 { width:14px; height:14px; top:2px;  left:16px;  animation-delay:0.38s,1.5s; }
.sc-logo-md .sc-star.s3 { width: 8px; height: 8px; top:13px; left:30px;  animation-delay:0.44s,1.8s; }
.sc-logo-md .sc-star.s4 { width:12px; height:12px; top:1px;  left:42px;  animation-delay:0.50s,1.3s; }
.sc-logo-md .sc-star.s5 { width: 7px; height: 7px; top:13px; left:56px;  animation-delay:0.56s,2.0s; }
.sc-logo-md .sc-star.s6 { width:11px; height:11px; top:0px;  left:68px;  animation-delay:0.62s,1.6s; }
.sc-logo-md .sc-star.s7 { width: 7px; height: 7px; top:13px; left:80px;  animation-delay:0.67s,1.9s; }
.sc-logo-md .sc-sdot.d1 { width:4px;  height:4px;  top:8px;  left:10px;  animation-delay:0.35s,1.7s; }
.sc-logo-md .sc-sdot.d2 { width:4px;  height:4px;  top:10px; left:38px;  animation-delay:0.48s,2.1s; }
.sc-logo-md .sc-sdot.d3 { width:4px;  height:4px;  top:6px;  left:62px;  animation-delay:0.58s,1.5s; }

/* ── KEYFRAMES ───────────────────────────────────────────── */
@keyframes scSparksIn {
  from { opacity:0; transform: translateX(-20px) scale(0.85); }
  to   { opacity:1; transform: translateX(0) scale(1); }
}
@keyframes scChatIn {
  from { opacity:0; transform: translateX(20px) scale(0.85); }
  to   { opacity:1; transform: translateX(0) scale(1); }
}
@keyframes scBubbleIn {
  from { opacity:0; transform: scale(0) rotate(-20deg); }
  to   { opacity:1; transform: scale(1) rotate(0deg); }
}
@keyframes scPulse {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.07); }
}
@keyframes scDot {
  0%,60%,100% { transform: translateY(0); opacity:.9; }
  30%          { transform: translateY(-4px); opacity:1; }
}
@keyframes scStarPop {
  from { opacity:0; transform: scale(0) rotate(-30deg); }
  to   { opacity:1; transform: scale(1) rotate(0deg); }
}
@keyframes scStarTwinkle {
  0%,100% { opacity:1;   transform: scale(1); }
  50%      { opacity:0.4; transform: scale(0.75); }
}
@keyframes scShake {
  0%,100% { transform: rotate(0); }
  20% { transform: rotate(-4deg) scale(1.04); }
  40% { transform: rotate(4deg)  scale(1.04); }
  60% { transform: rotate(-3deg); }
  80% { transform: rotate(3deg); }
}
@keyframes scGlow {
  0%,100% { filter: brightness(1); }
  50%      { filter: brightness(1.35) drop-shadow(0 0 10px #f771b2); }
}
@keyframes scFadeUp {
  from { opacity:0; transform: translateY(5px); }
  to   { opacity:1; transform: translateY(0); }
}
/* ── xWildChat image logo (replaces the Sparks/Chat text logo) ── */
.xw-logo-img { height: 30px; width: auto; display: block; }
.sc-logo-sm .xw-logo-img { height: 28px !important; }
.sc-logo-md .xw-logo-img { height: 46px !important; }