/* Copyright Ayers Electronics Inc. All rights reserved. */
/* the watermark's motion presets. */

/* js/tuner-watermark-motion.js names the running preset in data-motion and its length in
   --wm-motion-ms (parity.watermark.motionMs); each plays once and the script takes it off. The
   slide moves the box itself, so the picture's own ink shift is left alone. Keyframes that leave out
   a start or an end use the mark's own opacity and place there. */
#watermark[data-motion="Fade"] {
  animation: watermark-fade var(--wm-motion-ms) ease-in-out 1;
}
#watermark[data-motion="SlideIn"] {
  animation: watermark-enter-right var(--wm-motion-ms) cubic-bezier(0.2, 0.8, 0.2, 1) 1;
}
#watermark[data-motion="SlideIn"][data-align^="left-"] {
  animation-name: watermark-enter-left;
}
#watermark[data-motion="SlideIn"][data-align="center-top"] {
  animation-name: watermark-enter-top;
}
#watermark[data-motion="SlideIn"][data-align="center-middle"],
#watermark[data-motion="SlideIn"][data-align="center-bottom"] {
  animation-name: watermark-enter-bottom;
}

/* The glint: a band of light crossing the lettering once, left to right. The art itself is the mask
   (--wm-art), fitted and aligned the way the picture is (css/components/watermark.css). */
#watermark .watermark-glint {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-image: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.85) 50%, transparent 65%);
  background-repeat: no-repeat;
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-mask-image: var(--wm-art);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: right bottom;
  transform: translateX(calc(var(--ink-shift, 0) * 100%));
}
#watermark[data-motion="Glint"] .watermark-glint {
  display: block;
  animation: watermark-glint var(--wm-motion-ms) ease-in-out 1 both;
}
#watermark[data-align="left-top"] .watermark-glint {
  -webkit-mask-position: left top;
}
#watermark[data-align="center-top"] .watermark-glint {
  -webkit-mask-position: center top;
}
#watermark[data-align="right-top"] .watermark-glint {
  -webkit-mask-position: right top;
}
#watermark[data-align="left-middle"] .watermark-glint {
  -webkit-mask-position: left center;
}
#watermark[data-align="center-middle"] .watermark-glint {
  -webkit-mask-position: center center;
}
#watermark[data-align="right-middle"] .watermark-glint {
  -webkit-mask-position: right center;
}
#watermark[data-align="left-bottom"] .watermark-glint {
  -webkit-mask-position: left bottom;
}
#watermark[data-align="center-bottom"] .watermark-glint {
  -webkit-mask-position: center bottom;
}
#watermark[data-align="right-bottom"] .watermark-glint {
  -webkit-mask-position: right bottom;
}

@keyframes watermark-fade {
  40%,
  60% {
    opacity: 0;
  }
}
@keyframes watermark-enter-right {
  from {
    opacity: 0;
    transform: translateX(50%);
  }
}
@keyframes watermark-enter-left {
  from {
    opacity: 0;
    transform: translateX(-50%);
  }
}
@keyframes watermark-enter-top {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
}
@keyframes watermark-enter-bottom {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
}
@keyframes watermark-glint {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: 0 0;
  }
}