html {
  scroll-behavior: smooth;
}

button,
.button-primary,
.button-outline,
.home-product-status a,
.school-catalog__card-open,
.school-catalog__detail-enquiry {
  transition:
    color 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 220ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .button-primary:hover,
  .home-product-status a:hover,
  .school-catalog__card-open:hover,
  .school-catalog__detail-enquiry:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgb(20 41 61 / 12%);
  }

  #shop-by-school > ul > li article,
  #shop-by-category article {
    box-shadow: 0 5px 18px rgb(20 41 61 / 6%);
    transition: box-shadow 240ms ease, transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  #shop-by-school > ul > li article:hover,
  #shop-by-category article:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 34px rgb(20 41 61 / 13%);
  }

  #shop-by-category article img {
    transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  #shop-by-category article:hover img {
    transform: scale(1.035);
  }

  #shop-by-category article > div:last-of-type > span {
    transition: transform 200ms ease, color 200ms ease;
  }

  #shop-by-category article:hover > div:last-of-type > span {
    transform: translateX(3px);
    color: #9a7420;
  }

  .home-products article > a:first-child {
    overflow: hidden;
  }

  .home-products article > a:first-child img {
    transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .home-products article:hover > a:first-child img {
    transform: scale(1.035);
  }
}

header nav a,
header [role="navigation"] a {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: color 180ms ease, background-size 220ms ease;
}

header nav a:hover,
header [role="navigation"] a:hover {
  background-size: 100% 1px;
}

.header-utility {
  position: relative;
}

.header-utility::after {
  position: absolute;
  z-index: 40;
  top: calc(100% + 0.25rem);
  left: 50%;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 0.4rem;
  padding: 0.35rem 0.55rem;
  color: #fff;
  background: #183545;
  box-shadow: 0 5px 16px rgb(20 41 61 / 18%);
  content: attr(data-header-tooltip);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -3px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.header-utility:hover::after,
.header-utility:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.header-cart-count {
  position: absolute;
  top: -0.4rem;
  right: -0.5rem;
  display: grid;
  min-width: 1.05rem;
  height: 1.05rem;
  place-items: center;
  border: 2px solid #ffeb00;
  border-radius: 999px;
  padding-inline: 0.15rem;
  color: #fff;
  background: #183545;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
}

.header-cart-count[hidden] {
  display: none;
}

.motion-enabled .motion-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 500ms ease,
    transform 560ms cubic-bezier(0.22, 1, 0.36, 1);
}

.motion-enabled .motion-reveal.is-motion-visible {
  opacity: 1;
  transform: translateY(0);
}

.school-catalog__loading {
  animation: catalog-loading-pulse 1.5s ease-in-out infinite alternate;
}

@keyframes catalog-loading-pulse {
  to {
    opacity: 0.62;
  }
}

@media (max-width: 760px) {
  html {
    scroll-behavior: auto;
  }

  .home-hero__slide.is-active .home-hero__image {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .motion-enabled .motion-reveal {
    opacity: 1;
    transform: none;
  }
}