/* ============================================
   TAKO PLATING & GARNISH CSS
   Adds neon, parallax, twinkle, ripple, reveal, and general polish
   ============================================ */

/* --- 1. Glass effect --- */
.glass {
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
  border: 3px solid #000;
  border-radius: 999px;
  box-shadow: 0 12px 0 #000, 0 0 40px rgba(168,85,247,.35);
}

/* --- 2. Parallax --- */
.parallax { transform: translate3d(0,0,0); transition: transform .08s linear; }

/* --- 3. Button Ripple --- */
.button-ripple { position: relative; overflow: hidden; }
.button-ripple::after{
  content:""; position:absolute; inset:auto auto 50% 50%;
  width:0; height:0; border-radius:50%;
  background: rgba(255,255,255,.35); transform: translate(-50%,-50%);
  pointer-events:none; opacity:0;
}
.button-ripple:active::after{
  animation: takoRipple .5s ease-out forwards;
}
@keyframes takoRipple{
  0%{width:0;height:0;opacity:.8}
  100%{width:500px;height:500px;opacity:0}
}

/* --- 4. Twinkle --- */
.twinkle { animation: twk 1.8s ease-in-out infinite alternate; }
@keyframes twk { from{opacity:.55; transform:scale(1)} to{opacity:1; transform:scale(1.15)} }

/* --- 5. Reveal on Scroll --- */
.reveal { opacity:0; transform:translateY(12px) scale(.98); transition:.6s cubic-bezier(.2,.9,.2,1) }
.reveal.is-in { opacity:1; transform:translateY(0) scale(1) }

/* --- 6. Social Icon Hover --- */
.social a{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px;height:44px;border-radius:12px;border:3px solid #000;
  background:#111; color:#fff; box-shadow:0 8px 0 #000;
  transition:transform .12s, box-shadow .12s, filter .12s;
}
.social a:hover{
  transform:translateY(-3px) rotate(-2deg);
  filter:drop-shadow(0 0 16px rgba(139,92,246,.8));
  box-shadow:0 12px 0 #000;
}

/* --- 7. Remove white box from join sections --- */
.join, .join__body, .footer-cta, .cta__panel {
  background: transparent !important; box-shadow: none !important; border: none !important;
}

/* --- 8. Token supply fix for overflow --- */
.token-supply { display: flex; flex-wrap: wrap; justify-content: center; text-align: center; }
.token-supply h3 { font-size: clamp(1rem, 2.5vw, 2.5rem); }