/* ==========================================================================
   Taraah — Luxury Custom Magnetic Cursor & Waveform Visualizer
   ========================================================================== */

/* 1. Custom Minimalist Cursor */
.custom-cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  background-color: var(--primary-blue, #1b3fe8);
  border-radius: 50%;
  pointer-events: none;
  z-index: 10000;
  transform: translate(-50%, -50%);
  transition: opacity 0.2s ease, transform 0.1s ease;
  will-change: transform, left, top;
}

.custom-cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 34px;
  height: 34px;
  border: 1.5px solid rgba(27, 63, 232, 0.45);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              height 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s ease,
              background-color 0.3s ease,
              transform 0.15s ease;
  will-change: transform, left, top, width, height;
}

/* Cursor Hover States */
body.cursor-hover .custom-cursor-ring {
  width: 52px;
  height: 52px;
  border-color: rgba(27, 63, 232, 0.85);
  background-color: rgba(27, 63, 232, 0.08);
}

body.cursor-hover .custom-cursor-dot {
  transform: translate(-50%, -50%) scale(1.5);
  background-color: #0026ae;
}

/* Cursor on Dark Sections */
body.cursor-dark .custom-cursor-ring {
  border-color: rgba(255, 255, 255, 0.65);
  background-color: rgba(255, 255, 255, 0.06);
}

body.cursor-dark .custom-cursor-dot {
  background-color: #ffffff;
}

/* Hide default cursor on desktop when active */
@media (hover: hover) and (pointer: fine) {
  body {
    cursor: default;
  }
}

/* 2. Live Audio Equalizer Waveform */
.hero-audio-badge {
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.hero-audio-badge:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
}

.audio-equalizer-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 24px;
  padding: 0 4px;
}

.eq-bar {
  width: 3.5px;
  background-color: #1b3fe8;
  border-radius: 2px;
  height: 6px;
  transition: height 0.15s ease;
}

.hero-audio-badge.is-playing .eq-bar:nth-child(1) { animation: eqBounce 0.65s ease-in-out infinite alternate; }
.hero-audio-badge.is-playing .eq-bar:nth-child(2) { animation: eqBounce 0.45s ease-in-out infinite alternate 0.1s; }
.hero-audio-badge.is-playing .eq-bar:nth-child(3) { animation: eqBounce 0.85s ease-in-out infinite alternate 0.2s; }
.hero-audio-badge.is-playing .eq-bar:nth-child(4) { animation: eqBounce 0.55s ease-in-out infinite alternate 0.15s; }
.hero-audio-badge.is-playing .eq-bar:nth-child(5) { animation: eqBounce 0.75s ease-in-out infinite alternate 0.3s; }
.hero-audio-badge.is-playing .eq-bar:nth-child(6) { animation: eqBounce 0.50s ease-in-out infinite alternate 0.05s; }
.hero-audio-badge.is-playing .eq-bar:nth-child(7) { animation: eqBounce 0.90s ease-in-out infinite alternate 0.25s; }

@keyframes eqBounce {
  0% { height: 4px; }
  50% { height: 22px; }
  100% { height: 8px; }
}

/* 3. Magnetic Element Base Class */
.magnetic-wrap {
  display: inline-block;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* 4. Counting Number Highlight Glow */
.counter-animate {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  transition: color 0.4s ease;
}

.counter-animate.has-counted {
  color: inherit;
}