/* Motion layer — ported from impossiblefoods.com inventory (2026-09-10): hero masks appear-from-left/right 0.6s,
   scroll parallax on masks (drift outward + fade, inner image 1.15x slow drift), headline text stack,
   reveal-on-scroll opacity/transform 0.6s, 0.3s color hovers, 0.6s transform hovers. Flat: no shadows/gradients. */
@media (prefers-reduced-motion: no-preference) {
  html.m-ready:not(.m-paused) .hero .m-parallax { will-change: transform, opacity; }
  html.m-ready:not(.m-paused) .hero .m-side-l { animation: m-from-left .6s cubic-bezier(.39,.575,.565,1) both; }
  html.m-ready:not(.m-paused) .hero .m-side-r { animation: m-from-right .6s cubic-bezier(.39,.575,.565,1) both; }
  @keyframes m-from-left  { from { opacity: 0; transform: translate3d(-64px, 0, 0); } to { opacity: 1; transform: none; } }
  @keyframes m-from-right { from { opacity: 0; transform: translate3d(64px, 0, 0); } to { opacity: 1; transform: none; } }
  html.m-ready:not(.m-paused) .hero .m-rise { animation: m-rise .7s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes m-rise { from { opacity: 0; transform: translate3d(0, 28px, 0); } to { opacity: 1; transform: none; } }
  /* inner image of a mask: slight zoom so the scroll drift has room */
  html:not(.m-paused) .hero .m-parallax > img, html:not(.m-paused) .hero .m-parallax picture img { transform: scale(1.12); transform-origin: 50% 50%; transition: transform .6s cubic-bezier(.39,.575,.565,1); }
  /* headline stack: the parenthetical qualifier cycles */
  .m-stack { display: inline-block; transition: opacity .35s ease, transform .35s cubic-bezier(.2,.7,.2,1); }
  .m-stack.m-out { opacity: 0; transform: translate3d(0, -.12em, 0); }
  .m-stack.m-pre { opacity: 0; transform: translate3d(0, .12em, 0); transition: none; }
  /* reveal on scroll */
  .m-reveal { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity .6s cubic-bezier(.39,.575,.565,1), transform .6s cubic-bezier(.39,.575,.565,1); transition-delay: var(--m-delay, 0ms); }
  .m-reveal.m-in { opacity: 1; transform: none; }
  /* hovers per the reference: color 0.3s, transform 0.6s */
  .btn, .pill, .choice span, .choice, .lang-toggle button, .lang button, .tile, nav a { transition-duration: .3s; transition-timing-function: ease; }
  .tile { transition-property: background-color, color, border-color; }
  .tile:hover { background-color: color-mix(in srgb, var(--color-accent) 8%, transparent); }
  .tile:hover .tile-index, .tile:hover .mono { color: var(--color-accent); }
  .venue-photo img, .venue-fig img, .mask--venue img, [class*="venue"] .mask img, [class*="venue"] img { transition: transform .6s cubic-bezier(.39,.575,.565,1); }
  .venue-photo:hover img, .venue-fig:hover img, [class*="venue"] .mask:hover img { transform: scale(1.04); }
  .btn:hover { transform: translate3d(0, -1px, 0); transition-property: background-color, color, border-color, transform; }
  .btn > span, .btn > svg { transition: transform .3s ease; }
  .btn:hover > span, .btn:hover > svg { transform: translate3d(2px, -2px, 0); }
  /* nav: solid bar gains a hairline once scrolled */
  header, .site-header, .nav { transition: box-shadow .3s ease, border-color .3s ease; }
}

/* A durable pause stops the full expressive layer, including off-screen reveals and hover movement. */
html.m-paused { scroll-behavior: auto !important; }
html.m-paused *, html.m-paused *::before, html.m-paused *::after {
  animation: none !important;
  transition: none !important;
}
html.m-paused .m-reveal, html.m-paused .m-stack,
html.m-paused .hero .m-rise, html.m-paused .hero .m-parallax,
html.m-paused .display--hero {
  opacity: 1 !important;
  transform: none !important;
  will-change: auto !important;
}
html.m-paused .hero .m-parallax img,
html.m-paused .venue-photo:hover img, html.m-paused .venue-fig:hover img,
html.m-paused [class*="venue"] .mask:hover img,
html.m-paused .btn:hover, html.m-paused .btn:hover > span, html.m-paused .btn:hover > svg {
  transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .m-reveal, .m-stack, .hero .m-rise, .hero .m-parallax, .display--hero {
    opacity: 1 !important;
    transform: none !important;
    will-change: auto !important;
  }
  .hero .m-parallax img, .venue-photo:hover img, .venue-fig:hover img,
  [class*="venue"] .mask:hover img, .btn:hover, .btn:hover > span, .btn:hover > svg { transform: none !important; }
}