/* Motion enhances visible content; content never depends on an animation to appear. */
.hero h1 .hero-line{display:block;overflow:clip;padding-bottom:.15em;margin-bottom:-.15em}
.hero h1 em.hero-line{margin-top:3px;font-style:italic}
.hero-line-inner{display:inline-block;vertical-align:top}
.hero .hero-copy h1,.hero-copy>p,.hero-actions{animation:none}
.business-serving{overflow:hidden}
.site-header{transition:background .3s,box-shadow .3s,border-color .3s}
.site-header.is-scrolled{background:#fffefafc;box-shadow:0 8px 30px #102b4620;border-color:#d4dacd}

@media(prefers-reduced-motion:no-preference){
  .hero-serving-image{transform:translate3d(0,var(--hero-shift,0px),0) scale(1.045);transform-origin:60% 50%}
  .business-serving>img{transform:translate3d(0,var(--business-shift,0px),0) scale(1.075)}
  .product-card .product-image{transition:border-color .3s,box-shadow .4s;isolation:isolate}
  .product-card .product-image img{transition:transform .65s cubic-bezier(.2,.75,.2,1);transform-origin:50% 80%}
  .hero-featured{transition:transform .4s cubic-bezier(.2,.75,.2,1),box-shadow .4s}
  .hero-featured:hover{transform:translateY(-5px);box-shadow:0 14px 35px #10294424}
  .button{transition:background .2s,color .2s,transform .3s,box-shadow .3s}
  .button:active,.add-button:active{transform:scale(.97)}
  .hero-actions .button>span,.business-actions .button>span{transition:transform .3s}
  .hero-actions .button:hover>span,.business-actions .button:hover>span{transform:translate(2px,-2px)}
  section.recipes .recipe-type-card>img{transition:transform .7s cubic-bezier(.2,.75,.2,1),box-shadow .5s}
  section.recipes .recipe-type-indicator{transition:transform .4s,background .25s,color .25s}
  section.recipes .recipe-type-card:hover .recipe-type-indicator,section.recipes .recipe-type-card:focus-visible .recipe-type-indicator{transform:rotate(45deg);background:var(--navy);color:#fff}
  .filters button{transition:background .25s,color .25s,border-color .25s,transform .25s}
  .filters button:active{transform:scale(.98)}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .product-card .product-image:hover,.product-card:focus-within .product-image{border-color:#8d9e86;box-shadow:0 12px 28px #183e5010}
  .product-card .product-image:hover img,.product-card:focus-within .product-image img{transform:translateY(-7px) rotate(-1deg) scale(1.045)}
  section.recipes .recipe-type-card:hover>img,section.recipes .recipe-type-card:focus-visible>img{transform:translateY(-6px) rotate(-.6deg);box-shadow:0 18px 35px #173a4b18}
}
@media(max-width:600px){.hero-serving-image,.business-serving>img{transform:none}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-serving-image,.business-serving>img,.hero-line-inner,.hero-featured,.recipe-type-card>img,.recipe-type-indicator{transform:none!important}
  .site-header,.button,.hero-featured,.product-card,.product-image,.product-image img,.recipe-type-card,.recipe-type-card>img,.recipe-type-indicator,.filters button{animation:none!important;transition:none!important}
}
