/*
  "A design coming together" for the graphic design page.

  An identity assembling itself on an artboard: the mark builds out of three
  shapes, the palette drops in, the type scale sets, then the whole lot gets
  applied to a card. Four steps, looped, with the step list beside it acting as
  a caption track rather than decoration.

  Everything is DOM and CSS transitions driven by one data-step attribute, so
  there is no keyframe timeline to keep in sync and no library. Reduced motion
  jumps to the finished sheet and stops.

  Author: Ethan Lowery | Randcore Development Pty Ltd
*/
.dz{display:grid;gap:30px;align-items:center}

/* the caption track */
.dz__steps{display:grid;gap:2px;margin-top:26px}
.dz__steps li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline;
              padding:14px 0;border-top:1px solid rgba(255,255,255,.12);
              transition:opacity .35s ease}
.dz__steps li:last-child{border-bottom:1px solid rgba(255,255,255,.12)}
.dz__steps li[data-on="false"]{opacity:.34}
.dz__steps em{font-style:normal;font-family:'Geist Mono',monospace;font-size:10.5px;
              letter-spacing:.12em;color:var(--teal)}
.dz__steps b{font-size:15.5px;color:#fff;letter-spacing:-.01em}
.dz__steps span{display:block;margin-top:3px;font-size:13.5px;font-weight:400;color:#a9c0d0}

.dz-ctl{display:inline-flex;align-items:center;gap:9px;margin-top:22px;min-height:44px;
        padding:10px 18px;border-radius:var(--r-pill);border:1.6px solid rgba(255,255,255,.26);
        font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:.08em;
        text-transform:uppercase;color:#cfe0ea}
.dz-ctl:hover{border-color:#fff;color:#fff}
.dz-ctl svg{width:14px;height:14px}

/* the artboard */
.dz__stage{position:relative;width:100%;max-width:520px;margin:0 auto;aspect-ratio:4/3.1;
           border-radius:var(--r-panel);background:#fbfbfb;box-shadow:0 26px 60px rgba(0,0,0,.42);
           overflow:hidden;color:var(--ink)}
.dz__grid{position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(rgba(2,30,50,.16) 1px, transparent 1px);
  background-size:16px 16px}
/* the guide that flashes when a piece snaps */
.dz__guide{position:absolute;left:0;right:0;height:1px;background:var(--teal);opacity:0;
           transition:opacity .35s ease}
.dz__stage[data-snap="true"] .dz__guide{opacity:.65}

.dz__art{position:relative;height:100%;display:grid;grid-template-columns:1.1fr .9fr;
         grid-template-rows:auto auto 1fr;gap:14px;padding:20px}

/* every piece starts off the board and lands when its step comes up */
.pc{opacity:0;transition:opacity .5s ease, transform .62s cubic-bezier(.2,.9,.3,1.06)}
.pc.in{opacity:1;transform:none}

/* 01 the mark, three shapes that combine */
.dz__id{grid-column:1;display:flex;align-items:center;gap:13px}
.dz__mark{position:relative;width:62px;height:62px;flex:none}
.dz__mark i{position:absolute;inset:0;border-radius:4px}
.dz__mark .m1{background:var(--band);transform:translate(-40px,26px) rotate(-24deg)}
.dz__mark .m2{background:var(--teal);clip-path:polygon(0 0,100% 0,100% 100%);
              transform:translate(38px,-30px) rotate(18deg)}
.dz__mark .m3{border:2.5px solid var(--band);border-radius:50%;inset:14px;transform:scale(.3)}
.dz__mark i.in{transform:none}
.dz__word{display:block;height:13px;width:104px;border-radius:3px;background:var(--band);
          transform:translateX(-22px)}
.dz__sub{display:block;margin-top:6px;height:7px;width:66px;border-radius:3px;
         background:rgba(2,30,50,.28);transform:translateX(-22px)}

/* 02 palette */
.dz__pal{grid-column:1;display:flex;gap:8px}
.dz__pal i{flex:1;height:44px;border-radius:8px;transform:translateY(26px)}
.dz__pal i:nth-child(1){background:#021e32}
.dz__pal i:nth-child(2){background:#21c9d0}
.dz__pal i:nth-child(3){background:#035c70}
.dz__pal i:nth-child(4){background:#e4e4e4}
.dz__pal i:nth-child(5){background:#f5f5f5;box-shadow:inset 0 0 0 1px #e0e0e0}

/* 03 type */
.dz__type{grid-column:2;grid-row:1/3;background:#fff;border-radius:12px;padding:16px;
          box-shadow:0 8px 22px rgba(2,30,50,.09);transform:translateX(34px);
          display:flex;flex-direction:column;gap:9px}
.dz__aa{font-size:44px;font-weight:800;letter-spacing:-.04em;line-height:.9}
.dz__type small{font-family:'Geist Mono',monospace;font-size:9px;letter-spacing:.12em;
                text-transform:uppercase;color:var(--body)}
.dz__type u{display:block;text-decoration:none;height:6px;border-radius:3px;
            background:rgba(2,30,50,.16)}
.dz__type u:nth-of-type(2){width:82%}
.dz__type u:nth-of-type(3){width:64%}

/* 04 applied */
.dz__card{grid-column:1/-1;align-self:end;background:var(--band);border-radius:12px;
          padding:15px 16px;display:flex;align-items:center;gap:13px;transform:translateY(38px)}
.dz__card .cm{width:30px;height:30px;flex:none;border-radius:5px;background:var(--teal)}
.dz__card u{display:block;text-decoration:none;height:6px;border-radius:3px;background:#fff;width:88px}
.dz__card u+u{margin-top:6px;width:56px;background:rgba(255,255,255,.42)}
.dz__card .pill{margin-left:auto;background:var(--teal);color:var(--band);border-radius:100px;
                padding:7px 14px;font-size:10.5px;font-weight:700;letter-spacing:.06em;
                text-transform:uppercase;white-space:nowrap}

/* the cursor that does the work */
.dz__cur{position:absolute;top:0;left:0;width:17px;height:17px;pointer-events:none;
         transition:transform .62s cubic-bezier(.4,.05,.2,1);z-index:3;opacity:0}
.dz__stage[data-run="true"] .dz__cur{opacity:1}
.dz__cur svg{width:100%;height:100%;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}

@media (min-width:960px){
  .dz{grid-template-columns:1fr 1.05fr;gap:56px}
  .dz__stage{margin:0}
  .dz__art{padding:26px;gap:18px}
  .dz__mark{width:72px;height:72px}
  .dz__aa{font-size:54px}
}