/* TIKUMA demo FX — gaya untuk lapisan interaksi bersama (fx.js). Warna diatur tiap demo lewat variabel:
   --fx-accent (bilah progres), --fx-ink / --fx-paper (intro), --fx-ease. */
:root { --fx-ease: cubic-bezier(.16, 1, .3, 1); --fx-accent: currentColor; }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }

/* bilah progres gulir */
.fx-progress { position: fixed; inset: 0 0 auto; height: 2px; z-index: 9990; pointer-events: none; }
.fx-progress i { display: block; height: 100%; background: var(--fx-accent); transform-origin: 0 50%; transform: scaleX(0); }

/* kursor pengikut: cincin yang membesar di elemen interaktif, jadi pil berlabel pada [data-cursor] */
.fx-cursor { position: fixed; left: 0; top: 0; z-index: 9995; pointer-events: none; width: 0; height: 0; }
.fx-ring { position: absolute; left: -18px; top: -18px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid #fff; mix-blend-mode: difference; opacity: 0; transition: opacity .3s, transform .45s var(--fx-ease), background-color .3s, border-color .3s; }
.fx-cursor.on .fx-ring { opacity: .9; }
.fx-cursor.hover .fx-ring { transform: scale(1.55); background: rgba(255, 255, 255, .12); }
.fx-cursor.down .fx-ring { transform: scale(.8); }
.fx-label { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%) scale(.3); padding: 0 18px; height: 72px; min-width: 72px; border-radius: 99px; display: grid; place-items: center; background: var(--fx-label-bg, #111); color: var(--fx-label-fg, #fff); font: 600 12px/1 system-ui, -apple-system, 'Segoe UI', sans-serif; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; opacity: 0; transition: opacity .25s, transform .5s var(--fx-ease); }
.fx-cursor.label .fx-label { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.fx-cursor.label .fx-ring { opacity: 0; }
html.fx-cursor-on [data-cursor] { cursor: none; }
html.fx-cursor-on [data-cursor] :is(a, button) { cursor: none; }

/* magnet: memakai properti translate agar tidak bentrok dengan transform milik demo */
.fx-mag { transition: translate .6s var(--fx-ease); }
.fx-mag.fx-mag-live { transition: translate .15s linear; }

/* teks terbelah per kata */
.fx-split .fx-w { display: inline-block; overflow: clip; overflow-clip-margin: .12em; vertical-align: top; padding: .06em .04em .1em; margin: -.06em -.04em -.1em; }
.fx-split .fx-wi { display: inline-block; transform: translateY(108%) rotate(4deg); transform-origin: 0 100%; transition: transform 1.1s var(--fx-ease); transition-delay: calc(var(--i, 0) * 45ms); }
.fx-split.fx-in .fx-wi { transform: none; }

/* gambar terbuka seperti tirai */
html.motion [data-reveal] { clip-path: inset(0 0 100% 0); transition: clip-path 1.3s var(--fx-ease); }
html.motion [data-reveal].fx-in { clip-path: inset(0 0 0 0); }
html.motion [data-reveal] :is(img, video) { scale: 1.18; transition: scale 1.6s var(--fx-ease); }
html.motion [data-reveal].fx-in :is(img, video) { scale: 1; }

/* paralaks */
.fx-plx { overflow: hidden; }
.fx-plx > :is(img, video, picture) { scale: 1.14; will-change: translate; }

/* intro merek */
.fx-intro { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: var(--fx-paper, #111); color: var(--fx-ink, #fff); clip-path: inset(0 0 0 0); transition: clip-path 1.1s var(--fx-ease); }
.fx-intro.out { clip-path: inset(0 0 100% 0); }
.fx-intro .fx-count { position: absolute; right: 28px; bottom: 22px; font: 500 13px/1 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .1em; opacity: .7; }
.fx-intro .fx-bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: currentColor; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); opacity: .5; transition: transform .3s linear; }
html.fx-intro-on body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .fx-cursor, .fx-progress, .fx-intro { display: none !important; }
}