/* Mass & Grass — stickers: a sticker is painted, cut and peeled; then tried on real things */

/* ---------- 1. born: painted, cut, peeled ---------- */
.born{padding-block:clamp(28px,5vw,64px) clamp(20px,4vw,48px)}
.born-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(24px,5vw,70px);align-items:center}
.born-copy{display:grid;gap:18px;align-content:start}
.born-copy h1{font-size:var(--fs-h1)}
.born-copy h1 em{font-style:normal}
.born-acts{display:flex;gap:12px;flex-wrap:wrap}
.born-stage{position:relative;display:grid;justify-items:center;gap:14px}
.born-paper{position:relative;width:min(100%,520px);aspect-ratio:1;background:var(--sheet);border-radius:2px;
  box-shadow:0 30px 60px -34px rgba(60,36,16,.45),0 2px 6px rgba(60,36,16,.06);transform:rotate(-1.2deg)}
.born-paper::before{content:"";position:absolute;inset:-6px;z-index:-1;background:var(--sheet);border-radius:2px;filter:url(#deckle)}
.born-paper::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:6px;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .36  0 0 0 0 .26  0 0 0 .12 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.born-paper canvas{position:absolute;inset:0;width:100%;height:100%;border-radius:6px}
.born-stk{position:absolute;z-index:2;left:50%;top:50%;opacity:0;pointer-events:none;
  transform:translate(-50%,-50%);transform-origin:50% 50%;transition:transform 1.1s cubic-bezier(.2,.9,.25,1.15),filter 1.1s ease,opacity .2s}
.born-stk img{pointer-events:none;display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
.born-stk.up{opacity:1;pointer-events:auto;cursor:grab;touch-action:none;
  transform:translate(-50%,-50%) translate3d(var(--tx,0px),calc(var(--ty,0px) - 16px),0) rotate(-5deg) scale(1.07) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  filter:drop-shadow(0 26px 26px rgba(40,26,12,.28)) drop-shadow(0 4px 6px rgba(40,26,12,.14))}
.born-stk.flat{opacity:1;filter:none}
.born-name{font-family:var(--f-disp);font-weight:300;font-size:1.15rem;color:var(--ink-2);min-height:1.9em;transition:opacity .4s}

/* glossy vinyl: a band of light that follows the pointer, clipped to the sticker's shape */
.sheen{position:absolute;inset:0;pointer-events:none;opacity:.0;transition:opacity .4s;
  -webkit-mask:var(--m) center/100% 100% no-repeat;mask:var(--m) center/100% 100% no-repeat;
  background:linear-gradient(115deg,transparent calc(var(--sx,30%) - 22%),rgba(255,255,255,.62) var(--sx,30%),rgba(255,236,214,.25) calc(var(--sx,30%) + 6%),transparent calc(var(--sx,30%) + 20%));
  mix-blend-mode:soft-light}
.born-stk.up .sheen,.stk-card:hover .sheen,.stk-card:focus-visible .sheen{opacity:1}
body.matte .sheen{display:none}

/* ---------- 2. try: the sheet and the desk ---------- */
.try-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(20px,4vw,56px);align-items:start}
.sheet-wrap{position:sticky;top:96px;display:grid;gap:10px;justify-items:center}
.kiss{position:relative;width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(6px,1.2vw,14px);
  padding:clamp(14px,2.2vw,26px);background:var(--sheet);border-radius:2px;box-shadow:var(--lift);touch-action:pan-y}
.kiss::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:2px;opacity:.45;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .36  0 0 0 0 .26  0 0 0 .1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.sheet-lbl{font-size:.8rem;color:var(--ink-3)}
.slot{position:relative;min-width:0;aspect-ratio:1;display:grid;place-items:center;cursor:grab;touch-action:none;perspective:600px;border:0;background:none;padding:0}
.slot:focus-visible{outline:1.5px solid var(--ink);outline-offset:2px}
/* the kiss-cut left in the backing paper */
.slot .cut{position:absolute;inset:10%;width:80%;height:80%;object-fit:contain;filter:brightness(0) opacity(.07) blur(.3px);pointer-events:none}
.slot .peel{position:relative;width:80%;height:80%;display:grid;place-items:center;transform-origin:15% 90%;
  transition:transform .45s cubic-bezier(.2,.8,.25,1.2),filter .45s ease}
.slot .peel img{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain;max-width:none;max-height:none;pointer-events:none;user-select:none;-webkit-user-drag:none}
.slot:hover .peel,.slot:focus-visible .peel{transform:rotateX(14deg) rotateY(-16deg) translate3d(2px,-6px,18px) rotate(-3deg);
  filter:drop-shadow(-4px 12px 10px rgba(40,26,12,.25))}
.slot.gone .peel{opacity:0;transform:scale(.6)}
.slot.back .peel{animation:regrow .5s .1s both cubic-bezier(.2,.9,.3,1.3)}
@keyframes regrow{from{opacity:0;transform:scale(.7)}}

.desk-wrap{display:grid;gap:14px}
.tabs{display:flex;gap:6px 24px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.tabs button{display:inline-flex;align-items:center;gap:6px;padding:6px 0 9px;margin-bottom:-1px;border:0;border-bottom:1px solid transparent;border-radius:0;background:none;
  cursor:pointer;font-size:.92rem;color:var(--ink-3);transition:color .2s,border-color .2s}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected="true"]{color:var(--ink);border-color:var(--ink)}
.tabs button b{font-weight:400;font-size:.72rem;color:var(--ink-3)}
.tabs button b:empty{display:none}
.desk{position:relative;display:grid;place-items:center;min-height:clamp(340px,42vw,560px);padding:clamp(20px,4vw,50px);overflow:hidden}
.desk.over{box-shadow:inset 0 0 0 1px var(--line-2)}
.obj{position:relative;max-width:100%;transition:opacity .35s ease,transform .5s cubic-bezier(.2,.8,.25,1)}
.obj.swap{opacity:0;transform:translateY(10px) scale(.98)}
.obj-img{display:block;width:100%;height:100%;user-select:none;-webkit-user-drag:none;
  filter:drop-shadow(0 26px 30px rgba(40,26,12,.22)) drop-shadow(0 3px 5px rgba(40,26,12,.1))}
/* stickers live inside the object's silhouette, so an edge that overhangs is simply cut off */
.obj-stk,.obj-shade{position:absolute;inset:0;-webkit-mask:var(--om) center/100% 100% no-repeat;mask:var(--om) center/100% 100% no-repeat}
.obj-shade{pointer-events:none;mix-blend-mode:multiply;opacity:0}
.obj-shade.cylinder{opacity:1;background:linear-gradient(90deg,rgba(40,30,20,.34),rgba(40,30,20,.06) 18%,rgba(255,255,255,0) 34%,rgba(255,255,255,0) 58%,rgba(40,30,20,.1) 78%,rgba(40,30,20,.38))}
.obj-shade.cylinder::after{content:"";position:absolute;inset:0;mix-blend-mode:screen;
  background:linear-gradient(90deg,transparent 22%,rgba(255,255,255,.34) 30%,transparent 40%)}
.placed{position:absolute;touch-action:none;cursor:grab;transform:translate(-50%,-50%) rotate(var(--r,0deg));transform-origin:50% 50%}
.placed img{display:block;width:100%;height:auto;pointer-events:none;user-select:none;-webkit-user-drag:none;
  filter:drop-shadow(0 1px 1.2px rgba(30,20,10,.28))}
.placed.slap{animation:slap .5s cubic-bezier(.2,.9,.25,1)}
@keyframes slap{0%{transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(1.14);filter:drop-shadow(0 18px 16px rgba(30,20,10,.3))}
  60%{transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(.985)}100%{transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(1)}}
.placed.sel{outline:1px dashed var(--ink-2);outline-offset:4px}
.placed.drag{cursor:grabbing}
.desk-hint{position:absolute;bottom:10px;left:50%;translate:-50% 0;white-space:nowrap;font-size:.8rem;color:var(--ink-3);pointer-events:none;transition:opacity .4s}
.desk-hint:empty{display:none}
.desk-hint.gone{opacity:0}
.tools{position:absolute;top:14px;inset-inline-end:14px;display:flex;gap:2px;padding:4px;border-radius:var(--radius);background:var(--sheet);box-shadow:var(--lift)}
.tools[hidden]{display:none}
.tools button{width:34px;height:34px;border-radius:2px;border:0;background:transparent;cursor:pointer;font-size:1rem;color:var(--ink-2)}
.tools button:hover{background:var(--paper-3);color:var(--ink)}
.desk-acts{display:flex;gap:10px;flex-wrap:wrap}
#orderUsed[disabled]{opacity:.5;cursor:default;transform:none;box-shadow:none}
.digital{margin:0;font-size:.86rem;color:var(--ink-3)}

/* the sticker in your hand while you drag it */
.fly{position:fixed;left:0;top:0;z-index:80;pointer-events:none;display:none;transform-origin:50% 50%;will-change:transform}
.fly.on{display:block}
.fly img{display:block;width:100%;height:auto;filter:drop-shadow(0 22px 22px rgba(30,20,10,.3)) drop-shadow(0 4px 6px rgba(30,20,10,.14))}

/* ---------- 3. the collection ---------- */
.all-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.all-head .sec-head{margin-bottom:0}
.finish{display:inline-flex;gap:20px;margin-bottom:6px}
.finish button{padding:4px 0 6px;border:0;border-bottom:1px solid transparent;border-radius:0;background:none;cursor:pointer;font-size:.9rem;color:var(--ink-3)}
.finish button:hover{color:var(--ink)}
.finish button[aria-checked="true"]{color:var(--ink);border-color:var(--ink)}
.stk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,180px),1fr));gap:clamp(24px,3vw,40px) clamp(14px,2.4vw,28px);margin-top:clamp(24px,3vw,40px)}
.stk-card{position:relative;display:grid;gap:8px;perspective:700px}
.stk-art{position:relative;aspect-ratio:1;display:grid;place-items:center}
.stk-tilt{position:relative;max-width:84%;display:grid;place-items:center;transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);transition:transform .5s cubic-bezier(.2,.8,.25,1),filter .4s;
  filter:drop-shadow(0 8px 10px rgba(40,26,12,.16))}
.stk-card:hover .stk-tilt{transition:transform .08s linear,filter .4s;filter:drop-shadow(0 20px 20px rgba(40,26,12,.24))}
.stk-tilt img{display:block;max-width:100%;max-height:clamp(120px,15vw,190px);width:auto;height:auto;user-select:none;-webkit-user-drag:none}
body.matte .stk-tilt img{filter:saturate(.92) contrast(.96)}
body.matte .stk-tilt::after{content:"";position:absolute;inset:0;opacity:.35;mix-blend-mode:multiply;-webkit-mask:var(--m) center/100% 100% no-repeat;mask:var(--m) center/100% 100% no-repeat;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .4  0 0 0 0 .32  0 0 0 0 .24  0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.stk-card b{font-family:var(--f-disp);font-size:1rem;font-weight:400;line-height:1.35;text-align:center}
.stk-acts{display:flex;justify-content:center;gap:18px}
.stk-acts button,.stk-acts a{padding:0 0 1px;font-size:.84rem;cursor:pointer;border:0;border-bottom:1px solid transparent;border-radius:0;background:none;color:var(--ink-3);transition:color .2s,border-color .2s}
.stk-acts a{color:var(--ink);border-color:var(--line-2)}
.stk-acts button:hover,.stk-acts a:hover{color:var(--ink);border-color:var(--ink)}
.note{margin:22px 0 0;font-size:.8rem;color:var(--ink-3);text-align:center}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .born-grid{grid-template-columns:1fr}
  .born-stage{order:-1}
  .born-paper{width:min(100%,420px)}
  .try-grid{grid-template-columns:1fr}
  .sheet-wrap{position:relative;top:0}
  .kiss{grid-template-columns:repeat(6,minmax(0,1fr))}
}
@media (max-width:520px){
  .stk-grid{grid-template-columns:1fr 1fr;gap:28px 12px}
  .kiss{grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;padding:12px}
  .try-grid{gap:14px}
  .desk{min-height:300px}
}
@media (prefers-reduced-motion:reduce){.born-stk,.slot .peel,.stk-tilt{transition:none}}