/* "We built four parts": a full-width dot field behind the section. Grey dots everywhere; each time a square of
   the logo fills, the dots in that direction from the logo turn yellow, brightest near the logo. Logo complete:
   the yellow spreads across the whole field. Pure CSS paint; dots.js only sets the logo centre and how far each square has filled. */
.ms .story.has-dfield{position:relative}
.ms .story.has-dfield>.wrap{position:relative;z-index:1}
.dwrap{position:absolute;inset:0;z-index:0;overflow:clip;pointer-events:none}
.dfield{--cx:30%;--cy:50%;--g:24px;position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  background-image:radial-gradient(circle,#d3d2ca 1.1px,transparent 1.6px);background-size:var(--g) var(--g);background-position:center;
  -webkit-mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent)}
.dfield i{position:absolute;inset:0;opacity:0;
  background-image:radial-gradient(circle,#ffcb05 1.7px,transparent 2.2px);background-size:var(--g) var(--g);background-position:center;
  -webkit-mask-image:radial-gradient(circle at var(--cx) var(--cy),#000 0,rgba(0,0,0,.9) 140px,transparent 720px);mask-image:radial-gradient(circle at var(--cx) var(--cy),#000 0,rgba(0,0,0,.9) 140px,transparent 720px)}
.dfield .d1{clip-path:polygon(0 0,var(--cx) 0,var(--cx) var(--cy),0 var(--cy))}
.dfield .d2{clip-path:polygon(var(--cx) 0,100% 0,100% var(--cy),var(--cx) var(--cy))}
.dfield .d3{clip-path:polygon(var(--cx) var(--cy),100% var(--cy),100% 100%,var(--cx) 100%)}
.dfield .d4{clip-path:polygon(0 var(--cy),var(--cx) var(--cy),var(--cx) 100%,0 100%)}
.dfield .d5{transition:opacity 1.6s cubic-bezier(.2,.75,.2,1);-webkit-mask-image:radial-gradient(circle at var(--cx) var(--cy),#000 0,rgba(0,0,0,.75) 360px,rgba(0,0,0,.25) 1400px);mask-image:radial-gradient(circle at var(--cx) var(--cy),#000 0,rgba(0,0,0,.75) 360px,rgba(0,0,0,.25) 1400px)}
.dfield .d1{opacity:var(--p1,0)}.dfield .d2{opacity:var(--p2,0)}.dfield .d3{opacity:var(--p3,0)}.dfield .d4{opacity:var(--p4,0)}
.dfield.full .d5{opacity:1}
/* keep the text readable: quarter-strength dots behind the text column (page colour at 75% over them), soft edges */
.dfield::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to right,transparent calc(var(--tl,200%) - 96px),rgba(245,245,242,.75) calc(var(--tl,200%) - 16px),rgba(245,245,242,.75) calc(var(--tr,200%) + 16px),transparent calc(var(--tr,200%) + 96px))}
@media (max-width:860px){.dfield{--g:20px;opacity:.55}.dfield::after{display:none}}
@media (prefers-reduced-motion:reduce){.dfield i{transition:none}}