/**
 * PathFinder UI Design System
 * 
 * Custom tactile components, elevation cards, 
 * badges, and light/dark theme utilities.
 */

:root {
  /* --- Pastel Gradient Tokens --- */
  --pastel-peach-start: #FFF1EB;
  --pastel-peach-end: #FED7AA;
  --pastel-peach-bold: #FB923C;
  --pastel-peach-shadow: rgba(249, 115, 22, 0.22);
  --pastel-peach-lip: #EA580C;

  --pastel-lavender-start: #ECFDF5;
  --pastel-lavender-end: #D1FAE5;
  --pastel-lavender-bold: #059669;
  --pastel-lavender-shadow: rgba(5, 150, 105, 0.25);
  --pastel-lavender-lip: #047857;

  --pastel-mint-start: #E6FFFA;
  --pastel-mint-end: #DCFCE7;
  --pastel-mint-bold: #10B981;
  --pastel-mint-shadow: rgba(16, 185, 129, 0.22);
  --pastel-mint-lip: #047857;

  --pastel-blush-start: #FDF2F8;
  --pastel-blush-end: #FCE7F3;
  --pastel-blush-bold: #EC4899;
  --pastel-blush-shadow: rgba(236, 72, 153, 0.22);
  --pastel-blush-lip: #BE185D;

  --pastel-sky-start: #F0F9FF;
  --pastel-sky-end: #E0F2FE;
  --pastel-sky-bold: #0284C7;
  --pastel-sky-shadow: rgba(14, 165, 233, 0.22);
  --pastel-sky-lip: #0369A1;

  --pastel-butter-start: #FEFCE8;
  --pastel-butter-end: #FEF08A;
  --pastel-butter-bold: #EAB308;
  --pastel-butter-shadow: rgba(234, 179, 8, 0.22);
  --pastel-butter-lip: #CA8A04;

  /* --- Soft 3D Neutral Tokens --- */
  --soft3d-bg-body: #F8FAFD;
  --soft3d-card-bg: #FFFFFF;
  --soft3d-card-border: rgba(255, 255, 255, 0.95);
  --soft3d-card-border-subtle: rgba(226, 232, 240, 0.75);
  --soft3d-shadow-ambient: 0 16px 36px -6px rgba(100, 116, 139, 0.08), 0 6px 16px -2px rgba(100, 116, 139, 0.04);
  --soft3d-shadow-pillowy: 0 12px 28px -4px rgba(148, 163, 184, 0.12), inset 0 2px 2px rgba(255, 255, 255, 0.95), inset 0 -2px 4px rgba(148, 163, 184, 0.06);
  --soft3d-input-inset: inset 0 2px 4px rgba(148, 163, 184, 0.12), inset 0 -1px 1px rgba(255, 255, 255, 0.8), 0 1px 2px rgba(255, 255, 255, 0.9);

  /* Font Families */
  --font-display: 'Outfit', 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Plus Jakarta Sans', 'Inter', sans-serif;
}

/* Dark Mode Tokens */
.dark {
  --soft3d-bg-body: #0B0F19;
  --soft3d-card-bg: #111827;
  --soft3d-card-border: rgba(255, 255, 255, 0.08);
  --soft3d-card-border-subtle: rgba(255, 255, 255, 0.06);
  --soft3d-shadow-ambient: 0 18px 40px -8px rgba(0, 0, 0, 0.55), 0 4px 14px -2px rgba(0, 0, 0, 0.35);
  --soft3d-shadow-pillowy: 0 14px 30px -4px rgba(0, 0, 0, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.12), inset 0 -2px 4px rgba(0, 0, 0, 0.4);
  --soft3d-input-inset: inset 0 2px 4px rgba(0, 0, 0, 0.5), inset 0 -1px 1px rgba(255, 255, 255, 0.04);
}

/* ==========================================================================
   1. Typography & Global Body Setup
   ========================================================================== */
body {
  font-family: var(--font-body);
  background-color: var(--soft3d-bg-body);
  color: #0F172A;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.dark body {
  color: #F8FAFC;
}

h1, h2, h3, h4, h5, h6, .font-display {
  font-family: var(--font-display) !important;
  letter-spacing: -0.02em;
}

/* Soft 3D Minimalist Aurora Mesh Background */
.soft3d-aurora-bg {
  background-color: #F8FAFC;
  background-image: 
    radial-gradient(at 15% 10%, rgba(209, 250, 229, 0.45) 0px, transparent 55%),
    radial-gradient(at 85% 15%, rgba(226, 232, 240, 0.5) 0px, transparent 55%),
    radial-gradient(at 50% 85%, rgba(204, 251, 241, 0.35) 0px, transparent 60%),
    radial-gradient(at 90% 85%, rgba(241, 245, 249, 0.4) 0px, transparent 55%),
    radial-gradient(at 10% 80%, rgba(209, 250, 229, 0.35) 0px, transparent 55%);
  background-attachment: fixed;
}

.dark .soft3d-aurora-bg {
  background-color: #080D14;
  background-image: 
    radial-gradient(at 15% 10%, rgba(5, 150, 105, 0.12) 0px, transparent 55%),
    radial-gradient(at 85% 15%, rgba(13, 148, 136, 0.12) 0px, transparent 55%),
    radial-gradient(at 50% 85%, rgba(16, 185, 129, 0.08) 0px, transparent 60%),
    radial-gradient(at 90% 85%, rgba(15, 23, 42, 0.5) 0px, transparent 55%);
  background-attachment: fixed;
}

/* ==========================================================================
   2. Tactile 3D Buttons (Pushable, Physical, Spring Feedback)
   ========================================================================== */
.tactile-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  border-radius: 9999px;
  padding: 0.75rem 1.6rem;
  cursor: pointer;
  user-select: none;
  transition: transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.12s cubic-bezier(0.34, 1.56, 0.64, 1),
              filter 0.2s ease;
  position: relative;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.25);
  line-height: 1.25;
}

.tactile-btn:hover {
  transform: translateY(-2.5px);
  filter: brightness(1.03);
}

.tactile-btn:active {
  transform: translateY(3px) !important;
}

/* Primary Forest / Emerald Tactile Button */
.tactile-btn-primary {
  background: linear-gradient(180deg, #10B981 0%, #059669 100%);
  color: #FFFFFF !important;
  box-shadow: 0 4px 0 #047857, 
              0 10px 22px -3px rgba(16, 185, 129, 0.28),
              inset 0 1px 1px rgba(255, 255, 255, 0.5);
}
.tactile-btn-primary:hover {
  box-shadow: 0 6.5px 0 #047857, 
              0 16px 28px -3px rgba(16, 185, 129, 0.35);
}
.tactile-btn-primary:active {
  box-shadow: 0 1px 0 #047857, 
              0 4px 8px -1px rgba(16, 185, 129, 0.2) !important;
}

/* Warm Peach Tactile Button */
.tactile-btn-peach {
  background: linear-gradient(180deg, #FB923C 0%, #F97316 100%);
  color: #FFFFFF !important;
  box-shadow: 0 4px 0 var(--pastel-peach-lip), 
              0 10px 22px -3px var(--pastel-peach-shadow),
              inset 0 1px 1px rgba(255, 255, 255, 0.55);
}
.tactile-btn-peach:hover {
  box-shadow: 0 6.5px 0 var(--pastel-peach-lip), 
              0 16px 28px -3px var(--pastel-peach-shadow),
              inset 0 1px 1px rgba(255, 255, 255, 0.65);
}
.tactile-btn-peach:active {
  box-shadow: 0 1px 0 var(--pastel-peach-lip), 
              0 4px 8px -1px var(--pastel-peach-shadow),
              inset 0 1px 1px rgba(0, 0, 0, 0.15) !important;
}

/* Mint Fresh Tactile Button */
.tactile-btn-mint {
  background: linear-gradient(180deg, #10B981 0%, #059669 100%);
  color: #FFFFFF !important;
  box-shadow: 0 4px 0 var(--pastel-mint-lip), 
              0 10px 22px -3px var(--pastel-mint-shadow),
              inset 0 1px 1px rgba(255, 255, 255, 0.5);
}
.tactile-btn-mint:hover {
  box-shadow: 0 6.5px 0 var(--pastel-mint-lip), 
              0 16px 28px -3px var(--pastel-mint-shadow),
              inset 0 1px 1px rgba(255, 255, 255, 0.6);
}
.tactile-btn-mint:active {
  box-shadow: 0 1px 0 var(--pastel-mint-lip), 
              0 4px 8px -1px var(--pastel-mint-shadow),
              inset 0 1px 1px rgba(0, 0, 0, 0.15) !important;
}

/* Blush / Pink Tactile Button */
.tactile-btn-blush {
  background: linear-gradient(180deg, #F472B6 0%, #EC4899 100%);
  color: #FFFFFF !important;
  box-shadow: 0 4px 0 var(--pastel-blush-lip), 
              0 10px 22px -3px var(--pastel-blush-shadow),
              inset 0 1px 1px rgba(255, 255, 255, 0.5);
}
.tactile-btn-blush:hover {
  box-shadow: 0 6.5px 0 var(--pastel-blush-lip), 
              0 16px 28px -3px var(--pastel-blush-shadow);
}
.tactile-btn-blush:active {
  box-shadow: 0 1px 0 var(--pastel-blush-lip), 
              0 4px 8px -1px var(--pastel-blush-shadow) !important;
}

/* Sky Blue Tactile Button */
.tactile-btn-sky {
  background: linear-gradient(180deg, #38BDF8 0%, #0284C7 100%);
  color: #FFFFFF !important;
  box-shadow: 0 4px 0 var(--pastel-sky-lip), 
              0 10px 22px -3px var(--pastel-sky-shadow),
              inset 0 1px 1px rgba(255, 255, 255, 0.5);
}
.tactile-btn-sky:hover {
  box-shadow: 0 6.5px 0 var(--pastel-sky-lip), 
              0 16px 28px -3px var(--pastel-sky-shadow);
}
.tactile-btn-sky:active {
  box-shadow: 0 1px 0 var(--pastel-sky-lip), 
              0 4px 8px -1px var(--pastel-sky-shadow) !important;
}

/* Electric Cyan Dribbble Travel Tactile Button */
.tactile-btn-cyan {
  background: linear-gradient(135deg, #06B6D4 0%, #0284C7 100%);
  color: #FFFFFF !important;
  box-shadow: 0 4px 0 #0369A1, 
              0 12px 24px -4px rgba(2, 132, 199, 0.38),
              inset 0 1px 1px rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.tactile-btn-cyan:hover {
  box-shadow: 0 6.5px 0 #0369A1, 
              0 18px 30px -4px rgba(6, 182, 212, 0.48);
  filter: brightness(1.04);
}
.tactile-btn-cyan:active {
  box-shadow: 0 1px 0 #0369A1, 
              0 4px 8px -1px rgba(2, 132, 199, 0.25) !important;
}

/* Pristine Cloud Tactile Button with Cyan Border */
.tactile-btn-cyan-cloud {
  background: linear-gradient(180deg, #FFFFFF 0%, #F0F9FF 100%);
  color: #0369A1 !important;
  box-shadow: 0 4px 0 #BAE6FD, 
              0 10px 20px -3px rgba(186, 230, 253, 0.45),
              inset 0 1px 1px #FFFFFF;
  border: 1.5px solid #BAE6FD;
}
.tactile-btn-cyan-cloud:hover {
  box-shadow: 0 6.5px 0 #7DD3FC, 
              0 16px 26px -4px rgba(14, 165, 233, 0.22);
  border-color: #38BDF8;
  color: #0284C7 !important;
}
.tactile-btn-cyan-cloud:active {
  box-shadow: 0 1px 0 #BAE6FD, 
              0 4px 8px -1px rgba(14, 165, 233, 0.15) !important;
}

/* Frosted Glass Tactile Button for Dark Glass Overlays */
.tactile-btn-glass {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 4px 0 rgba(15, 23, 42, 0.7), 
              0 10px 20px -3px rgba(0, 0, 0, 0.4),
              inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
.tactile-btn-glass:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(56, 189, 248, 0.6);
  color: #38BDF8 !important;
  box-shadow: 0 6.5px 0 rgba(15, 23, 42, 0.7), 
              0 16px 26px -4px rgba(14, 165, 233, 0.35);
}
.tactile-btn-glass:active {
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.7), 
              0 4px 8px -1px rgba(0, 0, 0, 0.3) !important;
}

/* Cloud White / Secondary Pillowy Button */
.tactile-btn-cloud {
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
  color: #1E293B !important;
  box-shadow: 0 4px 0 #CBD5E1, 
              0 10px 20px -3px rgba(100, 116, 139, 0.12),
              inset 0 1px 1px #FFFFFF;
  border: 1px solid rgba(226, 232, 240, 0.9);
}
.tactile-btn-cloud:hover {
  box-shadow: 0 6.5px 0 #CBD5E1, 
              0 16px 26px -4px rgba(100, 116, 139, 0.16);
}
.tactile-btn-cloud:active {
  box-shadow: 0 1px 0 #CBD5E1, 
              0 4px 8px -1px rgba(100, 116, 139, 0.1) !important;
}

.dark .tactile-btn-cloud {
  background: linear-gradient(180deg, #1E293B 0%, #0F172A 100%);
  color: #F8FAFC !important;
  box-shadow: 0 4px 0 #020617, 
              0 10px 20px -3px rgba(0, 0, 0, 0.5),
              inset 0 1px 1px rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.dark .tactile-btn-cloud:hover {
  box-shadow: 0 6.5px 0 #020617, 
              0 16px 26px -4px rgba(0, 0, 0, 0.65);
}
.dark .tactile-btn-cloud:active {
  box-shadow: 0 1px 0 #020617, 
              0 4px 8px -1px rgba(0, 0, 0, 0.4) !important;
}

/* Compact Tactile Button Size */
.tactile-btn-sm {
  padding: 0.45rem 1.1rem !important;
  font-size: 0.8125rem !important;
  box-shadow: 0 3px 0 var(--pastel-lavender-lip), 0 6px 14px -2px var(--pastel-lavender-shadow);
}
.tactile-btn-sm:hover {
  box-shadow: 0 4.5px 0 var(--pastel-lavender-lip), 0 10px 18px -2px var(--pastel-lavender-shadow);
}
.tactile-btn-sm:active {
  box-shadow: 0 1px 0 var(--pastel-lavender-lip), 0 2px 5px -1px var(--pastel-lavender-shadow) !important;
}

.tactile-btn-sm.tactile-btn-cloud {
  box-shadow: 0 3px 0 #CBD5E1, 0 6px 14px -2px rgba(100, 116, 139, 0.1);
}
.tactile-btn-sm.tactile-btn-cloud:hover {
  box-shadow: 0 4.5px 0 #CBD5E1, 0 10px 18px -2px rgba(100, 116, 139, 0.14);
}
.tactile-btn-sm.tactile-btn-cloud:active {
  box-shadow: 0 1px 0 #CBD5E1, 0 2px 5px -1px rgba(100, 116, 139, 0.08) !important;
}

/* ==========================================================================
   3. Soft 3D Pillowy Cards & Claymorphism
   ========================================================================== */
.soft3d-card {
  background: var(--soft3d-card-bg);
  border-radius: 1.75rem;
  border: 1.5px solid var(--soft3d-card-border);
  box-shadow: var(--soft3d-shadow-pillowy);
  position: relative;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.soft3d-card-hover:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 44px -8px rgba(5, 150, 105, 0.16), 
              0 10px 20px -4px rgba(100, 116, 139, 0.08),
              inset 0 2px 2px rgba(255, 255, 255, 0.95);
  border-color: rgba(16, 185, 129, 0.35);
}

.dark .soft3d-card-hover:hover {
  box-shadow: 0 26px 48px -8px rgba(0, 0, 0, 0.7), 
              0 0 24px -2px rgba(16, 185, 129, 0.25),
              inset 0 1px 1px rgba(255, 255, 255, 0.15);
  border-color: rgba(52, 211, 153, 0.35);
}

/* Soft 3D Pastel Accent Headers */
.soft3d-banner-peach {
  background: linear-gradient(135deg, var(--pastel-peach-start) 0%, var(--pastel-peach-end) 100%);
  border: 1px solid rgba(251, 146, 60, 0.2);
}
.soft3d-banner-lavender {
  background: linear-gradient(135deg, var(--pastel-lavender-start) 0%, var(--pastel-lavender-end) 100%);
  border: 1px solid rgba(99, 102, 241, 0.2);
}
.soft3d-banner-mint {
  background: linear-gradient(135deg, var(--pastel-mint-start) 0%, var(--pastel-mint-end) 100%);
  border: 1px solid rgba(16, 185, 129, 0.2);
}
.soft3d-banner-blush {
  background: linear-gradient(135deg, var(--pastel-blush-start) 0%, var(--pastel-blush-end) 100%);
  border: 1px solid rgba(236, 72, 153, 0.2);
}
.soft3d-banner-sky {
  background: linear-gradient(135deg, var(--pastel-sky-start) 0%, var(--pastel-sky-end) 100%);
  border: 1px solid rgba(14, 165, 233, 0.2);
}

/* ==========================================================================
   4. Squircle Icon Domes (Soft 3D Domes)
   ========================================================================== */
.soft3d-icon-dome {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 1.25rem;
  position: relative;
  box-shadow: 0 8px 18px -2px rgba(100, 116, 139, 0.15),
              inset 0 2px 3px rgba(255, 255, 255, 0.8),
              inset 0 -2px 3px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.6);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  flex-shrink: 0;
}

.soft3d-icon-dome:hover {
  transform: scale(1.1) rotate(4deg);
}

.soft3d-dome-indigo {
  background: linear-gradient(135deg, #818CF8 0%, #4F46E5 100%);
  color: #FFFFFF;
}
.soft3d-dome-emerald {
  background: linear-gradient(135deg, #34D399 0%, #059669 50%, #047857 100%);
  color: #FFFFFF;
}
.soft3d-dome-peach {
  background: linear-gradient(135deg, #FDBA74 0%, #EA580C 100%);
  color: #FFFFFF;
}
.soft3d-dome-mint {
  background: linear-gradient(135deg, #6EE7B7 0%, #059669 100%);
  color: #FFFFFF;
}
.soft3d-dome-blush {
  background: linear-gradient(135deg, #F472B6 0%, #DB2777 100%);
  color: #FFFFFF;
}
.soft3d-dome-sky {
  background: linear-gradient(135deg, #7DD3FC 0%, #0284C7 100%);
  color: #FFFFFF;
}
.soft3d-dome-amber {
  background: linear-gradient(135deg, #FCD34D 0%, #D97706 100%);
  color: #FFFFFF;
}

/* ==========================================================================
   5. Tactile 3D Badges, Chips & Pills
   ========================================================================== */
.soft3d-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.9rem;
  border-radius: 9999px;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 3px 6px -1px rgba(100, 116, 139, 0.08), 
              inset 0 1px 1px rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.8);
  white-space: nowrap;
}

.badge-pastel-peach {
  background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%);
  color: #C2410C;
  border-color: #FDBA74;
}
.badge-pastel-lavender {
  background: linear-gradient(135deg, #FAF5FF 0%, #EDE9FE 100%);
  color: #6D28D9;
  border-color: #DDD6FE;
}
.badge-pastel-mint {
  background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%);
  color: #15803D;
  border-color: #BBF7D0;
}
.badge-pastel-blush {
  background: linear-gradient(135deg, #FDF2F8 0%, #FCE7F3 100%);
  color: #BE185D;
  border-color: #FBCFE8;
}
.badge-pastel-sky {
  background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);
  color: #0369A1;
  border-color: #BAE6FD;
}
.badge-pastel-butter {
  background: linear-gradient(135deg, #FEFCE8 0%, #FEF08A 100%);
  color: #A16207;
  border-color: #FDE047;
}

.dark .badge-pastel-peach {
  background: rgba(249, 115, 22, 0.18);
  color: #FB923C;
  border-color: rgba(249, 115, 22, 0.3);
}
.dark .badge-pastel-lavender {
  background: rgba(99, 102, 241, 0.18);
  color: #A5B4FC;
  border-color: rgba(99, 102, 241, 0.3);
}
.dark .badge-pastel-mint {
  background: rgba(16, 185, 129, 0.18);
  color: #6EE7B7;
  border-color: rgba(16, 185, 129, 0.3);
}
.dark .badge-pastel-blush {
  background: rgba(236, 72, 153, 0.18);
  color: #F472B6;
  border-color: rgba(236, 72, 153, 0.3);
}
.dark .badge-pastel-sky {
  background: rgba(14, 165, 233, 0.18);
  color: #7DD3FC;
  border-color: rgba(14, 165, 233, 0.3);
}

/* ==========================================================================
   6. Soft 3D Recessed Inputs & Selects
   ========================================================================== */
.soft3d-input {
  width: 100%;
  border-radius: 1rem;
  padding: 0.75rem 1.15rem;
  font-size: 0.875rem;
  background-color: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  box-shadow: var(--soft3d-input-inset);
  color: #0F172A;
  transition: all 0.2s ease;
  outline: none;
}

.soft3d-input:focus {
  border-color: #818CF8;
  box-shadow: 0 0 0 4px rgba(129, 140, 248, 0.25),
              inset 0 2px 4px rgba(148, 163, 184, 0.08);
}

.dark .soft3d-input {
  background-color: #0F172A;
  border-color: rgba(255, 255, 255, 0.1);
  color: #F8FAFC;
}

.dark .soft3d-input:focus {
  border-color: #6366F1;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.3),
              inset 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* ==========================================================================
   7. Soft 3D Navigation Bar Styling
   ========================================================================== */
.soft3d-navbar {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 8px 30px -4px rgba(100, 116, 139, 0.06);
}

.dark .soft3d-navbar {
  background: rgba(15, 23, 42, 0.85);
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 30px -4px rgba(0, 0, 0, 0.4);
}

/* ==========================================================================
   8. Joyful Micro-Animations & Emotional Delight
   ========================================================================== */
@keyframes softFloat {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-8px) rotate(0.5deg);
  }
}

.animate-soft-float {
  animation: softFloat 4.5s ease-in-out infinite;
}

@keyframes springPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.04);
  }
}

.animate-spring-pulse {
  animation: springPulse 3s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}

/* Joyful Jelly Hover */
.jelly-hover {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.jelly-hover:hover {
  transform: scale(1.035);
}