/* ============================================================
   ggw · shared motion layer (Lando-grade smooth UX)
   Loaded on every page. Pure enhancement — degrades to a
   perfectly usable static site if JS/Lenis/GSAP are absent.
   ============================================================ */

/* ---- Lenis smooth scroll ---- */
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:hidden}

/* ---- Film grain (cinematic texture) ---- */
.grain{position:fixed;inset:-120% 0 0 0;width:100%;height:340%;pointer-events:none;z-index:2000;opacity:.04;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:170px 170px;will-change:transform;animation:grainshift 7s steps(6) infinite}
@keyframes grainshift{
  0%{transform:translate(0,0)}10%{transform:translate(-4%,-4%)}20%{transform:translate(-8%,2%)}
  30%{transform:translate(2%,-8%)}40%{transform:translate(-2%,6%)}50%{transform:translate(-8%,4%)}
  60%{transform:translate(6%,0)}70%{transform:translate(0,6%)}80%{transform:translate(2%,8%)}
  90%{transform:translate(-4%,2%)}100%{transform:translate(0,0)}}

/* ---- Custom cursor (desktop, fine pointer only) ---- */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;border-radius:50%;pointer-events:none;z-index:3000;
  transform:translate(-50%,-50%);will-change:transform;opacity:0;transition:opacity .3s ease}
.cursor-dot{width:7px;height:7px;background:#FF5A36;mix-blend-mode:normal}
.cursor-ring{width:34px;height:34px;border:1.5px solid rgba(255,90,54,.55);
  transition:width .28s cubic-bezier(.2,.7,.2,1),height .28s cubic-bezier(.2,.7,.2,1),
  background .28s ease,border-color .28s ease,opacity .3s ease}
body.cursor-on .cursor-dot,body.cursor-on .cursor-ring{opacity:1}
body.cursor-on.cursor-hot .cursor-ring{width:54px;height:54px;background:rgba(255,90,54,.10);border-color:rgba(255,90,54,.8)}
body.cursor-on.cursor-press .cursor-ring{width:26px;height:26px}
@media (hover:hover) and (pointer:fine){
  body.cursor-on{cursor:none}
  /* keep usable cursors on form fields so the caret never disappears */
  body.cursor-on input[type="text"],body.cursor-on input[type="email"],
  body.cursor-on input:not([type]),body.cursor-on textarea{cursor:text}
  body.cursor-on select,body.cursor-on input[type="checkbox"]{cursor:pointer}
}
@media (hover:none),(pointer:coarse){.cursor-dot,.cursor-ring{display:none}}

/* ---- Magnetic targets ---- */
[data-magnetic]{will-change:transform}

/* ---- Generic parallax / mask reveal hooks (used by motion.js) ---- */
[data-parallax]{will-change:transform}
html.js [data-mask]{clip-path:inset(0 0 100% 0);opacity:0}
html.js [data-mask].in{clip-path:inset(0 0 0% 0);opacity:1;
  transition:clip-path 1s cubic-bezier(.2,.7,.2,1),opacity 1s cubic-bezier(.2,.7,.2,1)}

/* ---- Line-mask reveal for split headings (index hero) ----
   padding + negative margin give Vietnamese stacked diacritics
   (ế, ầ, ụ, ợ) breathing room so overflow:hidden never clips them. */
.line-wrap{display:block;overflow:hidden;padding:.16em .05em;margin:-.16em -.05em}
.line-inner{display:block;transition:transform .95s cubic-bezier(.16,1,.3,1)}
html.js .line-inner{transform:translateY(115%)}
html.js .line-wrap.in .line-inner{transform:translateY(0)}

/* ---- Buttery anchor focus + selection polish ---- */
::selection{background:var(--accent,#FF5A36);color:#fff}
:focus-visible{outline:2px solid var(--accent,#FF5A36);outline-offset:3px;border-radius:4px}

/* ---- Respect reduced motion: kill the whole layer ---- */
@media (prefers-reduced-motion:reduce){
  .grain{display:none}
  .cursor-dot,.cursor-ring{display:none !important}
  .line-inner{transform:none !important}
  html.js [data-mask]{clip-path:none;opacity:1}
  [data-parallax]{transform:none !important}
}