/* Page scenes: the header animation on each product page (see scenes.js) */
.page-top.has-scene{position:relative;overflow:hidden}
.page-top.has-scene>.wrap{position:relative;z-index:1}
canvas.pscene{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity 1.6s ease}
canvas.pscene.on{opacity:1}
@media (min-width:820px){.page-top.has-scene{min-height:400px;display:flex;align-items:center}.page-top.has-scene>.wrap{width:100%}.page-top.has-scene h1,.page-top.has-scene .lede{max-width:min(16ch,46%)}.page-top.has-scene .lede{max-width:min(44ch,44%)}}
@media (max-width:819.98px){.page-top.has-scene{padding-bottom:258px}}
@media (prefers-reduced-motion:reduce){canvas.pscene{transition:none}}