/* BKK by XYZ — v6 homepage styles (companion to the [bkk_home] shortcode).
   Most styling is inline on the markup; this file holds what inline can't do:
   keyframes, media queries, :hover/:focus states, and scroll-reveal base states. */

.bkk-v6{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
.bkk-v6 *{ box-sizing:border-box; }
.bkk-v6 ::selection{ background:#FF2D2D; color:#08080B; }
.bkk-v6 img{ max-width:100%; }

/* keep the canvas/host page flush + dark while the v6 page is rendered */
/* overflow-x:clip kills the stray horizontal scrollbar from decorative full-bleed
   glows (e.g. the 80vw mailing-section glow whose bkkBreathe scale pulses the page
   width). clip (not hidden) so position:sticky/fixed layers keep working. */
html:has(body.bkk-v6-page){ overflow-x:clip; }
body.bkk-v6-page{ margin:0; background:#08080B; overflow-x:clip; }
/* the v6 wrapper itself clips its own bleeds (hero glows etc.); both axes.
   the fixed nav/modals/loader live in here but are position:fixed with no
   transform on .bkk-v6, so they're not clipped by this. */
.bkk-v6.bkk-js{ overflow:hidden; }

/* nav sign-in link reads "Portal" once WP marks the user logged-in (body.logged-in
   is set server-side per request, so this is per-user with no flash — both labels
   are baked, CSS just toggles which shows). */
.bkk-auth-in{ display:none; }
body.logged-in .bkk-auth-out{ display:none; }
body.logged-in .bkk-auth-in{ display:inline; }

/* #mailing anchor lands below the fixed nav instead of under it */
#mailing{ scroll-margin-top:84px; }

/* grain layer */
.bkk-v6 .bkk-grain{ position:absolute; inset:0; opacity:0.04; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }

/* ===== keyframes ===== */
@keyframes bkkMarquee{ to{ transform:translateX(-50%); } }
@keyframes bkkFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }
@keyframes bkkPulse{ 0%,100%{ opacity:.45; } 50%{ opacity:1; } }
@keyframes bkkScrollCue{ 0%{ transform:translateY(-2px); opacity:0; } 30%{ opacity:1; } 100%{ transform:translateY(16px); opacity:0; } }
@keyframes bkkBreathe{ 0%,100%{ opacity:.5; transform:scale(1); } 50%{ opacity:.9; transform:scale(1.08); } }
@keyframes bkkEq{ 0%,100%{ transform:scaleY(0.25); } 50%{ transform:scaleY(1); } }
@keyframes bkkRing{ 0%{ transform:scale(0.66); opacity:.7; } 100%{ transform:scale(1.9); opacity:0; } }

/* ===== nav ===== */
.bkk-v6 #bkk-nav .bkk-logo{ height:96px; width:auto; transition:height .35s ease; }
.bkk-v6 #bkk-nav.scrolled{ background:rgba(8,8,11,0.72); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--line) !important; }
.bkk-v6 #bkk-nav.scrolled .bkk-logo{ height:61px; }

.bkk-v6 .bkk-mega{ position:relative; }
.bkk-v6 .bkk-mega-trig{ cursor:pointer; display:inline-flex; align-items:center; gap:5px; font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--mut); text-decoration:none; transition:color .25s; }
.bkk-v6 .bkk-mega:hover .bkk-mega-trig{ color:var(--gold); }
.bkk-v6 .bkk-mega-trig span{ font-size:9px; transition:transform .25s; }
.bkk-v6 .bkk-mega:hover .bkk-mega-trig span{ transform:rotate(180deg); }
.bkk-v6 .bkk-mega-panel{ position:absolute; top:100%; left:0; width:min(280px,88vw); padding-top:18px; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .25s,transform .25s,visibility .25s; z-index:95; }
.bkk-v6 .bkk-mega:hover .bkk-mega-panel{ opacity:1; visibility:visible; transform:translateY(0); }
.bkk-v6 .bkk-mega-inner{ background:rgba(13,13,21,0.97); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid var(--line); border-radius:16px; padding:22px; box-shadow:0 30px 80px rgba(0,0,0,0.55); }
.bkk-v6 .bkk-mega-eyebrow{ font-family:'Space Mono',monospace; font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); margin-bottom:8px; }
.bkk-v6 .bkk-mega-link{ display:block; padding:9px 0; font-family:'Space Mono',monospace; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--mut); text-decoration:none; border-bottom:1px solid rgba(255,255,255,0.05); transition:color .2s,padding-left .2s; }
.bkk-v6 .bkk-mega-link:hover{ color:var(--gold); padding-left:7px; }
.bkk-v6 .bkk-signin{ font-family:'Space Mono',monospace; font-size:12px; letter-spacing:0.1em; text-transform:uppercase; font-weight:700; color:var(--ink); border:1px solid var(--line); padding:9px 18px; border-radius:100px; text-decoration:none; white-space:nowrap; transition:border-color .25s,color .25s; }
.bkk-v6 .bkk-signin:hover{ border-color:var(--gold); color:var(--gold); }
.bkk-v6 .bkk-ptoggle{ cursor:pointer; display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; border:1px solid var(--line); color:var(--ink); font-size:12px; background:transparent; transition:all .25s; }
.bkk-v6 .bkk-ptoggle svg{ width:15px !important; height:15px !important; min-width:15px !important; flex:0 0 15px !important; fill:currentColor !important; display:block !important; }
.bkk-v6 .bkk-ptoggle:hover{ border-color:var(--gold); color:var(--gold); background:rgba(255,45,45,0.06); }
.bkk-v6 .bkk-ptoggle.is-on{ border-color:var(--gold); color:var(--gold); background:rgba(255,45,45,0.1); }

/* ===== shared hover states (base look stays inline) ===== */
.bkk-v6 .bkk-hv-gold{ transition:transform .25s,box-shadow .25s; }
.bkk-v6 .bkk-hv-gold:hover{ transform:translateY(-2px); box-shadow:0 14px 40px rgba(255,45,45,0.34); }
.bkk-v6 .bkk-hv-outline:hover{ border-color:rgba(255,255,255,0.3) !important; background:rgba(255,255,255,0.05) !important; }
.bkk-v6 .bkk-hv-card:hover{ border-color:rgba(255,45,45,0.45) !important; transform:translateY(-4px); }
.bkk-v6 .bkk-hv-x:hover{ border-color:var(--gold) !important; color:var(--gold) !important; }
.bkk-v6 .bkk-hv-social:hover{ border-color:var(--gold) !important; color:var(--gold) !important; }
.bkk-v6 .bkk-pager-btn:hover{ border-color:var(--gold) !important; color:var(--gold) !important; }
.bkk-v6 #bkk-mail input:focus{ border-color:var(--gold) !important; }

/* ===== releases list ===== */
.bkk-v6 .bkk-rel-row[hidden]{ display:none !important; }
.bkk-v6 .bkk-rel-row:hover{ border-color:rgba(255,45,45,0.4) !important; background:rgba(255,45,45,0.04) !important; }
.bkk-v6 .bkk-rel-row.is-active{ border-color:rgba(255,45,45,0.6) !important; background:rgba(255,45,45,0.07) !important; }

/* ===== all section H2 titles -> 61px (mailing statement keeps its own 50px) ===== */
.bkk-v6 section:not(#mailing) h2{ font-size:clamp(30px,6vw,61px) !important; }

/* ===== switcher tabs (one line, clear toggle, greyer inactive) =====
   !important is required because the buttons carry an inline `all:unset`,
   and inline declarations otherwise beat a non-important stylesheet rule. */
.bkk-v6 .bkk-switcher{ flex-wrap:nowrap !important; gap:8px 32px !important; align-items:baseline !important; }
.bkk-v6 .bkk-tab-sep{ color:rgba(245,243,236,0.22); font-family:'Archivo','Arial Narrow',sans-serif; font-stretch:125%; font-weight:700; line-height:0.92; font-size:clamp(18px,5.2vw,52px); user-select:none; pointer-events:none; align-self:baseline; }
.bkk-v6 .bkk-tab{ position:relative !important; color:#7c7c87 !important; padding-bottom:12px; white-space:nowrap; font-size:clamp(22px,6vw,61px) !important; transition:color .25s; }
.bkk-v6 .bkk-tab::after{ display:none !important; content:none !important; }
.bkk-v6 .bkk-tab:hover{ color:var(--ink) !important; }
.bkk-v6 .bkk-tab.is-active{ color:var(--ink) !important; }
.bkk-v6 .bkk-switch-hint{ display:inline-flex; align-items:center; gap:7px; margin-top:9px; font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--faint); }
.bkk-v6 .bkk-switch-hint svg{ color:var(--gold); }

/* ===== testimonials carousel arrows ===== */
.bkk-v6 .bkk-car{ position:relative; }
.bkk-v6 .bkk-car-arrow{ position:absolute; top:calc(50% - 12px); transform:translateY(-50%); z-index:6; width:48px; height:48px; border-radius:50%; border:1px solid var(--line); background:rgba(8,8,11,0.78); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); color:var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 12px 30px rgba(0,0,0,0.5); transition:border-color .25s, color .25s, background .25s, opacity .25s; }
.bkk-v6 .bkk-car-arrow:hover{ border-color:var(--gold); color:var(--gold); background:rgba(8,8,11,0.92); }
.bkk-v6 .bkk-car-prev{ left:-10px; }
.bkk-v6 .bkk-car-next{ right:-10px; }
.bkk-v6 .bkk-car-arrow[disabled]{ opacity:0.28; cursor:default; pointer-events:none; }
@media (max-width:560px){ .bkk-v6 .bkk-car-prev{ left:2px; } .bkk-v6 .bkk-car-next{ right:2px; } }
.bkk-v6 .bkk-roster-cell[hidden]{ display:none !important; }
.bkk-v6 .bkk-roster-cell:hover{ border-color:rgba(255,45,45,0.45) !important; transform:translateY(-4px); }
.bkk-v6 .bkk-roster-cta:hover{ border-color:var(--gold) !important; transform:translateY(-4px); }
/* roster: 5 members + CTA by default; "View All" reveals the rest (no pagination) */
.bkk-v6 .bkk-roster-extra{ display:none !important; }
.bkk-v6 .bkk-roster-grid.show-all .bkk-roster-extra{ display:flex !important; }
.bkk-v6 #bkk-roster-all:hover{ border-color:var(--gold) !important; color:var(--gold) !important; }
.bkk-v6 .bkk-hscroll::-webkit-scrollbar{ height:6px; }
.bkk-v6 .bkk-hscroll::-webkit-scrollbar-thumb{ background:#26262e; border-radius:8px; }

/* ===== player wave + meters + beats eq ===== */
.bkk-v6 .bkk-wave{ display:flex; align-items:center; gap:2px; height:124px; width:100%; }
.bkk-v6 .bkk-wave i{ flex:1; height:30%; background:linear-gradient(180deg,var(--gold),var(--gold2)); border-radius:2px; opacity:.55; animation:bkkEq 1.1s ease-in-out infinite; transform-origin:center; }
.bkk-v6 .bkk-meter{ display:flex; align-items:flex-end; gap:2px; height:18px; }
.bkk-v6 .bkk-meter i{ flex:1; height:100%; background:var(--gold); border-radius:1px; transform-origin:bottom; animation:bkkEq 0.9s ease-in-out infinite; }
.bkk-v6 .bkk-eq i{ width:6px; height:100%; border-radius:4px; background:linear-gradient(180deg,var(--gold),var(--gold2)); transform-origin:center; animation:bkkEq 1.05s ease-in-out infinite; }

/* assign each wave bar a varied delay/height via nth-child for organic motion */
.bkk-v6 .bkk-wave i:nth-child(3n){ animation-duration:1.4s; height:60%; }
.bkk-v6 .bkk-wave i:nth-child(3n+1){ animation-duration:0.9s; height:45%; }
.bkk-v6 .bkk-wave i:nth-child(4n){ height:80%; }
.bkk-v6 .bkk-wave i:nth-child(5n){ height:35%; }

/* ===== scroll-reveal base states (only when JS active; fail-safe otherwise) ===== */
.bkk-v6.bkk-js [data-reveal],
.bkk-v6.bkk-js [data-fade],
.bkk-v6.bkk-js [data-rise]{ opacity:0; }
.bkk-v6.bkk-js [data-reveal]{ transform:translateY(40px); filter:blur(12px); }
.bkk-v6.bkk-js [data-fade]{ transform:translateY(22px); }
.bkk-v6.bkk-js [data-rise]{ transform:translateY(30px); filter:blur(8px); }

/* ===== responsive ===== */
@media (max-width:920px){
  .bkk-v6 .bkk-hero-grid{ grid-template-columns:1fr !important; }
  .bkk-v6 .bkk-stats{ grid-template-columns:repeat(2,1fr) !important; }
  .bkk-v6 .bkk-mc-grid{ grid-template-columns:1fr !important; }
  .bkk-v6 .bkk-price-grid{ grid-template-columns:repeat(2,1fr) !important; }
  .bkk-v6 .bkk-rel-grid{ grid-template-columns:1fr !important; }
  .bkk-v6 .bkk-beats-grid{ grid-template-columns:1fr !important; }
  .bkk-v6 .bkk-hub-grid{ grid-template-columns:repeat(2,1fr) !important; grid-auto-rows:200px !important; }
  .bkk-v6 .bkk-hub-grid > a{ grid-column:span 1 !important; grid-row:span 1 !important; }
  .bkk-v6 .bkk-hub-grid > a:first-child{ grid-column:span 2 !important; grid-row:span 1 !important; }
  .bkk-v6 .bkk-roster-grid{ grid-template-columns:repeat(2,1fr) !important; }
  .bkk-v6 .bkk-foot{ grid-template-columns:1fr !important; }
  .bkk-v6 .bkk-socials{ justify-content:flex-start !important; }
  .bkk-v6 .bkk-navlinks > div:first-child{ display:none !important; }
}
@media (max-width:560px){
  .bkk-v6 .bkk-price-grid{ grid-template-columns:1fr !important; }
  .bkk-v6 .bkk-hub-grid{ grid-template-columns:1fr !important; }
  .bkk-v6 .bkk-hub-grid > a:first-child{ grid-column:span 1 !important; }
  .bkk-v6 .bkk-roster-grid{ grid-template-columns:repeat(2,1fr) !important; }
  .bkk-v6 .bkk-signin{ display:none; }
}

/* mobile: center section headers, the hero copy, and CTA button rows */
@media (max-width:768px){
  .bkk-v6 .bkk-mctr{ text-align:center !important; }
  .bkk-v6 .bkk-mctr.bkk-mflex{ flex-direction:column !important; align-items:center !important; justify-content:center !important; }
  .bkk-v6 .bkk-mctr p, .bkk-v6 .bkk-mctr blockquote, .bkk-v6 .bkk-mctr .bkk-stats{ margin-left:auto !important; margin-right:auto !important; }
  .bkk-v6 .bkk-mcta{ justify-content:center !important; }
}

@media (prefers-reduced-motion: reduce){
  .bkk-v6 *{ animation-duration:0.001s !important; animation-iteration-count:1 !important; }
  .bkk-v6.bkk-js [data-reveal],
  .bkk-v6.bkk-js [data-fade],
  .bkk-v6.bkk-js [data-rise]{ opacity:1 !important; transform:none !important; filter:none !important; }
}

/* ===== hero play button hover ===== */
.bkk-v6 .bkk-hv-scale{ transition:transform .3s ease; }
.bkk-v6 .bkk-hv-scale:hover{ transform:scale(1.04); }

/* ===== nav now-playing pill ===== */
.bkk-v6 .bkk-navplayer.hidden{ display:none !important; }
.bkk-v6 .bkk-navplayer:hover{ border-color:rgba(255,45,45,0.5) !important; background:rgba(255,45,45,0.06) !important; }
.bkk-v6 .bkk-meter--nav{ height:14px; }

/* ===== content-hub SVG hover animations (verbatim from prototype) ===== */
.bkk-v6 .bkk-hub-grid > a svg *{ transform-box:fill-box; transform-origin:center; }
@keyframes hubFlow{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(9px); } }
@keyframes hubNib{ 0%,100%{ transform:translate(0,0) rotate(0); } 50%{ transform:translate(-3px,4px) rotate(-5deg); } }
@keyframes hubQuill{ 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-4px) rotate(3deg); } }
@keyframes hubLineG{ 0%,100%{ transform:scaleX(1); opacity:.7; } 50%{ transform:scaleX(1.07); opacity:1; } }
@keyframes hubSpin360{ to{ transform:rotate(360deg); } }
@keyframes hubPop{ 0%,100%{ transform:scale(1); opacity:.7; } 50%{ transform:scale(1.14); opacity:1; } }
@keyframes hubFloatY{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } }
@keyframes hubTwinkle{ 0%,100%{ opacity:.3; transform:scale(1); } 50%{ opacity:1; transform:scale(1.45); } }
@keyframes hubMag{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(-5px,-5px); } }
.bkk-v6 .bkk-hub-grid > a:nth-child(1):hover svg > g{ animation:hubFlow 1.8s ease-in-out infinite; }
.bkk-v6 .bkk-hub-grid > a:nth-child(1):hover svg > path{ animation:hubNib 1.3s ease-in-out infinite; }
.bkk-v6 .bkk-hub-grid > a:nth-child(2):hover svg > path{ animation:hubQuill 1.6s ease-in-out infinite; }
.bkk-v6 .bkk-hub-grid > a:nth-child(2):hover svg > g line{ animation:hubLineG 1.4s ease-in-out infinite; transform-origin:left center; }
.bkk-v6 .bkk-hub-grid > a:nth-child(3):hover svg > g{ animation:hubSpin360 7s linear infinite; }
.bkk-v6 .bkk-hub-grid > a:nth-child(3):hover svg > circle:last-of-type{ animation:hubPop 1.5s ease-in-out infinite; }
.bkk-v6 .bkk-hub-grid > a:nth-child(4):hover svg > path{ animation:hubFloatY 2.4s ease-in-out infinite; }
.bkk-v6 .bkk-hub-grid > a:nth-child(4):hover svg > g circle{ animation:hubTwinkle 1.7s ease-in-out infinite; }
.bkk-v6 .bkk-hub-grid > a:nth-child(5):hover svg > circle,
.bkk-v6 .bkk-hub-grid > a:nth-child(5):hover svg > line{ animation:hubMag 1.6s ease-in-out infinite; }
.bkk-v6 .bkk-hub-grid > a:nth-child(5):hover svg > g rect{ animation:hubPop 1.3s ease-in-out infinite; }