/* Motion enhances the live page without changing its content or layout. */
@media (min-width: 901px) {
  :root {
    --rasa-ease-out: cubic-bezier(.25, 1, .5, 1);
    --rasa-ease-food: cubic-bezier(.16, 1, .3, 1);
  }
  .rasa-motion-enabled .rasa-hero-product { animation: none; }
  /* The old floating contact pulse ran indefinitely and repainted its shadow. */
  .wa-float { animation: none; }
}

@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .site-header .nav-link::after, .site-header .dropdown,
  .hero-desktop a, .hero-desktop a svg,
  .rp-samples, .rp-samples svg, .rp-arrow, .ws-link, .ws-link svg,
  .rc-actions a, .rc-actions svg, .ra-more, .ra-more svg,
  .rt-arrow, .rf-submit, .rf-submit svg, .rft-up-icon, .rft-up svg {
    transition-timing-function: var(--rasa-ease-out);
  }

  .rp-tab { transition: color 180ms var(--rasa-ease-out), background 180ms var(--rasa-ease-out), border-color 180ms var(--rasa-ease-out), transform 200ms var(--rasa-ease-out); }
  .rp-tab:active { transform: scale(.98); }
  .rp-samples:active, .rp-arrow:active, .ws-link:active,
  .rt-arrow:active:not(:disabled), .ra-more:active,
  .rc-actions a:active, .rf-submit:active:not(:disabled) { transform: translateY(1px) scale(.98); }
  .rp-arrow, .rt-arrow, .ws-link, .rf-submit { transition-property: color, background, border-color, transform; }
  .rp-arrow svg, .rt-arrow svg { transition: transform 220ms var(--rasa-ease-out); }
  .rp-next:hover svg, .rt-arrow-next:hover:not(:disabled) svg { transform: translateX(3px); }
  .rp-previous:hover svg { transform: translateX(3px); }
  .rt-arrow:not(.rt-arrow-next):hover:not(:disabled) svg { transform: translateX(-3px); }

  .rp-panel.is-entering .rp-art { animation: rasa-range-food 420ms var(--rasa-ease-food) both; }
  .rp-panel.is-entering .rp-detail { animation: rasa-range-copy 280ms var(--rasa-ease-out) both; }
  .rp-panel.is-entering .rp-product-list li:nth-child(-n+3) { animation: rasa-row-in 300ms var(--rasa-ease-out) both; }
  .rp-panel.is-entering .rp-product-list li:nth-child(2) { animation-delay: 35ms; }
  .rp-panel.is-entering .rp-product-list li:nth-child(3) { animation-delay: 70ms; }
  .rp-panel:focus-within .rp-detail, .rp-panel:focus-within .rp-product-list li { animation: none; }

  .ws-panel.is-entering img { animation: rasa-photo-in 440ms var(--rasa-ease-out) both; }
  .ws-panel.is-entering .ws-caption { animation: rasa-row-in 300ms var(--rasa-ease-out) both; }
  .ws-panel:focus-within .ws-caption { animation: none; }

  .rasa-motion-enabled .hw-steps[data-motion-played] .hw-step:not(:last-child) .hw-track::before {
    transform-origin: left;
    animation: rasa-track-in 440ms var(--rasa-ease-out) backwards;
  }
  .hw-step:nth-child(2) .hw-track::before { animation-delay: 100ms !important; }
  .hw-step:nth-child(3) .hw-track::before { animation-delay: 200ms !important; }

  .rf-error:not([hidden]) { animation: rasa-feedback-in 150ms var(--rasa-ease-out); }
  .rf-status:not([hidden]) { animation: rasa-feedback-in 240ms var(--rasa-ease-out); }
  .rf-form[aria-busy="true"] .rf-submit::after { animation: rasa-sending 800ms linear infinite; }

  @keyframes rasa-range-food {
    from { opacity: .2; transform: translate3d(0, 18px, 0) scale(.98); }
    to { opacity: 1; transform: none; }
  }
  @keyframes rasa-range-copy {
    from { opacity: .3; transform: translate3d(12px, 0, 0); }
    to { opacity: 1; transform: none; }
  }
  @keyframes rasa-row-in {
    from { opacity: .25; transform: translate3d(0, 8px, 0); }
    to { opacity: 1; transform: none; }
  }
  @keyframes rasa-photo-in {
    from { opacity: .4; transform: scale(1.035); }
    to { opacity: 1; transform: none; }
  }
  @keyframes rasa-track-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes rasa-feedback-in { from { opacity: .25; } to { opacity: 1; } }
  @keyframes rasa-sending { to { transform: rotate(360deg); } }
}

@media (min-width: 901px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .rp-tab:hover { transform: translateY(-2px); }
  .rp-tab:active { transform: translateY(0) scale(.98); }
  .ra-photo { transition: transform 600ms var(--rasa-ease-out); }
  .ra-visual:hover .ra-photo { transform: scale(1.025); }
}

@media (min-width: 901px) {
  .rf-submit { position: relative; }
  .rf-form[aria-busy="true"] .rf-submit svg { visibility: hidden; }
  .rf-form[aria-busy="true"] .rf-submit::after {
    content: "";
    position: absolute;
    right: 26px;
    width: 19px;
    height: 19px;
    border: 2px solid #ffffff55;
    border-top-color: #fff;
    border-radius: 50%;
  }
}

@media (min-width: 901px) and (prefers-reduced-motion: reduce) {
  .rp-panel.is-entering *, .ws-panel.is-entering *, .hw-track::before,
  .rf-error, .rf-status, .rf-submit::after { animation: none !important; }
  .rp-tab, .rp-arrow svg, .rt-arrow svg, .ra-photo { transition: none; }
}
