/* ═══ BACKDROP — stablecash.family-style nature footage behind the app ═══
   A full-bleed meadow clip sits behind the top of the page and dissolves into
   the app's #0a0a0a field; the bar and rail turn to dark glass over it, and
   the footer gets a blurred still of the same clip, like Stablecash's closer. */
body{position:relative;background:#0a0a0a}
#root{position:relative;z-index:1}
.hp-bg{position:absolute;top:0;left:0;right:0;height:min(118vh,1080px);z-index:0;overflow:hidden;pointer-events:none}
.hp-bg video,.hp-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.92) brightness(.82)}
.hp-bg::after{content:"";position:absolute;inset:0;background:
  radial-gradient(55% 42% at 50% 30%,rgba(10,10,10,.5),rgba(10,10,10,0) 72%),
  linear-gradient(180deg,rgba(10,10,10,.62) 0%,rgba(10,10,10,.22) 22%,rgba(10,10,10,.38) 48%,rgba(10,10,10,.86) 76%,#0a0a0a 100%)}
.hero-title,.hero-inner p{text-shadow:0 2px 24px rgba(0,0,0,.35)}

.bar{background:rgba(10,10,10,.22);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);border-bottom-color:rgba(255,255,255,.07)}
.side-inner{background:rgba(10,10,10,.38);-webkit-backdrop-filter:blur(20px) saturate(140%);backdrop-filter:blur(20px) saturate(140%);border-right-color:rgba(255,255,255,.07)}
.side-toggle{background:rgba(10,10,10,.6)}
.bar-search .search-field,.search-field{background:rgba(255,255,255,.04)}

.footer{background:
  linear-gradient(180deg,#0a0a0a 0%,rgba(10,10,10,.72) 45%,rgba(10,10,10,.82) 100%),
  url(/bg/meadow-blur.jpg) center 60%/cover no-repeat;border-top-color:rgba(255,255,255,.06)}

@media (prefers-reduced-motion:reduce){.hp-bg video{display:none}}

/* WebGL redraw of the clip (bg/fx.js): parallax toward the cursor + a water wake behind it */
.hp-bg .hp-fx{position:absolute;inset:0;width:100%;height:100%;display:block;filter:saturate(.92) brightness(.82);opacity:0;transition:opacity .6s ease}
.hp-bg.fx-on .hp-fx{opacity:1}
.hp-bg.fx-on video,.hp-bg.fx-on img{opacity:0}

/* X link in the top bar — same footprint as the menu button, visible on every width */
.bar-actions .bar-x{display:inline-flex;align-items:center;justify-content:center;color:var(--secondary)}
.bar-actions .bar-x:hover{color:var(--primary)}