@media (pointer:fine) and (prefers-reduced-motion:no-preference) {
  html.has-aperture-cursor,
  html.has-aperture-cursor a,
  html.has-aperture-cursor button { cursor:none }
  html.has-aperture-cursor input,
  html.has-aperture-cursor textarea,
  html.has-aperture-cursor select { cursor:auto }
}

.aperture-cursor {
  --cursor-size:30px;
  position:fixed;
  z-index:1000;
  left:0;
  top:0;
  width:var(--cursor-size);
  height:var(--cursor-size);
  pointer-events:none;
  opacity:0;
  transform:translate(-50%,-50%);
  transition:width .42s cubic-bezier(.16,1,.3,1),height .42s cubic-bezier(.16,1,.3,1),opacity .2s;
  mix-blend-mode:difference;
}

.aperture-cursor.is-visible{opacity:1}
.aperture-cursor.is-active{--cursor-size:88px}

.aperture-ring,
.aperture-blades {
  position:absolute;
  inset:0;
  border-radius:50%;
}

.aperture-ring {
  border:1px solid #fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
}

.aperture-blades {
  inset:4px;
  background:repeating-conic-gradient(from 15deg,#fff 0deg 38deg,transparent 38deg 60deg);
  -webkit-mask:radial-gradient(circle,transparent 0 25%,#000 27% 100%);
  mask:radial-gradient(circle,transparent 0 25%,#000 27% 100%);
  opacity:.72;
  transform:rotate(0deg);
  transition:transform .55s cubic-bezier(.16,1,.3,1),opacity .3s;
}

.aperture-cursor.is-active .aperture-blades{transform:rotate(28deg);opacity:.28}
.aperture-cursor.is-shutter .aperture-blades{transform:rotate(88deg) scale(.32);opacity:1;transition-duration:.16s}

.aperture-label {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#fff;
  font:400 9px/1 "DM Mono",monospace;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:0;
  transform:scale(.72);
  transition:opacity .25s,transform .42s cubic-bezier(.16,1,.3,1);
}

.aperture-cursor.is-active .aperture-label{opacity:1;transform:scale(1)}

@media (pointer:coarse), (prefers-reduced-motion:reduce) {
  .aperture-cursor{display:none}
}