/* sticker-hero — die-cut project minis scattered on a dark hero. Vanilla, no deps.
   Motion uses transform / opacity / the individual `scale` property only.
   Layers (each owns one transform so nothing fights):
     .sh-slot  position (left/top/width, static) + drop-in (transform, once)
     .sh       the <a>; idle micro-float (transform), focus/hover/press state
     .sh-cut   die-cut sticker: tilt + hover lift/straighten (transform), press squish (scale) */

.sh-field{
  --sh-bg:#0F1420;          /* MUST match the paint behind the stickers (peel cut-away) */
  --sh-edge:#EDF1F7;        /* die-cut border (no pure white) */
  --sh-edge-2:#DCE2EB;      /* border falloff, gives the paper some body */
  --sh-shadow:8,11,18;      /* #080B12 as rgb triplet */
  --sh-focus:#7CC4FF;
  --sh-bw:clamp(4px,.55vw,7px);   /* border width */
  --sh-rad:clamp(10px,1.1vw,16px);/* outer corner radius */
  --sh-peel:clamp(16px,1.9vw,26px);
  --sh-lift:-6px;
  --sh-out:cubic-bezier(.22,1,.36,1);
  --sh-spring:cubic-bezier(.34,1.56,.64,1);
  position:relative;
  aspect-ratio:var(--field-ar,10/9);  /* fixed box: zero CLS */
  width:100%;
  contain:layout style;
}
.sh-list{list-style:none;margin:0;padding:0;position:absolute;inset:0}

.sh-slot{
  --_x:var(--x,0%);--_y:var(--y,0%);--_w:var(--w,25%);--_r:var(--r,0deg);
  position:absolute;left:var(--_x);top:var(--_y);width:var(--_w);
  z-index:var(--z,1);
  transition:z-index 0s .3s;       /* drop back under neighbours only after the return */
}
.sh-slot:hover,.sh-slot:focus-within{z-index:40;transition-delay:0s}

.sh{display:block;color:inherit;text-decoration:none;outline:none;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}

.sh-cut{
  position:relative;display:block;
  padding:var(--sh-bw);
  border-radius:var(--sh-rad);
  background:linear-gradient(160deg,var(--sh-edge) 55%,var(--sh-edge-2));
  box-shadow:
    0 1px 0 rgba(var(--sh-shadow),.35),
    0 2px 3px rgba(var(--sh-shadow),.45),
    0 8px 18px -6px rgba(var(--sh-shadow),.6);
  transform:rotate(var(--_r));
  transition:transform .26s var(--sh-out),scale .16s var(--sh-spring);
  will-change:transform;
}
/* hover shadow: separate layer, cross-faded with opacity (no box-shadow animation) */
.sh-cut::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:
    0 6px 10px -4px rgba(var(--sh-shadow),.55),
    0 22px 38px -12px rgba(var(--sh-shadow),.85);
  opacity:0;transition:opacity .26s var(--sh-out);
}
/* the corner peel: cut-away (bg colour) + curled flap with a crease shade */
.sh-cut::after{
  content:"";position:absolute;width:var(--sh-peel);height:var(--sh-peel);
  top:0;right:0;transform-origin:100% 0;
  --_a:225deg;--_b:45deg;border-radius:0 var(--sh-rad) 0 5px;
  background:
    linear-gradient(var(--_a),var(--sh-bg) 49.5%,transparent 50%),
    linear-gradient(var(--_b),#F7F9FC 0%,#E4E9F0 26%,#BCC5D3 47%,#9AA5B7 49.6%,transparent 50%);
  filter:drop-shadow(-1px 1.5px 1.5px rgba(var(--sh-shadow),.35));
  transform:scale(.001);opacity:0;pointer-events:none;
  transition:transform .22s var(--sh-out),opacity .12s linear;
}
.sh--peel-tl .sh-cut::after{right:auto;left:0;transform-origin:0 0;--_a:135deg;--_b:315deg;border-radius:var(--sh-rad) 0 5px 0;filter:drop-shadow(1px 1.5px 1.5px rgba(var(--sh-shadow),.35))}
.sh--peel-br .sh-cut::after{top:auto;bottom:0;transform-origin:100% 100%;--_a:315deg;--_b:135deg;border-radius:5px 0 var(--sh-rad) 0;filter:drop-shadow(-1px -1px 1.5px rgba(var(--sh-shadow),.35))}
.sh--peel-bl .sh-cut::after{top:auto;right:auto;bottom:0;left:0;transform-origin:0 100%;--_a:45deg;--_b:225deg;border-radius:0 5px 0 var(--sh-rad);filter:drop-shadow(1px -1px 1.5px rgba(var(--sh-shadow),.35))}

/* image window */
.sh-img{position:relative;display:block;overflow:hidden;
  border-radius:calc(var(--sh-rad) - var(--sh-bw));
  aspect-ratio:var(--ar,1/1);background:#171E2E}
.sh-img img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
/* printed edge + laminate sheen */
.sh-img::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(var(--sh-shadow),.14)}
.sh-img::after{content:"";position:absolute;top:-10%;bottom:-10%;left:-60%;width:45%;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(237,241,247,.16) 45%,rgba(237,241,247,.05) 60%,transparent);
  transform:translate3d(-40%,0,0) skewX(-12deg);opacity:0}

/* optional die-cut shapes (mask the whole cut, border included) */
.sh--pill .sh-cut,.sh--pill .sh-img{border-radius:999px}
.sh--round .sh-cut,.sh--round .sh-img{border-radius:50%}
.sh--ticket .sh-cut{-webkit-mask:radial-gradient(circle at 0 50%,#0000 calc(var(--sh-bw)*1.6),#000 calc(var(--sh-bw)*1.6 + .5px)) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,#0000 calc(var(--sh-bw)*1.6),#000 calc(var(--sh-bw)*1.6 + .5px)) right/51% 100% no-repeat;
  mask:radial-gradient(circle at 0 50%,#0000 calc(var(--sh-bw)*1.6),#000 calc(var(--sh-bw)*1.6 + .5px)) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,#0000 calc(var(--sh-bw)*1.6),#000 calc(var(--sh-bw)*1.6 + .5px)) right/51% 100% no-repeat}

/* optional hover tag (Ted / Folio Copy own the words; aria-hidden, the <a> carries the name) */
.sh-tag{position:absolute;left:calc(var(--sh-bw)*2);bottom:calc(var(--sh-bw)*-1 - 12px);z-index:2;
  font:500 11px/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.02em;white-space:nowrap;
  color:#0F1420;background:#7CC4FF;padding:6px 8px 5px;border-radius:999px;
  box-shadow:0 4px 10px -3px rgba(var(--sh-shadow),.7);
  opacity:0;transform:translate3d(0,-4px,0) scale(.96);transform-origin:0 50%;
  transition:opacity .16s linear,transform .24s var(--sh-out);pointer-events:none}

/* ---------- hover (fine pointers only) + keyboard focus ---------- */
@media (hover:hover) and (pointer:fine){
  .sh:hover .sh-cut{transform:translate3d(0,var(--sh-lift),0) rotate(0deg) scale(1.025)}
  .sh:hover .sh-cut::before{opacity:1}
  .sh:hover .sh-cut::after{transform:scale(1);opacity:1;transition-delay:.04s}
  .sh:hover .sh-img::after{opacity:1;transform:translate3d(420%,0,0) skewX(-12deg);transition:transform .55s var(--sh-out),opacity .1s linear}
  .sh:hover .sh-tag{opacity:1;transform:none}
  .sh:hover{animation-play-state:paused}
}
.sh:focus-visible .sh-cut{transform:translate3d(0,var(--sh-lift),0) rotate(0deg) scale(1.025)}
/* focus ring lives on the shadow layer (follows the radius + transform, no outline repaint trails) */
.sh:focus-visible .sh-cut::before{opacity:1;box-shadow:
    0 0 0 3px var(--sh-bg),0 0 0 5px var(--sh-focus),
    0 6px 10px -4px rgba(var(--sh-shadow),.55),0 22px 38px -12px rgba(var(--sh-shadow),.85)}
@media (forced-colors:active){.sh:focus-visible .sh-cut{outline:2px solid CanvasText;outline-offset:4px}}
.sh:focus-visible .sh-cut::after{transform:scale(1);opacity:1}
.sh:focus-visible .sh-tag{opacity:1;transform:none}
.sh:focus-visible{animation-play-state:paused;outline:none}  /* beat global a:focus-visible rings; the ring is drawn on .sh-cut::before */

/* ---------- press squish (individual `scale`, independent of the lift) ---------- */
.sh.is-press .sh-cut{scale:.94 .96;transition:transform .26s var(--sh-out),scale .07s cubic-bezier(.3,0,.6,1)}

/* ---------- drop-in (JS adds .sh-drop on the field, once per session) ---------- */
.sh-pre .sh-field .sh-slot{opacity:0}  /* set pre-paint by the inline head snippet */
.sh-field.sh-drop .sh-slot{
  animation:sh-drop .5s cubic-bezier(.3,.7,.4,1) both;
  animation-delay:calc(var(--i,0) * 72ms)}
.sh-field.sh-drop .sh-cut::before{animation:sh-drop-shadow .5s ease-out both;animation-delay:calc(var(--i,0) * 72ms)}
@keyframes sh-drop{
  0%  {opacity:0;transform:translate3d(0,-34px,0) scale(1.14) rotate(var(--dr,5deg))}
  30% {opacity:1}
  58% {transform:translate3d(0,2px,0) scale(.975) rotate(calc(var(--dr,5deg) * -.15))}
  78% {transform:translate3d(0,-1px,0) scale(1.008) rotate(0deg)}
  100%{opacity:1;transform:none}
}
@keyframes sh-drop-shadow{0%{opacity:1}55%{opacity:0}100%{opacity:0}}

/* ---------- idle micro-float (JS adds .sh-live after the drop) ---------- */
.sh-field.sh-live .sh{animation:sh-float-a var(--fd,7s) ease-in-out var(--fdel,0s) infinite}
.sh-field.sh-live .sh-slot:nth-child(3n+2) .sh{animation-name:sh-float-b}
.sh-field.sh-live .sh-slot:nth-child(3n) .sh{animation-name:sh-float-c}
.sh-field.sh-live.sh-off .sh{animation-play-state:paused}
@keyframes sh-float-a{0%,100%{transform:translate3d(0,0,0) rotate(0deg)}50%{transform:translate3d(1px,-2.5px,0) rotate(.6deg)}}
@keyframes sh-float-b{0%,100%{transform:translate3d(0,0,0) rotate(0deg)}35%{transform:translate3d(-1.5px,-2px,0) rotate(-.5deg)}70%{transform:translate3d(.5px,-1px,0) rotate(.3deg)}}
@keyframes sh-float-c{0%,100%{transform:translate3d(0,-1px,0) rotate(.3deg)}50%{transform:translate3d(-1px,1.5px,0) rotate(-.6deg)}}

/* ---------- small screens: own scatter via --x-s/--y-s/--w-s/--r-s ---------- */
@media (max-width:720px){
  .sh-field{aspect-ratio:var(--field-ar-s,4/5);--sh-lift:-4px}
  .sh-slot{--_x:var(--x-s,var(--x,0%));--_y:var(--y-s,var(--y,0%));--_w:var(--w-s,var(--w,40%));--_r:var(--r-s,var(--r,0deg));z-index:var(--z-s,var(--z,1))}
  .sh-tag{font-size:10px;padding:5px 7px 4px}
}

/* ---------- reduced motion: static at tilt, instant shadow on hover ---------- */
@media (prefers-reduced-motion:reduce){
  .sh-cut,.sh-cut::before,.sh-tag,.sh-slot{transition:none!important}
  .sh-field .sh-slot,.sh-field .sh,.sh-field .sh-cut::before{animation:none!important}
  .sh-pre .sh-field .sh-slot{opacity:1}
  .sh-cut::after,.sh-img::after{display:none}
  .sh:hover .sh-cut,.sh:focus-visible .sh-cut,.sh.is-press .sh-cut{transform:rotate(var(--_r));scale:none}
}

/* v22: a hovered/focused sticker sits above its neighbours so its tag is never clipped (max --z is 4) */
.sh-slot:hover,.sh-slot:focus-within{z-index:10}