/**
 * public/css/stickers.css — Decorative sticker styles
 *
 * The stickers are positioned absolutely inside each section
 * by stickers.js. This file only handles:
 *  - Hiding them on small screens (avoid clutter on mobile)
 *  - A gentle entrance transition
 *  - Dark mode tint adjustment
 */

.section-sticker {
  /* Smooth appearance — avoids jarring pop-in */
  animation: sticker-fade-in 0.6s ease both;
  /* Ensure stickers never clip content */
  overflow: visible;
}

@keyframes sticker-fade-in {
  from { opacity: 0; transform: rotate(var(--r, 0deg)) scale(0.85); }
  to   { opacity: inherit; transform: rotate(var(--r, 0deg)) scale(1); }
}

/* Hide on small screens — content wins on mobile */
@media (max-width: 768px) {
  .section-sticker { display: none; }
}

/* On dark mode, desaturate slightly so they don't pop too much */
[data-theme="dark"] .section-sticker {
  filter: brightness(0.75) saturate(0.7);
}