:root { --tracking-sm: 0.2em; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', system-ui, sans-serif; background: #000; overflow-x: hidden; }
.font-mono, code { font-family: 'JetBrains Mono', monospace !important; }
::selection { background: #fff; color: #000; }

/* cursor */
#cursor { transition: transform .12s ease-out, opacity .3s; will-change: transform; }
@media (hover: none) { #cursor, #cursor-arrow { display: none; } }

/* pillar text animation */
#pillar-text { transition: opacity .35s ease, filter .35s ease; }
#pillar-text.line-out { opacity: 0; filter: blur(10px); }
#pillar-text .w-in { display: inline-block; margin-right: .3em; animation: word-in .55s cubic-bezier(.2,.7,.2,1) both; }
#pillar-text .w-in:last-child { margin-right: 0; }
@keyframes word-in { from { opacity: 0; transform: translateX(28px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

/* reveal */
.reveal { opacity: 0; transform: translateY(36px); }

/* tilt */
[data-tilt] { transform-style: preserve-3d; will-change: transform; }

/* scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #555; }

canvas { display: block; }

/* hero intro (CSS agar tetap jalan walau tab background) */
@keyframes rise-in { from { opacity: 0; transform: translateY(-70px); } to { opacity: 1; transform: none; } }
@keyframes rise-in-up { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
#site-header { animation: rise-in 1s cubic-bezier(.2,.7,.2,1) .2s both; }
#hero-logo { animation: rise-in-up 1s ease .35s both; }

/* clients marquee */
#clients-track { animation: clients-marquee 32s linear infinite; }
#clients-strip:hover #clients-track { animation-play-state: paused; }
@keyframes clients-marquee { to { transform: translateX(-50%); } }
.client-logo { opacity: .35; filter: grayscale(1) brightness(.75); transition: opacity .25s ease, filter .25s ease, transform .25s ease; will-change: opacity, filter, transform; }
@media (prefers-reduced-motion: reduce) {
  #clients-track { animation: none; }
  #clients-strip { overflow-x: auto; }
}