/* ===========================
   TACTILE MAXIMALISM — "Squishy" UI
   Jelly, clay, chrome deformation effects
   =========================== */

/* ===========================
   Squish on click/press
   =========================== */
@keyframes squishClick {
  0%   { transform: scale(1); }
  20%  { transform: scale(0.91, 1.08); }
  50%  { transform: scale(1.06, 0.94); }
  75%  { transform: scale(0.98, 1.02); }
  100% { transform: scale(1); }
}

.squishy:active {
  animation: squishClick 0.42s var(--spring) forwards;
}

/* ===========================
   Jelly morph on hover
   =========================== */
@keyframes jellyMorph {
  0%   { border-radius: var(--radius); }
  20%  { border-radius: 28% 72% 68% 32% / 26% 36% 64% 74%; }
  40%  { border-radius: 60% 40% 30% 70% / 55% 65% 35% 45%; }
  60%  { border-radius: 42% 58% 72% 28% / 48% 32% 68% 52%; }
  80%  { border-radius: 20% 80% 40% 60% / 70% 30% 70% 30%; }
  100% { border-radius: var(--radius); }
}

.jelly:hover {
  animation: jellyMorph 0.65s var(--spring) forwards;
}

/* ===========================
   Bounce rise on hover
   =========================== */
@keyframes bouncePop {
  0%   { transform: translateY(0) scale(1); }
  35%  { transform: translateY(-10px) scale(1.04, 0.97); }
  60%  { transform: translateY(-4px) scale(0.98, 1.02); }
  80%  { transform: translateY(-7px) scale(1.02, 0.99); }
  100% { transform: translateY(-6px) scale(1); }
}

.bounce-hover:hover {
  animation: bouncePop 0.55s var(--spring) forwards;
}

/* ===========================
   Chrome / liquid shine buttons
   =========================== */
.btn-primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  position: relative;
  overflow: hidden;
}
.btn-primary::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 60%;
  height: 200%;
  background: rgba(255,255,255,0.2);
  transform: skewX(-20deg);
  transition: left 0.5s ease;
  pointer-events: none;
}
.btn-primary:hover::before { left: 130%; }

/* ===========================
   Clay card depth border
   =========================== */
.clay-card {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 -1px 0 rgba(0,0,0,0.06) inset,
    var(--glass-shadow);
  transition:
    transform 0.35s var(--spring),
    box-shadow 0.35s ease;
}
.clay-card:hover {
  box-shadow:
    0 2px 0 rgba(255,255,255,0.8) inset,
    0 -2px 0 rgba(0,0,0,0.08) inset,
    var(--shadow-xl);
  transform: translateY(-4px) scale(1.01);
}

/* ===========================
   Ripple effect
   =========================== */
.ripple-container {
  position: relative;
  overflow: hidden;
}

.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  transform: scale(0);
  animation: rippleExpand 0.55s linear;
  pointer-events: none;
}

@keyframes rippleExpand {
  to { transform: scale(4); opacity: 0; }
}

/* ===========================
   Squishy scroll-in entrance
   =========================== */
@keyframes squishIn {
  0%   { opacity: 0; transform: scale(0.85) translateY(20px); }
  60%  { opacity: 1; transform: scale(1.04) translateY(-4px); }
  80%  { transform: scale(0.98) translateY(2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.fade-up.squish-in {
  animation: none;
}
.fade-up.squish-in.visible {
  animation: squishIn 0.6s var(--spring) forwards;
  opacity: 1;
  transform: none;
}

/* ===========================
   Hero tags — pop on hover
   =========================== */
.hero-tags span {
  transition: all 0.3s var(--spring);
}
.hero-tags span:active {
  animation: squishClick 0.38s var(--spring) forwards;
}

/* ===========================
   Decision chip — spring toggle
   =========================== */
.decision-chip {
  transition: all 0.3s var(--spring);
}
.decision-chip:active {
  animation: squishClick 0.35s var(--spring) forwards;
}

/* ===========================
   Floating elements
   =========================== */
@keyframes floatUp {
  0%, 100% { transform: translateY(0px) rotate(-1deg); }
  50%       { transform: translateY(-12px) rotate(1deg); }
}

.floating {
  animation: floatUp 5s ease-in-out infinite;
}