/* Blooming Buds micro interactions: liquid-fill buttons + floating hero shapes */

/* 1. Liquid-fill hover on the theme's main button. A circle of the hover colour rises from the bottom edge and floods the pill; the label flips to white as it passes. The theme's own offset press layer stays. */
.btn.btn-shadow-custom:after,
.btn.btn-shadow-custom:hover:after {
  background-color: var(--fourth-color);
  background-image: radial-gradient(circle at 50% 100%, var(--secondary-color) 0 70%, transparent 71%);
  background-repeat: no-repeat;
  background-position: 50% 100%;
}
.btn.btn-shadow-custom:after {
  background-size: 0% 0%;
  transition: background-size 0.25s cubic-bezier(0.4, 0, 1, 1), top 0.15s linear, left 0.15s linear;
}
.btn.btn-shadow-custom:hover:after,
.btn.btn-shadow-custom:focus-visible:after {
  background-size: 260% 260%;
  transition: background-size 0.7s cubic-bezier(0.16, 1, 0.3, 1), top 0.15s linear, left 0.15s linear;
}
.btn.btn-shadow-custom {
  transition: color 0.35s ease 0.08s, transform 0.2s ease;
}
.btn.btn-shadow-custom:active {
  transform: scale(0.97);
}
.btn.btn-shadow-custom:focus-visible {
  outline: 3px solid var(--primary-color);
  outline-offset: 4px;
}

/* 2. Floating hero shapes (injected by bb-motion.js) */
.bb-shapes {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: min(calc(100% - 120px), 760px);
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.bb-shape {
  position: absolute;
  display: block;
  line-height: 0;
  opacity: 0;
  animation: bb-pop 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: var(--d, 0s);
}
.bb-shape svg {
  display: block;
  width: 100%;
  height: 100%;
  animation: var(--a, bb-float) var(--t, 7s) ease-in-out var(--d, 0s) infinite;
  animation-play-state: paused;
}
.bb-shapes.is-live .bb-shape svg {
  animation-play-state: running;
}
@keyframes bb-pop {
  from { opacity: 0; transform: scale(0.4); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes bb-float {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-14px) rotate(5deg); }
}
@keyframes bb-sway {
  0%, 100% { transform: rotate(-12deg); }
  50%      { transform: rotate(12deg); }
}
@keyframes bb-twinkle {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50%      { transform: scale(1.25) rotate(18deg); }
}
@media (max-width: 767px) {
  .bb-shape.bb-hide-sm { display: none; }
  .bb-shape { transform-origin: center; scale: 0.7; }
}
@media (prefers-reduced-motion: reduce) {
  .bb-shape { animation: none; opacity: 1; }
  .bb-shape svg { animation: none !important; }
  .btn.btn-shadow-custom:after,
  .btn.btn-shadow-custom:hover:after { transition: none; }
}

/* 3. Nav hover pill: a soft rounded highlight behind the menu label */
.pxl-menu-primary > li > a .pxl-menu-item-text {
  line-height: 1.2;
  padding: 9px 16px;
  margin: 0 -4px;
  border-radius: 999px;
  background-color: transparent;
  transition: background-color 0.3s ease;
}
.pxl-menu-primary > li:hover > a .pxl-menu-item-text,
.pxl-menu-primary > li > a:focus-visible .pxl-menu-item-text {
  background-color: rgba(0, 0, 0, 0.14);
}
.pxl-menu-primary > li.current-menu-item > a .pxl-menu-item-text,
.pxl-menu-primary > li.current-menu-ancestor > a .pxl-menu-item-text {
  background-color: rgba(0, 0, 0, 0.08);
}
.pxl-menu-primary > li:hover.current-menu-item > a .pxl-menu-item-text {
  background-color: rgba(0, 0, 0, 0.14);
}

/* 4. Card lift: cards rise a few pixels with a soft shadow, then settle back */
.pxl-icon-box .pxl-item--inner,
.pxl-post--inner {
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.pxl-icon-box .pxl-item--inner:hover,
.pxl-post--inner:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 28px rgba(35, 60, 30, 0.14);
}

@media (prefers-reduced-motion: reduce) {
  .pxl-icon-box .pxl-item--inner,
  .pxl-post--inner { transition: box-shadow 0.2s ease; }
  .pxl-icon-box .pxl-item--inner:hover,
  .pxl-post--inner:hover { transform: none; }
}