/*
Theme Name: BeatBox Video
Theme URI: https://beatboxvideo.com
Author: JJ
Description: Block theme for BeatBox Video - cut-to-the-beat video creation with a loops and beats marketplace. Dark studio look, neon accents, animated waveform.
Version: 0.1.2
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: beatboxvideo
*/

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }
a { text-underline-offset: 0.2em; }
::selection { background: var(--wp--preset--color--magenta); color: #fff; }

/* ---------- Header ---------- */
.bbv-header { border-bottom: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 50; background: rgba(11,11,18,.78); }
.bbv-logo { letter-spacing: -0.02em; }
.bbv-logo .bbv-dot { color: var(--wp--preset--color--magenta); }

/* ---------- Hero ---------- */
.bbv-hero { position: relative; overflow: hidden; isolation: isolate; }
.bbv-hero::before {
  content: ""; position: absolute; inset: -20% -10% auto -10%; height: 90%; z-index: -1;
  background:
    radial-gradient(60% 60% at 20% 30%, rgba(255,45,149,.35), transparent 70%),
    radial-gradient(50% 50% at 80% 20%, rgba(25,227,255,.28), transparent 70%);
  filter: blur(20px);
}
.bbv-eyebrow { letter-spacing: .28em; text-transform: uppercase; font-weight: 700; }
.bbv-hero h1 { text-wrap: balance; letter-spacing: -0.035em; line-height: .95; }
.bbv-hero h1 em { font-style: normal; background: linear-gradient(90deg, var(--wp--preset--color--magenta), var(--wp--preset--color--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Waveform ---------- */
.bbv-wave { display: flex; align-items: center; justify-content: center; gap: 5px; height: 120px; margin-top: 3rem; }
.bbv-wave span {
  display: block; width: 6px; height: 100%; border-radius: 999px;
  background: linear-gradient(180deg, var(--wp--preset--color--cyan), var(--wp--preset--color--magenta));
  transform-origin: center; transform: scaleY(.15);
  animation: bbv-beat 1.2s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.083s);
}
.bbv-wave span:nth-child(3n)   { animation-duration: 0.9s; }
.bbv-wave span:nth-child(4n+1) { animation-duration: 1.5s; }
@keyframes bbv-beat {
  0%, 100% { transform: scaleY(.12); opacity: .55; }
  18%      { transform: scaleY(1);   opacity: 1; }
  40%      { transform: scaleY(.35); opacity: .8; }
  62%      { transform: scaleY(.7);  opacity: .95; }
}
@media (prefers-reduced-motion: reduce) {
  .bbv-wave span { animation: none; transform: scaleY(.5); }
  html { scroll-behavior: auto; }
}

/* ---------- Cards ---------- */
.bbv-card { background: var(--wp--preset--color--panel); border: 1px solid rgba(255,255,255,.09); border-radius: 18px; transition: transform .2s ease, border-color .2s ease; height: 100%; }
.bbv-card:hover { transform: translateY(-4px); border-color: var(--wp--preset--color--cyan); }
.bbv-step-num { font-size: 3.5rem; font-weight: 800; line-height: 1; background: linear-gradient(135deg, var(--wp--preset--color--magenta), var(--wp--preset--color--lime)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Buttons ---------- */
.wp-block-button__link { transition: transform .15s ease, box-shadow .15s ease; }
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(255,45,149,.45); }

/* ---------- Footer ---------- */
.bbv-footer { border-top: 1px solid rgba(255,255,255,.08); }