/* Quiet, one-time entrances; short and interruptible interaction feedback. */
:root{--ease-out:cubic-bezier(0.23,1,0.32,1);--ease-in-out:cubic-bezier(0.77,0,0.175,1);--ease-drawer:cubic-bezier(0.32,0.72,0,1);--motion-press:140ms;--motion-ui:220ms}
@media(prefers-reduced-motion:no-preference){
 .motion-ready [data-motion-state=pending]{opacity:0}
 .motion-ready[data-motion-input=pointer] :is(.button,.shop-button,.quantity-control button,.gallery-thumbs button,.icon-button){transition:transform var(--motion-press) var(--ease-out)}
 .motion-ready[data-motion-input=pointer] :is(.button,.shop-button,.quantity-control button,.gallery-thumbs button,.icon-button):active{transform:scale(.97)}
 .motion-ready .desktop-nav a::after{transition:transform 200ms var(--ease-out);transform-origin:left}
 .motion-ready[data-motion-input=pointer] :is(.faq-list summary>span,.notice summary>span:last-child){transition:transform 200ms var(--ease-out)}
 .motion-ready details[data-motion-expanded=false] summary>span:last-child{transform:rotate(0)}
 .motion-ready details[data-motion-expanded=true] summary>span:last-child{transform:rotate(45deg)}
 .motion-ready .gallery-main{overflow:hidden}
 /* Native dialog keeps focus, Escape and top-layer behavior during transitions. */
 .motion-ready[data-motion-input=pointer] :is(.info-dialog,.mobile-menu){opacity:0;transition:opacity 250ms var(--ease-out),transform 250ms var(--ease-out),display 250ms allow-discrete,overlay 250ms allow-discrete}
 .motion-ready[data-motion-input=pointer] .info-dialog{transform:translateY(12px) scale(.97)}
 .motion-ready[data-motion-input=pointer] .mobile-menu{transform:translateX(100%);transition-timing-function:var(--ease-drawer)}
 .motion-ready[data-motion-input=pointer] :is(.info-dialog,.mobile-menu)[open]{opacity:1;transform:none}
 .motion-ready[data-motion-input=pointer] :is(.info-dialog,.mobile-menu)::backdrop{opacity:0;transition:opacity 250ms var(--ease-out),display 250ms allow-discrete,overlay 250ms allow-discrete}
 .motion-ready[data-motion-input=pointer] :is(.info-dialog,.mobile-menu)[open]::backdrop{opacity:1}
 @starting-style{
  .motion-ready[data-motion-input=pointer] .info-dialog[open]{opacity:0;transform:translateY(12px) scale(.97)}
  .motion-ready[data-motion-input=pointer] .mobile-menu[open]{opacity:0;transform:translateX(100%)}
  .motion-ready[data-motion-input=pointer] :is(.info-dialog,.mobile-menu)[open]::backdrop{opacity:0}
 }
 @media(hover:hover) and (pointer:fine){
  .motion-ready :is(.button,.shop-button):hover{transform:translateY(-2px)}
  .motion-ready :is(.button,.text-link,.hero-story,.read-more,.shop-product-title)>svg{transition:transform var(--motion-ui) var(--ease-out)}
  .motion-ready :is(.button,.text-link,.hero-story):hover>svg,.motion-ready :is(.journal-card,.shop-product):hover :is(.read-more,.shop-product-title)>svg{transform:translateX(4px)}
  .motion-ready :is(.journal-image img,.shop-product-image img,.tea-image img){transition:transform 280ms var(--ease-out)}
  .motion-ready :is(.journal-card:hover .journal-image img,.shop-product a:hover .shop-product-image img,.tea-card:hover .tea-image img){transform:scale(1.025)}
  .motion-ready[data-motion-input=pointer] :is(.button,.shop-button):active{transform:scale(.97)}
 }
}
/* Touchscreens must not retain a hover zoom after a tap. */
@media(hover:none),(pointer:coarse){
 .motion-ready :is(.journal-card:hover .journal-image img,.shop-product a:hover .shop-product-image img,.tea-card:hover .tea-image img){transform:none}
 .motion-ready .desktop-nav a:hover:not([aria-current])::after{transform:scaleX(0)}
}
@media(prefers-reduced-motion:reduce){
 .motion-ready [data-motion-state=pending]{opacity:1}
 .motion-ready :is(.journal-card:hover .journal-image img,.shop-product a:hover .shop-product-image img,.tea-card:hover .tea-image img){transform:none}
 .motion-ready[data-motion-input=pointer] :is(.info-dialog,.mobile-menu){opacity:0;transform:none!important;transition:opacity 120ms ease,display 120ms allow-discrete,overlay 120ms allow-discrete!important}
 .motion-ready[data-motion-input=pointer] :is(.info-dialog,.mobile-menu)[open]{opacity:1}
 @starting-style{.motion-ready[data-motion-input=pointer] :is(.info-dialog,.mobile-menu)[open]{opacity:0}}
}
/* Print and hidden panels remain readable regardless of observer state. */
@media print{.motion-ready [data-motion-state]{opacity:1!important;transform:none!important;clip-path:none!important}}