/* Separate transform properties let scroll entrances and mouse tilt coexist. */
@keyframes reveal {
  from { opacity: .25; translate: 0 32px; }
  to { opacity: 1; translate: 0 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .motion-visible { animation: reveal .8s cubic-bezier(.2,.7,.2,1) both; }
  .product-card.motion-visible:nth-child(2) { animation-delay: .09s; }
  .product-card.motion-visible:nth-child(3) { animation-delay: .18s; }
  .product-card, .journey a { transition: transform .25s ease-out, border-color .25s, box-shadow .25s; }
  .product-card.motion-hover, .journey a.motion-hover {
    transform: perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));
    border-color: #89bda0;
    box-shadow: 0 18px 48px #0007;
  }
  .product-card::after, .journey a::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    background: radial-gradient(260px circle at var(--mouse-x,50%) var(--mouse-y,50%), #d5ffe521, transparent 75%);
    opacity: 0; transition: opacity .3s; pointer-events: none;
  }
  .product-card.motion-hover::after, .journey a.motion-hover::after { opacity: 1; }
  .journey a { position: relative; }
  .hero-art img, .owner-image img { translate: 0 var(--scroll-shift,0px); }
  .button:hover { box-shadow: 0 0 24px #c6e9d61c; }
}
@media (prefers-reduced-motion: reduce) {
  .motion-visible { animation: none; }
  .motion-hover { transform: none!important; }
}