/* BX Productions v110 — sitewide quality-of-life layer */
:root{--bx-qol-cyan:#39deed;--bx-qol-panel:#07151c;--bx-qol-line:rgba(103,220,236,.28)}
html{scroll-padding-top:96px}
body{overflow-x:clip}
::selection{background:rgba(39,217,234,.28);color:#fff}
a,button,input,select,textarea{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--bx-qol-cyan)!important;outline-offset:3px!important}
.bx-skip-link{position:fixed;left:14px;top:10px;z-index:100000;transform:translateY(-150%);padding:10px 14px;border:1px solid var(--bx-qol-line);border-radius:10px;background:#06141b;color:#effcff;text-decoration:none;font:900 11px ui-monospace,monospace;letter-spacing:.08em;box-shadow:0 10px 35px rgba(0,0,0,.35);transition:transform .16s ease}
.bx-skip-link:focus{transform:translateY(0)}
.bx-scroll-progress{position:fixed;z-index:9998;left:0;top:0;height:2px;width:var(--bx-scroll-progress,0%);background:linear-gradient(90deg,#27d9ea,#5b8cff,#ff9a3d);pointer-events:none;transition:width .06s linear;box-shadow:0 0 12px rgba(39,217,234,.55)}
.bx-back-top{position:fixed;right:18px;bottom:18px;z-index:7200;width:44px;height:44px;border:1px solid var(--bx-qol-line);border-radius:14px;background:rgba(6,18,24,.92);color:#dffaff;display:grid;place-items:center;font:900 17px ui-monospace,monospace;box-shadow:0 14px 36px rgba(0,0,0,.28);backdrop-filter:blur(14px);opacity:0;visibility:hidden;transform:translateY(10px);transition:.18s ease}
.bx-back-top.visible{opacity:1;visibility:visible;transform:none}.bx-back-top:hover{border-color:rgba(39,217,234,.6);background:#0b2029}
.bx-network-toast{position:fixed;left:50%;bottom:18px;z-index:100001;transform:translate(-50%,20px);padding:9px 13px;border:1px solid var(--bx-qol-line);border-radius:999px;background:rgba(5,18,24,.96);color:#dffaff;font:900 10px ui-monospace,monospace;letter-spacing:.07em;box-shadow:0 14px 38px rgba(0,0,0,.3);opacity:0;visibility:hidden;transition:.2s ease;pointer-events:none}
.bx-network-toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}.bx-network-toast.offline{border-color:rgba(255,123,123,.46);color:#ffabab}.bx-network-toast.online{border-color:rgba(98,239,180,.42);color:#80f4c3}
@media(max-width:720px){html{scroll-padding-top:76px}.nav.open{max-height:calc(100dvh - 76px);overflow-y:auto;overscroll-behavior:contain}.nav.open a,.nav.open button{min-height:44px}.menu-button{min-width:44px;min-height:44px}.bx-back-top{right:12px;bottom:12px;width:42px;height:42px}.bx-network-toast{bottom:12px;max-width:calc(100% - 24px);white-space:nowrap}input,select,textarea{font-size:16px}}
@media(prefers-reduced-motion:reduce){html:not([data-bx-motion="full"]) .bx-skip-link,html:not([data-bx-motion="full"]) .bx-back-top,html:not([data-bx-motion="full"]) .bx-network-toast{transition:none}html:not([data-bx-motion="full"]) .bx-scroll-progress{transition:none}}

/* v129 — sitewide polish and responsive usability */
body{opacity:1;transition:opacity .18s ease}
.bx-js-ready body:not(.bx-page-ready){opacity:.985}
.topbar{box-shadow:0 8px 32px rgba(0,0,0,.08)}
body.bx-page-scrolled .topbar{box-shadow:0 14px 42px rgba(0,0,0,.24);border-bottom-color:rgba(74,220,235,.12)}
.brand,.nav-view-button,.nav-youtube,.nav-discord,.button,.menu-button{will-change:transform}
.button,.nav-youtube,.nav-discord,.menu-button{transition:transform .18s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease,color .2s ease!important}
.button:active,.nav-youtube:active,.nav-discord:active,.menu-button:active{transform:translateY(1px) scale(.985)!important}

/* Gentle view/reveal motion instead of large entrance effects. */
.bx-reveal{opacity:0;transform:translateY(14px);transition:opacity .48s cubic-bezier(.2,.8,.2,1),transform .48s cubic-bezier(.2,.8,.2,1)}
.bx-reveal.bx-reveal-in{opacity:1;transform:none}
.page-view.bx-view-enter{animation:bxViewEnter .3s cubic-bezier(.2,.8,.2,1)}
@keyframes bxViewEnter{from{opacity:.65;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Shared surface behavior: cleaner depth, less visual jumpiness. */
.team-card,.recording-guideline,.recording-intro,.recording-join-card,.merch-group-card,.merch-product-card,.partnership-information,.partnership-banner,.feature-card,.stat-card,.terms-section,.privacy-card{
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background .22s ease;
}
@media(hover:hover){
  .team-card:hover,.recording-guideline:hover,.merch-group-card:hover,.merch-product-card:hover,.feature-card:hover,.stat-card:hover{
    transform:translateY(-3px);
    box-shadow:0 20px 54px rgba(0,0,0,.2);
  }
}

/* Mobile menu gets a real backdrop and remains easy to close without shortcuts. */
.bx-menu-scrim{position:fixed;inset:0;z-index:89;border:0;background:rgba(1,7,11,.58);backdrop-filter:blur(5px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,visibility .2s ease}
body.bx-menu-open .bx-menu-scrim{opacity:1;visibility:visible;pointer-events:auto}
body.bx-menu-open{overflow:hidden}

/* Better reading/wrapping and tap behavior across public pages. */
p,li,.brand,.nav a,.button{overflow-wrap:anywhere}
button,a{-webkit-user-select:none;user-select:none}
input,textarea,select{-webkit-user-select:text;user-select:text}
img{max-width:100%}
.bx-back-top{width:auto;min-width:48px;padding:0 12px;grid-auto-flow:column;gap:6px}
.bx-back-top small{font:900 7px ui-monospace,monospace;letter-spacing:.08em;color:#8fb1ba}

@media(max-width:980px){
  .topbar{padding-inline:18px}
  .hero,.team-header,.recording-header,.merch-header,.partnership-banner{scroll-margin-top:94px}
}
@media(max-width:720px){
  .topbar{padding-inline:12px}
  .brand{min-width:0}
  .brand span,.brand strong{overflow:hidden;text-overflow:ellipsis}
  .nav.open{padding-bottom:max(18px,env(safe-area-inset-bottom));box-shadow:0 22px 54px rgba(0,0,0,.38)}
  .nav.open .nav-view-button,.nav.open .nav-youtube,.nav.open .nav-discord{width:100%;justify-content:center;text-align:center;border-radius:12px}
  .bx-back-top small{display:none}
}
@media(max-width:480px){
  .bx-network-toast{font-size:9px;text-align:center;white-space:normal}
}
@media(prefers-reduced-motion:reduce){html:not([data-bx-motion="full"]){scroll-behavior:auto!important}html:not([data-bx-motion="full"]) .bx-reveal{opacity:1!important;transform:none!important;transition:none!important}html:not([data-bx-motion="full"]) .page-view.bx-view-enter{animation:none!important}html:not([data-bx-motion="full"]) .button,html:not([data-bx-motion="full"]) .nav-youtube,html:not([data-bx-motion="full"]) .nav-discord,html:not([data-bx-motion="full"]) .menu-button,html:not([data-bx-motion="full"]) .team-card,html:not([data-bx-motion="full"]) .recording-guideline,html:not([data-bx-motion="full"]) .recording-intro,html:not([data-bx-motion="full"]) .recording-join-card,html:not([data-bx-motion="full"]) .merch-group-card,html:not([data-bx-motion="full"]) .merch-product-card,html:not([data-bx-motion="full"]) .partnership-information,html:not([data-bx-motion="full"]) .partnership-banner,html:not([data-bx-motion="full"]) .feature-card,html:not([data-bx-motion="full"]) .stat-card,html:not([data-bx-motion="full"]) .terms-section,html:not([data-bx-motion="full"]) .privacy-card{transition:none!important}}