/* r8 client stickers. Root = .stk[data-movable] (left/top only, so a drag system may own its transform); rotation, tilt, shadow live on .stk-in. */
#stk-layer { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 8; }
.stk { position: absolute; width: var(--w); height: var(--h); touch-action: none; cursor: grab; -webkit-tap-highlight-color: transparent; }
.stk:active { cursor: grabbing; }
.stk-in {
  position: absolute; inset: 0; transform-origin: 50% 50%;
  transform: perspective(520px) rotateX(calc(var(--ny, 0) * -9deg)) rotateY(calc(var(--nx, 0) * 9deg)) rotate(var(--rot, 0deg));
  transition: transform .35s var(--spring, cubic-bezier(.34, 1.56, .64, 1));
  /* contact shadow: tight + soft, tinted warm like the desk, offset down-right (key light is upper left) */
  filter: drop-shadow(1.5px 2.5px 1.5px rgba(58, 44, 28, .42)) drop-shadow(4px 7px 7px rgba(58, 44, 28, .22));
}
html.dark .stk-in { filter: drop-shadow(1.5px 2.5px 1.5px rgba(4, 6, 16, .6)) drop-shadow(4px 7px 7px rgba(4, 6, 16, .35)); }
.stk.clear .stk-in { filter: drop-shadow(1px 2px 1.5px rgba(58, 44, 28, .26)) drop-shadow(3px 5px 6px rgba(58, 44, 28, .12)); }
.stk-body {
  position: absolute; inset: 0; overflow: hidden; border-radius: var(--br, var(--r)); background: #fbfaf6;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--c, 0px)), calc(100% - var(--c, 0px)) 100%, 0 100%);
}
.stk.clear .stk-body { background: rgba(255, 255, 255, .2); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55), inset 0 0 14px rgba(255, 255, 255, .25); }
.stk-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; user-select: none; }
.stk-body > i { position: absolute; inset: 0; pointer-events: none; }
/* matte vinyl: faint paper grain + soft top-left sheen */
.stk-matte { background: linear-gradient(135deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, .06)); }
/* holo foil: oversized rainbow slab shifted by pointer (transform only), blended over the art */
.stk-foil { inset: -60%; width: 220%; height: 220%; mix-blend-mode: normal; opacity: .62;
  background:
    linear-gradient(118deg, rgba(255,90,200,.0) 18%, rgba(255,90,200,.8) 28%, rgba(255,214,90,.85) 38%, rgba(110,255,170,.85) 48%, rgba(90,210,255,.85) 58%, rgba(150,110,255,.8) 68%, rgba(150,110,255,0) 78%),
    conic-gradient(from 20deg at 50% 50%, rgba(255,122,217,.35), rgba(255,211,110,.35), rgba(125,255,178,.35), rgba(111,216,255,.35), rgba(165,139,255,.35), rgba(255,122,217,.35));
  transform: translate(calc(var(--nx, 0) * -16%), calc(var(--ny, 0) * -16%)) rotate(calc(var(--nx, 0) * 20deg)); }
.stk-foil2 { mix-blend-mode: overlay; opacity: .7;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,0) 0 2px, rgba(255,255,255,.55) 2.5px 3px, rgba(255,255,255,0) 3.5px 6px),
    repeating-linear-gradient(25deg, rgba(0,0,0,0) 0 3px, rgba(0,0,0,.28) 3.5px 4px, rgba(0,0,0,0) 4.5px 7px),
    radial-gradient(circle at 1.5px 1.5px, rgba(255,255,255,.55) 0 .7px, rgba(255,255,255,0) 1.2px) 0 0 / 5px 5px;
  transform: translateX(calc(var(--nx, 0) * -10px)); }
.stk-lamp { z-index: 4; opacity: 0; mix-blend-mode: screen; transition: opacity 1s ease-in-out;
  background: radial-gradient(circle at var(--lx, 50%) var(--ly, 50%), rgba(255, 214, 150, .85), rgba(255, 190, 120, 0) 62%); }
html.dark .holo .stk-lamp { opacity: calc(.35 + var(--lamp, 0) * .6); }
html.dark .holo .stk-foil { opacity: .85; }
/* glitter: two speckle layers twinkling out of phase */
.stk-glit { background-size: 120px 120px; mix-blend-mode: normal; opacity: 1; filter: drop-shadow(0 0 1px rgba(255,255,255,.9)); }
.stk-glit.g1 { animation: stk-tw 2.8s ease-in-out infinite alternate; }
.stk-glit.g2 { animation: stk-tw 2.8s ease-in-out -1.4s infinite alternate; background-position: 37px 21px; transform: scale(1.01); }
@keyframes stk-tw { from { opacity: .15; } to { opacity: .95; } }
.stk-gloss { background: linear-gradient(120deg, rgba(255, 255, 255, .5) 0, rgba(255, 255, 255, 0) 28%); mix-blend-mode: soft-light; }
.stk.clear .stk-gloss { background: linear-gradient(120deg, rgba(255, 255, 255, .85) 0, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 62%, rgba(255, 255, 255, .35) 70%, rgba(255, 255, 255, 0) 76%); mix-blend-mode: normal; opacity: .55; }
/* the curl: back of the vinyl, a right triangle whose size is driven by JS (transform only) */
.stk-flap {
  position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; border-radius: var(--br, var(--r)); overflow: hidden; opacity: 0; will-change: transform;
  --f: 100%;
  background: linear-gradient(135deg, transparent var(--f), #d2cec5 var(--f), #ece9e2 calc(var(--f) + (100% - var(--f)) * .45), #fffefb 100%);
}
.stk.clear .stk-flap { background: linear-gradient(135deg, transparent var(--f), rgba(210, 225, 235, .55) var(--f), rgba(255, 255, 255, .8) 100%); }
.stk-flap::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .12)); }
html.dark .stk-flap { filter: brightness(.55) saturate(.8); }
/* corner-only peel handle */
.stk-corner {
  position: absolute; right: 0; bottom: 0; width: 34%; height: 34%; min-width: 30px; min-height: 30px; padding: 0; margin: 0; border: 0; background: none;
  cursor: grab; z-index: 6; touch-action: none; border-radius: 0 0 var(--r) 0; -webkit-tap-highlight-color: transparent;
}
.stk-corner:active { cursor: grabbing; }
.stk-corner:focus { outline: none; }
.stk-corner:focus-visible { outline: 2px dashed var(--lilac, #c9a6f7); outline-offset: -3px; }
.stk-pop { transform-origin: 50% 50%; }
@media (prefers-reduced-motion: reduce) {
  .stk-in { transition: none; }
  .stk-glit.g1, .stk-glit.g2 { animation: none; }
  .stk-glit.g2 { opacity: .4; }
  .stk-foil, .stk-foil2 { transform: none !important; }
}

/* stickers attached to a desk object ride inside its .lift; they take pointer events even on non-interactive hosts */
.lift > .stk { pointer-events: auto; cursor: inherit; }
.lift > .stk .stk-corner { pointer-events: auto; }

/* KSD set: die-cut silhouettes, link + ring behaviours */
.stk.clear .stk-art + .stk-art { z-index: 3; }
.stk-ring { transform-origin: 50% 50%; transform-box: fill-box; }
.stk[data-id="move"]:hover .stk-ring, .stk[data-id="move"]:focus-within .stk-ring { animation: stk-spin 6s linear infinite; }
@keyframes stk-spin { to { transform: rotate(360deg); } }
.stk.sil .stk-corner { border-radius: 0; }
.stk.lnk { cursor: pointer; }
.stk.lnk .stk-in { transition: transform .35s var(--spring, cubic-bezier(.34, 1.56, .64, 1)), scale .35s var(--spring, cubic-bezier(.34, 1.56, .64, 1)); }
.stk.lnk:hover .stk-in, .stk.lnk:focus-visible .stk-in { scale: 1.06; }
.stk.lnk:active .stk-in { scale: .97; }
.stk.lnk:focus-visible { outline: 2px dashed var(--lilac, #c9a6f7); outline-offset: 6px; }
.stk.sil:not(.lnk):hover .stk-in { scale: 1.04; }
.stk.sil:not(.lnk):active .stk-in { scale: .98; }

.holo .holo .stk-foil { opacity: .8; }

/* holo foil v3: soft continuous iridescence (conic + radial blends, no hard stops) and a wide soft streak that eases after the pointer */
.holo .stk-foil { inset: -40%; width: 180%; height: 180%; opacity: .9; mix-blend-mode: normal;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.55), rgba(255,255,255,0) 46%),
    radial-gradient(circle at 78% 82%, rgba(120,90,255,.45), rgba(120,90,255,0) 55%),
    conic-gradient(from 210deg at 50% 50%, #7fe7ff, #9a8cff, #ff8fe0, #ffc9a8, #b6ffd9, #7fe7ff);
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
  transform: translate(calc(var(--nx, 0) * -14%), calc(var(--ny, 0) * -14%)) rotate(calc(var(--nx, 0) * 40deg)); }
.holo .stk-foil2 { inset: -50%; width: 200%; height: 200%; opacity: .5; mix-blend-mode: normal;
  background: linear-gradient(105deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.55) 43%, #fff 50%, rgba(255,255,255,.55) 57%, rgba(255,255,255,0) 70%);
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
  transform: translateX(calc(var(--nx, 0) * -30%)); }
.holo .stk-gloss { mix-blend-mode: normal; opacity: .22; }
.stk-art + .stk-art { z-index: 5; }
.stk-ring { transform-origin: 50% 50%; transform-box: fill-box; }