@media(prefers-reduced-motion:no-preference){
  .hero-copy>*{animation:entrance .7s cubic-bezier(.2,.65,.3,1) both}
  .hero-copy>:nth-child(2){animation-delay:80ms}.hero-copy>:nth-child(3){animation-delay:160ms}.hero-copy>:nth-child(4){animation-delay:230ms}.hero-copy>:nth-child(5){animation-delay:300ms}.hero-copy>:nth-child(6){animation-delay:350ms}
  .hero-copy>:nth-child(n+7){animation-delay:400ms}
  .photo-frame{animation:photo-entrance .9s ease-out 100ms both}
  .calendar-inset{animation:entrance .8s ease-out 350ms both,calendar-float 4.8s ease-in-out 1.2s infinite}
  .calendar-inset .status-dot{animation:sync-pulse 3.2s ease-in-out 1.2s infinite}
  .calendar-inset.motion-paused{animation-play-state:running,paused}
  .calendar-inset.motion-paused .status-dot{animation-play-state:paused}
  .discount-sticker{animation:entrance .8s ease-out 400ms both,badge-float 2.4s ease-in-out 1.3s 2}
  [data-reveal]{opacity:0;translate:0 20px;transition:opacity .65s ease,translate .65s cubic-bezier(.2,.65,.3,1);transition-delay:var(--reveal-delay,0ms)}
  [data-reveal].is-revealed,[data-reveal]:focus-within{opacity:1;translate:0 0}
  .button{transition:background .22s,transform .22s,box-shadow .22s}.button:hover{box-shadow:0 7px 18px #294d441a}.button>span{transition:translate .22s}.button:hover>span{translate:3px -2px}.feature-icon{transition:transform .3s}.benefit-grid article:hover .feature-icon{transform:translateY(-4px) rotate(-6deg)}
  @keyframes entrance{from{opacity:0;translate:0 20px}to{opacity:1;translate:0 0}}
  @keyframes photo-entrance{from{opacity:0;scale:.97;translate:0 15px}to{opacity:1;scale:1;translate:0 0}}
  @keyframes badge-float{0%,100%{rotate:0deg}50%{rotate:-3deg}}
  @keyframes calendar-float{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -9px;rotate:.6deg}}
  @keyframes sync-pulse{0%,100%{opacity:1}50%{opacity:.5}}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
@media print{[data-reveal]{opacity:1;translate:none}*,*::before,*::after{animation:none!important;transition:none!important}}

@media(prefers-reduced-motion:no-preference){
  [data-reveal]{translate:0 38px;transition-duration:.85s}
  .hero::before{animation:hero-settle 1.4s ease-out both}
  .benefit-grid article{transition:background .3s,box-shadow .3s}
  .benefit-grid article:hover{background:#c4905f0a;box-shadow:0 -2px var(--copper)}
  .feature-icon{transition:transform .4s,background .4s}
  .benefit-grid article:hover .feature-icon{background:var(--lavender);transform:translateY(-6px) rotate(-10deg)}
  .faq-list details[open]>p{animation:answer-enter .35s ease-out both}
  .faq-list summary{transition:color .2s,padding-left .25s}
  .faq-list summary:hover{color:#8b5d34;padding-left:8px}
  .button:hover{transform:translateY(-4px);box-shadow:0 10px 24px #07111e26}
  .button:active{transform:translateY(-1px)}
  @keyframes hero-settle{from{opacity:.5;background-position:var(--hero-photo-x,50%) 48%}to{opacity:1;background-position:var(--hero-photo-x,50%) 56%}}
  @keyframes answer-enter{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
  @supports(animation-timeline:view()){
    .hero::before{animation:hero-pan linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
    @keyframes hero-pan{from{background-position:var(--hero-photo-x,50%) 56%}to{background-position:var(--hero-photo-x,50%) 85%}}
  }
}