/* =========================================================
   stickers.css — paper & nautical stickers
   Little paper-boat stickers that sit flat on the page like
   they've been stuck on. NO strings. They give a slow, gentle
   wobble on hover/focus, and a barely-there idle drift so they
   feel alive. Motion is disabled for prefers-reduced-motion
   (see accessibility.css).

   The boat shapes live as <symbol> defs in each HTML page
   (ids: bt-classic, bt-sail, bt-tug, bt-flag). To place one:
     <span class="sticker sticker--tl">
       <svg class="sticker-art" viewBox="0 0 100 100"><use href="#bt-sail"/></svg>
     </span>
   Swap the <symbol> bodies anytime; behaviour lives here.
   ========================================================= */

.sticker {
    --sticker-size: 78px;
    width: var(--sticker-size);
    height: var(--sticker-size);
    display: inline-block;
    position: relative;
    z-index: 20;
    /* a soft white paper edge so it reads as a peel-and-stick sticker */
    pointer-events: auto;
}

.sticker-art {
    width: 100%;
    height: 100%;
    display: block;
    transform-origin: bottom center;   /* rocks like a boat on water */
    /* white sticker outline + drop shadow */
    filter:
        drop-shadow(0 0 2px #fff)
        drop-shadow(0 0 2px #fff)
        drop-shadow(2px 3px 2px rgba(0,77,64,0.35));
}

/* faint idle bob/rock so stickers feel alive (very slow) */
@keyframes sticker-bob {
    0%,100% { transform: rotate(-2deg); }
    50%     { transform: rotate(2deg); }
}
.sticker .sticker-art { animation: sticker-bob 7s ease-in-out infinite; }

/* slow gentle rock on hover/focus */
@keyframes sticker-rock {
    0%   { transform: rotate(0deg); }
    25%  { transform: rotate(5deg); }
    50%  { transform: rotate(-4deg); }
    75%  { transform: rotate(3deg); }
    100% { transform: rotate(0deg); }
}
.sticker:hover .sticker-art,
.sticker:focus-visible .sticker-art {
    animation: sticker-rock 2.2s ease-in-out infinite;
}

/* ---- corner stickers: frame the page edges ---- */
.sticker--corner { position: fixed; }
.sticker--tl { top: 14px;  left: 14px;  }
.sticker--tr { top: 14px;  right: 14px; }
.sticker--bl { bottom: 14px; left: 14px; }
.sticker--br { bottom: 14px; right: 14px; }

/* ---- tuck stickers: stuck onto a widget/card corner ---- */
.sticker--tuck { position: absolute; --sticker-size: 60px; }
.sticker--tuck-tr { top: -14px;  right: -10px; }
.sticker--tuck-tl { top: -14px;  left: -10px;  }
.sticker--tuck-br { bottom: -14px; right: -10px; }
.sticker--tuck-bl { bottom: -14px; left: -10px;  }

@media (max-width: 768px) {
    .sticker--corner { display: none; }   /* don't crowd small screens */
    .sticker--tuck { --sticker-size: 48px; }
}