/* ============================================================================
   OLISEMEKA.DEV — STICKER LAYER
   ----------------------------------------------------------------------------
   Die-cut pixel stickers pinned to the page margins. Additive: the layer never
   reflows anything, and because every sticker is placed outside .container it
   can never sit on top of the copy.

   The dock borrows the nav's glass — same rgba stock, same blur, same pill —
   so it reads as part of the site rather than a widget bolted on.
   ========================================================================== */

body { position: relative; }

.sticker-field {
  position: absolute;
  inset: 0;
  z-index: 5;               /* above the paper, below .site-header (1000) */
  pointer-events: none;     /* clicks fall through to the page */
}

/* ---- The sticker --------------------------------------------------------- */
.sticker {
  position: absolute;
  top: 0;
  left: 0;
  line-height: 0;
  pointer-events: auto;
  cursor: grab;
  touch-action: none;       /* dragging must not scroll the page */
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transform: translate3d(var(--x, 0px), var(--y, 0px), 0) rotate(var(--rot, 0deg));
  filter: drop-shadow(2px 3px 0 rgba(22, 24, 28, 0.15));
  transition: filter 0.16s ease;
}

.sticker .pxs {
  display: block;
  block-size: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
}

.sticker.is-dragging {
  cursor: grabbing;
  z-index: 999;
  filter: drop-shadow(6px 9px 0 rgba(22, 24, 28, 0.2));
  transition: none;
}

/* Released: settle back onto the paper. */
.sticker.is-settling {
  transition:
    transform 0.3s cubic-bezier(0.22, 0.8, 0.3, 1),
    filter 0.24s ease;
}

.sticker:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 5px;
}

@media (hover: hover) and (pointer: fine) {
  .sticker:hover { filter: drop-shadow(4px 6px 0 rgba(22, 24, 28, 0.19)); }
}

/* ---- Attachment ---------------------------------------------------------- */
/* `tape` is a strip of matte tape over the top edge; `loose` is pressed
   straight onto the stock with nothing but its shadow. */
.sticker--tape::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  inline-size: 46%;
  block-size: 12px;
  transform: translate(-50%, -58%) rotate(-2.5deg);
  background: rgba(232, 227, 214, 0.72);
  border-left: 1px solid rgba(22, 24, 28, 0.07);
  border-right: 1px solid rgba(22, 24, 28, 0.07);
  pointer-events: none;
}

/* ---- Reset ---------------------------------------------------------------- */
/* Not pinned over the page: the script moves this into the footer colophon,
   centred just above the "Built with Hugo" line. Until then it is `hidden`, so
   it never appears without the stickers it resets. */
.sticker-dock {
  display: flex;
  align-items: center;
}
.footer-aside .sticker-dock {
  align-self: center;
  margin-bottom: var(--sp-2);
}

.sticker-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.85rem;
  border: var(--rule-w) solid var(--rule-2);
  border-radius: var(--radius-pill);
  background: var(--paper-raised);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease,
              box-shadow 0.08s steps(2);
}
.sticker-btn::before {
  content: "";
  inline-size: 7px;
  block-size: 7px;
  background: var(--accent);
  flex: none;
}
.sticker-btn:hover {
  color: var(--ink);
  border-color: var(--ink);
  box-shadow: var(--px-shadow);
}

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 1180px) {
  /* The margins close up; the layer falls back to the gaps between sections
     and thins out on its own. Shrink the pieces that remain. */
  .sticker { filter: drop-shadow(1px 2px 0 rgba(22, 24, 28, 0.14)); }
  .sticker.is-dragging { filter: drop-shadow(4px 6px 0 rgba(22, 24, 28, 0.2)); }
}

@media (prefers-reduced-motion: reduce) {
  .sticker,
  .sticker.is-settling { transition: filter 0.16s ease; }
}