/* ============================================================
   cover.css — the front.

   Two things happen here that a printed cover cannot do.

   ONE, the press. The sheet takes its registration marks, then the
   cyan plate lands off-register, then magenta, then black, and the
   three snap together. Then the type sets itself, letter by letter,
   into a composition that is already broken.

   TWO, the exit. The cover is pinned, and scrolling pulls it apart:
   every letter of the masthead leaves on its own vector, the picture
   crops in, the cover lines shear off sideways. You scroll the cover
   off rather than past.
   ============================================================ */

.cover{ position:relative; height:260vh; background:#fff }
.cover__pin{
  position:sticky; top:0; height:100vh; overflow:hidden;
  background:#fff; isolation:isolate;
}

/* ---------- plates ---------- */
.cover__art{ position:absolute; inset:0; z-index:1 }
.cover__art img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform-origin:52% 46%;
}
.cover__art .pl{ mix-blend-mode:multiply; opacity:0 }
.cover__art .pl-c{ filter:url(#cvC) }
.cover__art .pl-m{ filter:url(#cvM) }
.cover__art .pl-k{ opacity:0 }

/* the press run — each plate drops in, off-register, then everything registers */
.cover[data-press="1"] .pl-c{ opacity:.9; transform:translate(-5.5%, 3.5%) rotate(-1.4deg) }
.cover[data-press="2"] .pl-c{ opacity:.9; transform:translate(-5.5%, 3.5%) rotate(-1.4deg) }
.cover[data-press="2"] .pl-m{ opacity:.9; transform:translate(4.8%,-2.8%) rotate(1.1deg) }
.cover[data-press="3"] .pl-c{ opacity:.9; transform:translate(-5.5%, 3.5%) rotate(-1.4deg) }
.cover[data-press="3"] .pl-m{ opacity:.9; transform:translate(4.8%,-2.8%) rotate(1.1deg) }
.cover[data-press="3"] .pl-k{ opacity:1; transform:translate(2.2%, 1.6%) rotate(-.6deg) }
.cover[data-press="4"] .pl-c,
.cover[data-press="4"] .pl-m{ opacity:0; transform:none }
.cover[data-press="4"] .pl-k{ opacity:1; transform:none }
.cover__art .pl{ transition:opacity .28s steps(2), transform .5s cubic-bezier(.16,1,.3,1) }
.cover[data-press="4"] .pl-c,
.cover[data-press="4"] .pl-m{ transition:opacity .34s steps(3) .1s, transform .55s cubic-bezier(.16,1,.3,1) }

/* ---------- registration furniture ---------- */
.cvmark{ position:absolute; z-index:6; opacity:0; transition:opacity .2s steps(2) }
.cover[data-press]:not([data-press="0"]) .cvmark{ opacity:.85 }
.cvmark svg{ width:26px; height:26px; display:block }
.cvmark path{ stroke:#111; stroke-width:1; fill:none }
.cover[data-press="4"] .cvmark path{ stroke:#fff; mix-blend-mode:difference }

/* ---------- masthead ---------- */
.cover__mast{
  position:absolute; z-index:8; left:2.2vw; right:2.2vw; top:8vh; margin:0;
  font-family:var(--bungee); text-transform:uppercase; line-height:.74;
  /* the letters are individually scaled up to 1.34em, so the clamp has to leave
     headroom or the tall ones on the first line clip off the top of the sheet */
  font-size:clamp(2.8rem,16.5vw,14rem); letter-spacing:-.045em; color:#fff;
  mix-blend-mode:difference; pointer-events:none;
}
.cover__mast i{
  font-style:normal; display:inline-block; opacity:0;
  transform:translateY(.34em) rotate(var(--r0,0deg));
  transition:opacity .18s steps(2), transform .42s cubic-bezier(.2,1.5,.4,1);
}
.cover[data-set="true"] .cover__mast i{ opacity:1; transform:translateY(0) rotate(var(--r0,0deg)) }
.cover__mast .brk{ display:block }

/* ---------- ghost impressions under everything ---------- */
.cover__ghost{ position:absolute; inset:0; z-index:2; overflow:hidden; pointer-events:none; opacity:0;
  transition:opacity .5s }
.cover[data-set="true"] .cover__ghost{ opacity:1 }
.cover__ghost span{
  position:absolute; font-family:var(--anton); text-transform:uppercase; white-space:nowrap;
  color:#fff; mix-blend-mode:overlay; line-height:.7;
}

/* ---------- cover lines, dense and set solid ---------- */
.cvline{ position:absolute; z-index:9; margin:0; opacity:0; color:#fff;
  transition:opacity .3s steps(2), transform .5s cubic-bezier(.16,1,.3,1) }
.cover[data-set="true"] .cvline{ opacity:1 }
.cvsolid{
  font-family:var(--anton); text-transform:uppercase; line-height:.9;
  font-size:clamp(.85rem,2.9vw,2.3rem); letter-spacing:-.01em;
}
.cvsolid b{ font-weight:400 }
.cvsolid i{ font-style:normal; color:#E5261F }
.cvtiny{ font-family:var(--mono); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; line-height:1.7 }
.cvwonk{ font-family:var(--wonk); font-style:italic; font-variation-settings:"SOFT" 90,"WONK" 1,"opsz" 144;
  font-size:clamp(1.1rem,4vw,3rem); line-height:.98 }

/* straps that run off both trims */
.cvstrap{
  position:absolute; z-index:9; left:0; right:0; overflow:hidden;
  border-block:1px solid #fff; padding-block:.15rem; opacity:0;
  mix-blend-mode:difference; transition:opacity .3s steps(2);
}
.cover[data-set="true"] .cvstrap{ opacity:1 }
.cvstrap p{
  margin:0; white-space:nowrap; color:#fff;
  font-family:var(--anton); text-transform:uppercase;
  font-size:clamp(.9rem,3.2vw,2.2rem); line-height:1; margin-left:-4ch;
}

.cvbar{ position:absolute; z-index:9; display:flex; align-items:flex-end; gap:1.5px; height:38px; opacity:0 }
.cover[data-set="true"] .cvbar{ opacity:1; transition:opacity .3s steps(2) .3s }
.cvbar i{ width:2px; background:#fff }

/* the sticker */
.cvsticker{
  position:absolute; z-index:10; display:grid; place-items:center; text-align:center;
  width:clamp(78px,11vw,132px); aspect-ratio:1; border-radius:50%;
  background:#E5261F; color:#fff; transform:rotate(-14deg) scale(0);
  font-family:var(--mono); font-size:.52rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; line-height:1.4;
  transition:transform .4s cubic-bezier(.2,1.6,.4,1);
}
.cover[data-set="true"] .cvsticker{ transform:rotate(-14deg) scale(1) }

/* ---------- the scroll exit ---------- */
.cover__pin > *{ will-change:transform }
.cover__mast i{
  transform:translate3d(calc(var(--dx,0px) * var(--p,0)), calc(var(--dy,0px) * var(--p,0)), 0)
            rotate(calc(var(--rot,0deg) * var(--p,0)));
}
.cover[data-set="true"] .cover__mast i{
  transform:translate3d(calc(var(--dx,0px) * var(--p,0)), calc(var(--dy,0px) * var(--p,0)), 0)
            rotate(calc(var(--rot,0deg) * var(--p,0)));
}
.cover__art img{ transform:scale(calc(1 + .55 * var(--p,0))) }
.cvline{ transform:translate3d(calc(var(--ex,0px) * var(--p,0)), calc(var(--ey,0px) * var(--p,0)), 0) }
.cvstrap{ transform:translateX(calc(-28vw * var(--p,0))) }
.cvstrap--b{ transform:translateX(calc(28vw * var(--p,0))) }
.cvsticker{ transform:rotate(calc(-14deg + 220deg * var(--p,0))) scale(calc(1 - var(--p,0))) }
.cover__pin{ opacity:calc(1 - .92 * max(0, (var(--p,0) - .62)) / .38) }

@media (prefers-reduced-motion:reduce){
  .cover{ height:100vh }
  .cover__mast i, .cvline, .cvstrap, .cvsticker, .cover__art img{ transform:none !important }
  .cover__pin{ opacity:1 !important }
}
@media (max-width:700px){
  .cover{ height:200vh }
  .cvsolid{ font-size:clamp(.8rem,4.4vw,1.4rem) }
}