/* JellyPlan shared design system */

@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap");

body {
  font-family: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- brand gradient ---------- */

.gradient-text {
  background: linear-gradient(135deg, #f43f5e 0%, #a855f7 50%, #3b82f6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-bg {
  background: linear-gradient(135deg, #f43f5e 0%, #a855f7 50%, #3b82f6 100%);
}

/* ---------- aquatic background blobs ---------- */

.jelly-blobs {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}

.jelly-blob {
  position: absolute;
  border-radius: 9999px;
  filter: blur(90px);
  opacity: 0.3;
  animation: jelly-float 22s ease-in-out infinite;
}

.jelly-blob-1 {
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, #fb7185, transparent 70%);
  top: -140px;
  left: -140px;
}

.jelly-blob-2 {
  width: 540px;
  height: 540px;
  background: radial-gradient(circle, #c084fc, transparent 70%);
  top: 30%;
  right: -200px;
  animation-duration: 28s;
  animation-delay: -8s;
}

.jelly-blob-3 {
  width: 460px;
  height: 460px;
  background: radial-gradient(circle, #60a5fa, transparent 70%);
  bottom: -160px;
  left: 20%;
  animation-duration: 25s;
  animation-delay: -15s;
}

@keyframes jelly-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(50px, -40px) scale(1.08); }
  66% { transform: translate(-40px, 30px) scale(0.94); }
}

/* ---------- mascot ---------- */

.jelly-bob {
  display: inline-block;
  animation: jelly-bob 2.8s ease-in-out infinite;
}

@keyframes jelly-bob {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-10px) rotate(4deg); }
}

/* ---------- micro-interactions ---------- */

.btn-jelly {
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.btn-jelly:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -8px rgba(168, 85, 247, 0.55);
}

.btn-jelly:active {
  transform: translateY(0) scale(0.96);
  box-shadow: none;
}

.card-lift {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.card-lift:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px -14px rgba(100, 116, 139, 0.4);
}

.chip-pop {
  animation: chip-pop 0.25s ease;
}

@keyframes chip-pop {
  0% { transform: scale(0.85); }
  60% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* ---------- entrances ---------- */

.fade-in {
  animation: fadeIn 0.3s ease-out backwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.slide-up {
  animation: slide-up 0.25s ease-out;
}

@keyframes slide-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}

/* ---------- loading ---------- */

.shimmer-bar {
  height: 6px;
  width: 220px;
  border-radius: 9999px;
  background: linear-gradient(90deg, #f43f5e, #a855f7, #3b82f6, #f43f5e);
  background-size: 300% 100%;
  animation: shimmer 1.6s linear infinite;
}

@keyframes shimmer {
  to { background-position: -300% 0; }
}

/* ---------- budget slider ---------- */

.jelly-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 9999px;
  background:
    linear-gradient(90deg, #f43f5e, #a855f7, #3b82f6) 0 / var(--fill, 50%) 100% no-repeat,
    #e2e8f0;
  outline: none;
  cursor: pointer;
}

.jelly-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #a855f7;
  box-shadow: 0 2px 8px rgba(168, 85, 247, 0.4);
  transition: transform 0.15s ease;
}

.jelly-range::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

.jelly-range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #a855f7;
  box-shadow: 0 2px 8px rgba(168, 85, 247, 0.4);
}

/* ---------- confetti ---------- */

.confetti-piece {
  position: fixed;
  top: -16px;
  width: 10px;
  height: 14px;
  border-radius: 2px;
  z-index: 100;
  pointer-events: none;
  animation: confetti-fall linear forwards;
}

@keyframes confetti-fall {
  to {
    transform: translateY(105vh) rotate(720deg);
    opacity: 0.9;
  }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .jelly-blob,
  .jelly-bob,
  .chip-pop,
  .shimmer-bar,
  .fade-in,
  .slide-up,
  .confetti-piece {
    animation: none !important;
  }
  .btn-jelly,
  .card-lift,
  .jelly-range::-webkit-slider-thumb {
    transition: none;
  }
}