/* Waterfall scroll-scrub — one fixed video behind #how → #verify → #cta.
   Scroll position drives video time (down the river, over the falls). */

#skala-wf, #skala-wf-rev{
  position:fixed; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  z-index:0; pointer-events:none; background:#000;
}
/* the time-reversed twin starts hidden; JS swaps opacity on direction change */
#skala-wf-rev{ opacity:0; }

/* sections ride above the fixed video; their own black bg becomes glass-clear */
section#top.sky-hero{ z-index:1; }
section#how, section#verify, section#cta{
  background:transparent !important;
  z-index:1;
  /* short journey: less scroll per second of video = faster, livelier water */
  padding-top:0;
  padding-bottom:0;
}

/* compact the sections' own inner paddings too (original py-24/28/32) */
section#how{ min-height:0 !important; }
section#how > div.z-10{ min-height:0 !important; padding-top:3.5rem !important; padding-bottom:1.5rem !important; }
section#verify > div.z-10{ padding-top:3rem !important; padding-bottom:3rem !important; }
section#cta > div.z-10{ padding-top:2rem !important; padding-bottom:2.5rem !important; }

/* ── #cta (final screen over the bright falls) ─────────────────────── */

/* push the content down the falls — the empty gap below is gone */
section#cta{ padding-top:14vh; padding-bottom:2vh; }

/* black text + icons: white blends into the sunlit water */
section#cta > div.z-10 :where(div,a,p,span,li){ color:#0e1519 !important; }
section#cta > div.z-10 svg{ color:#0e1519; }
/* Roadmap / Back to top: white pills like the Connect Wallet button */
section#cta div.mt-10 a:not(.btn-swap){
  background:#fff !important;
  border-radius:9999px;
  padding:10px 20px;
  text-decoration:none !important;
  box-shadow:0 10px 28px -12px rgba(0,0,0,.4);
  transition:transform .15s ease;
}
section#cta div.mt-10 a:not(.btn-swap):hover{ transform:scale(1.04); }

/* ...except the big heading — white over the pagoda-and-clouds finale */
section#cta > div.z-10 .font-heading,
section#cta > div.z-10 .font-heading *{
  color:#f4f8fc !important;
  text-shadow:0 2px 26px rgba(0,0,0,.4);
}
section#cta .liquid-glass{
  border-color:rgba(14,21,25,.22) !important;
  background:rgba(255,255,255,.38) !important;
}

/* ── #how + #verify: frames were white and blended into the sky — dark glass ── */
section#how .liquid-glass, section#verify .liquid-glass{
  border:1px solid rgba(255,255,255,.18) !important;
  background:rgba(16,24,30,.45) !important;
}
section#how .glass-frost, section#verify .glass-frost{
  background:rgba(10,16,21,.55) !important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.08) !important;
}

/* staircase reveal: blocks slide up one after another when #cta enters */
.cta-stagger{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .8s ease var(--d,0ms), transform .8s cubic-bezier(.22,1,.36,1) var(--d,0ms);
  will-change:opacity,transform;
}
.cta-stagger.cta-on{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .cta-stagger{ transition:none; opacity:1; transform:none; }
}