/* Vessavena FX — lapisan animasi bersama (Motion + Lenis).
   Warna diambil dari variabel tiap halaman: --fx-bg, --fx-fg, --fx-accent, --fx-glow, --fx-serif. */

/* Penutup sementara sampai fx.js siap (hanya saat animasi aktif) */
html.fx:not(.fx-ready) body::after{content:"";position:fixed;inset:0;z-index:10000;background:var(--fx-bg)}

/* Lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}

/* Preloader & transisi halaman */
.fx-loader{position:fixed;inset:0;z-index:10000;background:var(--fx-bg);color:var(--fx-fg);display:grid;place-items:center}
.fx-loader-inner{text-align:center;padding:0 16px}
.fx-loader-word{display:block;font-family:var(--fx-serif);font-weight:300;font-size:clamp(34px,7vw,84px);letter-spacing:.26em;padding-left:.26em;text-transform:uppercase;line-height:1.1}
.fx-loader-line{display:block;height:1px;width:min(240px,50vw);margin:26px auto 18px;background:var(--fx-accent);transform:scaleX(0)}
.fx-loader-sub{display:block;font-size:10px;letter-spacing:.5em;padding-left:.5em;text-transform:uppercase;color:var(--fx-accent);opacity:0}

/* Split text: kata di-mask, isi naik dari bawah */
.fx-w{display:inline-block;overflow:hidden;vertical-align:top;padding:.06em .1em .2em;margin:-.06em -.1em -.2em}
.fx-wi{display:inline-block}

/* Garis ornamen yang "tergambar" saat masuk layar */
.fx .ornament::before,.fx .ornament::after{transform:scaleX(0);transition:transform 1.6s cubic-bezier(.16,1,.3,1) .25s}
.fx .ornament::before{transform-origin:right}
.fx .ornament::after{transform-origin:left}
.fx .ornament.fx-in::before,.fx .ornament.fx-in::after{transform:scaleX(1)}
.fx .ornament svg{transform:rotate(-135deg) scale(0);transition:transform 1.2s cubic-bezier(.16,1,.3,1) .1s}
.fx .ornament.fx-in svg{transform:none}
.fx .kicker::before{transform:scaleX(0);transform-origin:left;transition:transform 1.4s cubic-bezier(.16,1,.3,1) .15s}
.fx .kicker.fx-in::before{transform:scaleX(1)}

/* Progress bar */
.fx-progress{position:fixed;top:0;left:0;right:0;height:2px;background:var(--fx-accent);transform-origin:left;transform:scaleX(0);z-index:9990;pointer-events:none}

/* Header sembunyi saat scroll turun, muncul saat scroll naik */
.fx-header{transition:translate .8s cubic-bezier(.16,1,.3,1),background .4s,border-color .4s}
.fx-header.fx-hide{translate:0 -100%}

/* Kursor custom (hanya perangkat dengan mouse) */
.fx-cursor{position:fixed;left:0;top:0;z-index:9995;pointer-events:none;opacity:0;transition:opacity .4s}
.fx-cursor.on{opacity:1}
.fx-cursor::after{content:"";position:absolute;left:-2px;top:-2px;width:4px;height:4px;border-radius:50%;background:var(--fx-accent);transition:opacity .3s}
.fx-cursor-ring{position:absolute;left:-20px;top:-20px;width:40px;height:40px;border-radius:50%;border:1px solid var(--fx-accent);display:grid;place-items:center;transition:transform .6s cubic-bezier(.16,1,.3,1),background .4s,border-color .4s,opacity .4s;opacity:.7}
.fx-cursor-ring span{font-size:4.6px;letter-spacing:.2em;padding-left:.2em;text-transform:uppercase;font-weight:500;color:var(--fx-on-accent,#fff);opacity:0;transition:opacity .3s}
.fx-cursor.hover .fx-cursor-ring{transform:scale(1.45);opacity:1}
.fx-cursor.label .fx-cursor-ring{transform:scale(2.3);background:var(--fx-accent);border-color:var(--fx-accent);opacity:1}
.fx-cursor.label .fx-cursor-ring span{opacity:1}
.fx-cursor.label::after,.fx-cursor.hover::after{opacity:0}

/* Sorotan cahaya yang mengikuti mouse di kartu */
.fx-spot{position:relative}
.fx-glow{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;border-radius:inherit;transition:opacity .6s;background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),var(--fx-glow),transparent 50%)}
.fx-spot:hover>.fx-glow{opacity:1}

/* Menu mobile layar penuh */
.fx-menu{position:fixed;inset:0;z-index:9985;background:var(--fx-bg);color:var(--fx-fg);display:none;flex-direction:column;justify-content:center;padding:96px 24px 40px;clip-path:inset(0 0 100% 0)}
.fx-menu.open{display:flex}
.fx-menu nav{display:flex;flex-direction:column;gap:4px}
.fx-menu nav a{display:block;overflow:hidden;font-family:var(--fx-serif);font-weight:400;font-size:clamp(40px,11vw,64px);line-height:1.15;padding-bottom:.1em;color:inherit;text-decoration:none}
.fx-menu nav a span{display:inline-block}
.fx-menu nav a:hover{color:var(--fx-accent)}
.fx-menu-close{position:absolute;top:24px;right:16px;min-height:44px;padding:0 20px;background:none;border:1px solid currentColor;border-radius:999px;color:inherit;font:inherit;font-size:11px;letter-spacing:.3em;text-transform:uppercase;cursor:pointer}
.fx-menu-foot{margin-top:48px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--fx-accent)}


/* Tombol mengambang: kembali ke halaman pilih tema (tampil juga tanpa animasi) */
.theme-fab{position:fixed;right:24px;bottom:24px;z-index:9000;display:inline-flex;align-items:center;height:52px;padding:0 20px 0 17px;border-radius:999px;background:var(--fab-bg,var(--fx-bg));color:var(--fab-fg,var(--fx-fg));text-decoration:none;font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;box-shadow:0 14px 40px rgba(20,14,10,.22);transition:padding .6s cubic-bezier(.16,1,.3,1),box-shadow .4s}
.theme-fab:hover{box-shadow:0 18px 50px rgba(20,14,10,.3)}
.theme-fab:focus-visible{outline:2px solid var(--fx-accent);outline-offset:4px}
.theme-fab svg{width:18px;height:18px;flex:none;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.theme-fab:hover svg{transform:rotate(90deg)}
.theme-fab span{display:inline-block;max-width:160px;margin-left:12px;overflow:hidden;white-space:nowrap;transition:max-width .6s cubic-bezier(.16,1,.3,1),margin .6s cubic-bezier(.16,1,.3,1),opacity .4s}
.theme-fab.is-compact{padding:0 17px}
.theme-fab.is-compact span{max-width:0;margin-left:0;opacity:0}
.theme-fab.is-compact:hover{padding:0 20px 0 17px}
.theme-fab.is-compact:hover span{max-width:160px;margin-left:12px;opacity:1}
/* Di HP selalu ikon saja agar tidak menutupi konten; nama aksesibel tetap dari teks */
@media (max-width:560px){.theme-fab,.theme-fab.is-compact,.theme-fab.is-compact:hover{right:16px;bottom:16px;height:48px;padding:0 15px}.theme-fab span,.theme-fab.is-compact:hover span{max-width:0;margin-left:0;opacity:0}}