@import "tailwindcss";

@layer base {
  body {
    background-color: #ebedf2;
    color: #1e293b;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
  }
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeIn 0.2s ease-out forwards;
}

/* Pulse badge animation */
@keyframes pulseGlow {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.03); }
}

.pulse-glow {
  animation: pulseGlow 2s infinite ease-in-out;
}

/* ============ Landing page (lp-) ============ */

.lp-root { color-scheme: dark; }

.lp-grid {
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 55%, transparent 100%);
}

@keyframes lpBlob {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(50px, -40px) scale(1.12); }
  66% { transform: translate(-35px, 30px) scale(0.94); }
}
.lp-blob { animation: lpBlob 18s ease-in-out infinite; }

@keyframes lpHeroIn {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}
.lp-hero-in { opacity: 0; animation: lpHeroIn 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }

@keyframes lpGradientMove {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.lp-gradient-text {
  background: linear-gradient(90deg, #22d3ee, #a78bfa, #fbbf24, #22d3ee);
  background-size: 280% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: lpGradientMove 7s ease-in-out infinite;
}

.lp-underline {
  position: relative;
  white-space: nowrap;
}
.lp-underline::after {
  content: '';
  position: absolute;
  left: -2px; right: -2px; bottom: 4px;
  height: 10px;
  background: linear-gradient(90deg, rgba(34, 211, 238, 0.45), rgba(251, 191, 36, 0.45));
  border-radius: 4px;
  z-index: -1;
  transform: skewX(-8deg);
}

@keyframes lpFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
.lp-float { animation: lpFloat 7s ease-in-out infinite; }

@keyframes lpCardIn {
  from { opacity: 0; transform: translateX(26px); }
  to { opacity: 1; transform: translateX(0); }
}
.lp-card-in { opacity: 0; animation: lpCardIn 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }

@keyframes lpBar {
  from { height: 0; }
  to { height: var(--h); }
}
.lp-bar { height: 0; animation: lpBar 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }

@keyframes lpSticker {
  from { opacity: 0; transform: scale(0.5) rotate(14deg); }
  60% { transform: scale(1.08) rotate(5deg); }
  to { opacity: 1; transform: scale(1) rotate(6deg); }
}
.lp-sticker { opacity: 0; animation: lpSticker 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 1.1s forwards; }

@keyframes lpBlink {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55); }
  50% { opacity: 0.6; box-shadow: 0 0 0 5px rgba(52, 211, 153, 0); }
}
.lp-blink { animation: lpBlink 1.6s ease-in-out infinite; }

@keyframes lpMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.lp-marquee { animation: lpMarquee 42s linear infinite; }
.lp-marquee-rev { animation: lpMarquee 48s linear infinite reverse; }
.lp-marquee:hover, .lp-marquee-rev:hover { animation-play-state: paused; }

.lp-ticker-mask {
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.lp-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.lp-reveal.lp-in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .lp-blob, .lp-float, .lp-marquee, .lp-marquee-rev, .lp-gradient-text, .lp-blink { animation: none; }
  .lp-hero-in, .lp-card-in, .lp-sticker { animation: none; opacity: 1; }
  .lp-bar { animation: none; height: var(--h); }
  .lp-reveal { opacity: 1; transform: none; transition: none; }
}