/* ================= AUTARCH — animasi latar per section ================= */
/* Semua efek hanya transform/opacity, dan HANYA berjalan saat terlihat (kelas .run dari js/fx.js). */

.section,.pg,.p-section,.c-hero,.t-hero{isolation:isolate}
.bg-fx{position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);z-index:-1;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 86%,transparent)}
.bg-fx *,.fx-sheen::after{animation-play-state:paused!important}
.bg-fx.run *,.fx-sheen.run::after{animation-play-state:running!important}

/* 1. scan visor: pita cahaya turun perlahan di atas garis vertikal tipis */
.fx-scan{background:repeating-linear-gradient(90deg,rgba(124,196,255,.035) 0 1px,transparent 1px 120px)}
.fx-scan i{position:absolute;left:0;right:0;top:0;height:38%;will-change:transform;
  background:linear-gradient(to bottom,transparent,rgba(124,196,255,.06) 60%,rgba(124,196,255,.16) 97%,rgba(196,230,255,.35) 100%);
  transform:translateY(-100%);animation:fxscan 11s cubic-bezier(.45,0,.55,1) infinite}
@keyframes fxscan{to{transform:translateY(300%)}}

/* 2. jalur sirkuit: denyut cahaya berjalan di garis rambut */
.fx-trace span{position:absolute;left:0;right:0;top:var(--y);height:1px;background:linear-gradient(90deg,transparent,rgba(124,196,255,.10) 20%,rgba(124,196,255,.10) 80%,transparent)}
.fx-trace span.v{left:var(--x);right:auto;top:0;bottom:0;width:1px;height:auto;background:linear-gradient(transparent,rgba(124,196,255,.09) 20%,rgba(124,196,255,.09) 80%,transparent)}
.fx-trace i{position:absolute;left:0;top:-1px;width:220px;height:3px;will-change:transform;
  background:linear-gradient(90deg,transparent,rgba(124,196,255,.7) 80%,#e6f4ff);border-radius:2px;box-shadow:0 0 10px rgba(124,196,255,.7);
  transform:translateX(-240px);animation:fxtrace var(--t,8s) linear var(--d,0s) infinite}
.fx-trace span.v i{left:-1px;top:0;width:3px;height:160px;background:linear-gradient(transparent,rgba(124,196,255,.7) 80%,#e6f4ff);transform:translateY(-180px);animation-name:fxtraceV}
@keyframes fxtrace{0%{transform:translateX(-240px)}55%,100%{transform:translateX(100vw)}}
@keyframes fxtraceV{0%{transform:translateY(-180px)}55%,100%{transform:translateY(1600px)}}

/* 3. gelombang Arc (memakai .arc-waves dari style.css) */
.fx-arcs .arc-waves{top:var(--ay,55%);opacity:.55}
.fx-arcs .arc-waves span{animation-duration:8s}

/* 4. aurora: pita cahaya lembut bergeser */
.fx-aurora i{position:absolute;width:80vw;height:60%;left:-10vw;top:10%;will-change:transform;
  background:radial-gradient(50% 50% at 50% 50%,rgba(59,91,255,.16),transparent 70%);animation:fxaur 22s ease-in-out infinite alternate}
.fx-aurora i:nth-child(2){left:35vw;top:40%;background:radial-gradient(50% 50% at 50% 50%,rgba(124,196,255,.11),transparent 70%);animation-duration:28s;animation-direction:alternate-reverse}
@keyframes fxaur{from{transform:translate(-6vw,-4%) scaleX(1)}to{transform:translate(8vw,6%) scaleX(1.25)}}

/* 5. radar: cincin statis + sapuan berputar */
.fx-radar .radar{position:absolute;left:var(--rx,50%);top:var(--ry,55%);width:min(1000px,120vw);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:repeating-radial-gradient(circle,transparent 0 59px,rgba(124,196,255,.08) 59px 60px);
  -webkit-mask-image:radial-gradient(closest-side,#000 60%,transparent);mask-image:radial-gradient(closest-side,#000 60%,transparent)}
.fx-radar .radar::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(124,196,255,.08)}
.fx-radar .radar::after{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:rgba(124,196,255,.08)}
.fx-radar i{position:absolute;inset:0;border-radius:50%;will-change:transform;
  background:conic-gradient(from 0deg,transparent 0 78%,rgba(124,196,255,.05) 88%,rgba(124,196,255,.28) 99.6%,rgba(196,230,255,.6) 100%);animation:spin 9s linear infinite}

/* 6. arsiran diagonal bergerak */
.fx-hatch i{position:absolute;inset:-60px;will-change:transform;
  background:repeating-linear-gradient(45deg,rgba(124,196,255,.045) 0 1px,transparent 1px 22px);animation:fxhatch 4s linear infinite}
@keyframes fxhatch{to{transform:translateX(31.11px)}}

/* 7. tetesan data: garis vertikal dengan cahaya jatuh */
.fx-rain span{position:absolute;top:0;bottom:0;left:var(--x);width:1px;background:linear-gradient(transparent,rgba(124,196,255,.07) 15%,rgba(124,196,255,.07) 85%,transparent)}
.fx-rain i{position:absolute;left:-1px;top:0;width:3px;height:140px;will-change:transform;
  background:linear-gradient(transparent,rgba(124,196,255,.65) 85%,#e6f4ff);box-shadow:0 0 8px rgba(124,196,255,.6);
  transform:translateY(-160px);animation:fxrain var(--t,5s) cubic-bezier(.5,0,.8,.6) var(--d,0s) infinite}
@keyframes fxrain{0%{transform:translateY(-160px)}70%,100%{transform:translateY(1800px)}}

/* 8. osiloskop: gelombang sinyal bergerak mendatar */
.fx-wave svg{position:absolute;left:0;top:var(--wy,50%);width:200%;height:220px;margin-top:-110px;will-change:transform;animation:fxwave 14s linear infinite}
.fx-wave path{fill:none;stroke:rgba(124,196,255,.22);stroke-width:1.5;vector-effect:non-scaling-stroke}
.fx-wave path + path{stroke:rgba(59,91,255,.18)}
@keyframes fxwave{to{transform:translateX(-50%)}}

/* 9. kilau holografik di kartu */
.has-sheen > *:not(.fx-sheen){position:relative;z-index:1}
.fx-sheen{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.fx-sheen::after{content:"";position:absolute;top:-50%;bottom:-50%;left:0;width:35%;will-change:transform;
  background:linear-gradient(100deg,transparent,rgba(196,230,255,.10) 45%,rgba(124,196,255,.18) 50%,transparent 60%);
  transform:translateX(-150%) rotate(8deg);animation:fxsheen 7s ease-in-out infinite}
@keyframes fxsheen{0%,55%{transform:translateX(-150%) rotate(8deg)}100%{transform:translateX(420%) rotate(8deg)}}

@media (prefers-reduced-motion:reduce){ .bg-fx *,.fx-sheen::after{animation:none!important} }