/* Shared, reversible transitions for navigation, stories and product dialogs. */
.story-dialog[open],.menu-panel{animation:none}
[data-motion]{will-change:opacity,transform}
.menu-panel[data-motion]{will-change:clip-path}
.story-dialog[data-motion="leaving"]::backdrop{animation:backdropLeave .43s cubic-bezier(.22,1,.36,1) both}
.story-dialog[data-motion="entering"]::backdrop{animation:backdropEnter .62s cubic-bezier(.22,1,.36,1) both}
.menu-closing .menu-icon i{top:6px;transform:none}
.menu-closing .menu-icon i+i{top:12px;transform:none}
.story-body[data-motion]{min-height:100dvh}
[data-motion="disclosure"]{overflow:hidden;will-change:height,opacity,padding}
.material-sign{position:relative;flex:0 0 23px;width:23px;height:28px;font-size:0}
.material-sign::before,.material-sign::after{content:'';position:absolute;left:5px;top:50%;width:13px;height:1px;background:currentColor;transform-origin:center;transition:transform .48s var(--ease),opacity .3s var(--ease)}
.material-sign::after{transform:rotate(90deg) scaleX(1)}
.material-item.is-active .material-sign::after{transform:rotate(90deg) scaleX(0);opacity:0}
.story-close,.story-next{transition:background .25s,color .25s,opacity .25s}
.story-close:hover{background:#deded4}
.campaign-image-wrap>img[data-motion],.material-stage img[data-motion],.menu-photo img[data-motion]{transition:none}
@keyframes backdropLeave{from{opacity:1}to{opacity:0}}
@keyframes backdropEnter{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){[data-motion]{will-change:auto}.story-dialog[data-motion]::backdrop{animation:none}}