/* Custom styles layered on top of Tailwind (CDN at runtime, or built CSS in prod). */

@keyframes fadein {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* Smooth scrolling for in-page anchors. */
html { scroll-behavior: smooth; }

/* ---------------------------------------------------------------------------
 * Social share bar + popup (see assets/js/core/share.js)
 * ------------------------------------------------------------------------- */

/* Loading skeleton shimmer for share counters. */
@keyframes pt-share-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.pt-share-skel {
  background: linear-gradient(90deg,
    rgba(148, 163, 184, .25) 25%,
    rgba(148, 163, 184, .45) 50%,
    rgba(148, 163, 184, .25) 75%);
  background-size: 200% 100%;
  animation: pt-share-shimmer 1.4s ease-in-out infinite;
}

/* Horizontal scroll on mobile without a visible scrollbar. */
.pt-share-scroll {
  scrollbar-width: none;         /* Firefox */
  -ms-overflow-style: none;      /* old Edge */
  -webkit-overflow-scrolling: touch;
}
.pt-share-scroll::-webkit-scrollbar { display: none; }

/* Equal-height, touch-friendly pills. */
.pt-share-pill { min-height: 2.5rem; touch-action: manipulation; }
.pt-share-pill:active { transform: translateY(0) scale(.97); }
.pt-share-count:empty { display: none; }

/* Popup entrance. */
.pt-share-pop { animation: fadein .18s ease; }

/* Thumbnail grid used by Split / image tools. */
.pt-thumb {
  border: 2px solid transparent;
  border-radius: 0.75rem;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .15s, transform .15s;
}
.pt-thumb:hover { transform: translateY(-2px); }
.pt-thumb.is-selected { border-color: #2563eb; }
.pt-thumb canvas, .pt-thumb img { display: block; width: 100%; height: auto; }