/* Approved motion 05. Colours and typography remain in the site styles. */
html[data-wes-motion] {
  --motion-ease: cubic-bezier(.22, .61, .36, 1);
  --motion-menu-ms: 200ms;
  --motion-content-ms: 650ms;
  --motion-image-ms: 900ms;
  --motion-menu-y: 0px;
}

/* Only the paint alpha changes. Original text, widths, line breaks and
   right-aligned grid geometry stay untouched for the entire reveal. */
[data-wes-motion] .wes-motion-masked {
  -webkit-mask-image: var(--wes-reveal-mask);
  mask-image: var(--wes-reveal-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: calc(100% + 16px) calc(100% + 16px);
  mask-size: calc(100% + 16px) calc(100% + 16px);
  -webkit-mask-position: -8px -8px;
  mask-position: -8px -8px;
  -webkit-mask-clip: no-clip;
  mask-clip: no-clip;
}
[data-wes-motion] .selected-hero { overflow: hidden; }

/* The menu and its links fade in place; no text or hit area changes position. */
[data-wes-motion] .brand-dropdown {
  animation: none;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  isolation: isolate;
}
[data-wes-motion] .brand-dropdown::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  pointer-events: none;
  background: var(--ink, #232323);
  border: 1px solid rgba(247, 246, 242, .15);
  box-shadow: 0 12px 24px rgba(35, 35, 35, .15);
}
[data-wes-motion] .brand-dropdown[data-motion-state="opening"]::after,
[data-wes-motion] .brand-dropdown[data-motion-state="opening"] a > strong {
  animation: wes-menu-enter var(--motion-menu-ms) var(--motion-ease) backwards;
}
[data-wes-motion] .brand-dropdown[data-motion-state="opening"] a {
  animation: wes-menu-opacity-enter var(--motion-menu-ms) var(--motion-ease) backwards;
}
[data-wes-motion] .brand-dropdown[data-motion-state="closing"] {
  pointer-events: none;
}
[data-wes-motion] .brand-dropdown[data-motion-state="closing"]::after,
[data-wes-motion] .brand-dropdown[data-motion-state="closing"] a > strong {
  animation: wes-menu-exit var(--motion-menu-ms) ease both;
}
[data-wes-motion] .brand-dropdown[data-motion-state="closing"] a {
  animation: wes-menu-opacity-exit var(--motion-menu-ms) ease both;
}
@keyframes wes-menu-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes wes-menu-opacity-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes wes-menu-opacity-exit {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes wes-menu-exit {
  from { opacity: 1; }
  to { opacity: 0; }
}
@media (max-width: 800px) {
  [data-wes-motion] .brand-dropdown { position: relative; top: auto; left: auto; }
  [data-wes-motion] .brand-dropdown::after { box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  [data-wes-motion] .wes-motion-masked { -webkit-mask-image: none !important; mask-image: none !important; }
  [data-wes-motion] .brand-dropdown::after,
  [data-wes-motion] .brand-dropdown a,
  [data-wes-motion] .brand-dropdown a > strong {
    animation: none !important;
  }
}