:root{
  --amoeba-cursor-size:84px;
  --amoeba-cursor-size-scroll:71px;
  --amoeba-cursor-white:#fff;
  --amoeba-cursor-ink:#10121a;
  --amoeba-cursor-ease:cubic-bezier(.23,1,.32,1);
}

body.oj-cursor-view-scroll{
  --amoeba-cursor-size:var(--amoeba-cursor-size-scroll);
}

.organism-cursor-trail,
.organism-cursor__core{
  position:relative;
  display:block;
  overflow:hidden;
  border-radius:43% 57% 52% 48% / 57% 44% 56% 43%;
  background:
    radial-gradient(circle at 30% 23%,rgba(255,255,255,1) 0 9%,rgba(255,255,255,.5) 10%,transparent 29%),
    radial-gradient(circle at 36% 30%,#fff 0 18%,#f8f7f3 49%,#d4d5cf 100%);
  box-shadow:0 1px 5px rgba(16,18,26,.32),inset -6px -8px 15px rgba(16,18,26,.11);
}

.organism-cursor-trail{
  position:fixed;
  top:0;
  left:0;
  z-index:9499;
  width:var(--amoeba-cursor-size);
  height:var(--amoeba-cursor-size);
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transform:translate3d(-9999px,-9999px,0) translate(-50%,-50%) scale(.38);
  transform-origin:center center;
  will-change:transform;
  transition:opacity .3s,visibility .3s step-end;
}

.organism-cursor-trail::before{
  content:"";
  position:absolute;
  z-index:1;
  top:18%;
  left:23%;
  width:28%;
  height:15%;
  border-radius:50%;
  background:rgba(255,255,255,.88);
  filter:blur(.7px);
  rotate:-24deg;
}

.organism-cursor{
  position:fixed;
  top:0;
  left:0;
  z-index:9500;
  width:var(--amoeba-cursor-size);
  height:var(--amoeba-cursor-size);
  margin:calc(var(--amoeba-cursor-size) / -2) 0 0 calc(var(--amoeba-cursor-size) / -2);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  isolation:isolate;
  will-change:transform;
  transition:opacity .3s,visibility .3s step-end;
}

body.oj-cursor-live .organism-cursor-trail,
body.oj-cursor-live .organism-cursor{
  opacity:1;
  visibility:visible;
  transition:opacity .3s,visibility 0s;
}

.organism-cursor__core{
  z-index:1;
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  color:transparent;
  font-style:normal;
  font-size:10px;
  font-weight:640;
  letter-spacing:.22em;
  text-transform:uppercase;
  scale:.11;
  transition:scale .35s var(--amoeba-cursor-ease),color .25s;
}

.organism-cursor__core span{position:relative;z-index:2}

.organism-cursor::after{
  content:"";
  position:absolute;
  z-index:3;
  top:50%;
  left:50%;
  width:11px;
  height:15px;
  border-radius:0;
  background:var(--amoeba-cursor-ink);
  clip-path:polygon(0 0,100% 62%,42% 72%,0 100%);
  box-shadow:none;
  translate:-50% -50%;
  transition:scale .3s var(--amoeba-cursor-ease),translate .3s var(--amoeba-cursor-ease);
}

body.oj-cursor-view .organism-cursor__core{scale:1;color:var(--amoeba-cursor-ink)}
body.oj-cursor-view-scroll .organism-cursor__core{
  font-size:9px;
  letter-spacing:.16em;
  text-transform:lowercase;
}
/* When the label expands over portfolio media, hide the centre dot so it
   doesn't sit on top of the text. */
body.oj-cursor-view .organism-cursor::after,
body.oj-cursor-view-scroll .organism-cursor::after{scale:0}
body.oj-pointer-mouse,
body.oj-pointer-mouse *{cursor:none!important}
body.oj-pointer-mouse.oj-cursor-link,
body.oj-pointer-mouse.oj-cursor-link *{cursor:pointer!important}
body.oj-pointer-mouse.oj-cursor-link .organism-cursor,
body.oj-pointer-mouse.oj-cursor-link .organism-cursor-trail{
  opacity:0;
  visibility:hidden;
  transition:opacity .15s,visibility 0s step-end .15s;
}
body.oj-pointer-mouse.oj-cursor-native,
body.oj-pointer-mouse.oj-cursor-native *{cursor:auto!important}
body.oj-pointer-mouse.oj-cursor-native .organism-cursor,
body.oj-pointer-mouse.oj-cursor-native .organism-cursor-trail{
  opacity:0;
  visibility:hidden;
  transition:opacity .15s,visibility 0s step-end .15s;
}

/* ---- Open menu: blob behind the link text, cursor in front ----------------
   The home page builds this out of the raymarched organism, which nav-menu.css
   parks at z-index 801 — between the frosted band (800) and the header (802) —
   and organism-journey.js swells to 1.5x while a menu link is hovered. Pages
   without the journey use the cursor's trail blob for the same three-layer
   read: blob behind, link text on top of it, cursor above both. The blob is
   dropped to the same 801 slot and, unlike everywhere else on the site, stays
   put on a link instead of fading out (amoeba-cursor.js grows it there). */
body.nav-menu-organism-front .organism-cursor-trail{
  z-index:801;
}
body.oj-pointer-mouse.nav-menu-organism-front.oj-cursor-link .organism-cursor-trail{
  opacity:1;
  visibility:visible;
  transition:opacity .2s,visibility 0s;
}

@media(prefers-reduced-motion:no-preference){
  .organism-cursor__core{animation:amoeba-cursor-morph 4.8s ease-in-out infinite alternate}
  .organism-cursor-trail{animation:amoeba-trail-morph 4.8s ease-in-out infinite alternate}
}

@keyframes amoeba-cursor-morph{
  0%{border-radius:43% 57% 52% 48% / 57% 44% 56% 43%;rotate:-2deg}
  48%{border-radius:55% 45% 43% 57% / 46% 59% 41% 54%;rotate:2deg}
  100%{border-radius:47% 53% 59% 41% / 55% 42% 58% 45%;rotate:-1deg}
}

/* Same wobble, no rotate. `rotate` is an independent transform property, so it
   composes OUTSIDE the `transform` shorthand — it rotates the element's whole
   translation vector, not just the blob. .organism-cursor gets away with it
   because it translates the wrapper and morphs an inner __core; the trail is a
   single element carrying both, so a 2deg tilt of a ~900px offset threw it
   ~30px off the pointer. Only the cursor-following blob needs this variant. */
@keyframes amoeba-trail-morph{
  0%{border-radius:43% 57% 52% 48% / 57% 44% 56% 43%}
  48%{border-radius:55% 45% 43% 57% / 46% 59% 41% 54%}
  100%{border-radius:47% 53% 59% 41% / 55% 42% 58% 45%}
}

@media(prefers-reduced-motion:reduce),(hover:none),(pointer:coarse){
  .organism-cursor-trail,
  .organism-cursor{display:none!important}
}

html.cms-preview-mode .organism-cursor-trail,
html.cms-preview-mode .organism-cursor{display:none!important}