/*
 * The supplied Security Motion Hero artwork, scoped to the Home hero media.
 * The page's existing copy, actions, layout and shade remain separate.
 */
body[data-page="home"] .hero__media.smh {
  --smh-object-position: 50% 50%;
  --smh-pointer-x: 0px;
  --smh-pointer-y: 0px;
  position: absolute;
  inset: 0;
  isolation: isolate;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: #010817;
  background-image: none;
  contain: layout paint style;
}

.smh,
.smh * {
  box-sizing: border-box;
}

.smh__picture,
.smh__scene,
.smh__grid,
.smh__scan,
.smh__ribbon,
.smh__glitch,
.smh__grain,
.smh__vignette {
  position: absolute;
  display: block;
  pointer-events: none;
  user-select: none;
}

.smh__picture {
  z-index: 1;
  inset: -2%;
  width: 104%;
  height: 104%;
  overflow: hidden;
}

.smh__scene {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--smh-object-position);
  filter: contrast(1.05) saturate(1.04);
  transform: translate3d(var(--smh-pointer-x), var(--smh-pointer-y), 0) scale(1.02);
  transition: transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.smh__grid {
  z-index: 2;
  inset: 0;
  opacity: 0.28;
  background-image:
    linear-gradient(rgba(76, 213, 255, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(76, 213, 255, 0.12) 1px, transparent 1px);
  background-size: 54px 54px;
  transform: perspective(700px) rotateX(65deg) scale(1.7) translateY(28%);
  transform-origin: bottom;
  animation: smh-grid-travel 2.5s linear infinite;
}

.smh__scan {
  z-index: 4;
  left: 68.5%;
  top: 49%;
  width: 42%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  opacity: 0.64;
  background: conic-gradient(
    from 0deg,
    transparent 0 18%,
    rgba(46, 223, 255, 0.6) 19%,
    transparent 22% 47%,
    rgba(255, 181, 28, 0.55) 48%,
    transparent 51% 100%
  );
  -webkit-mask: radial-gradient(
    circle,
    transparent 0 43%,
    #000 44% 45%,
    transparent 46% 52%,
    #000 53% 54%,
    transparent 55%
  );
  mask: radial-gradient(
    circle,
    transparent 0 43%,
    #000 44% 45%,
    transparent 46% 52%,
    #000 53% 54%,
    transparent 55%
  );
  animation: smh-spin 7s linear infinite;
}

.smh__scan--inner {
  width: 34%;
  opacity: 0.42;
  animation-duration: 4.4s;
  animation-direction: reverse;
}

.smh__ribbon {
  z-index: 5;
  left: 42%;
  top: 56%;
  width: 70%;
  height: 12%;
  border-top: 2px solid rgba(42, 222, 255, 0.76);
  border-radius: 50%;
  transform: rotate(-12deg) translateX(-10%);
  filter: drop-shadow(0 0 9px rgba(42, 222, 255, 0.9));
  animation: smh-ribbon-pulse 3s ease-in-out infinite;
}

.smh__ribbon--amber {
  top: 62%;
  border-top-color: rgba(255, 181, 28, 0.72);
  transform: rotate(-7deg) translateX(-2%);
  filter: drop-shadow(0 0 9px rgba(255, 181, 28, 0.75));
  animation-delay: -1.5s;
}

.smh__glitch {
  z-index: 6;
  inset: 0;
  opacity: 0;
  background-image: url("../images/security-motion-hero/security-motion-hero-1846.jpg");
  background-size: cover;
  background-position: var(--smh-object-position);
  mix-blend-mode: screen;
  animation: smh-glitch 6s steps(1, end) infinite;
}

.smh__glitch--upper {
  clip-path: inset(31% 5% 62% 52%);
}

.smh__glitch--lower {
  clip-path: inset(59% 4% 34% 48%);
  animation-delay: -2.7s;
}

.smh__grain {
  z-index: 7;
  inset: -50%;
  width: 200%;
  height: 200%;
  opacity: 0.045;
  background-image: url("../images/security-motion-hero/noise.svg");
  animation: smh-grain-shift 0.5s steps(1) infinite;
}

.smh__vignette {
  z-index: 8;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(1, 8, 23, 0.34), transparent 35% 78%, rgba(1, 8, 23, 0.15)),
    radial-gradient(circle at 68% 52%, transparent 0 32%, rgba(1, 8, 23, 0.28) 78%, rgba(1, 8, 23, 0.52));
}

.smh[data-smh-active="false"] .smh__grid,
.smh[data-smh-active="false"] .smh__scan,
.smh[data-smh-active="false"] .smh__ribbon,
.smh[data-smh-active="false"] .smh__glitch,
.smh[data-smh-active="false"] .smh__grain,
.smh[data-smh-page-visible="false"] .smh__grid,
.smh[data-smh-page-visible="false"] .smh__scan,
.smh[data-smh-page-visible="false"] .smh__ribbon,
.smh[data-smh-page-visible="false"] .smh__glitch,
.smh[data-smh-page-visible="false"] .smh__grain {
  animation-play-state: paused;
}

.smh[data-smh-motion-off="true"] .smh__grid,
.smh[data-smh-motion-off="true"] .smh__scan,
.smh[data-smh-motion-off="true"] .smh__ribbon,
.smh[data-smh-motion-off="true"] .smh__glitch,
.smh[data-smh-motion-off="true"] .smh__grain {
  animation: none;
}

.smh[data-smh-motion-off="true"] .smh__glitch {
  display: none;
}

.smh[data-smh-motion-off="true"] .smh__scene {
  transition: none;
}

@keyframes smh-grid-travel {
  to {
    background-position: 0 54px, 54px 0;
  }
}

@keyframes smh-spin {
  to {
    rotate: 360deg;
  }
}

@keyframes smh-ribbon-pulse {
  0%,
  100% {
    opacity: 0.38;
  }
  50% {
    opacity: 0.92;
  }
}

@keyframes smh-glitch {
  0%,
  87%,
  91%,
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }
  88% {
    opacity: 0.24;
    transform: translate3d(12px, 0, 0);
  }
  89% {
    opacity: 0.15;
    transform: translate3d(-8px, 0, 0);
  }
  90% {
    opacity: 0.2;
    transform: translate3d(4px, 0, 0);
  }
}

@keyframes smh-grain-shift {
  0% {
    transform: translate3d(0, 0, 0);
  }
  25% {
    transform: translate3d(2%, -3%, 0);
  }
  50% {
    transform: translate3d(-3%, 2%, 0);
  }
  75% {
    transform: translate3d(3%, 3%, 0);
  }
}

@media (max-width: 960px) {
  .smh__glitch {
    background-image: url("../images/security-motion-hero/security-motion-hero-960.jpg");
  }
}

@media (max-aspect-ratio: 1 / 1) {
  body[data-page="home"] .hero__media.smh {
    --smh-object-position: 70% 50%;
  }

  .smh__scan {
    left: 57%;
    width: min(78vw, 32rem);
  }

  .smh__scan--inner {
    width: min(62vw, 25rem);
  }

  .smh__ribbon {
    left: 16%;
    width: 110%;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] .hero__media.smh {
    --smh-pointer-x: 0px !important;
    --smh-pointer-y: 0px !important;
  }

  .smh__scene {
    transition: none;
  }

  .smh__grid,
  .smh__scan,
  .smh__ribbon,
  .smh__glitch,
  .smh__grain {
    animation: none;
  }

  .smh__glitch {
    display: none;
  }
}