/* shwn-folder-paper - STRUCTURE. Derived from shwn-folder (same 256 x 208 folder, same flap and spring poses),
   changed for a solid white paper folder holding app icons: the flap is opaque and crisp-edged (no frosted blur, no
   inner glow), the cards are icon tiles, and nothing loops. Geometry, layout and states only; copy byte-identical,
   never edit. Skin lives in shwn-folder-paper.tokens.css. Scale with --sp-shwn-folder-paper-paper-scale. Motion is
   driven by shwn-folder-paper.js. */
.sp-shwn-folder-paper {
  --_s: var(--sp-shwn-folder-paper-scale, 1);
  position: relative; width: calc(256px * var(--_s)); height: calc(208px * var(--_s));
  cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent;
}
.sp-shwn-folder-paper:focus-visible { outline: 2px solid var(--sp-shwn-folder-paper-focus, currentColor); outline-offset: 6px; border-radius: 24px; }
.sp-shwn-folder-paper__stage {
  position: absolute; left: 0; top: 0; width: 256px; height: 208px; perspective: 500px;
  transform-origin: 0 0; scale: var(--_s);
}
.sp-shwn-folder-paper__stage > * { pointer-events: none; }
.sp-shwn-folder-paper__defs { position: absolute; width: 0; height: 0; }

.sp-shwn-folder-paper__shadow { position: absolute; inset: 41.6px 0 0; z-index: -10; background: var(--sp-shwn-folder-paper-shadow-fill, #d9d6cf);
  border-radius: 24px; box-shadow: var(--sp-shwn-folder-paper-shadow, 0 10px 18px -12px rgba(0,0,0,.3)); }

.sp-shwn-folder-paper__body { position: relative; width: 256px; height: 208px; border-radius: 24px; clip-path: url(#sp-shwn-folder-paper-clip);
  background: var(--sp-shwn-folder-paper-body, radial-gradient(circle at 50% 0%, #fff, #e6e3dc 60%, #cfcbc2)); }
.sp-shwn-folder-paper__fade { position: absolute; inset: 0; background: linear-gradient(to top, var(--sp-shwn-folder-paper-fade, rgba(0,0,0,.08)), rgba(0,0,0,0)); }
.sp-shwn-folder-paper__body svg { position: absolute; left: 0; top: 0; width: 256px; height: 206.4px; overflow: hidden; }
.sp-shwn-folder-paper__body path { fill: none; stroke: var(--sp-shwn-folder-paper-stroke, rgba(0,0,0,.14)); stroke-width: .3; shape-rendering: crispEdges; }

.sp-shwn-folder-paper__cards { position: absolute; top: 26.4px; left: 12px; right: 12px; bottom: 36px; border-radius: 16px; transform-style: preserve-3d; }
/* The cards are app icons: square tiles standing on the folder's floor, centred, hidden behind the flap at rest
   and burst out above it (poses in the .js). Put an <img> or <svg> inside each one. */
.sp-shwn-folder-paper__card { position: absolute; left: calc(50% - var(--sp-shwn-folder-paper-icon, 60px) / 2); bottom: 5.6px;
  width: var(--sp-shwn-folder-paper-icon, 60px); height: var(--sp-shwn-folder-paper-icon, 60px);
  border-radius: var(--sp-shwn-folder-paper-icon-radius, 14px);
  filter: drop-shadow(0 6px 8px var(--sp-shwn-folder-paper-icon-shadow, rgba(0,0,0,.28))); }
.sp-shwn-folder-paper__card > img, .sp-shwn-folder-paper__card > svg { display: block; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; user-select: none; }

.sp-shwn-folder-paper__flap { position: absolute; inset: 0; transform-origin: 128px 208px; transform-style: preserve-3d; }
/* The flap is solid: a hairline highlight on its top edge and a hairline outline, no blur and no inner glow,
   so its edge stays sharp (the original's frosted blur and 20 px inner shadow only smear a solid flap). */
.sp-shwn-folder-paper__glass { position: absolute; top: 31.2px; left: 2px; right: 2px; bottom: 0; border-radius: 24px; overflow: hidden;
  background: var(--sp-shwn-folder-paper-glass, linear-gradient(180deg, #f1efe9 0%, #d8d4cb 100%));
  box-shadow: var(--sp-shwn-folder-paper-glass-edge, inset 0 1px 0 #fff, inset 0 0 0 1px rgba(0,0,0,.10), 0 -1px 0 rgba(0,0,0,.10)); }

.sp-shwn-folder-paper__glass::after { content: ""; position: absolute; inset: 0; opacity: .15; mix-blend-mode: overlay; background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* rest pose without JS (shwn-folder-paper.js overrides these inline as the springs run) */
.sp-shwn-folder-paper__card:nth-child(1) { transform: translate(-4px, 2px) rotate(-1.5deg); }
.sp-shwn-folder-paper__card:nth-child(2) { transform: translate(0px, 5px) rotate(0deg); }
.sp-shwn-folder-paper__card:nth-child(3) { transform: translate(4px, 8px) rotate(1.5deg); }
.sp-shwn-folder-paper__card:nth-child(4) { transform: translate(-4px, 5px) rotate(-1.5deg); }
.sp-shwn-folder-paper__card:nth-child(5) { transform: translate(0px, 8px) rotate(0deg); }
.sp-shwn-folder-paper__card:nth-child(6) { transform: translate(4px, 11px) rotate(1.5deg); }
.sp-shwn-folder-paper__flap { transform: rotateX(-25deg); }