@import "tailwindcss";

/* ─── Class-based dark mode (Tailwind v4) ────────────────── */
@variant dark (&:where(.dark, .dark *));

/* ─── Custom Keyframe Animations ─────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-10px); }
}
@keyframes pulse-ring {
  0%   { transform: scale(0.85); opacity: 0.7; }
  100% { transform: scale(1.4);  opacity: 0; }
}
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
@keyframes spin-slow {
  to { transform: rotate(360deg); }
}
@keyframes bounce-soft {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes popIn {
  0%   { opacity: 0; transform: scale(0.5); }
  80%  { transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

/* ─── Animation Utility Classes ─────────────────────────── */
.animate-fade-in       { animation: fadeIn 0.4s ease-out both; }
.animate-fade-up       { animation: fadeUp 0.5s ease-out both; }
.animate-fade-down     { animation: fadeDown 0.4s ease-out both; }
.animate-scale-in      { animation: scaleIn 0.4s cubic-bezier(.175,.885,.32,1.275) both; }
.animate-slide-left    { animation: slideInLeft 0.45s ease-out both; }
.animate-slide-right   { animation: slideInRight 0.45s ease-out both; }
.animate-float         { animation: float 3s ease-in-out infinite; }
.animate-bounce-soft   { animation: bounce-soft 2s ease-in-out infinite; }
.animate-slide-up      { animation: slideUp 0.5s ease-out both; }
.animate-pop-in        { animation: popIn 0.45s cubic-bezier(.175,.885,.32,1.275) both; }
.animate-spin-slow     { animation: spin-slow 8s linear infinite; }

/* ─── Stagger delays ─────────────────────────────────────── */
.delay-75  { animation-delay: 75ms; }
.delay-100 { animation-delay: 100ms; }
.delay-150 { animation-delay: 150ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }
.delay-600 { animation-delay: 600ms; }
.delay-700 { animation-delay: 700ms; }
.delay-800 { animation-delay: 800ms; }

/* ─── Glassmorphism ──────────────────────────────────────── */
.glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.glass-dark {
  background: rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* ─── Shimmer / skeleton loader ──────────────────────────── */
.shimmer {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 37%, #f0f0f0 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
}
.dark .shimmer {
  background: linear-gradient(90deg, #1f2937 25%, #374151 37%, #1f2937 63%);
  background-size: 400% 100%;
}

/* ─── Pulse ring (notification / badge) ─────────────────── */
.pulse-ring::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid currentColor;
  animation: pulse-ring 1.4s ease-out infinite;
}

/* ─── Card hover lift ────────────────────────────────────── */
.card-hover {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -4px rgba(0,0,0,0.12);
}
.dark .card-hover:hover {
  box-shadow: 0 8px 24px -4px rgba(0,0,0,0.4);
}

/* ─── Button press effect ────────────────────────────────── */
.btn-press {
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.btn-press:active {
  transform: scale(0.97);
}

/* ─── Safe area for mobile bottom nav ───────────────────── */
.pb-safe {
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
}
.mb-safe {
  margin-bottom: max(0.5rem, env(safe-area-inset-bottom));
}

/* ─── Gradient text ──────────────────────────────────────── */
.gradient-text {
  background: linear-gradient(135deg, #059669, #0284c7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── Scrollbar hide on mobile ───────────────────────────── */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* ─── Tap highlight removal on mobile ───────────────────── */
* {
  -webkit-tap-highlight-color: transparent;
}

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

/* ─── Landing page extra keyframes ──────────────────────── */
@keyframes gradientX {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}
@keyframes piggyBounce {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%       { transform: translateY(-12px) rotate(3deg); }
}
@keyframes float-delayed {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-20px); }
}
@keyframes coinFloat {
  0%   { bottom: -40px; opacity: 0; }
  10%  { opacity: 0.8; }
  90%  { opacity: 0.6; }
  100% { bottom: 110vh; opacity: 0; }
}
.animate-float-delayed { animation: float-delayed 6s ease-in-out 2s infinite; }
.animate-gradient-x {
  background-size: 200% auto;
  animation: gradientX 4s ease infinite;
}

/* ─── Focus visible only ─────────────────────────────────── */
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 2px solid #059669; outline-offset: 2px; }

/* ─── Tap responsiveness ─────────────────────────────────── */
/* Remove 300ms tap delay on mobile */
a, button, [role="button"], input[type="submit"], input[type="button"], label {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
/* Instant visual feedback on press */
a:active, button:active, [role="button"]:active {
  opacity: 0.75;
  transform: scale(0.97);
  transition: opacity 60ms ease, transform 60ms ease;
}
/* Smooth release */
a, button, [role="button"] {
  transition: opacity 150ms ease, transform 150ms ease;
}

/* ─── Dark mode base ─────────────────────────────────────── */
.dark {
  color-scheme: dark;
}