/* ==========================================================================
   Motion system — see docs/motion-guide.html for the spec
   Principles: pop like a sticker, glide like paint, never block reading.
   ========================================================================== */
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,61,187,.7); } 70% { box-shadow: 0 0 0 10px rgba(255,61,187,0); } 100% { box-shadow: 0 0 0 0 rgba(255,61,187,0); } }
@keyframes float { from { translate: 0 -8px; rotate: -3deg; } to { translate: 0 10px; rotate: 4deg; } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes sticker-in { 0% { opacity: 0; transform: translateY(18px) scale(.86) rotate(-3deg); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes wipe-in { from { clip-path: inset(0 100% 0 0 round 24px); } to { clip-path: inset(0 0 0 0 round 24px); } }
@keyframes wobble { 0%,100% { rotate: 0deg; } 25% { rotate: -6deg; } 75% { rotate: 6deg; } }
@keyframes shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } }
@keyframes spin-slow { to { rotate: 360deg; } }
@keyframes blob { 0%,100% { border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%; } 50% { border-radius: 45% 55% 40% 60% / 60% 45% 55% 40%; } }
/* Paint-splotch frames: a slow sway of the whole splat; drips bob. */
@keyframes splat-sway { 0%,100% { transform: rotate(-2.2deg) scale(1); } 50% { transform: rotate(2.2deg) scale(1.03); } }
@keyframes drip-bob { from { transform: translateY(0) scaleY(1); } to { transform: translateY(6px) scaleY(1.35); } }

/* Scroll reveal: elements start hidden, JS adds .is-in when they enter view */
[data-reveal] { opacity: 0; }
[data-reveal].is-in { animation: var(--reveal-anim, rise-in) var(--d-reveal) var(--ease-out) both; animation-delay: calc(var(--i, 0) * var(--stagger)); }
[data-reveal="sticker"].is-in { --reveal-anim: sticker-in; animation-timing-function: var(--ease-pop); }
[data-reveal="wipe"].is-in { --reveal-anim: wipe-in; opacity: 1; }
[data-reveal="fade"].is-in { --reveal-anim: rise-in; }

/* Hero entrance (runs on load, no observer needed) */
.hero [data-hero] { opacity: 0; animation: sticker-in .9s var(--ease-pop) both; animation-delay: calc(.15s + var(--i, 0) * .12s); }
.hero .hero__media[data-hero] { animation-name: rise-in; animation-duration: 1.1s; animation-timing-function: var(--ease-out); }

/* Hover micro-interactions */
.wobble-hover:hover { animation: wobble .6s var(--ease-inout); }
.spin-slow { animation: spin-slow 24s linear infinite; }
.blob { animation: blob 9s ease-in-out infinite; }

/* Cross-document page transitions (progressive enhancement) */
/* Cross-document view transitions were replaced by the spray-paint transition (js/spray.js). */
@keyframes fade-out { to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  [data-reveal], .hero [data-hero] { opacity: 1; animation: none !important; }
  .floater, .ticker__track, .live-dot, .blob, .spin-slow, .splat-frame__paint, .splat-frame__photo, .splat-frame__behind, .splat-frame .drip { animation: none !important; }
  .work-card:hover, .btn:hover, .social:hover, .contact-card:hover, .product:hover { transform: none; }
}