/* ═══════════════════════════════════════════════════════════
   WELCOME.CSS — tela de boas-vindas animada com a mascote G2
   "falando" (balão), passo a passo. Aparece após criar a conta
   (ver js/tutorial/welcome-mascote.js).
   ═══════════════════════════════════════════════════════════ */

.wm-overlay {
  position: fixed; inset: 0; z-index: 2000; display: none;
  align-items: center; justify-content: center; padding: 16px;
  background: rgba(5,5,8,.66); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .28s ease;
}
.wm-overlay.wm-show { opacity: 1; }

.wm-card {
  position: relative; width: 740px; max-width: 100%; min-height: 380px;
  display: flex; gap: 8px; overflow: hidden;
  background: #15151a; border: 1px solid #2a2a32; border-radius: 22px;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
  transform: translateY(24px) scale(.96); opacity: 0;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .45s;
}
.wm-overlay.wm-show .wm-card { transform: none; opacity: 1; }

.wm-left { flex: 1; min-width: 0; padding: 26px 26px 22px; display: flex; flex-direction: column; }
.wm-logo { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; font-size: 15px; color: #fff; margin-bottom: 16px; }
.wm-logo .d { width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(135deg,#7C3AED,#2563EB); display: flex; align-items: center; justify-content: center; }
.wm-logo .d svg { width: 17px; height: 17px; }

.wm-bubble {
  position: relative; background: #f5f6fa; color: #1f2330;
  border-radius: 16px; padding: 16px 18px; min-height: 118px;
}
.wm-bubble::after {
  content: ''; position: absolute; right: -11px; bottom: 26px;
  border: 11px solid transparent; border-left-color: #f5f6fa; border-right: 0;
}
.wm-title { font-size: 20px; font-weight: 800; margin-bottom: 6px; color: #1f2330; }
.wm-text { font-size: 14px; line-height: 1.55; color: #4a5060; min-height: 46px; }
.wm-text .cur { color: #7C3AED; font-weight: 700; animation: wmBlink 1s steps(1) infinite; }
@keyframes wmBlink { 50% { opacity: 0; } }

.wm-progress { display: flex; gap: 8px; margin: 18px 0 16px; }
.wm-dot { width: 9px; height: 9px; border-radius: 50%; background: #3a3a42; transition: all .3s; }
.wm-dot.on { background: linear-gradient(135deg,#7C3AED,#2563EB); transform: scale(1.25); }

.wm-actions { margin-top: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wm-skip { margin-right: auto; background: none; border: none; color: #888; font-size: 13px; cursor: pointer; font-family: inherit; }
.wm-skip:hover { color: #bbb; }
.wm-back { background: none; border: 1px solid #44444c; color: #cfcfd6; border-radius: 22px; padding: 9px 18px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.wm-back:disabled { opacity: .4; cursor: default; }
.wm-next { background: linear-gradient(135deg,#7C3AED,#2563EB); border: none; color: #fff; border-radius: 22px; padding: 10px 22px; font-size: 13px; font-weight: 700; cursor: pointer; transition: filter .15s; font-family: inherit; }
.wm-next:hover { filter: brightness(1.08); }
.wm-tour { background: none; border: none; color: #9b8cff; font-size: 12.5px; cursor: pointer; text-decoration: underline; font-family: inherit; width: 100%; text-align: center; margin-top: 4px; }

.wm-right { width: 300px; flex-shrink: 0; position: relative; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.wm-right::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 80% 100%, rgba(124,58,237,.30), transparent 60%),
    radial-gradient(120% 90% at 100% 0%, rgba(37,99,235,.22), transparent 55%);
}
.wm-pose {
  position: relative; height: 332px; width: auto; object-fit: contain;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.45));
  animation: wmFloat 3.4s ease-in-out infinite;
}
@keyframes wmFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes wmPoseIn { from { opacity: 0; transform: translateY(26px) scale(.96); } to { opacity: 1; transform: none; } }
.wm-pose.wm-anim { animation: wmPoseIn .5s cubic-bezier(.2,.8,.2,1), wmFloat 3.4s ease-in-out infinite .5s; }
@keyframes wmBubbleIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.wm-bubble.wm-anim { animation: wmBubbleIn .35s ease; }

@media (prefers-reduced-motion: reduce) {
  .wm-pose, .wm-pose.wm-anim { animation: none; }
}
@media (max-width: 640px) {
  .wm-card { flex-direction: column-reverse; min-height: 0; }
  .wm-right { width: 100%; height: 188px; }
  .wm-pose { height: 178px; }
  .wm-bubble::after { display: none; }
}