/* =========================================================
   WOW-Effekte: rotierender Globus, animierte Metric-Counter,
   lebendiger Hero-Dashboard-Mock
   ========================================================= */

/* ---------- Globus: Rotation + Glow + Lat/Long Linien ---------- */
.markets-wrap .globe,
.markets-wrap .globe-orb{
  position: relative;
  perspective: 1200px;
}

.markets-wrap .globe-orb{
  animation: globeFloat 8s ease-in-out infinite;
}
@keyframes globeFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Hauptkugel: rotierende Längen-/Breitenlinien als Pseudo-Element */
.markets-wrap .globe-orb::before,
.markets-wrap .globe-orb::after{
  content: '';
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  pointer-events: none;
  border: 1px solid rgba(0, 229, 255, 0.18);
  box-shadow:
    inset 0 0 60px rgba(0, 184, 255, 0.15),
    0 0 80px rgba(0, 184, 255, 0.25);
}
.markets-wrap .globe-orb::before{
  background:
    repeating-linear-gradient(0deg, transparent 0 14%, rgba(0, 229, 255, 0.08) 14% 14.4%),
    repeating-linear-gradient(90deg, transparent 0 12%, rgba(0, 229, 255, 0.06) 12% 12.4%),
    radial-gradient(circle at 30% 30%, rgba(0, 184, 255, 0.35) 0%, rgba(0, 184, 255, 0.05) 40%, transparent 70%);
  animation: globeSpin 24s linear infinite;
  transform-style: preserve-3d;
}
.markets-wrap .globe-orb::after{
  inset: 16%;
  border-color: rgba(0, 102, 255, 0.25);
  background: radial-gradient(circle at 70% 70%, rgba(0, 102, 255, 0.2), transparent 60%);
  animation: globeSpin 36s linear reverse infinite;
}

@keyframes globeSpin {
  0%   { transform: rotateY(0deg) rotateX(8deg); }
  100% { transform: rotateY(360deg) rotateX(8deg); }
}

/* Orbit-Punkte (kleine Marker auf der Kugel) */
.markets-wrap .globe::after{
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: #00E5FF;
  box-shadow:
    100px -40px 0 #00B8FF, -110px 30px 0 #0066FF, 60px 90px 0 #00E5FF,
    -80px -90px 0 #00B8FF, 130px 80px 0 0 rgba(0,229,255,.8),
    0 0 30px #00E5FF;
  animation: orbitPoints 14s linear infinite;
  pointer-events: none;
}
@keyframes orbitPoints {
  0% { transform: rotate(0deg) translateX(0); }
  100% { transform: rotate(360deg) translateX(0); }
}

/* Reduced motion: kill rotations */
@media (prefers-reduced-motion: reduce) {
  .markets-wrap .globe-orb,
  .markets-wrap .globe-orb::before,
  .markets-wrap .globe-orb::after,
  .markets-wrap .globe::after { animation: none !important; }
}

/* ---------- Hero Dashboard-Mock: Lebendigkeit ---------- */
.dashboard-mock{
  position: relative;
  overflow: hidden;
}
/* Scan-line, die langsam runter wandert */
.dashboard-mock::before{
  content: '';
  position: absolute;
  left: 0; right: 0; top: -20%;
  height: 40%;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(0, 229, 255, 0.08) 40%,
    rgba(0, 229, 255, 0.18) 50%,
    rgba(0, 229, 255, 0.08) 60%,
    transparent 100%);
  animation: scanLine 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
}
@keyframes scanLine {
  0%   { transform: translateY(-40%); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(280%); opacity: 0; }
}

/* Pulsierender Match-Score Ring */
.dashboard-mock .score-ring,
.dashboard-mock [class*="score"]{
  position: relative;
}
.dashboard-mock::after{
  content: '';
  position: absolute;
  top: 18px; right: 18px;
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 2px solid rgba(0, 229, 255, 0.4);
  animation: pulseRing 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes pulseRing {
  0%   { transform: scale(0.7); opacity: 0.9; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Floating Tags im Hero: subtile Schwebung */
.hero-visual .tag,
.hero-visual [class*="chip"],
.hero-visual [class*="badge"]{
  animation: tagFloat 5s ease-in-out infinite;
}
.hero-visual .tag:nth-child(2n) { animation-delay: -1.5s; animation-duration: 6.5s; }
.hero-visual .tag:nth-child(3n) { animation-delay: -3s; animation-duration: 7s; }
@keyframes tagFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@media (max-width: 860px) {
  .dashboard-mock::before,
  .dashboard-mock::after { display: none; }
}

/* ---------- Metric-Counter: smoother Übergang ---------- */
.metric-num.counting {
  display: inline-block;
  background: linear-gradient(135deg, #fff 0%, #00E5FF 60%, #00B8FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 30px rgba(0, 229, 255, 0.35));
  animation: metricGlow 2s ease-out;
}
@keyframes metricGlow {
  0% { filter: drop-shadow(0 0 0 rgba(0, 229, 255, 0)); }
  60% { filter: drop-shadow(0 0 50px rgba(0, 229, 255, 0.6)); }
  100% { filter: drop-shadow(0 0 30px rgba(0, 229, 255, 0.35)); }
}