/* potluck motion, v1
   rules: plays in place (never a popup), one at a time, CSS keyframes + inline SVG only,
   everything off under prefers-reduced-motion. specs and placement: docs/design.md#motion */

/* ---------- page switch ----------
   in the mockups the arriving page animates on load. in the app, use cross-document view
   transitions so the tapped icon morphs into the title and the old title collapses into its icon:
   give the title on page A and the matching icon on page B the same view-transition-name. */
@view-transition { navigation: auto; }
.pl-nav-table  { view-transition-name: nav-table; }
.pl-nav-picks  { view-transition-name: nav-picks; }
.pl-nav-guests { view-transition-name: nav-guests; }
::view-transition-group(*) { animation-duration: 350ms; animation-timing-function: cubic-bezier(.3,.7,.3,1); }

@keyframes pl-icon-out { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.5); } }
@keyframes pl-reveal   { 0% { clip-path: inset(0 100% 0 0); } 100% { clip-path: inset(0 0 0 0); } }
@keyframes pl-rule-in  { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } }
@keyframes pl-pop-in   { 0% { opacity: 0; transform: scale(.6); } 70% { transform: scale(1.08); } 100% { opacity: 1; transform: none; } }
.pl-title-ghost { animation: pl-icon-out .3s ease-in both; }
.pl-title       { animation: pl-reveal .45s cubic-bezier(.3,.7,.3,1) .12s both; }
.pl-title-rule  { transform-origin: 0 50%; animation: pl-rule-in .35s ease-out .45s both; }
.pl-nav-icon    { animation: pl-pop-in .35s ease-out .1s both; }

/* ---------- shared ---------- */
@keyframes pl-rise    { 0% { transform: translateY(4px); opacity: 0; } 35% { opacity: .9; } 100% { transform: translateY(-10px); opacity: 0; } }
@keyframes pl-fade-up { 0% { transform: translateY(6px); opacity: 0; } 100% { transform: none; opacity: 1; } }
svg .pl-anim, svg.pl-anim * { transform-box: fill-box; }

/* the steam wisp: one 12x14 svg with three paths
   <path d="M3 12c-1.5-2 1.5-3 0-5"/><path d="M6 12c-1.5-2 1.5-3 0-6"/><path d="M9 12c-1.5-2 1.5-3 0-5"/> */

/* ---------- fresh: wisp in the butter stamp puffs twice, then still ---------- */
@keyframes pl-wisp { 0% { transform: translateY(3px); opacity: 0; } 40% { opacity: .9; } 100% { transform: translateY(-6px); opacity: 0; } }
.pl-fresh-wisp path { animation: pl-wisp 1.6s ease-out 2 both; transform-box: fill-box; }
.pl-fresh-wisp path:nth-child(2) { animation-delay: .25s; }
.pl-fresh-wisp path:nth-child(3) { animation-delay: .5s; }

/* ---------- you cooked: on the new pick's row (about 1.5 s, once) ---------- */
@keyframes pl-lid {
  0% { transform: none; opacity: 1; }
  10% { transform: translateY(-1px) rotate(-3deg); }
  20% { transform: rotate(2deg); }
  28% { transform: none; }
  70% { opacity: 1; }
  100% { transform: translate(30px, -40px) rotate(16deg); opacity: 0; }
}
.pl-cloche { transform-origin: 100% 100%; animation: pl-lid .95s cubic-bezier(.3,.7,.3,1) .3s both; }
.pl-cooked-steam path { animation: pl-rise 1.3s ease-out 2 both; transform-box: fill-box; }
.pl-cooked-steam path:nth-child(1) { animation-delay: 1s; }
.pl-cooked-steam path:nth-child(2) { animation-delay: 1.15s; }
.pl-cooked-steam path:nth-child(3) { animation-delay: 1.3s; }
.pl-just-added { animation: pl-fade-up .3s ease-out 1.2s both; }
.pl-toast      { animation: pl-fade-up .3s ease-out .2s both; }

/* ---------- simmering: the logo pot, while the table first loads ----------
   loops while loading. only mount it if the load takes longer than 300 ms (a timer in the page script). */
@keyframes pl-simmer {
  0%, 48%, 100% { transform: none; }
  10% { transform: translateY(-4px) rotate(-6deg); }
  20% { transform: translateY(0) rotate(1deg); }
  30% { transform: translateY(-2px) rotate(4deg); }
  40% { transform: none; }
}
@keyframes pl-puff { 0%, 8% { transform: translateY(4px); opacity: 0; } 25% { opacity: .85; } 60%, 100% { transform: translateY(-8px); opacity: 0; } }
.pl-pot-lid { transform-box: fill-box; transform-origin: 50% 100%; animation: pl-simmer 1.4s ease-in-out infinite; }
.pl-pot-puff path { transform-box: fill-box; animation: pl-puff 1.4s ease-out infinite; }
.pl-pot-puff path:nth-child(2) { animation-delay: .12s; }

/* ---------- pull up a chair: top of the guest list, next visit after an invite (once) ---------- */
@keyframes pl-chair {
  0% { transform: translateX(44px); opacity: 0; }
  60% { transform: translateX(-4px); opacity: 1; }
  80% { transform: translateX(1px); }
  100% { transform: none; opacity: 1; }
}
.pl-chair  { transform-box: fill-box; animation: pl-chair .6s cubic-bezier(.3,.7,.3,1) .3s both; }
.pl-joined { animation: pl-fade-up .3s ease-out .85s both; }

/* ---------- reduced motion: static end states ---------- */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*) { animation: none; }
  .pl-title-ghost, .pl-cloche, .pl-cooked-steam, .pl-pot-puff { display: none; }
  .pl-title, .pl-title-rule, .pl-nav-icon, .pl-fresh-wisp path, .pl-just-added, .pl-toast,
  .pl-pot-lid, .pl-chair, .pl-joined { animation: none; }
  .pl-fresh-wisp path { opacity: .8; }
}