/* VTKAY shared motion layer.
   Loaded by the hand built homepage AND every generated page, so the whole site
   moves the same way. Everything animates transform/opacity/filter only, and the
   entire file is neutralised under prefers-reduced-motion at the bottom. */

:root{
  --m-ease:cubic-bezier(.16,.84,.36,1);
  --m-ease-out:cubic-bezier(.22,1,.36,1);
}

/* ── Kinetic type ─────────────────────────────────────────────────────────
   JS splits [data-split] headings into per word and per character spans. */
.js [data-split]{--d:0ms}
.js .kin-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.js .kin-c{
  display:inline-block;
  transform:translateY(102%) rotate(3deg);
  opacity:0;
  filter:blur(6px);
  transition:transform .95s var(--m-ease),opacity .8s var(--m-ease),filter .8s var(--m-ease);
  transition-delay:var(--d);
}
.js .in .kin-c,.js [data-split].in .kin-c{transform:none;opacity:1;filter:none}

/* Lines of body copy drift up as a block */
.js [data-lines]{opacity:0;transform:translateY(22px);
  transition:opacity 1s var(--m-ease),transform 1s var(--m-ease)}
.js [data-lines].in{opacity:1;transform:none}

/* A word you want to catch the eye: slow shimmer through the accent colours */
.shimmer{
  background:linear-gradient(100deg,var(--tan,#A9754F) 0%,var(--gold,#C79B6B) 32%,#F0D9BC 50%,var(--gold,#C79B6B) 68%,var(--tan,#A9754F) 100%);
  background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:m-shimmer 7s linear infinite;
}
@keyframes m-shimmer{to{background-position:-250% 0}}

/* ── Fluid ambience ───────────────────────────────────────────────────────
   Two slow morphing blobs behind the page. Cheap: no filters on scroll. */
.fluid-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;opacity:.5}
.fluid-bg i{position:absolute;display:block;border-radius:50%;filter:blur(80px)}
.fluid-bg i:nth-child(1){width:46vw;height:46vw;left:-10vw;top:-8vw;
  background:radial-gradient(circle,var(--tan,#A9754F),transparent 68%);
  animation:m-drift1 34s var(--m-ease) infinite alternate}
.fluid-bg i:nth-child(2){width:40vw;height:40vw;right:-12vw;top:38vh;
  background:radial-gradient(circle,var(--gold,#C79B6B),transparent 68%);
  animation:m-drift2 44s var(--m-ease) infinite alternate}
@keyframes m-drift1{to{transform:translate3d(14vw,10vh,0) scale(1.25)}}
@keyframes m-drift2{to{transform:translate3d(-12vw,-8vh,0) scale(1.18)}}

/* ── Scroll linked parallax ───────────────────────────────────────────────
   JS writes --sy (px offset) on each [data-parallax]. */
.js [data-parallax]{will-change:transform;transform:translate3d(0,var(--sy,0px),0)}
.js [data-parallax-img] img,.js [data-parallax-img] video{
  will-change:transform;transform:translate3d(0,var(--sy,0px),0) scale(1.12)}

/* ── Fluid image reveal ───────────────────────────────────────────────────*/
.js [data-mask]{clip-path:inset(0 0 100% 0);transition:clip-path 1.25s var(--m-ease-out)}
.js [data-mask].in{clip-path:inset(0 0 0 0)}

/* ── Magnetic buttons ─────────────────────────────────────────────────────*/
.js .mag{will-change:transform;transition:transform .45s var(--m-ease)}
.js .mag.pull{transition:transform .12s linear}

/* ── Fluid section edges ──────────────────────────────────────────────────*/
.js [data-rise]{opacity:0;transform:translateY(34px) scale(.994);
  transition:opacity 1s var(--m-ease),transform 1.1s var(--m-ease)}
.js [data-rise].in{opacity:1;transform:none}

/* ── Scroll progress hairline ─────────────────────────────────────────────*/
.m-prog{position:fixed;top:0;left:0;height:2px;z-index:200;width:100%;
  transform:scaleX(var(--p,0));transform-origin:0 50%;
  background:linear-gradient(90deg,var(--tan,#A9754F),var(--gold,#C79B6B));
  pointer-events:none}

@media(prefers-reduced-motion:reduce){
  .js .kin-c{transform:none!important;opacity:1!important;filter:none!important;transition:none!important}
  .js [data-lines],.js [data-rise]{opacity:1!important;transform:none!important;transition:none!important}
  .js [data-mask]{clip-path:none!important;transition:none!important}
  .js [data-parallax],.js [data-parallax-img] img,.js [data-parallax-img] video{transform:none!important}
  .fluid-bg i{animation:none}
  .shimmer{animation:none;background:none;-webkit-background-clip:initial;background-clip:initial;color:var(--tan,#A9754F)}
  .m-prog{display:none}
}