/* Kratom Kenya — Tailwind + Alpine custom micro-styles only */

:root {
  color-scheme: dark;
}

[x-cloak] { display: none !important; }

/* Smooth scrolling */
html { scroll-behavior: smooth; }

/* Reveal animation (IntersectionObserver toggles .is-visible) */
.js-reveal {
  opacity: 0;
  transform: translateY(14px) scale(0.99);
  transition: opacity 700ms ease, transform 700ms ease;
  will-change: opacity, transform;
}
.js-reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Social buttons */
.social-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.75);
  transition: 200ms ease;
}
.social-btn:hover{
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.95);
  transform: translateY(-1px);
}

/* Hero blobs */
.blob{
  position:absolute;
  border-radius:9999px;
  filter: blur(60px);
  opacity: 0.35;
  mix-blend-mode: screen;
  animation: floaty 10s ease-in-out infinite;
}
.blob-1{
  width: 420px;
  height: 420px;
  left: -120px;
  top: 120px;
  background: rgba(34, 211, 238, 0.35); /* brand */
  animation-duration: 12s;
}
.blob-2{
  width: 480px;
  height: 480px;
  right: -160px;
  top: 60px;
  background: rgba(163, 159, 121, 0.35); /* sand */
  animation-duration: 14s;
}
.blob-3{
  width: 360px;
  height: 360px;
  left: 35%;
  bottom: -180px;
  background: rgba(255,255,255,0.12);
  animation-duration: 16s;
}

@keyframes floaty {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(0,-18px,0) scale(1.03); }
}

/* Shimmer bar */
@keyframes shimmer {
  0% { transform: translateX(-60%); opacity: 0.35; }
  50% { opacity: 0.8; }
  100% { transform: translateX(60%); opacity: 0.35; }
}
.animate-shimmer {
  animation: shimmer 3.5s ease-in-out infinite;
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-reveal { transition: none; transform: none; opacity: 1; }
  .blob, .animate-shimmer { animation: none !important; }
}