/* ============================================================
   CryptoFXB — Premium visual theme layer (loaded on every page)
   Additive polish: aurora atmosphere, depth, glass, motion.
   ============================================================ */

/* --- Living aurora atmosphere behind everything --- */
body::before{
  content:""; position:fixed; left:-12%; right:-12%; top:-22%; height:78vh; z-index:-2; pointer-events:none;
  background:
    radial-gradient(38% 48% at 18% 22%, rgba(99,102,241,0.20), transparent 70%),
    radial-gradient(34% 44% at 82% 8%,  rgba(16,185,129,0.18), transparent 70%),
    radial-gradient(30% 42% at 58% 32%, rgba(139,92,246,0.14), transparent 72%);
  filter:blur(18px);
  animation:cfxbAurora 20s ease-in-out infinite alternate;
}
@keyframes cfxbAurora{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(2%,-2%,0) scale(1.06)}
  100%{transform:translate3d(-2%,-3%,0) scale(1.1)}
}
html.dark body::before{opacity:.45}

/* --- Faint fintech grid, fading toward the page --- */
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.45;
  background-image:
    linear-gradient(rgba(15,23,42,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,.028) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(120% 60% at 50% -8%, #000 0%, transparent 62%);
  mask-image:radial-gradient(120% 60% at 50% -8%, #000 0%, transparent 62%);
}
html.dark body::after{opacity:.16}

/* --- Cards: smoother lift, indigo-tinted glow + hairline gradient ring on hover --- */
.card{transition:transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease, border-color .28s ease}
.card:hover{
  transform:translateY(-3px);
  box-shadow:0 1px 2px rgba(15,23,42,.04), 0 28px 54px -26px rgba(79,70,229,.40);
  border-color:rgba(99,102,241,.30);
}

/* --- Glassy sticky header --- */
header.sticky{box-shadow:0 1px 0 rgba(15,23,42,.05), 0 14px 30px -28px rgba(15,23,42,.5)}

/* --- Premium scrollbar + selection --- */
*::-webkit-scrollbar{height:9px;width:9px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#c7d2fe,#a7f3d0);border-radius:9px}
*::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#a5b4fc,#6ee7b7)}
::selection{background:rgba(99,102,241,.22)}
html.dark ::selection{background:rgba(99,102,241,.4)}

/* --- Sheen sweep for hero/CTA buttons (add class="cfxb-shine") --- */
.cfxb-shine{position:relative;overflow:hidden}
.cfxb-shine::after{
  content:""; position:absolute; top:0; left:-130%; width:55%; height:100%;
  background:linear-gradient(110deg, transparent, rgba(255,255,255,.40), transparent);
  transform:skewX(-18deg); transition:left .65s cubic-bezier(.2,.7,.3,1); pointer-events:none;
}
.cfxb-shine:hover::after{left:140%}

/* --- Gradient text utility --- */
.cfxb-grad{background:linear-gradient(90deg,#6366f1,#10b981);-webkit-background-clip:text;background-clip:text;color:transparent}

/* --- Gentle entrance for the hero on first paint --- */
@keyframes cfxbRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

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