/* ══ Brushive — pointer interactions ═══════════════════════════════
   Everything here is desktop-only and switches itself off for anyone
   who has asked for reduced motion. The page must look and work
   exactly the same with this file missing.                          */

/* ── magnetic buttons ──────────────────────────────────────────── */
.is-magnetic{will-change:transform}
.is-magnetic__inner{display:block;will-change:transform}
html.no-magnet .is-magnetic,
html.no-magnet .is-magnetic__inner{transform:none !important}

/* ── the labelled cursor over a project card ───────────────────── */
.cursors__label{position:absolute;top:50%;left:50%;display:flex;align-items:center;
  justify-content:center;width:11rem;height:11rem;margin:-5.5rem 0 0 -5.5rem;
  border-radius:50%;background:var(--gold,#b4a88f);color:#0b0b0b;
  font-family:var(--mono,ui-monospace,monospace);font-size:1.15rem;letter-spacing:.14em;
  text-transform:uppercase;text-align:center;line-height:1.3;padding:1rem;
  opacity:0;transform:scale(.4);pointer-events:none;
  transition:opacity .28s cubic-bezier(.23,1,.32,1),transform .38s cubic-bezier(.23,1,.32,1)}
html.show-cursor-label .cursors__label{opacity:1;transform:scale(1)}
/* the label speaks for itself — the eyes glyph would only crowd it */
html.show-cursor-label .cursors__eyes{opacity:0 !important}

/* ── card tilt ─────────────────────────────────────────────────── */
.workCard__imageWrap{transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.23,1,.32,1)}
.workCard.is-tilting .workCard__imageWrap{transition:transform .12s linear}

/* ── hero images leaning away from the pointer ─────────────────── */
.homeHeader__image{will-change:transform;
  transition:transform .9s cubic-bezier(.23,1,.32,1)}
.homeHeader__images.is-tracking .homeHeader__image{transition:transform .35s cubic-bezier(.23,1,.32,1)}

/* ── page transitions ──────────────────────────────────────────────
   Leaving a page fades to the site's own black rather than flashing
   white. The incoming page has its own loader, so only the exit is
   handled here.                                                     */
.pageFade{position:fixed;inset:0;z-index:9998;background:#000;opacity:0;
  pointer-events:none;visibility:hidden;
  transition:opacity .32s cubic-bezier(.645,.045,.355,1)}
html.is-leaving .pageFade{opacity:1;visibility:visible;pointer-events:auto}

/* ── text rising into view ─────────────────────────────────────────
   The site already reveals elements marked .anima; this extends the
   same gesture to the case study's body copy, which had none.       */
.js .reveal-line{opacity:0;transform:translateY(2.2rem);
  transition:opacity .85s cubic-bezier(.23,1,.32,1),transform .85s cubic-bezier(.23,1,.32,1)}
.js .reveal-line.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .js .reveal-line{opacity:1;transform:none;transition:none}
  .pageFade{display:none}
}