:root {
  --anim-ease-ui: cubic-bezier(0.25, 0.69, 0.32, 0.91);
  --anim-ease-move: cubic-bezier(0.25, 0.1, 0.25, 1);
  --anim-ease-fade: cubic-bezier(0.25, 0.1, 0.25, 1);
  --anim-ease-mask: cubic-bezier(0.65, 0, 0.35, 1);
  --anim-ease-slide: cubic-bezier(0.075, 0.82, 0.165, 1);
  --anim-mask-duration: 0.8s;
  --anim-reveal-duration: 0.7s;
  --anim-reveal-distance: 24px;
  --anim-reveal-stagger: 0.1s;
  --anim-panel-duration: 0.8s;
  --anim-panel-distance: 32px;
  --anim-panel-inner-delay: 0.25s;
  --anim-scale-duration: 1s;
  --anim-ui-duration: 0.35s;
  --anim-drawer-duration: 0.5s;
  --anim-drawer-stagger: 0.08s;
  --anim-header-bg: rgba(255, 255, 255, 0.72);
  --anim-header-blur: 8px;
  --anim-order: 0;
}

@media (max-width: 767px) {
  :root {
    --anim-reveal-distance: 16px;
    --anim-panel-distance: 20px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .js-animReveal:not(.is-animDone),
  .js-animLoad:not(.is-animDone) {
    transition:
      opacity var(--anim-reveal-duration) var(--anim-ease-fade),
      translate var(--anim-reveal-duration) var(--anim-ease-move);
    transition-delay: calc(var(--anim-order) * var(--anim-reveal-stagger));
  }

  .js-animReveal:not(.is-animIn),
  .js-animLoad:not(.is-animIn) {
    opacity: 0;
  }

  .js-animReveal:not([data-anim-move="still"]):not(.is-animIn),
  .js-animLoad:not([data-anim-move="still"]):not(.is-animIn) {
    translate: 0 var(--anim-reveal-distance);
    will-change: opacity, translate;
  }

  .js-animPanel:not(.is-animDone) {
    transition:
      opacity var(--anim-panel-duration) var(--anim-ease-fade),
      translate var(--anim-panel-duration) var(--anim-ease-move);
    transition-delay: calc(var(--anim-order) * var(--anim-reveal-stagger));
  }

  .js-animPanel:not(.is-animIn) {
    opacity: 0;
  }

  .js-animPanel:not([data-anim-move="still"]):not(.is-animIn) {
    translate: 0 var(--anim-panel-distance);
    will-change: opacity, translate;
  }

  .js-animPanel .js-animReveal:not(.is-animDone),
  .js-animPanel .js-animScale:not(.is-animDone),
  .js-animPanel .js-animMask:not(.is-animDone) {
    transition-delay: calc(var(--anim-panel-inner-delay) + var(--anim-order) * var(--anim-reveal-stagger));
  }

  .js-animScale:not(.is-animDone) {
    transition: opacity var(--anim-scale-duration) var(--anim-ease-fade);
    transition-delay: calc(var(--anim-order) * var(--anim-reveal-stagger));
  }

  .js-animScale:not(.is-animIn) {
    opacity: 0;
  }

  .js-animScale[data-anim-zoom-target]:not(.is-animDone) {
    transition:
      opacity var(--anim-scale-duration) var(--anim-ease-fade),
      scale var(--anim-scale-duration) var(--anim-ease-move);
    transition-delay: calc(var(--anim-order) * var(--anim-reveal-stagger));
  }

  .js-animScale:not(.is-animDone) [data-anim-zoom-target] {
    transition: scale var(--anim-scale-duration) var(--anim-ease-move);
    transition-delay: calc(var(--anim-order) * var(--anim-reveal-stagger));
  }

  .js-animPanel .js-animScale[data-anim-zoom-target]:not(.is-animDone),
  .js-animPanel .js-animScale:not(.is-animDone) [data-anim-zoom-target] {
    transition-delay: calc(var(--anim-panel-inner-delay) + var(--anim-order) * var(--anim-reveal-stagger));
  }

  .is-animClipping {
    overflow-x: clip;
  }

  .js-animScale[data-anim-zoom-target]:not(.is-animIn),
  .js-animScale:not(.is-animIn) [data-anim-zoom-target] {
    scale: 1.04;
  }

  .js-animMask:not(.is-animDone) {
    transition:
      opacity var(--anim-reveal-duration) var(--anim-ease-fade),
      translate var(--anim-mask-duration) var(--anim-ease-move);
    transition-delay: calc(var(--anim-order) * var(--anim-reveal-stagger));
  }

  .js-animMask:not([data-anim-move="still"]):not(.is-animIn) {
    translate: 0 var(--anim-reveal-distance);
  }

  .js-animMask:not([data-anim-mask="band"]):not(.is-animIn) {
    opacity: 0;
  }

  .js-animMask[data-anim-mask="band"]:not(.is-animDone)::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-color: var(--anim-mask-color, #1f3a5f);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform var(--anim-mask-duration) var(--anim-ease-mask);
    transition-delay: calc(var(--anim-order) * var(--anim-reveal-stagger));
  }

  .js-animMask[data-anim-mask="band"]:not(.is-animIn)::after {
    transform: scaleX(1);
    transform-origin: left center;
  }

  .js-animParallax {
    will-change: translate;
  }
}

.js-animHamburger {
  position: relative;
  display: block;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background-color: transparent;
  cursor: pointer;
}

.js-animHamburger span {
  position: absolute;
  left: 50%;
  display: block;
  width: 24px;
  height: 2px;
  margin-left: -12px;
  background-color: currentColor;
  transition: transform var(--anim-ui-duration) var(--anim-ease-ui), opacity var(--anim-ui-duration) var(--anim-ease-ui);
}

.js-animHamburger span:nth-child(1) {
  top: 15px;
}

.js-animHamburger span:nth-child(2) {
  top: 21px;
}

.js-animHamburger span:nth-child(3) {
  top: 27px;
}

.js-animHamburger.is-animOpen span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.js-animHamburger.is-animOpen span:nth-child(2) {
  opacity: 0;
}

.js-animHamburger.is-animOpen span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.js-animDrawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  opacity: 0;
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition:
    clip-path var(--anim-drawer-duration) var(--anim-ease-slide),
    opacity var(--anim-drawer-duration) var(--anim-ease-slide),
    visibility 0s linear var(--anim-drawer-duration);
  overscroll-behavior: none;
}

.js-animDrawer.is-animOpen {
  opacity: 1;
  visibility: visible;
  clip-path: inset(0 0 0 0);
  transition:
    clip-path var(--anim-drawer-duration) var(--anim-ease-slide),
    opacity var(--anim-drawer-duration) var(--anim-ease-slide),
    visibility 0s linear 0s;
}

.js-animDrawerItem {
  transition:
    opacity 0.4s var(--anim-ease-fade),
    translate 0.4s var(--anim-ease-move);
}

.js-animDrawer:not(.is-animOpen) .js-animDrawerItem {
  opacity: 0;
  translate: 0 12px;
}

.js-animDrawer.is-animOpen .js-animDrawerItem {
  transition-delay: calc(var(--anim-drawer-duration) * 0.6 + var(--anim-order) * var(--anim-drawer-stagger));
}

body.is-animDrawerOpen,
body.is-animModalOpen {
  overflow-y: hidden;
}

.js-animHeader[data-anim-header="band"]::before {
  content: "";
  position: absolute;
  top: var(--anim-header-band-top, 0px);
  right: 0;
  left: 0;
  height: var(--anim-header-band-height, 100%);
  z-index: -1;
  opacity: 0;
  pointer-events: none;
  background-color: var(--anim-header-bg);
  -webkit-backdrop-filter: blur(var(--anim-header-blur));
  backdrop-filter: blur(var(--anim-header-blur));
  transition: opacity var(--anim-ui-duration) var(--anim-ease-ui);
}

.js-animHeader[data-anim-header="band"].is-animScrolled::before {
  opacity: 1;
}

.js-animAccordionPanel {
  height: 0;
  overflow: hidden;
  transition: height var(--anim-ui-duration) var(--anim-ease-ui);
}

.js-animAccordionIcon {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.js-animAccordionIcon::before,
.js-animAccordionIcon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: currentColor;
}

.js-animAccordionIcon::before {
  width: 18px;
  height: 2px;
  transform: translate(-50%, -50%);
}

.js-animAccordionIcon::after {
  width: 2px;
  height: 18px;
  transform: translate(-50%, -50%);
  transition: transform var(--anim-ui-duration) var(--anim-ease-ui);
}

.js-animAccordionItem.is-animOpen .js-animAccordionIcon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.js-animDropdownPanel {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  opacity: 0;
  translate: 0 -8px;
  transition:
    opacity var(--anim-ui-duration) var(--anim-ease-ui),
    translate var(--anim-ui-duration) var(--anim-ease-ui),
    display var(--anim-ui-duration) allow-discrete;
}

.js-animDropdown.is-animOpen .js-animDropdownPanel {
  display: block;
  opacity: 1;
  translate: none;
}

.js-animDropdownItem {
  transition:
    opacity 0.3s var(--anim-ease-ui),
    translate 0.3s var(--anim-ease-ui);
}

.js-animDropdown:not(.is-animOpen) .js-animDropdownItem {
  opacity: 0;
  translate: 0 -6px;
}

.js-animDropdown.is-animOpen .js-animDropdownItem {
  transition-delay: calc(var(--anim-order) * 0.05s);
}

@starting-style {
  .js-animDropdown.is-animOpen .js-animDropdownPanel {
    opacity: 0;
    translate: 0 -8px;
  }

  .js-animDropdown.is-animOpen .js-animDropdownItem {
    opacity: 0;
    translate: 0 -6px;
  }
}

.js-animModal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--anim-ui-duration) var(--anim-ease-ui),
    visibility 0s linear var(--anim-ui-duration);
}

.js-animModal.is-animOpen {
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--anim-ui-duration) var(--anim-ease-ui),
    visibility 0s linear 0s;
}

.js-animModalBackdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(17, 24, 39, 0.55);
}

.js-animModalBody {
  position: relative;
  scale: 0.96;
  transition: scale var(--anim-ui-duration) var(--anim-ease-ui);
}

.js-animModal.is-animOpen .js-animModalBody {
  scale: none;
}

.js-animTabBar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: var(--anim-tab-w, 0);
  transform: translateX(var(--anim-tab-x, 0));
  background-color: currentColor;
  transition:
    transform var(--anim-ui-duration) var(--anim-ease-ui),
    width var(--anim-ui-duration) var(--anim-ease-ui);
}

.js-animTabPanel {
  display: none;
  opacity: 0;
  translate: 0 8px;
}

.js-animTabPanel.is-animCurrent {
  display: block;
  animation: animTabIn var(--anim-ui-duration) var(--anim-ease-ui) forwards;
}

@keyframes animTabIn {
  to {
    opacity: 1;
    translate: none;
  }
}

@media (any-hover: hover) {
  .js-animHoverBtn {
    transition: background-color var(--anim-ui-duration) var(--anim-ease-ui), color var(--anim-ui-duration) var(--anim-ease-ui);
  }

  .js-animHoverBtn .js-animHoverBtn__arrow {
    display: inline-block;
    transition: translate var(--anim-ui-duration) var(--anim-ease-ui);
  }

  .js-animHoverBtn:hover .js-animHoverBtn__arrow {
    translate: 4px 0;
  }

  .js-animHoverCard__media {
    overflow: hidden;
  }

  .js-animHoverCard__media > * {
    transition: scale 0.6s var(--anim-ease-ui);
  }

  .js-animHoverCard:hover .js-animHoverCard__media > * {
    scale: 1.03;
  }

  .js-animHoverLink {
    position: relative;
  }

  .js-animHoverLink::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1px;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--anim-ui-duration) var(--anim-ease-ui);
  }

  .js-animHoverLink:hover::after {
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .js-animDrawer,
  .js-animDrawerItem,
  .js-animDropdownItem,
  .js-animModal,
  .js-animModalBody,
  .js-animAccordionPanel,
  .js-animTabBar,
  .js-animHeader::before,
  .js-animHamburger span {
    transition-duration: 0.01ms;
  }

  .js-animDropdownPanel {
    transition: none;
  }

  .js-animTabPanel.is-animCurrent {
    animation-duration: 0.01ms;
  }

  .js-animParallax {
    translate: none !important;
  }
}
