/* ============================================================================
   RemoveVocals — enhance.css
   ADDITIVE, design-only animation layer for the LIVE site.
   • Pure CSS, no JS  → no CSP impact, cannot break the audio tools.
   • Targets only existing selectors (.logo svg rect, .hero …, .dragover).
   • Reduced-motion safe; every animated element ends in its natural state.
   Load AFTER style.css. Remove this file / its <link> to fully revert.
   ============================================================================ */

/* ── 1. Live Equalizer logo mark ─────────────────────────────────────────
   The header logo SVG already has 4 <rect> bars. Animate their height like an
   audio meter. transform-box:fill-box anchors the origin to each bar's own box. */
@media (prefers-reduced-motion: no-preference) {
  .logo svg rect {
    transform-box: fill-box;
    transform-origin: bottom;
    animation: rv-eqbar 1.15s ease-in-out infinite alternate;
    will-change: transform;
  }
  .logo svg rect:nth-of-type(1) { animation-delay: 0s;    }
  .logo svg rect:nth-of-type(2) { animation-delay: .12s;  }
  .logo svg rect:nth-of-type(3) { animation-delay: .24s;  }
  .logo svg rect:nth-of-type(4) { animation-delay: .36s;  }
}
@keyframes rv-eqbar {
  from { transform: scaleY(.45); }
  to   { transform: scaleY(1);   }
}

/* ── 2. Hero entrance (load reveal) ──────────────────────────────────────
   Only matches pages that actually have a .hero (the homepage); tool pages
   without .hero are untouched. fill-mode:both keeps elements visible after. */
@media (prefers-reduced-motion: no-preference) {
  .hero .hero-badge        { animation: rv-rise .60s cubic-bezier(.2,.7,.2,1) both;        }
  .hero h1                 { animation: rv-rise .70s cubic-bezier(.2,.7,.2,1) both .08s;    }
  .hero > p,
  .hero .hero-sub,
  .hero .hero-subtitle     { animation: rv-rise .60s cubic-bezier(.2,.7,.2,1) both .14s;    }
  .hero .tool-tabs         { animation: rv-rise .60s cubic-bezier(.2,.7,.2,1) both .20s;    }
  .hero .hero-cta,
  .hero .upload-card,
  .hero .hero-actions      { animation: rv-rise .70s cubic-bezier(.2,.7,.2,1) both .28s;    }
}
@keyframes rv-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* ── 3. Drop-to-process bay — drag-over polish ───────────────────────────
   The tool's own JS toggles .dragover (vr_app.js). We only RESTYLE that class;
   no listeners are added, so file handling/processing is untouched. */
#dropZone,
.upload-zone {
  transition: background-color .2s ease, border-color .2s ease,
              box-shadow .2s ease, transform .2s ease;
}
#dropZone.dragover,
.upload-zone.dragover {
  background-color: rgba(108, 59, 245, 0.06);
  border-color: var(--purple, #6c3bf5) !important;
  border-style: dashed !important;
  box-shadow: 0 12px 32px rgba(108, 59, 245, 0.18);
  transform: scale(1.01);
}