/* Interaction states only. The visual design belongs in the main theme stylesheet. */

.sail-preloader {
  opacity: 1;
  transition: opacity 320ms ease, visibility 320ms ease;
}

.sail-preloader.is-dismissed {
  animation: none;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.sail-preloader[hidden] {
  display: none !important;
}

[data-sail-header],
.site-header {
  transition: box-shadow 220ms ease, background-color 220ms ease, transform 220ms ease;
}

[data-sail-header].is-scrolled,
.site-header.is-scrolled {
  will-change: box-shadow, background-color;
}

[data-sail-menu].is-open {
  animation: sail-menu-in 220ms ease both;
}

.sail-menu-is-open {
  overflow: hidden;
}

[data-sail-slider] [data-sail-slide] {
  transition: opacity 320ms ease, transform 320ms ease;
}

[data-sail-slider] [data-sail-slide][aria-hidden="true"] {
  pointer-events: none;
}

[data-sail-slider]:not([data-sail-carousel]) [data-sail-slide][aria-hidden="true"] {
  display: none;
}

[data-sail-slider] [data-sail-dot].is-active {
  pointer-events: none;
}

.sail-slide-enter {
  animation: sail-slide-in 480ms cubic-bezier(.22, .61, .36, 1) both;
}

.sail-motion-ready [data-sail-reveal] {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity 620ms ease, transform 620ms cubic-bezier(.22, .61, .36, 1);
}

.sail-motion-ready [data-sail-reveal="left"] {
  transform: translate3d(-28px, 0, 0);
}

.sail-motion-ready [data-sail-reveal="right"] {
  transform: translate3d(28px, 0, 0);
}

.sail-motion-ready [data-sail-reveal].is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

[data-sail-tilt] {
  transition: transform 180ms ease;
  transform-style: preserve-3d;
}

[data-sail-tilt].is-tilting {
  transform: perspective(850px) rotateX(var(--sail-tilt-x, 0deg)) rotateY(var(--sail-tilt-y, 0deg));
}

[data-sail-filter].is-active,
[data-sail-accordion-button][aria-expanded="true"] {
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

[data-sail-category] {
  transition: opacity 220ms ease, transform 220ms ease;
}

[data-sail-category].is-filtered-out {
  display: none;
}

[data-sail-back-to-top] {
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 10px, 0);
  transition: opacity 180ms ease, transform 180ms ease;
}

[data-sail-back-to-top].is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
}

:where([data-sail-menu-toggle], [data-sail-prev], [data-sail-next], [data-sail-dot], [data-sail-accordion-button], [data-sail-filter], [data-sail-back-to-top]):focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

@keyframes sail-menu-in {
  from {
    opacity: 0;
    transform: translate3d(0, -8px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes sail-slide-in {
  from {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .sail-motion-ready [data-sail-reveal] {
    opacity: 1;
    transform: none;
  }

  [data-sail-tilt].is-tilting {
    transform: none;
  }
}