/* Quiet Build, aurora-glass layer. Mirrors the QB OS app look on the website.
   Drifting aurora background + translucent glass cards. Mobile-performant, reduced-motion safe.
   Load AFTER the page's own stylesheet so the glass overrides win. */

/* ---- Aurora background (the soul of the app look) ---- */
body::before{
  content:"";position:fixed;inset:-20%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38% 42% at 18% 22%, rgba(196,131,106,0.20) 0%, transparent 60%),
    radial-gradient(36% 40% at 82% 30%, rgba(168,196,170,0.16) 0%, transparent 60%),
    radial-gradient(44% 46% at 50% 88%, rgba(212,184,150,0.18) 0%, transparent 62%);
  filter:blur(46px) saturate(115%);
  animation:qb-drift 22s ease-in-out infinite alternate;
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 0%, transparent 55%, rgba(8,8,8,0.55) 100%);
}
@keyframes qb-drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(2%,-2%,0) scale(1.06)}
  100%{transform:translate3d(-2%,2%,0) scale(1.03)}
}

/* ---- Glass cards (translucent, blurred, inset highlight) ---- */
.card,.acard,.dl__sheet,.qbs-sheet{
  background:linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02)) !important;
  border-color:rgba(255,255,255,0.09) !important;
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.08), 0 24px 60px -34px rgba(0,0,0,0.85);
}
.card:hover,.acard:hover{
  border-color:rgba(212,184,150,0.45) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.12), 0 30px 70px -30px rgba(0,0,0,0.9);
}
/* glassy sticky filter bars */
.filter,.hub-filter{
  background:rgba(22,22,19,0.55) !important;
  backdrop-filter:blur(16px) saturate(120%);
  -webkit-backdrop-filter:blur(16px) saturate(120%);
}
/* glass on quote-bank cards + pull quotes + takeaways */
.qcard{
  background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.022)) !important;
  border-color:rgba(255,255,255,0.10) !important;
  backdrop-filter:blur(12px) saturate(120%);-webkit-backdrop-filter:blur(12px) saturate(120%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.08), 0 20px 50px -34px rgba(0,0,0,0.85);
}
.qb-quote,.takeaways{
  background:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.018)) !important;
  backdrop-filter:blur(10px) saturate(115%);-webkit-backdrop-filter:blur(10px) saturate(115%);
  border-radius:14px;
}

/* terra selection + slim scrollbars, matching the app */
::selection{background:rgba(196,131,106,0.30);color:#FAF8F5}
*{scrollbar-width:thin;scrollbar-color:rgba(212,184,150,0.4) transparent}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-thumb{background:rgba(212,184,150,0.35);border-radius:9px}

/* ---- Mobile performance: keep the glass look, drop per-card blur (many tiles) ---- */
@media(max-width:768px){
  .card,.acard,.qcard{backdrop-filter:none;-webkit-backdrop-filter:none}
  body::before{filter:blur(40px) saturate(110%)}
}

/* ---- Respect reduced motion ---- */
@media(prefers-reduced-motion:reduce){
  body::before{animation:none}
}

/* ---- Shared mobile hamburger nav (qb-nav.js injects the markup) ---- */
.navx{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;background:none;border:none;cursor:pointer;padding:10px;-webkit-tap-highlight-color:transparent;z-index:130}
.navx span{display:block;height:2px;width:100%;background:#E8E4DF;border-radius:2px;transition:transform .3s,opacity .3s}
.navx.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navx.open span:nth-child(2){opacity:0}
.navx.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.navmenu{position:fixed;inset:0;z-index:125;display:none;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;padding:5rem 1.5rem 3rem;background:rgba(10,10,10,0.97);backdrop-filter:blur(12px) saturate(120%);-webkit-backdrop-filter:blur(12px) saturate(120%)}
.navmenu.open{display:flex}
.navmenu__close{position:absolute;top:1rem;right:1.3rem;background:none;border:none;color:#E8E4DF;font-size:2.3rem;line-height:1;cursor:pointer}
.navmenu__links{display:flex;flex-direction:column;align-items:center;gap:.1rem;width:100%}
.navmenu a{font-family:'DM Serif Display',Georgia,serif;font-size:1.75rem;color:#E8E4DF;padding:.7rem 1rem;text-align:center;line-height:1.2}
.navmenu a:hover{color:#D4B896}
.navmenu__cta{margin-top:1.5rem;font-family:'JetBrains Mono',monospace !important;font-size:.78rem !important;text-transform:uppercase;letter-spacing:.12em;background:#D4B896;color:#111110 !important;border-radius:999px;padding:.9rem 1.7rem}
@media(max-width:859px){.navx{display:flex}.nav__cta{display:none}}
@media(min-width:860px){.navmenu{display:none !important}.navx{display:none !important}}