/* =====================================================
   TAKO Plating — Playful Meme‑Coin Energy
   Load AFTER base + theme CSS.
   ===================================================== */

/* 1) Remove white box behind "Join Us" / "Buy Now" footer CTA */
.join,
.join__body,
.join__panel,
.footer-cta,
.footer__cta,
.cta-bar,
.cta__wrap,
.cta__panel,
.footer__body-cta,
.footer__buy,
.buy-now-strip {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* If the text sits in a pill/container, make its background transparent */
.join__title,
.join__text,
.join__button,
.cta,
a.button,
.footer-cta .btn {
  background-color: transparent !important;
}

/* 2) Playful button styling + motion */
.btn,
.join__button,
.header__button,
.cta,
a.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: 1rem 1.35rem;
  border-radius: 1.75rem;
  border: .25rem solid #000;
  font-family: "Beautiful Freak Bold", system-ui, sans-serif;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  background: radial-gradient(120% 120% at 20% 20%, #8b5cf6 0%, #6d28d9 50%, #4c1d95 100%);
  box-shadow: 0 .45rem 0 0 #000, 0 0 35px rgba(168, 85, 247, .45);
  -webkit-text-stroke: .06em #000;
  text-decoration: none;
  transform: translateY(0);
  transition: transform .12s ease, box-shadow .12s ease, letter-spacing .12s ease, filter .12s ease;
  animation: takoGlowPulse 2.6s ease-in-out infinite alternate;
}
.btn:hover,
.join__button:hover,
.header__button:hover,
.cta:hover,
a.button:hover {
  transform: translateY(-3px) rotate(-.5deg);
  letter-spacing: .01em;
  box-shadow: 0 .6rem 0 0 #000, 0 0 55px rgba(139, 92, 246, .7);
  animation: takoWiggle .7s ease-in-out;
}
.btn:active,
.join__button:active,
.header__button:active,
.cta:active,
a.button:active {
  transform: translateY(0) scale(.98);
}

/* Fun icon nudge on hover */
.btn > svg, .cta > svg, .join__button > svg { transform: translateY(0); transition: transform .2s ease; }
.btn:hover > svg, .cta:hover > svg, .join__button:hover > svg { transform: translateY(-2px) rotate(-6deg); }

/* 3) Headings with bounce‑in on scroll (optional utility) */
.tako-bounce-in {
  opacity: 0;
  transform: translateY(10px) scale(.98);
  animation: takoBounceIn .7s cubic-bezier(.2,.9,.2,1) forwards;
}
/* add .is-visible via your watcher script if available */
.is-visible .tako-bounce-in { animation-delay: .1s; }

/* 4) Micro‑twinkle for starry backgrounds (attach to small dots) */
.tako-twinkle { animation: takoTwinkle 1.8s ease-in-out infinite alternate; }

/* Keyframes */
@keyframes takoGlowPulse {
  from { filter: drop-shadow(0 0 10px rgba(168,85,247,.35)); }
  to   { filter: drop-shadow(0 0 22px rgba(139,92,246,.7)); }
}
@keyframes takoWiggle {
  0% { transform: translateY(-3px) rotate(-.5deg); }
  50% { transform: translateY(-1px) rotate(.7deg); }
  100% { transform: translateY(-3px) rotate(-.5deg); }
}
@keyframes takoBounceIn {
  0%   { opacity:0; transform: translateY(10px) scale(.98); }
  70%  { opacity:1; transform: translateY(-3px) scale(1.02); }
  100% { opacity:1; transform: translateY(0) scale(1); }
}
@keyframes takoTwinkle {
  from { opacity:.6; transform: scale(1); }
  to   { opacity:1;  transform: scale(1.15); }
}