/* VIAVR V7.1: an ordered spatial field, independent of layout and product motion */
.ambient-v71-host {
  position: relative;
  isolation: isolate;
}

.viavr-ambient {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  contain: layout paint;
  pointer-events: none;
  user-select: none;
}

.viavr-ambient__drawing,
.final-portal__drawing {
  position: absolute;
  display: block;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  overflow: visible;
  pointer-events: none;
}

.viavr-ambient--hero {
  opacity: .72;
  mask-image: linear-gradient(180deg, transparent, #000 14%, #000 80%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 80%, transparent);
}

.viavr-ambient__tunnel {
  transform-origin: 1040px 456px;
  animation: viavr-v71-depth 24s ease-in-out infinite alternate paused;
}

.viavr-ambient__route {
  animation: viavr-v71-route 21s ease-in-out infinite alternate paused;
}

.viavr-ambient__trace {
  stroke-dasharray: 8 92;
  stroke-dashoffset: 18;
  animation: viavr-v71-trace 16s linear infinite paused;
}

.viavr-ambient__trace--route {
  stroke-dasharray: 3 97;
  opacity: .65;
  animation-duration: 19s;
  animation-delay: -6s;
}

.viavr-ambient--chapter {
  opacity: .32;
}

.viavr-ambient--chapter .viavr-ambient__drawing {
  inset: auto -100px 18px auto;
  width: min(730px, 60%);
  height: min(460px, 80%);
}

.viavr-ambient--features .viavr-ambient__drawing {
  left: -120px;
  right: auto;
  bottom: 25px;
  width: min(760px, 59%);
}

.viavr-ambient--solutions .viavr-ambient__drawing {
  top: -55px;
  bottom: auto;
}

.viavr-ambient--timeline .viavr-ambient__drawing {
  top: -35px;
  bottom: auto;
  right: -135px;
  opacity: .82;
}

.viavr-ambient__chapter-space {
  transform-origin: 601px 274px;
  animation: viavr-v71-chapter 25s ease-in-out infinite alternate paused;
}

.viavr-ambient__trace--chapter {
  stroke-dasharray: 5 95;
  stroke-width: 1.4;
  animation-duration: 17s;
}

/* The only layout-sized decoration, intentionally reserved above the contacts */
.final-portal {
  position: relative;
  isolation: isolate;
  display: block;
  width: 100%;
  max-width: 1200px;
  height: var(--final-portal-height, clamp(300px, 32vw, 470px));
  margin: -35px auto 28px;
  overflow: hidden;
  contain: layout paint;
  pointer-events: none;
  user-select: none;
  mask-image: linear-gradient(180deg, transparent, #000 8%, #000 84%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 8%, #000 84%, transparent);
}

.final-portal:empty {
  display: none;
}

.final-portal__halo {
  transform-origin: 640px 282px;
  animation: viavr-v71-halo 8s ease-in-out infinite alternate paused;
}

.final-portal__plane--left {
  animation: viavr-v71-plane-left 11s cubic-bezier(.45, 0, .55, 1) infinite alternate paused;
}

.final-portal__plane--right {
  animation: viavr-v71-plane-right 11s cubic-bezier(.45, 0, .55, 1) infinite alternate paused;
}

.final-portal__lens {
  transform-origin: 647px 259px;
  animation: viavr-v71-lens 12s ease-in-out infinite alternate paused;
}

.final-portal__axis {
  transform-origin: 640px 269px;
  animation: viavr-v71-axis 17s ease-in-out infinite alternate paused;
}

.final-portal__light {
  stroke-dasharray: 18 82;
  stroke-dashoffset: 82;
  animation: viavr-v71-light 6.5s cubic-bezier(.38, .1, .42, .94) infinite paused;
}

.final-portal__light--echo { animation-delay: -3.25s; stroke-dasharray: 9 91; }

.final-portal__flux {
  transform-origin: 640px 260px;
  animation: final-portal-flux 6.5s ease-in-out infinite alternate paused;
}

.final-portal__spark {
  transform-origin: 641px 261px;
  animation: final-portal-glimmer 5.5s ease-in-out infinite alternate paused;
}

.final-portal.ambient-v71-running .final-portal__flux,
.final-portal.ambient-v71-running .final-portal__spark { animation-play-state: running; }

.final-portal__rim {
  stroke-dasharray: 8 18 3 71;
  stroke-dashoffset: 18;
  animation: viavr-v71-trace 17s linear infinite paused;
}

@keyframes final-portal-flux {
  from { opacity: .42; transform: scaleY(.96); }
  to { opacity: .95; transform: scaleY(1.03); }
}

@keyframes final-portal-glimmer {
  from { opacity: .38; transform: scale(.85); }
  to { opacity: .95; transform: scale(1.18); }
}

.ambient-v71-running .viavr-ambient__tunnel,
.ambient-v71-running .viavr-ambient__route,
.ambient-v71-running .viavr-ambient__trace,
.ambient-v71-running .viavr-ambient__chapter-space,
.ambient-v71-running .final-portal__halo,
.ambient-v71-running .final-portal__plane,
.ambient-v71-running .final-portal__lens,
.ambient-v71-running .final-portal__axis,
.ambient-v71-running .final-portal__light,
.ambient-v71-running .final-portal__rim {
  animation-play-state: running;
}

@keyframes viavr-v71-depth {
  from { transform: translate(-12px, 8px) scale(.97) rotate(-1.3deg); }
  to { transform: translate(13px, -6px) scale(1.025) rotate(.9deg); }
}

@keyframes viavr-v71-route {
  from { transform: translate(0, 4px); }
  to { transform: translate(9px, -5px); }
}

@keyframes viavr-v71-trace {
  to { stroke-dashoffset: -82; }
}

@keyframes viavr-v71-chapter {
  from { transform: translate(-6px, 5px) rotate(-1deg); }
  to { transform: translate(9px, -6px) rotate(1deg); }
}

@keyframes viavr-v71-halo {
  from { opacity: .58; transform: scale(.91); }
  to { opacity: 1; transform: scale(1.04); }
}

@keyframes viavr-v71-plane-left {
  from { transform: translate(-24px, 11px); }
  to { transform: translate(17px, -7px); }
}

@keyframes viavr-v71-plane-right {
  from { transform: translate(24px, -11px); }
  to { transform: translate(-17px, 7px); }
}

@keyframes viavr-v71-lens {
  from { transform: scale(.97, 1.025) rotate(-3deg); }
  to { transform: scale(1.03, .985) rotate(3deg); }
}

@keyframes viavr-v71-axis {
  from { transform: rotate(-5deg) scaleX(.96); }
  to { transform: rotate(7deg) scaleX(1.035); }
}

@keyframes viavr-v71-light {
  0% { stroke-dashoffset: 82; opacity: 0; }
  12% { opacity: 1; }
  83% { opacity: 1; }
  100% { stroke-dashoffset: -18; opacity: 0; }
}

@media (max-width: 760px) {
  .viavr-ambient--hero {
    opacity: .59;
    mask-image: linear-gradient(180deg, transparent 24%, #000 47%, #000 84%, transparent);
    -webkit-mask-image: linear-gradient(180deg, transparent 24%, #000 47%, #000 84%, transparent);
  }

  .viavr-ambient--hero .viavr-ambient__drawing {
    inset: 32% -50% auto;
    width: 185%;
    height: 68%;
  }

  .viavr-ambient--chapter {
    opacity: .2;
  }

  .viavr-ambient--chapter .viavr-ambient__drawing {
    width: 105%;
    height: 350px;
    right: -29%;
  }

  .viavr-ambient--features .viavr-ambient__drawing {
    left: -30%;
  }

  .final-portal {
    height: var(--final-portal-height, clamp(250px, 60vw, 320px));
    margin-top: -20px;
    margin-bottom: 15px;
  }

  .final-portal__drawing {
    width: 160%;
    left: -30%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .viavr-ambient *,
  .final-portal * {
    animation: none !important;
  }

  .final-portal__light {
    opacity: .7;
    stroke-dasharray: 5 95;
    stroke-dashoffset: -47;
  }
}