/* ==================== FLUID ENHANCEMENTS ==================== */
/* Layered on top of existing styles — no overrides, additive only */

/* ==================== CSS CUSTOM PROPERTIES ==================== */
:root {
  --fluid-green: #22C55E;
  --fluid-teal: #14B8A6;
  --fluid-dark: #1F2937;
  --fluid-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --fluid-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ==================== ANIMATED MESH GRADIENT BACKGROUND ==================== */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(ellipse 600px 400px at 20% 10%, rgba(34, 197, 94, 0.04) 0%, transparent 70%),
    radial-gradient(ellipse 500px 500px at 80% 20%, rgba(20, 184, 166, 0.03) 0%, transparent 70%),
    radial-gradient(ellipse 400px 300px at 50% 80%, rgba(34, 197, 94, 0.02) 0%, transparent 70%);
  pointer-events: none;
  z-index: -2;
  animation: meshDrift 20s ease-in-out infinite alternate;
}

@keyframes meshDrift {
  0% {
    background:
      radial-gradient(ellipse 600px 400px at 20% 10%, rgba(34, 197, 94, 0.04) 0%, transparent 70%),
      radial-gradient(ellipse 500px 500px at 80% 20%, rgba(20, 184, 166, 0.03) 0%, transparent 70%),
      radial-gradient(ellipse 400px 300px at 50% 80%, rgba(34, 197, 94, 0.02) 0%, transparent 70%);
  }
  50% {
    background:
      radial-gradient(ellipse 700px 500px at 30% 25%, rgba(20, 184, 166, 0.04) 0%, transparent 70%),
      radial-gradient(ellipse 600px 400px at 70% 40%, rgba(34, 197, 94, 0.03) 0%, transparent 70%),
      radial-gradient(ellipse 500px 350px at 40% 70%, rgba(20, 184, 166, 0.02) 0%, transparent 70%);
  }
  100% {
    background:
      radial-gradient(ellipse 500px 450px at 40% 15%, rgba(34, 197, 94, 0.035) 0%, transparent 70%),
      radial-gradient(ellipse 550px 450px at 60% 30%, rgba(20, 184, 166, 0.035) 0%, transparent 70%),
      radial-gradient(ellipse 450px 400px at 30% 75%, rgba(34, 197, 94, 0.025) 0%, transparent 70%);
  }
}

/* ==================== FLOATING PARTICLE CANVAS ==================== */
#fluid-particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  opacity: 0.5;
}

/* ==================== SCROLL-REVEAL ANIMATIONS ==================== */
.fluid-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--fluid-ease), transform 0.6s var(--fluid-ease);
}

.fluid-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children on reveal */
.fluid-reveal-stagger > .fluid-reveal:nth-child(1) { transition-delay: 0.05s; }
.fluid-reveal-stagger > .fluid-reveal:nth-child(2) { transition-delay: 0.1s; }
.fluid-reveal-stagger > .fluid-reveal:nth-child(3) { transition-delay: 0.15s; }
.fluid-reveal-stagger > .fluid-reveal:nth-child(4) { transition-delay: 0.2s; }
.fluid-reveal-stagger > .fluid-reveal:nth-child(5) { transition-delay: 0.25s; }
.fluid-reveal-stagger > .fluid-reveal:nth-child(6) { transition-delay: 0.3s; }
.fluid-reveal-stagger > .fluid-reveal:nth-child(7) { transition-delay: 0.35s; }
.fluid-reveal-stagger > .fluid-reveal:nth-child(8) { transition-delay: 0.4s; }

/* Scale-up reveal */
.fluid-reveal-scale {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.5s var(--fluid-ease), transform 0.5s var(--fluid-spring);
}

.fluid-reveal-scale.revealed {
  opacity: 1;
  transform: scale(1);
}

/* ==================== SMOOTH HEADER ENTRANCE ==================== */
.header .badge {
  animation: badgeFloat 0.8s var(--fluid-spring) both;
}

.header h1 {
  animation: headingReveal 0.7s var(--fluid-ease) 0.15s both;
}

.header .tagline {
  animation: headingReveal 0.7s var(--fluid-ease) 0.25s both;
}

.header .usp-text {
  animation: headingReveal 0.7s var(--fluid-ease) 0.35s both;
}

@keyframes badgeFloat {
  0% {
    opacity: 0;
    transform: translateY(-16px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes headingReveal {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==================== TAB BAR FLUID ENHANCEMENTS ==================== */
.tabs {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Smooth active indicator with spring animation */
.tab-btn.active {
  transition: all 0.3s var(--fluid-spring);
}

/* Ripple effect on tab click */
.tab-btn {
  position: relative;
  isolation: isolate;
}

.tab-btn .tab-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.15);
  transform: scale(0);
  animation: tabRipple 0.6s ease-out forwards;
  pointer-events: none;
  z-index: -1;
}

@keyframes tabRipple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* ==================== CARD FLUID INTERACTIONS ==================== */
/* Tilt on hover — subtle 3D perspective */
.card {
  perspective: 1000px;
  transform-style: preserve-3d;
}

.card:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(34, 197, 94, 0.08);
}

/* Converter card shimmer border */
.converter-card {
  position: relative;
  overflow: hidden;
}

.converter-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--fluid-green), var(--fluid-teal), transparent);
  animation: cardShimmer 4s ease-in-out infinite;
}

@keyframes cardShimmer {
  0% { left: -100%; }
  50% { left: 100%; }
  100% { left: 100%; }
}

/* ==================== RESULT BOX FLUID GLOW ==================== */
.result-box {
  position: relative;
  overflow: hidden;
}

.result-box::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(34, 197, 94, 0.04) 60deg,
    transparent 120deg,
    rgba(20, 184, 166, 0.03) 180deg,
    transparent 240deg,
    rgba(34, 197, 94, 0.04) 300deg,
    transparent 360deg
  );
  animation: resultGlow 8s linear infinite;
  pointer-events: none;
}

@keyframes resultGlow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Result amount number morphing */
.result-amount {
  transition: transform 0.3s var(--fluid-spring), color 0.3s ease;
}

.result-amount.updating {
  transform: scale(1.02);
}

/* ==================== HEATMAP FLUID EFFECTS ==================== */
.heatmap-cell {
  transition: transform 0.25s var(--fluid-spring), box-shadow 0.25s ease;
}

.heatmap-cell:hover {
  transform: translateY(-4px) scale(1.06);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* ==================== POPULAR BUTTONS FLUID HOVER ==================== */
.popular-btn {
  transition: all 0.25s var(--fluid-spring);
}

.popular-btn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 4px 12px rgba(20, 184, 166, 0.15);
}

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

/* ==================== OUTLET ITEMS — SMOOTH ENTRANCE ==================== */
.outlet-item {
  transition: all 0.3s var(--fluid-ease);
}

.outlet-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.outlet-item.best {
  animation: bestItemGlow 3s ease-in-out infinite alternate;
}

@keyframes bestItemGlow {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.1); }
  100% { box-shadow: 0 0 20px 2px rgba(34, 197, 94, 0.08); }
}

/* ==================== DROPDOWN FLUID ANIMATION ==================== */
.dropdown-menu.open {
  animation: dropdownFluid 0.25s var(--fluid-spring);
}

@keyframes dropdownFluid {
  0% {
    opacity: 0;
    transform: translateY(-8px) scaleY(0.96);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}

.dropdown-item {
  transition: all 0.15s ease;
}

.dropdown-item:hover {
  background: rgba(34, 197, 94, 0.06);
  padding-left: 20px;
}

/* ==================== NEWS ITEMS FLUID ==================== */
.news-item {
  transition: all 0.25s var(--fluid-ease);
}

.news-item:hover {
  transform: translateX(6px);
  border-left-width: 4px;
}

/* ==================== BANK ITEMS FLUID ==================== */
.bank-item {
  transition: all 0.2s var(--fluid-ease);
}

.bank-item:hover {
  transform: translateX(4px);
  background: rgba(34, 197, 94, 0.04);
}

/* ==================== BOND YIELDS ROW HOVER ==================== */
.bond-yields-table tbody tr {
  transition: all 0.2s ease;
}

.bond-yields-table tbody tr:hover td {
  color: var(--fluid-dark);
}

/* ==================== SWAP BUTTON ENHANCED ==================== */
.swap-btn, .exchange-arrow {
  transition: all 0.35s var(--fluid-spring);
}

.swap-btn:hover, .exchange-arrow:hover {
  transform: rotate(180deg) scale(1.08);
}

.swap-btn:active, .exchange-arrow:active {
  transform: rotate(180deg) scale(0.95);
}

/* ==================== INPUT FOCUS FLUID GLOW ==================== */
.amount-input-wrap:focus-within {
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12), 0 4px 12px rgba(34, 197, 94, 0.08);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.dropdown-btn.open {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06), 0 0 0 3px rgba(34, 197, 94, 0.1);
}

/* ==================== COUNTRY BANNER DEPTH EFFECT ==================== */
.country-banner {
  transition: box-shadow 0.3s ease;
}

.country-banner:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
}

.country-map-img {
  transition: transform 0.4s var(--fluid-ease), filter 0.3s ease;
}

.country-banner:hover .from-country .country-map-img {
  transform: scale(1.05) translateX(-4px);
}

.country-banner:hover .to-country .country-map-img {
  transform: scale(1.05) translateX(4px);
}

/* ==================== SCROLL PROGRESS INDICATOR ==================== */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--fluid-green), var(--fluid-teal));
  z-index: 9999;
  transition: width 0.1s linear;
  border-radius: 0 2px 2px 0;
}

/* ==================== CALENDAR TICKER SMOOTH ==================== */
.calendar-ticker-track {
  transition: animation-play-state 0.3s ease;
}

.cal-ticker-item {
  transition: background 0.2s ease;
}

.cal-ticker-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* ==================== TYPE FILTER FLUID ==================== */
.type-filter {
  transition: all 0.25s var(--fluid-spring);
}

.type-filter:hover {
  transform: translateY(-1px);
}

.type-filter:active {
  transform: scale(0.96);
}

.type-filter.active {
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.2);
}

/* ==================== FOOTER LINK HOVER EFFECTS ==================== */
.footer-links a,
.footer-legal a,
.footer-nav-section a {
  position: relative;
}

.footer-links a::after,
.footer-legal a::after,
.footer-nav-section a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 1px;
  background: var(--fluid-green);
  transition: width 0.3s ease, left 0.3s ease;
}

.footer-links a:hover::after,
.footer-legal a:hover::after,
.footer-nav-section a:hover::after {
  width: 100%;
  left: 0;
}

/* ==================== SMOOTH SCROLL TO TOP BUTTON ==================== */
#scroll-to-top {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--fluid-green), var(--fluid-teal));
  color: white;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(34, 197, 94, 0.3);
  opacity: 0;
  transform: translateY(16px) scale(0.9);
  transition: all 0.3s var(--fluid-spring);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

#scroll-to-top.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

#scroll-to-top:hover {
  transform: translateY(-2px) scale(1.08);
  box-shadow: 0 6px 24px rgba(34, 197, 94, 0.4);
}

#scroll-to-top:active {
  transform: scale(0.95);
}

/* ==================== GUIDE PROMO CARDS FLUID ==================== */
.guide-promo-card {
  transition: all 0.25s var(--fluid-spring);
}

.guide-promo-card:hover {
  transform: translateY(-3px) scale(1.02);
}

/* ==================== BADGE BREATHING ANIMATION ==================== */
.badge {
  animation: badgeBreathe 4s ease-in-out infinite;
}

@keyframes badgeBreathe {
  0%, 100% { box-shadow: 0 2px 8px rgba(34, 197, 94, 0.2); }
  50% { box-shadow: 0 4px 16px rgba(34, 197, 94, 0.3); }
}

/* ==================== SMOOTH PAGE TRANSITIONS ==================== */
.tab-content.active {
  animation: tabContentReveal 0.35s var(--fluid-ease);
}

@keyframes tabContentReveal {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==================== REDUCED MOTION RESPECT ==================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  body::before {
    animation: none;
  }

  #fluid-particles {
    display: none;
  }

  .fluid-reveal {
    opacity: 1;
    transform: none;
  }

  .fluid-reveal-scale {
    opacity: 1;
    transform: none;
  }
}

/* ==================== MOBILE ADJUSTMENTS ==================== */
@media (max-width: 640px) {
  body::before {
    opacity: 0.5;
  }

  #fluid-particles {
    opacity: 0.3;
  }

  .heatmap-cell:hover {
    transform: translateY(-2px) scale(1.03);
  }

  .country-banner:hover .from-country .country-map-img,
  .country-banner:hover .to-country .country-map-img {
    transform: scale(1.03);
  }
}