/* Bem Jam – Motion und Grain */

/* Grain – liegt als fixes Overlay über allem, Gate bleibt darüber (z-index 9999) */
.grain{position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.22;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:240px 240px;animation:grain .8s steps(4) infinite}
@keyframes grain{0%{background-position:0 0}25%{background-position:-70px 40px}50%{background-position:50px -90px}75%{background-position:-110px -60px}100%{background-position:80px 100px}}

/* Reveal-Animationen (nur mit JS und ohne Reduced-Motion aktiv) */
html.js.motion .rv{opacity:0;transition:opacity .9s cubic-bezier(.22,.61,.36,1),translate .9s cubic-bezier(.22,.61,.36,1),scale .9s cubic-bezier(.22,.61,.36,1),rotate .9s cubic-bezier(.22,.61,.36,1);transition-delay:var(--d,0s)}
html.js.motion .rv-up{translate:0 36px}
html.js.motion .rv-left{translate:-48px 0}
html.js.motion .rv-scale{scale:.9;transform-origin:50% 50%}
html.js.motion .rv-zoom{scale:1.05;transform-origin:50% 50%}
html.js.motion .rv-pop{scale:.86;translate:0 24px;transform-origin:50% 50%}
html.js.motion .rv-tilt{rotate:var(--r,0deg)}
html.js.motion .card-1.rv-tilt{--r:-8deg}
html.js.motion .card-2.rv-tilt{--r:3deg}
html.js.motion .card-3.rv-tilt{--r:8deg}
html.js.motion .rv.in{opacity:1;translate:0 0;scale:1;rotate:0deg}
html.js.motion .rv.px{transition-property:opacity,scale}
html.js.motion .rv.no-anim{transition:none!important}

/* sanftes Schweben: Logo-Buchstaben im Hero, Pancakes + Gabel (gleiche Kurve, bleiben synchron) */
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes floaty-sm{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
html.js.motion .hero__logo-back,html.js.motion .hero__logo-front{animation:floaty 7s ease-in-out infinite}
html.js.motion .intro__pancakes,html.js.motion .intro__fork{animation:floaty-sm 6s ease-in-out infinite}
html.js.motion .bp-m .intro__fork{animation:floaty-sm 6s ease-in-out infinite}
html.js.motion .hero__logo-front{animation-delay:-.6s}

/* Hover-Feinheit Button */
html.js.motion .values__cta{transition:transform .25s ease,opacity .9s cubic-bezier(.22,.61,.36,1),translate .9s cubic-bezier(.22,.61,.36,1);transition-delay:0s,var(--d,0s),var(--d,0s)}
html.js.motion .values__cta:hover{transform:translateY(-2px)}

@media (prefers-reduced-motion:reduce){
  .grain{animation:none}
  .rv{opacity:1;translate:0 0;scale:1;rotate:0deg}
}