/* Motion enhancements live separately from the readable layout. */
/* Nothing here hides content: the hero only settles into place, and lower reveals are played by motion.js just before they scroll into view. */
:root{--ease-out:cubic-bezier(.2,.8,.2,1);--ease-settle:cubic-bezier(.16,1,.3,1)}

@media(prefers-reduced-motion:no-preference){
  /* Hero: copy and bottles stay at opacity 1 from the first paint. The individual translate/rotate/scale properties compose with the bottle rotations in site.css. */
  .hero-copy>*{animation:motion-settle 450ms var(--ease-settle) backwards}
  .hero-copy>.hero-intro{animation-delay:40ms}
  .hero-copy>.button,.hero-copy>.hero-note{animation-delay:80ms}
  .bottle-mint{animation:motion-bottle-mint 450ms var(--ease-settle) backwards}
  .bottle-lemon{animation:motion-bottle-lemon 450ms var(--ease-settle) backwards}
  .hero-field img{animation:motion-photo 450ms var(--ease-out) backwards}

  /* Buttons swap foreground and background; text links gain a second pixel of underline; nav links take a quiet underline. */
  .button{transition:background-color 200ms var(--ease-out),color 200ms var(--ease-out),border-color 200ms var(--ease-out)}
  .text-link{transition:box-shadow 200ms var(--ease-out)}
  .main-nav a{text-decoration:underline;text-decoration-color:transparent;transition:text-decoration-color 200ms var(--ease-out)}

  /* FAQ: the answer settles in when opened. Closing stays native and instant. */
  details[open]>p{animation:motion-answer 220ms var(--ease-out) backwards}
}

.hero .button-primary:hover,.hero .button-primary:focus-visible{background-color:transparent;color:var(--paper)}
.contact .button:hover,.contact .button:focus-visible{background-color:transparent;color:var(--forest)}
.text-link:hover,.text-link:focus-visible{box-shadow:inset 0 -1px 0 currentColor}
.main-nav a:hover,.main-nav a:focus-visible{text-decoration:underline;text-decoration-color:currentColor}

@keyframes motion-settle{from{translate:0 10px}}
@keyframes motion-bottle-mint{from{translate:8px 18px;rotate:2deg}}
@keyframes motion-bottle-lemon{from{translate:-10px 24px;rotate:-3deg}}
@keyframes motion-photo{from{scale:1.06}}
@keyframes motion-answer{from{opacity:0;translate:0 -4px}}