:root {
  --berry: #b12a86;
  --ink: #3d2340;
  --muted: #8a5e8f;
  --soft: #fbe8f4;
  --line: #f0cfe6;
  --chrome: #f3d9ec;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1200px 600px at 10% -10%, #ffe0f0 0%, transparent 55%),
    radial-gradient(1000px 700px at 110% 10%, #e6d6ff 0%, transparent 55%),
    linear-gradient(160deg, #fff2fb 0%, #f6ecff 60%, #fdeee6 100%);
  min-height: 100vh;
}

.shimmer {
  background: linear-gradient(90deg, #b12a86, #7b2ff7, #ff8c42, #b12a86);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 6s linear infinite;
}
@keyframes shimmer { to { background-position: 300% 0; } }

.card-glow {
  box-shadow: 0 20px 60px -20px rgba(123, 47, 247, 0.35), 0 4px 12px rgba(177, 42, 134, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.7);
  overflow: hidden;
}

/* Mascot */
.wiz-face { position: relative; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; }
.wiz-face .hat { position: absolute; top: -14px; left: 50%; transform: translateX(-50%) rotate(-12deg); font-size: 20px; }
.mascot-bob { animation: bob 2.4s ease-in-out infinite; }
.mascot-cheer { animation: cheer 0.8s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-6px) rotate(2deg); } }
@keyframes cheer { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-8px) scale(1.12); } }

.speech {
  background: var(--soft);
  border: 2px solid var(--line);
  border-radius: 16px;
  padding: 12px 14px;
}
.speech::before {
  content: "";
  position: absolute; left: -9px; top: 18px;
  width: 16px; height: 16px;
  background: var(--soft);
  border-left: 2px solid var(--line);
  border-bottom: 2px solid var(--line);
  transform: rotate(45deg);
}

/* Checklist */
.check-row {
  background: var(--soft);
  border: 2px solid var(--line);
  opacity: 0;
  animation: slideIn 0.5s ease forwards;
}
@keyframes slideIn { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: translateX(0); } }
.check-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: #3ddc97; color: #fff; font-weight: 800; font-size: 14px;
  flex-shrink: 0;
}

/* Browser mock */
.pulse-btn { animation: pulseBtn 1.6s ease-in-out infinite; }
@keyframes pulseBtn {
  0%,100% { box-shadow: 0 0 0 0 rgba(177,42,134,0.5); }
  50% { box-shadow: 0 0 0 8px rgba(177,42,134,0); }
}

/* Dropzone */
.dropzone {
  border: 3px dashed var(--line);
  background: rgba(251, 232, 244, 0.5);
}
.dz-active {
  border-color: var(--berry);
  background: #fff4fb;
  transform: scale(1.02);
  box-shadow: 0 0 0 6px rgba(177, 42, 134, 0.12);
}
.dropzone:hover { border-color: #d47fbf; }
.dz-icon { animation: bob 2.6s ease-in-out infinite; }

/* Extract animation */
.zip-icon { animation: shake 0.6s ease-in-out infinite; }
@keyframes shake { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
.pop-file { animation: popUp 0.4s cubic-bezier(0.2,1.4,0.5,1) both; }
@keyframes popUp { from { opacity: 0; transform: translateY(14px) scale(0.5); } to { opacity: 1; transform: translateY(0) scale(1); } }

.done-pop { animation: doneBounce 0.7s cubic-bezier(0.2,1.6,0.4,1) both; display: inline-block; }
@keyframes doneBounce { 0% { transform: scale(0) rotate(-30deg); } 60% { transform: scale(1.25) rotate(10deg); } 100% { transform: scale(1) rotate(0); } }

/* Step transition */
.step-enter { animation: stepIn 0.4s ease both; }
@keyframes stepIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Pills */
.pill {
  font-weight: 700;
  border-radius: 999px;
  padding: 10px 22px;
  font-size: 14px;
  transition: transform 0.12s ease, box-shadow 0.2s ease;
  cursor: pointer;
  border: none;
}
.pill:active { transform: scale(0.94); }
.pill.primary {
  color: #fff;
  background: linear-gradient(90deg, #ff5d8f, #7b2ff7);
  box-shadow: 0 8px 20px -6px rgba(123, 47, 247, 0.6);
}
.pill.primary:hover { box-shadow: 0 12px 26px -6px rgba(123, 47, 247, 0.7); }
.pill.ghost {
  background: #fff;
  color: var(--berry);
  border: 2px solid var(--line);
}

a { transition: opacity 0.2s ease; }
a:hover { opacity: 0.75; }