/* ===== Premium FX Layer — grain, reveals, live data band, button sheen ===== */

/* film grain */
.fx-grain{position:fixed;inset:-50%;width:200%;height:200%;z-index:80;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:fxGrain 7s steps(8) infinite}
@keyframes fxGrain{
  0%{transform:translate(0,0)}12%{transform:translate(-2%,1%)}25%{transform:translate(1%,-2%)}
  38%{transform:translate(-1%,2%)}50%{transform:translate(2%,1%)}62%{transform:translate(-2%,-1%)}
  75%{transform:translate(1%,2%)}88%{transform:translate(2%,-2%)}100%{transform:translate(0,0)}}

/* scroll progress hairline */
.fx-progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:90;pointer-events:none;
  background:linear-gradient(90deg,#f4d99c,#c99a4e);box-shadow:0 0 12px rgba(238,198,128,.5)}

/* line-mask headline reveal */
.fx-line{display:block;overflow:hidden;padding-bottom:.22em;margin-bottom:-.22em}
.fx-line>span{display:block;transform:translateY(112%);transition:transform 1.05s cubic-bezier(.19,.8,.22,1)}
.fx-lines.visible .fx-line>span{transform:translateY(0)}
.fx-lines .fx-line:nth-child(2)>span{transition-delay:.09s}
.fx-lines .fx-line:nth-child(3)>span{transition-delay:.18s}
.fx-lines .fx-line:nth-child(4)>span{transition-delay:.27s}

/* CTA gold sheen sweep */
.btn-primary{position:relative;overflow:hidden}
.btn-primary::after{content:"";position:absolute;top:-40%;bottom:-40%;left:-70%;width:38%;
  background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.38) 50%,transparent 100%);
  transform:skewX(-18deg);animation:fxSheen 4.6s ease-in-out infinite}
@keyframes fxSheen{0%,64%{left:-70%}86%,100%{left:150%}}

/* live bitcoin network band */
.fx-btc{border-top:1px solid rgba(238,198,128,.16);border-bottom:1px solid rgba(238,198,128,.16);
  background:linear-gradient(180deg,rgba(238,198,128,.05),rgba(238,198,128,.015));overflow:hidden}
.fx-btc-inner{max-width:var(--max);margin:0 auto;padding:16px 24px;display:flex;align-items:center;
  justify-content:center;gap:clamp(18px,4vw,54px);flex-wrap:wrap}
.fx-btc-tag{display:flex;align-items:center;gap:9px;font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold);font-weight:700;white-space:nowrap}
.fx-btc-dot{width:7px;height:7px;border-radius:50%;background:#57e389;box-shadow:0 0 10px #57e389;
  animation:fxPulse 1.6s ease-in-out infinite}
@keyframes fxPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}
.fx-btc-item{display:flex;flex-direction:column;gap:2px;min-width:96px}
.fx-btc-item small{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.fx-btc-item b{font-size:clamp(15px,1.6vw,19px);color:var(--ink);font-weight:700;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.fx-btc-item b i{font-style:normal;color:var(--gold);font-size:.78em;margin-left:3px}
.fx-btc[hidden]{display:none}
@media (max-width:640px){
  .fx-btc-inner{gap:14px 22px;padding:14px 16px}
  .fx-btc-item{min-width:auto}
}

/* hero parallax layers get GPU hint */
.hero-visual img,.hero-visual .glow{will-change:transform}

/* ===== gold godray + particle ambient behind hero ===== */
.fx-godray{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.fx-godray::before,.fx-godray::after{content:"";position:absolute;top:-30%;left:50%;width:60%;height:170%;
  background:linear-gradient(180deg,rgba(238,198,128,.16),rgba(238,198,128,0) 70%);
  transform-origin:top center;filter:blur(14px);mix-blend-mode:screen;opacity:.7}
.fx-godray::before{transform:translateX(-70%) rotate(-14deg);animation:fxRay 11s ease-in-out infinite alternate}
.fx-godray::after{transform:translateX(-10%) rotate(12deg);animation:fxRay2 13s ease-in-out infinite alternate}
@keyframes fxRay{0%{opacity:.35;transform:translateX(-72%) rotate(-16deg)}100%{opacity:.75;transform:translateX(-62%) rotate(-11deg)}}
@keyframes fxRay2{0%{opacity:.3;transform:translateX(-4%) rotate(9deg)}100%{opacity:.65;transform:translateX(-16%) rotate(14deg)}}
.fx-particles{position:absolute;inset:0;z-index:0;pointer-events:none}
.fx-particles i{position:absolute;bottom:-12px;width:3px;height:3px;border-radius:50%;
  background:radial-gradient(circle,#f4d99c,rgba(244,217,156,0) 70%);opacity:0;
  animation:fxFloat linear infinite}
@keyframes fxFloat{0%{opacity:0;transform:translateY(0) scale(.6)}12%{opacity:.9}
  100%{opacity:0;transform:translateY(-88vh) scale(1.1)}}

/* magnetic CTA — smooth follow via JS-set custom props */
.btn-primary{transition:transform .12s cubic-bezier(.2,.7,.3,1),box-shadow .18s ease}

@media (prefers-reduced-motion:reduce){
  .fx-godray::before,.fx-godray::after,.fx-particles i{animation:none}
}

@media (prefers-reduced-motion:reduce){
  .fx-grain,.btn-primary::after{animation:none}
  .fx-line>span{transform:none;transition:none}
}