/* Joy Chaser movement layer, shared by every page (homepage included).
   A = scroll-in pop · B = floating logo shapes · C = hover tilt + peeking shape, squishy buttons
   D = handwritten words write themselves in · E = scribble underline under page titles
   html.jm is set in the <head> (skipped for reduced-motion visitors, removed again if motion.js never runs),
   so the "before" states below only apply when the script is there to play them. */

/* ---------- A. scroll-in pop ----------
   Keep this selector list in sync with REVEAL in /js/motion.js */
.jm :is(.stats-inner > div, .section-intro, .card-grid > .card, .choose > .choice, .why-item, .way, .about-inner > *, .hero-cta,
        .story-card, .joy-tag, .family-gallery img, .social-btn, .joylist > h2, .family > h2, .socials > h2,
        .resource-card, .suggest-card, .suggest-section > h2, .soon-badge, .soon-cta,
        .share-card, .sky-title, .joy-blob, .idea-card, .town-form, .contact-card):not(.jm-seen) { opacity: 0; }
.jm-pop { animation: jm-pop .75s cubic-bezier(.34,1.56,.64,1) var(--jm-d, 0s) both; }
@keyframes jm-pop {
  0%   { opacity: 0; translate: 0 38px; scale: .92; }
  45%  { opacity: 1; }
  100% { opacity: 1; translate: 0 0; scale: 1; }
}

/* ---------- B. floating logo shapes ---------- */
.jm img.deco { animation: var(--jm-float) var(--jm-fd, 0s) infinite; }
.jm img.deco[src*="flower"]    { --jm-float: jm-spin 26s linear; }
.jm img.deco[src*="blossom"]   { --jm-float: jm-spin-back 20s linear; }
.jm img.deco[src*="squiggle"]  { --jm-float: jm-wiggle 3.4s ease-in-out; }
.jm img.deco[src*="tulip"]     { --jm-float: jm-sway 4.2s ease-in-out; transform-origin: 50% 95%; }
.jm img.deco[src*="triangles"] { --jm-float: jm-drift 6.5s ease-in-out; }
.jm img.deco[src*="ribbon"]    { --jm-float: jm-float 7s ease-in-out; }
.jm img.deco[src*="arc"]       { --jm-float: jm-rock 5.5s ease-in-out; }
@keyframes jm-spin      { to { rotate: 360deg; } }
@keyframes jm-spin-back { to { rotate: -360deg; } }
@keyframes jm-wiggle { 0%, 100% { rotate: -7deg; } 50% { rotate: 7deg; translate: 0 -4px; } }
@keyframes jm-sway   { 0%, 100% { rotate: -6deg; } 50% { rotate: 6deg; } }
@keyframes jm-drift  { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 8px -12px; rotate: 5deg; } }
@keyframes jm-float  { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: -6px -14px; rotate: -3deg; } }
@keyframes jm-rock   { 0%, 100% { rotate: -9deg; } 50% { rotate: 9deg; } }

/* ---------- C. hover joy: cards tilt and a logo shape peeks in; buttons squish ---------- */
html .jm-tilt { isolation: isolate; transition: transform .2s, box-shadow .2s, rotate .35s cubic-bezier(.34,1.56,.64,1); }
.jm-peek {
  position: absolute; z-index: -1; right: -6px; bottom: -6px; width: 74px; height: auto; pointer-events: none; user-select: none;
  opacity: 0; translate: 55% 55%; rotate: 40deg; scale: .5;
  transition: opacity .25s, translate .45s cubic-bezier(.34,1.56,.64,1), rotate .45s cubic-bezier(.34,1.56,.64,1), scale .45s cubic-bezier(.34,1.56,.64,1);
}
@media (hover: hover) {
  html .jm-tilt:hover { rotate: -1.4deg; }
  html .jm-tilt.jm-alt:hover { rotate: 1.4deg; }
  .jm-tilt:hover .jm-peek { opacity: 1; translate: 20% 22%; rotate: -12deg; scale: 1; }
  :is(.btn, .jc-btn, .pill, .share-btn, .contact-btn, .suggest-btn, .soon-cta, .town-form button,
      .social-btn, .card-cta, .filter-btn, .sf-social, .social, .theme-toggle, .story-link):hover { animation: jm-jelly .5s ease-out; }
}
:is(.btn, .jc-btn, .pill, .share-btn, .contact-btn, .suggest-btn, .soon-cta, .town-form button,
    .social-btn, .card-cta, .filter-btn, .sf-social, .social, .theme-toggle, .story-link):active { scale: 1.07 .9; }
@keyframes jm-jelly { 0% { scale: 1; } 30% { scale: 1.07 .92; } 55% { scale: .96 1.05; } 75% { scale: 1.02 .98; } 100% { scale: 1; } }

/* ---------- D. handwritten words write themselves in ----------
   Keep this selector list in sync with WRITE in /js/motion.js */
.jm :is(h1 .script, h2 .script, .hero-headline .script, .section-intro .label, .about h2 span,
        .about-hero .hero-kicker, .about-hero em):not(.jm-seen) { opacity: 0; } /* not clip-path: fully clipped targets never report as on-screen */
.jm-write { animation: jm-write var(--jm-wt, 1s) cubic-bezier(.5,.1,.45,.95) var(--jm-d, 0s) both; }
@keyframes jm-write { from { opacity: 1; clip-path: inset(-40% 100% -40% -12%); } to { opacity: 1; clip-path: inset(-40% -12% -40% -12%); } }

/* ---------- E. scribble underline under page titles ---------- */
.jm-scribble { display: block; width: min(300px, 62%); height: auto; margin: .5rem auto 0; overflow: visible; pointer-events: none; }
.jm-scribble path { fill: none; stroke: var(--jm-accent, var(--coral)); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.jm-scribble path + path { stroke-width: 3.5; opacity: .8; }
.jm .jm-scribble path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.jm .jm-scribble.jm-draw path { animation: jm-draw .6s cubic-bezier(.6,.1,.4,1) var(--jm-d, 0s) forwards; }
.jm .jm-scribble.jm-draw path + path { animation-delay: calc(var(--jm-d, 0s) + .45s); animation-duration: .45s; }
@keyframes jm-draw { to { stroke-dashoffset: 0; } }
.hero-left .jm-scribble { margin: -.2rem 0 1.4rem; width: min(330px, 80%); }
.about-hero .jm-scribble { margin-left: 0; }
.section-intro .jm-scribble { margin-top: -.2rem; margin-bottom: .9rem; }
@media (max-width: 960px) { .hero-left .jm-scribble { margin-left: auto; margin-right: auto; } }
@media (max-width: 820px) { .about-hero .jm-scribble { margin-left: auto; } }