/* ================================================
   LEVERAGE TRADING PLATFORM - GLOBAL STYLES
   ================================================ */

/* ================================================
   GAMIFICATION ANIMATIONS (Delight & Dopamine)
   ================================================ */

/* Hero Banner - Animated Gradient Background */
@keyframes gradient-shift {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* Wiggle - attention grabbing */
@keyframes wiggle {

  0%,
  100% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(-3deg);
  }

  75% {
    transform: rotate(3deg);
  }
}

.animate-wiggle {
  animation: wiggle 0.5s ease-in-out;
}

/* Pop - satisfying scale effect */
@keyframes pop {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.15);
  }

  100% {
    transform: scale(1);
  }
}

.animate-pop {
  animation: pop 0.3s ease-out;
}

/* Bounce once - single bounce */
@keyframes bounce-once {

  0%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-10px);
  }

  60% {
    transform: translateY(-5px);
  }
}

.animate-bounce-once {
  animation: bounce-once 0.5s ease-out;
}

/* Pulse once - single pulse */
@keyframes pulse-once {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
}

.animate-pulse-once {
  animation: pulse-once 0.4s ease-out;
}

/* Shake - error/attention */
@keyframes shake {

  0%,
  100% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(-4px);
  }

  40% {
    transform: translateX(4px);
  }

  60% {
    transform: translateX(-4px);
  }

  80% {
    transform: translateX(4px);
  }
}

.animate-shake {
  animation: shake 0.4s ease-out;
}

/* Glow pulse - premium highlight */
@keyframes glow {

  0%,
  100% {
    box-shadow: 0 0 5px rgba(59, 130, 246, 0.3);
  }

  50% {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.6);
  }
}

.animate-glow {
  animation: glow 1.5s ease-in-out infinite;
}

/* Float - gentle floating */
@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

/* Shimmer - premium shine effect */
@keyframes shimmer-sweep {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

.animate-shimmer {
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.4) 50%,
      transparent 100%);
  background-size: 200% 100%;
  animation: shimmer-sweep 2s infinite;
}

.animate-shimmer-sweep {
  animation: shimmer-sweep 1.5s ease-in-out;
}

/* ================================================
   PREMIUM CELEBRATION ANIMATIONS
   ================================================ */

/* Particle fall - elegant floating particles */
@keyframes particle-fall {
  0% {
    opacity: 1;
    transform: translateY(0) rotate(0deg) scale(1);
  }

  25% {
    opacity: 1;
    transform: translateY(100px) rotate(90deg) translateX(20px) scale(0.9);
  }

  50% {
    opacity: 0.8;
    transform: translateY(200px) rotate(180deg) translateX(-10px) scale(0.8);
  }

  75% {
    opacity: 0.5;
    transform: translateY(300px) rotate(270deg) translateX(15px) scale(0.6);
  }

  100% {
    opacity: 0;
    transform: translateY(400px) rotate(360deg) translateX(0) scale(0.4);
  }
}

.animate-particle-fall {
  animation: particle-fall 2s ease-out forwards;
}

/* Toast entrance - elegant slide and fade */
@keyframes toast-enter {
  0% {
    opacity: 0;
    transform: translateY(-30px) scale(0.95);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.animate-toast-enter {
  animation: toast-enter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Emoji pop - satisfying emoji bounce */
@keyframes emoji-pop {
  0% {
    transform: scale(0.5) rotate(-10deg);
    opacity: 0;
  }

  50% {
    transform: scale(1.2) rotate(5deg);
  }

  100% {
    transform: scale(1) rotate(0);
    opacity: 1;
  }
}

.animate-emoji-pop {
  animation: emoji-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Fade pulse - subtle background glow */
@keyframes fade-pulse {

  0%,
  100% {
    opacity: 0.3;
  }

  50% {
    opacity: 0.6;
  }
}

.animate-fade-pulse {
  animation: fade-pulse 1.5s ease-in-out;
}

/* Sparkle fly - heart button micro sparkles */
@keyframes sparkle-fly {
  0% {
    opacity: 1;
    transform: rotate(var(--angle, 0deg)) translateY(-8px) scale(1);
  }

  100% {
    opacity: 0;
    transform: rotate(var(--angle, 0deg)) translateY(-24px) scale(0);
  }
}

/* Success glow ring */
@keyframes glow-ring {
  0% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
  }

  100% {
    box-shadow: 0 0 0 20px rgba(16, 185, 129, 0);
  }
}

.animate-glow-ring {
  animation: glow-ring 0.6s ease-out;
}

/* Heart burst - wishlist add */
@keyframes heart-burst {
  0% {
    transform: scale(1);
  }

  25% {
    transform: scale(0.8);
  }

  50% {
    transform: scale(1.3);
  }

  100% {
    transform: scale(1);
  }
}

.animate-heart-burst {
  animation: heart-burst 0.4s ease-out;
}

/* Coin drop - money/value related */
@keyframes coin-drop {
  0% {
    transform: translateY(-20px) rotate(0deg);
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    transform: translateY(0) rotate(360deg);
    opacity: 1;
  }
}

.animate-coin-drop {
  animation: coin-drop 0.6s ease-out;
}

/* Slide variations */
@keyframes slide-down {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.animate-slide-down {
  animation: slide-down 0.3s ease-out;
}

@keyframes slide-left {
  from {
    transform: translateX(20px);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.animate-slide-left {
  animation: slide-left 0.3s ease-out;
}

@keyframes slide-right {
  from {
    transform: translateX(-20px);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.animate-slide-right {
  animation: slide-right 0.3s ease-out;
}

/* Success checkmark draw */
@keyframes checkmark-draw {
  0% {
    stroke-dashoffset: 100;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

.animate-checkmark {
  stroke-dasharray: 100;
  animation: checkmark-draw 0.5s ease-out forwards;
}

/* Achievement reveal */
@keyframes achievement-reveal {
  0% {
    transform: scale(0) rotate(-180deg);
    opacity: 0;
  }

  60% {
    transform: scale(1.2) rotate(10deg);
    opacity: 1;
  }

  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

.animate-achievement {
  animation: achievement-reveal 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ================================================
   ORIGINAL PAGE TRANSITIONS
   ================================================ */

/* Smooth page transitions */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pulse-glow {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
  }

  50% {
    box-shadow: 0 0 0 8px rgba(59, 130, 246, 0);
  }
}

/* Animation classes */
.animate-fade-in {
  animation: fadeIn 0.3s ease-out forwards;
}

.animate-slide-up {
  animation: slideUp 0.4s ease-out forwards;
}

.animate-slide-in {
  animation: slideIn 0.3s ease-out forwards;
}

.animate-scale-in {
  animation: scaleIn 0.2s ease-out forwards;
}

.animate-pulse-glow {
  animation: pulse-glow 2s infinite;
}

/* Subtle bounce for NEW badge */
@keyframes bounce-subtle {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-3px);
  }
}

.animate-bounce-subtle {
  animation: bounce-subtle 1.5s ease-in-out infinite;
}

/* Card hover effects */
.card-hover {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 12px -6px rgba(0, 0, 0, 0.1);
}

.dark .card-hover:hover {
  box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.4), 0 4px 12px -6px rgba(0, 0, 0, 0.3);
}

/* Button press effect */
.btn-press {
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.btn-press:active {
  transform: scale(0.97);
}

/* Gradient text utility */
.gradient-text {
  background: linear-gradient(135deg, #3B82F6, #8B5CF6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Gradient backgrounds */
.gradient-primary {
  background: linear-gradient(135deg, #3B82F6, #1D4ED8);
}

.gradient-secondary {
  background: linear-gradient(135deg, #8B5CF6, #6D28D9);
}

.gradient-success {
  background: linear-gradient(135deg, #10B981, #059669);
}

/* Glass effect */
.glass {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.dark .glass {
  background: rgba(31, 41, 55, 0.8);
}

/* Toast animations */
@keyframes toastSlideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes toastSlideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }

  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

.toast-enter {
  animation: toastSlideIn 0.3s ease-out forwards;
}

.toast-exit {
  animation: toastSlideOut 0.2s ease-in forwards;
}

/* Modal backdrop blur */
.modal-backdrop {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Input focus glow */
.input-glow:focus {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
  border-color: #3B82F6;
}

/* Hide number input spinners/arrows */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}

.dark ::-webkit-scrollbar-thumb {
  background: #4B5563;
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: #6B7280;
}

/* Selection color */
::selection {
  background: #3B82F6;
  color: white;
}

/* Smooth focus transitions for all interactive elements */
button,
a,
input,
select,
textarea {
  transition: all 0.15s ease;
}

/* Skeleton shimmer effect */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

.skeleton-shimmer {
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.3) 50%,
      rgba(255, 255, 255, 0) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* Staggered animation delays */
.stagger-1 {
  animation-delay: 0.05s;
}

.stagger-2 {
  animation-delay: 0.1s;
}

.stagger-3 {
  animation-delay: 0.15s;
}

.stagger-4 {
  animation-delay: 0.2s;
}

.stagger-5 {
  animation-delay: 0.25s;
}

/* ================================================
   MOBILE RESPONSIVENESS UTILITIES
   ================================================ */

/* Safe area padding for iOS notch/home indicator */
.pb-safe {
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.pt-safe {
  padding-top: env(safe-area-inset-top, 0);
}

/* Touch-friendly minimum sizes */
.touch-target {
  min-height: 44px;
  min-width: 44px;
}

/* Hide scrollbar on mobile while maintaining scroll functionality */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Prevent text selection on interactive elements (mobile-friendly) */
.no-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Prevent pull-to-refresh on mobile for embedded content */
.overscroll-none {
  overscroll-behavior: none;
}

/* Full-width container that ignores parent padding on mobile */
@media (max-width: 640px) {
  .mobile-full-bleed {
    margin-left: -1rem;
    margin-right: -1rem;
    width: calc(100% + 2rem);
  }
}

/* Responsive text truncation */
.truncate-2-lines {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.truncate-3-lines {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ================================================
   ONBOARDING WALKTHROUGH STYLES
   ================================================ */

/* Highlight effect for walkthrough targets */
.walkthrough-highlight {
  position: relative;
  z-index: 9997 !important;
  outline: 4px solid rgba(99, 102, 241, 0.8) !important;
  outline-offset: 4px;
  border-radius: 12px;
  animation: walkthrough-pulse 2s ease-in-out infinite;
}

/* Special handling for sticky header */
header.walkthrough-highlight {
  z-index: 9997 !important;
}

@keyframes walkthrough-pulse {

  0%,
  100% {
    outline-color: rgba(99, 102, 241, 0.8);
    outline-offset: 4px;
  }

  50% {
    outline-color: rgba(139, 92, 246, 0.9);
    outline-offset: 8px;
  }
}

/* ================================================
   DISCOVERY PAGE RESPONSIVE STYLES
   ================================================ */

/* Desktop: align search/filter with item grid */
@media (min-width: 768px) {
  .discovery-search-container {
    padding-left: calc(10% + 70px) !important;
  }
}

/* Onboarding tooltip entrance */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}