/**
 * Free Beat Library — landing page (/free-beat-library/)
 *
 * Ported from Jay's bundled prototype ("The Free Beat Library.html",
 * 2026-07-14). The section markup keeps the prototype's inline styles;
 * this file carries what inline styles can't: the scoped design tokens,
 * hover states (the prototype used a custom style-hover attribute),
 * keyframes, the grain overlay, and the responsive type scale (the
 * prototype's headings were fixed desktop sizes).
 *
 * Scoped under .fbl-page. The page renders inside the normal site shell
 * (site-nav + site-footer), so the prototype's own nav/footer were dropped.
 *
 * @package flavor-starter
 */

.fbl-page {
    /* Prototype tokens — intentionally shadow the theme's globals inside
       this page so it matches the mockup exactly. */
    --bg: #000000;
    --card: #161618;
    --panel: #0d0d0f;
    --inset: #202022;
    --fbl-ink: #f5f5f7;
    --fbl-ink2: #a1a1a8;
    --fbl-ink3: #6c6c74;
    --fbl-line: rgba(255, 255, 255, 0.12);
    --fbl-line2: rgba(255, 255, 255, 0.07);
    --accent: #0a84ff;
    --good: #30d158;
    --fbl-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 14px 40px rgba(0, 0, 0, 0.5);
    --fbl-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 14px rgba(0, 0, 0, 0.4);
    --fbl-mono: "SF Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    position: relative;
    overflow-x: hidden;
    width: 100%;
    background: var(--bg);
    color: var(--fbl-ink);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
.fbl-page *,
.fbl-page *::before,
.fbl-page *::after { box-sizing: border-box; }

.fbl-page ::selection { background: rgba(10, 132, 255, 0.3); }
.fbl-page a { color: var(--accent); text-decoration: none; }
.fbl-page a:hover { color: #37a0ff; }

@keyframes fblFloatA {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-5px) rotate(-2deg); }
}

/* Film-grain overlay (prototype showGrain=true) */
.fbl-grain {
    position: absolute;
    inset: 0;
    z-index: 60;
    pointer-events: none;
    opacity: 0.05;
    mix-blend-mode: screen;
    background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='140'%20height='140'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.9'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 140px;
}

/* ── Standalone funnel chrome ──
   The landing page wears the mockup's own minimal nav instead of the site
   header (one message: Browse the Library). Hidden via the body template
   class — NOT removed in header.php — because .site-nav sits outside the
   router's #flavorMain swap region; body classes are swapped on soft-nav,
   so this stays correct in both directions. */
body.page-template-page-free-beat-library .site-nav { display: none; }

.fbl-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    background: rgba(10, 10, 12, 0.7);
    border-bottom: 1px solid var(--fbl-line2);
}
.fbl-nav-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 32px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.fbl-page a.fbl-nav-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    color: var(--fbl-ink);
    text-decoration: none;
}
.fbl-page a.fbl-nav-brand:hover { color: var(--fbl-ink); }

/* ── Hover states (prototype used style-hover attrs) ── */
.fbl-page .fbl-btn { transition: filter 0.15s ease, transform 0.15s ease; }
.fbl-page .fbl-btn:hover { filter: brightness(1.07); transform: translateY(-2px); color: #fff; }
.fbl-page .fbl-btn-white:hover { color: #0a3d80; filter: none; }
.fbl-page .fbl-lift { transition: transform 0.18s ease; }
.fbl-page .fbl-lift:hover { transform: translateY(-4px); }
.fbl-page .fbl-row { transition: background 0.15s ease; }
.fbl-page .fbl-row:hover { background: #2a2a2c; }

/* ── Responsive type scale (prototype was fixed desktop sizes) ── */
.fbl-page .fbl-h1 { font-size: clamp(46px, 7.5vw, 82px); }
.fbl-page .fbl-h2-xl { font-size: clamp(34px, 5.5vw, 56px); }
.fbl-page .fbl-h2-lg { font-size: clamp(32px, 5vw, 52px); }
.fbl-page .fbl-h2-md { font-size: clamp(30px, 5vw, 48px); }
.fbl-page .fbl-h2 { font-size: clamp(29px, 4.6vw, 44px); }
.fbl-page .fbl-h2-sm { font-size: clamp(27px, 4.2vw, 40px); }
.fbl-page .fbl-h2-xs { font-size: clamp(25px, 4vw, 36px); }

@media (max-width: 640px) {
    .fbl-page .fbl-pad-lg { padding-left: 28px !important; padding-right: 28px !important; }
    .fbl-page .fbl-card-pad { padding: 48px 26px !important; }
}