/* Short springs add a little life without shifting the page layout. */
.button { position: relative; }
.motion-enabled .playful-button-pop {
  animation: playful-button-pop .48s cubic-bezier(.2,.8,.25,1);
}
.motion-enabled .playful-control-pop {
  animation: playful-control-pop .4s cubic-bezier(.2,.85,.25,1);
}
.motion-enabled .playful-arrow-pop {
  animation: playful-arrow-pop .48s cubic-bezier(.2,.8,.25,1);
}
.motion-enabled .button:is(.playful-button-pop, .playful-cta-spark):after {
  content: '';
  position: absolute;
  width: 27px;
  height: 27px;
  right: 7px;
  top: -16px;
  background: var(--turquoise);
  mask: url('/assets/nya-spark.svg') center / contain no-repeat;
  -webkit-mask: url('/assets/nya-spark.svg') center / contain no-repeat;
  pointer-events: none;
  animation: playful-spark-pop .55s ease-out both;
}

/* The frame and its link stay put; only the photograph springs within its crop. */
.motion-enabled :is(.meal-image-link, .food-card-photo, .demo-product-photo, .meal-page-visual .food-photo-frame) img {
  transition: scale .5s cubic-bezier(.2,1.35,.3,1), transform .65s cubic-bezier(.18,.8,.22,1);
}
.motion-enabled .playful-card-hover :is(.meal-image-link, .food-card-photo, .demo-product-photo, .food-photo-frame) img {
  scale: 1.025;
}
.motion-enabled .playful-image-pop { animation: playful-image-pop .65s cubic-bezier(.2,.8,.25,1); }

/* The FAQ question is a stable target; its familiar plus gets the little bounce. */
.motion-enabled .playful-faq-pop { animation: playful-faq-pop .5s cubic-bezier(.2,.8,.25,1); }
.motion-enabled .playful-badge-pop { animation: playful-badge-pop .62s cubic-bezier(.2,.8,.25,1); }
.location-pin { transform-box: fill-box; transform-origin: center; }
.motion-enabled .playful-map-pop { animation: playful-map-pop .7s cubic-bezier(.2,.8,.25,1); }

@media (hover: hover) and (pointer: fine) {
  .motion-enabled :is(.desktop-nav a, .footer-main nav a) {
    background-image: linear-gradient(currentColor,currentColor);
    background-size: 0 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size .28s cubic-bezier(.2,.8,.25,1);
  }
  .motion-enabled :is(.desktop-nav a, .footer-main nav a):is(:hover, :focus-visible) {
    background-size: 100% 1px;
  }
}

@keyframes playful-button-pop {
  0%,100% { scale: 1; }
  24% { scale: .965 .94; }
  58% { scale: 1.025 1.055; }
  80% { scale: .995; }
}
@keyframes playful-control-pop {
  0%,100% { scale: 1; }
  28% { scale: .91; }
  62% { scale: 1.045; }
}
@keyframes playful-arrow-pop {
  0%,100% { scale: 1; rotate: 0deg; }
  25% { scale: .75; rotate: -12deg; }
  60% { scale: 1.25; rotate: 8deg; }
}
@keyframes playful-spark-pop {
  0% { opacity: 0; scale: .25; translate: 0 5px; rotate: -25deg; }
  30% { opacity: 1; scale: 1.1; translate: 0 0; }
  70% { opacity: .8; scale: .85; translate: 0 -8px; rotate: 25deg; }
  100% { opacity: 0; scale: .4; translate: 0 -13px; rotate: 55deg; }
}
@keyframes playful-image-pop {
  0% { scale: 1; }
  50% { scale: 1.045; }
  76% { scale: 1.018; }
  100% { scale: 1.025; }
}
@keyframes playful-faq-pop {
  0%,100% { scale: 1; rotate: 0deg; }
  28% { scale: .68; rotate: -16deg; }
  62% { scale: 1.24; rotate: 9deg; }
}
@keyframes playful-badge-pop {
  0%,100% { scale: 1; }
  25% { scale: .75; }
  62% { scale: 1.12; }
  82% { scale: .98; }
}
@keyframes playful-map-pop {
  0%,100% { scale: 1; }
  25% { scale: .85; }
  60% { scale: 1.09; }
  82% { scale: .99; }
}

/* A device's reduced-motion preference always wins, including before JS loads. */
@media (prefers-reduced-motion: reduce) {
  :is(.playful-button-pop, .playful-control-pop, .playful-arrow-pop, .playful-image-pop, .playful-faq-pop, .playful-badge-pop, .playful-map-pop),
  .button:is(.playful-button-pop, .playful-cta-spark):after { animation: none !important; }
  .button:is(.playful-button-pop, .playful-cta-spark):after { content: none; }
  .playful-card-hover img { scale: 1 !important; }
}
.motion-off .button:is(.playful-button-pop, .playful-cta-spark):after { content: none; }
.motion-off .playful-card-hover img { scale: 1 !important; }