/*
  motion.css — Awwwards-style motion layer
  =========================================
  Adds four things on top of the existing design without touching it:
    1. Custom branded cursor (dot + lagging ring)
    2. Magnetic buttons ([data-magnetic])
    3. Word-by-word heading reveal (.split-text)
    4. Scroll-driven zoom/mask image reveal (.mask-reveal)

  Everything here is additive and degrades safely: touch devices keep
  the native cursor, and prefers-reduced-motion disables all of it.
*/

/* ---------- 1. Custom cursor (branded pointer icon) ---------- */
.cursor-pointer{
  position:fixed;
  top:0; left:0;
  width:40px; height:40px;
  pointer-events:none;
  z-index:9999;
  will-change:transform;
  opacity:1;
  transition: opacity .2s ease;
}
.cursor-pointer-inner{
  width:100%; height:100%;
  transform-origin: 12% 8%; /* roughly the arrow's tip, so scale/rotate pivot from there */
  transition: transform .18s cubic-bezier(.22,1,.36,1);
}
.cursor-pointer.is-hovering .cursor-pointer-inner{ transform: scale(1.18) rotate(-6deg); }
.cursor-pointer.is-pressing .cursor-pointer-inner{ transform: scale(.8); }
.cursor-pointer svg,
.cursor-pointer img{
  width:100%; height:100%; display:block;
  filter: drop-shadow(0 3px 6px rgba(43,23,16,.22));
  -webkit-user-drag:none;
  user-select:none;
}

body.has-custom-cursor,
body.has-custom-cursor a,
body.has-custom-cursor button,
body.has-custom-cursor input,
body.has-custom-cursor textarea{ cursor:none; }

@media (hover:none), (pointer:coarse){
  .cursor-pointer{ display:none !important; }
  body.has-custom-cursor,
  body.has-custom-cursor a,
  body.has-custom-cursor button{ cursor:auto; }
}

/* ---------- 2. Magnetic buttons ---------- */
[data-magnetic]{
  transition: transform .4s cubic-bezier(.22,1,.36,1);
  will-change: transform;
}
[data-magnetic] > *{ pointer-events:none; } /* let the wrapper own the pointer math */

/* ---------- 3. Split-text word reveal ---------- */
.split-text{ overflow:hidden; }
.split-text .split-line{
  display:block;
  overflow:hidden;
  padding-bottom:.08em;   /* keeps descenders (g, y, p) from clipping */
  margin-bottom:-.08em;
}
.split-text .split-word{
  display:inline-block;
  transform: translateY(112%) rotate(4deg);
  opacity:0;
  transition: transform .8s cubic-bezier(.22,1,.36,1),
              opacity .6s cubic-bezier(.22,1,.36,1);
  will-change: transform, opacity;
}
.split-text.in-view .split-word{
  transform: translateY(0) rotate(0deg);
  opacity:1;
}

/* ---------- 4. Mask / zoom-out image reveal ---------- */
.mask-reveal{
  overflow:hidden;
  display:block;
}
.mask-reveal img,
img.mask-reveal{
  clip-path: inset(0% 0% 0% 0%);
  transform: scale(1);
  transition: clip-path 1.15s cubic-bezier(.22,1,.36,1),
              transform 1.4s cubic-bezier(.22,1,.36,1);
}
.js-ready .mask-reveal:not(.in-view) img,
.js-ready img.mask-reveal:not(.in-view){
  clip-path: inset(0% 0% 100% 0%);
  transform: scale(1.22);
}

/* ---------- 5. Live coordinate HUD ---------- */
.hero-coords{
  position:absolute;
  top:24px; right:32px;
  z-index:3;
  display:flex; flex-direction:column; gap:2px;
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:11px; letter-spacing:.04em;
  color: var(--ink-soft, #6B6357);
  opacity:.65;
  pointer-events:none;
}
@media (max-width: 860px){ .hero-coords{ display:none; } }

/* ---------- 6. WebGL image ripple (three-image-distort.js) ---------- */
.gl-image{ position:relative; }
.gl-image .gl-canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  opacity:0;
  transition: opacity .35s ease;
  pointer-events:none; /* the wrapper itself owns hover/mousemove detection */
}
.gl-image:hover .gl-canvas{ opacity:1; }

@media (hover:none), (pointer:coarse){
  .gl-image .gl-canvas{ display:none !important; }
}

@media (prefers-reduced-motion: reduce){
  .cursor-pointer{ display:none !important; }
  body.has-custom-cursor, body.has-custom-cursor a, body.has-custom-cursor button{ cursor:auto; }
  [data-magnetic]{ transition:none !important; transform:none !important; }
  .split-text .split-word{ opacity:1 !important; transform:none !important; }
  .mask-reveal img, img.mask-reveal{ clip-path:none !important; transform:none !important; }
  .gl-image .gl-canvas{ display:none !important; }
}