/* IDZO Custom Theme Styles, Design Tokens & Animations */

:root {
  --idzo-green: #55B56A;
  --idzo-lime: #9DD06D;
  --idzo-teal: #4CC4C4;
  --idzo-blue: #5293D2;
  --idzo-bg: #F4F7FB;
}

/* Force Plus Jakarta Sans font on all elements */
body, button, input, select, textarea, h1, h2, h3, h4, h5, h6, p, span, a, div {
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

body {
  background-color: var(--idzo-bg);
  color: #111827;
  overflow-x: clip;
}

/* SVG Sizing Safety */
svg {
  max-width: 100%;
  display: inline-block;
  vertical-align: middle;
}

/* ==========================================================================
   Animations matching React Framer Motion
   ========================================================================== */

/* 1. Ambient Background Blobs Float */
@keyframes blobFloat1 {
  0%, 100% { transform: translate(0px, 0px); }
  50% { transform: translate(50px, 50px); }
}
@keyframes blobFloat2 {
  0%, 100% { transform: translate(0px, 0px); }
  50% { transform: translate(-50px, -50px); }
}
@keyframes blobFloat3 {
  0%, 100% { transform: translate(0px, 0px); }
  50% { transform: translate(30px, -30px); }
}

.animate-blob-1 {
  animation: blobFloat1 10s ease-in-out infinite;
}
.animate-blob-2 {
  animation: blobFloat2 12s ease-in-out infinite;
}
.animate-blob-3 {
  animation: blobFloat3 14s ease-in-out infinite;
}

/* 2. Floating Y Animation */
@keyframes floatY {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}
@keyframes floatYReverse {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(10px); }
}

.animate-float-y {
  animation: floatY 5s ease-in-out infinite;
}
.animate-float-y-reverse {
  animation: floatYReverse 6s ease-in-out infinite;
}

/* 3. Hero Phone Progress Bar */
@keyframes heroProgress {
  0% { width: 0%; }
  100% { width: 100%; }
}
.animate-hero-progress {
  animation: heroProgress 3.5s linear infinite;
}

/* 4. How It Works - Step 2 Radar Ripple */
@keyframes radarRipple {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(2.5); opacity: 0; }
}
.animate-radar-ripple {
  animation: radarRipple 2s ease-out infinite;
}

/* 5. How It Works - Step 3 3D Card Float & Shine */
@keyframes card3DFloat {
  0%, 100% { transform: rotateY(-15deg) rotateX(5deg); }
  50% { transform: rotateY(15deg) rotateX(10deg); }
}
@keyframes shineSweep {
  0% { transform: translateX(-100%) translateY(-25%) rotate(-45deg); }
  100% { transform: translateX(200%) translateY(-25%) rotate(-45deg); }
}

.animate-card-3d {
  animation: card3DFloat 5s ease-in-out infinite;
}
.animate-shine-sweep {
  animation: shineSweep 3s ease-in-out infinite;
  animation-delay: 1s;
}

/* 6. How It Works - Step 4 Package Move */
@keyframes packageMove {
  0% { left: 10%; }
  100% { left: 90%; }
}
.animate-package-move {
  animation: packageMove 2s ease-in-out infinite;
}

/* 7. How It Works - Step 5 Coin Drop */
@keyframes coinDrop {
  0% { transform: translate(-50%, 0); opacity: 0; scale: 0.5; }
  50% { opacity: 1; }
  100% { transform: translate(-50%, 45px); opacity: 0; scale: 1; }
}
.animate-coin-drop-1 {
  animation: coinDrop 1.5s infinite 0s;
}
.animate-coin-drop-2 {
  animation: coinDrop 1.5s infinite 0.4s;
}
.animate-coin-drop-3 {
  animation: coinDrop 1.5s infinite 0.8s;
}

/* 8. Live Activity Wall Tickers */
@keyframes tickerScroll {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

@keyframes tickerScrollReverse {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0%); }
}

.animate-ticker {
  animation: tickerScroll 45s linear infinite;
}

.animate-ticker-reverse {
  animation: tickerScrollReverse 50s linear infinite;
}

/* 3D Perspective Utilities */
.perspective-800 {
  perspective: 800px;
}
.transform-style-3d {
  transform-style: preserve-3d;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #F4F7FB;
}
::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}