/* Optional motion layer. Content never depends on an animation completing. */
.carousel-controls .rotation-toggle{width:auto;min-width:126px;font-size:13px;padding:4px 16px;font-weight:700}
.carousel-controls .rotation-toggle:disabled{cursor:default;opacity:.6}

@media(prefers-reduced-motion:no-preference){
  .button{transition:transform .25s ease,box-shadow .25s ease,background .25s ease}
  .button:after{transition:transform .25s ease}
  .button:hover,.button:focus-visible{transform:translateY(-3px);box-shadow:0 10px 24px #6b286b26}
  .button:hover:after,.button:focus-visible:after{transform:translate(2px,-2px)}
  .button:active{transform:translateY(0);box-shadow:none}
  .main-nav>a,.nav-submenu a{transition:color .2s ease,background .2s ease,border-color .2s ease}
  .nav-group>summary:after{display:inline-block;transition:transform .25s ease}
  .nav-group[open]>summary:after{transform:rotate(180deg)}
  .feature>img,.icon-row>img{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
  .feature:hover>img,.feature:focus-within>img{transform:translateY(-6px) rotate(-3deg)}
  .icon-row:hover>img{transform:translateY(-4px) scale(1.045)}
  .blog-card>a{display:block;overflow:hidden;border-radius:12px}
  .blog-card img{transition:transform .55s cubic-bezier(.2,.7,.2,1)}
  .blog-card:hover img,.blog-card:focus-within img{transform:scale(1.035)}
  .section-nav a{transition:background .25s ease,transform .25s ease,border-color .25s ease}
  .section-nav span{transition:opacity .2s ease,transform .2s ease;transform:translateX(5px)}
  .section-nav a:hover span,.section-nav a:focus-visible span{transform:translateX(0)}
  .logo-item img{transition:transform .3s ease}
  .logo-item:hover img{transform:scale(1.05)}
  .carousel-controls button{transition:background .2s ease,transform .2s ease}
  .carousel-controls button:hover:not(:disabled){background:#faf0f7;transform:translateY(-2px)}
  .faq-list summary{transition:color .2s ease}
  .faq-list summary:hover{color:var(--pink)}
  .image-dialog[open]{animation:p51-dialog-in .25s cubic-bezier(.2,.7,.2,1)}
  .image-dialog[open]::backdrop{animation:p51-backdrop-in .25s ease}
  @keyframes p51-dialog-in{from{opacity:.3;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
  @keyframes p51-backdrop-in{from{opacity:0}to{opacity:1}}
}

@media(min-width:900px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .motion-parallax .hero-artwork{transform:translate3d(0,var(--motion-depth,0px),0) scale(1.08)}
  .motion-parallax .home-hero[data-depth-active] .hero-artwork{will-change:transform}
  .motion-parallax .visual.motion-depth>img,.motion-parallax .visual.motion-depth>.zoom-link>img{transform:translate3d(0,var(--motion-depth,0px),0)}
  .motion-parallax .visual.motion-depth>.zoom-link:hover>img{transform:translate3d(0,var(--motion-depth,0px),0) scale(1.015)}
  .motion-parallax .visual.motion-depth[data-depth-active]>img,.motion-parallax .visual.motion-depth[data-depth-active]>.zoom-link>img{will-change:transform}
}

@media(prefers-reduced-motion:reduce){.motion-depth{--motion-depth:0px!important}}
@media print{.rotation-toggle{display:none}}