/* Il checkout resta un dialog nativo, con sfondo scuro anche senza animazioni. */
.sales-page #checkout::backdrop{background:rgba(12,11,10,.82)}

@media (prefers-reduced-motion: no-preference){
  .sales-page .sales-hero h1{animation:page-arrive 850ms cubic-bezier(.2,.65,.25,1) both}
  .sales-page .sales-hero-line,.sales-page .sales-hero-description{animation:page-arrive 850ms cubic-bezier(.2,.65,.25,1) 100ms both}
  .sales-page .sales-art{animation:page-art-arrive 1000ms cubic-bezier(.2,.65,.25,1) both}
  .sales-page #checkout[open]{animation:checkout-arrive 420ms cubic-bezier(.2,.75,.25,1) both}
  .sales-page #checkout[open]::backdrop{animation:backdrop-arrive 350ms ease-out both}
  @supports (animation-timeline: view()){
    .sales-page .sales-story h2,.sales-page .sales-story-copy,.sales-page .sales-themes h2,.sales-page .sales-theme-grid article,.sales-page .offer-visual,.sales-page .offer-intro h2{
      animation:page-arrive linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 95%;
    }
    .sales-page .sales-panorama{
      animation:panorama-arrive linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 90%;
    }
  }
}
@keyframes page-arrive{from{opacity:.55;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes page-art-arrive{from{opacity:.55;transform:translateY(22px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes panorama-arrive{from{opacity:.65;clip-path:inset(0 4%)}to{opacity:1;clip-path:inset(0)}}
@keyframes checkout-arrive{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes backdrop-arrive{from{opacity:0}to{opacity:1}}