.mayri-page-motion-host {
  position: relative !important;
  isolation: isolate;
  overflow: hidden !important;
}

.mayri-page-motion-host > .mayri-page-motion-scene {
  --mayri-motion-hue: 198;
  --mayri-motion-hue-two: 158;
  --mayri-motion-left: 76%;
  --mayri-motion-top: 34%;
  --mayri-motion-size: 240px;
  --mayri-motion-speed: 15s;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
  opacity: 0;
  transition: opacity .65s ease;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%);
}

.mayri-page-motion-host > .mayri-page-motion-scene.is-ready {
  opacity: 1;
}

.mayri-page-motion-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: .48;
}

.mayri-page-motion-dark .mayri-page-motion-canvas {
  mix-blend-mode: screen;
}

.mayri-page-motion-light .mayri-page-motion-canvas {
  opacity: .25;
  mix-blend-mode: multiply;
}

.mayri-page-motion-orb {
  position: absolute;
  left: var(--mayri-motion-left);
  top: var(--mayri-motion-top);
  width: var(--mayri-motion-size);
  height: var(--mayri-motion-size);
  border: 1px solid hsla(var(--mayri-motion-hue), 92%, 72%, .22);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.23), transparent 18%),
    radial-gradient(circle, hsla(var(--mayri-motion-hue), 92%, 58%, .15), transparent 66%);
  box-shadow:
    0 0 70px hsla(var(--mayri-motion-hue), 90%, 54%, .13),
    inset 0 0 40px hsla(var(--mayri-motion-hue-two), 82%, 55%, .08);
  opacity: .7;
  transform: translate(-50%, -50%) perspective(720px) rotateX(65deg);
  transform-style: preserve-3d;
}

.mayri-page-motion-light .mayri-page-motion-orb {
  opacity: .32;
}

.mayri-page-motion-orb::before,
.mayri-page-motion-orb::after {
  content: "";
  position: absolute;
  border: 1px solid hsla(var(--mayri-motion-hue), 92%, 72%, .28);
  border-radius: 50%;
}

.mayri-page-motion-orb::before {
  inset: 18%;
  border-style: dashed;
  animation: mayri-page-orbit var(--mayri-motion-speed) linear infinite;
}

.mayri-page-motion-orb::after {
  inset: 35%;
  background: radial-gradient(circle, hsla(var(--mayri-motion-hue-two), 92%, 64%, .34), transparent 68%);
  box-shadow: 0 0 30px hsla(var(--mayri-motion-hue-two), 90%, 58%, .28);
  animation: mayri-page-breathe 4.8s ease-in-out infinite;
}

.mayri-page-motion-marker {
  position: absolute;
  left: calc(var(--mayri-motion-left) - 4px);
  top: calc(var(--mayri-motion-top) - (var(--mayri-motion-size) / 2));
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: hsl(var(--mayri-motion-hue), 94%, 68%);
  box-shadow:
    0 0 0 7px hsla(var(--mayri-motion-hue), 92%, 62%, .09),
    0 0 20px hsla(var(--mayri-motion-hue), 92%, 62%, .72);
  animation: mayri-page-marker 3.4s ease-in-out infinite;
}

.mayri-page-motion-host > .mayri-page-motion-scene ~ * {
  position: relative;
  z-index: 1;
}

@keyframes mayri-page-orbit {
  to { transform: rotate(360deg); }
}

@keyframes mayri-page-breathe {
  0%, 100% { transform: scale(.88); opacity: .48; }
  50% { transform: scale(1.12); opacity: 1; }
}

@keyframes mayri-page-marker {
  0%, 100% { transform: translate3d(-18px, 8px, 0); opacity: .42; }
  50% { transform: translate3d(18px, -8px, 0); opacity: 1; }
}

@media (max-width: 720px) {
  .mayri-page-motion-host > .mayri-page-motion-scene {
    --mayri-motion-size: 170px;
  }

  .mayri-page-motion-canvas {
    opacity: .34;
  }

  .mayri-page-motion-light .mayri-page-motion-canvas {
    opacity: .18;
  }

  .mayri-page-motion-orb {
    opacity: .45;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mayri-page-motion-host > .mayri-page-motion-scene {
    transition: none;
  }

  .mayri-page-motion-orb::before,
  .mayri-page-motion-orb::after,
  .mayri-page-motion-marker {
    animation: none !important;
  }
}


/* MAYRI 5D OBJECT LAYER */
.mayri-page-motion-host > .mayri-page-motion-scene {
  --mayri-tilt-x: 0deg;
  --mayri-tilt-y: 0deg;
  --mayri-shift-x: 0px;
  --mayri-shift-y: 0px;
  perspective: 1100px;
}

.mayri-page-motion-depth-plane {
  position: absolute;
  left: 48%;
  top: 47%;
  width: min(620px, 48vw);
  height: min(380px, 48vh);
  border: 1px solid hsla(var(--mayri-motion-hue), 88%, 62%, .1);
  border-radius: 28px;
  background:
    repeating-linear-gradient(90deg, hsla(var(--mayri-motion-hue), 88%, 62%, .07) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(0deg, hsla(var(--mayri-motion-hue-two), 82%, 58%, .06) 0 1px, transparent 1px 44px);
  box-shadow:
    inset 0 0 70px hsla(var(--mayri-motion-hue), 90%, 56%, .07),
    0 34px 90px hsla(var(--mayri-motion-hue-two), 90%, 48%, .08);
  opacity: .5;
  transform: perspective(900px) rotateX(68deg) rotateZ(-8deg) translate3d(0, 0, -80px);
  transform-origin: center;
  animation: mayri-depth-plane-shift 14s ease-in-out infinite alternate;
  animation-play-state: paused;
  will-change: transform;
}

.mayri-page-motion-object-field {
  position: absolute;
  inset: -8%;
  transform-style: preserve-3d;
  transform:
    perspective(1000px)
    translate3d(var(--mayri-shift-x), var(--mayri-shift-y), 0)
    rotateX(var(--mayri-tilt-x))
    rotateY(var(--mayri-tilt-y));
  transition: transform .2s ease-out;
  will-change: transform;
}

.mayri-page-motion-object {
  --object-x: 70%;
  --object-y: 35%;
  --object-size: 58px;
  --object-depth: 30px;
  --object-move-x: 18px;
  --object-move-y: -24px;
  --object-rx: 58deg;
  --object-ry: 12deg;
  --object-rz: 18deg;
  --object-duration: 11s;
  --object-delay: -3s;
  position: absolute;
  left: var(--object-x);
  top: var(--object-y);
  width: var(--object-size);
  height: var(--object-size);
  opacity: .58;
  transform-style: preserve-3d;
  filter: drop-shadow(0 18px 24px hsla(var(--mayri-motion-hue), 82%, 34%, .13));
  animation: mayri-object-drift var(--object-duration) ease-in-out var(--object-delay) infinite alternate;
  animation-play-state: paused;
  will-change: transform;
}

.mayri-page-motion-scene.is-active .mayri-page-motion-object,
.mayri-page-motion-scene.is-active .mayri-page-motion-depth-plane {
  animation-play-state: running;
}

.mayri-page-motion-object::before,
.mayri-page-motion-object::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid hsla(var(--mayri-motion-hue), 92%, 68%, .34);
  background:
    linear-gradient(145deg, rgba(255,255,255,.2), transparent 44%),
    linear-gradient(315deg, hsla(var(--mayri-motion-hue-two), 88%, 56%, .15), hsla(var(--mayri-motion-hue), 88%, 58%, .06));
  box-shadow:
    inset 0 0 24px hsla(var(--mayri-motion-hue), 90%, 66%, .08),
    0 0 24px hsla(var(--mayri-motion-hue-two), 86%, 56%, .11);
  backdrop-filter: blur(2px);
}

.mayri-page-motion-object::after {
  inset: 18%;
  border-color: hsla(var(--mayri-motion-hue-two), 92%, 68%, .26);
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.28), hsla(var(--mayri-motion-hue-two), 90%, 56%, .08) 48%, transparent 72%);
  transform: translateZ(18px);
}

.mayri-page-motion-scene[data-mode="constellation"] .mayri-page-motion-object::before,
.mayri-page-motion-scene[data-mode="orbit"] .mayri-page-motion-object::before,
.mayri-page-motion-scene[data-mode="pulse"] .mayri-page-motion-object::before {
  border-radius: 50%;
}

.mayri-page-motion-scene[data-mode="constellation"] .mayri-page-motion-object::after,
.mayri-page-motion-scene[data-mode="orbit"] .mayri-page-motion-object::after,
.mayri-page-motion-scene[data-mode="pulse"] .mayri-page-motion-object::after {
  inset: 34%;
  border-radius: 50%;
  box-shadow: 0 0 28px hsla(var(--mayri-motion-hue-two), 92%, 62%, .24);
}

.mayri-page-motion-scene[data-mode="ledger"] .mayri-page-motion-object::before {
  border-radius: 12px;
  background:
    repeating-linear-gradient(0deg, hsla(var(--mayri-motion-hue), 90%, 64%, .13) 0 1px, transparent 1px 10px),
    linear-gradient(145deg, hsla(var(--mayri-motion-hue-two), 90%, 58%, .16), transparent);
}

.mayri-page-motion-scene[data-mode="document"] .mayri-page-motion-object {
  width: calc(var(--object-size) * .72);
}

.mayri-page-motion-scene[data-mode="document"] .mayri-page-motion-object::before {
  border-radius: 7px;
  background:
    repeating-linear-gradient(0deg, transparent 0 9px, hsla(var(--mayri-motion-hue), 90%, 58%, .15) 9px 10px),
    linear-gradient(145deg, rgba(255,255,255,.22), hsla(var(--mayri-motion-hue-two), 86%, 58%, .1));
}

.mayri-page-motion-scene[data-mode="formation"] .mayri-page-motion-object::before {
  border-radius: 10px;
  clip-path: polygon(50% 0, 96% 24%, 96% 76%, 50% 100%, 4% 76%, 4% 24%);
}

.mayri-page-motion-scene[data-mode="shield"] .mayri-page-motion-object::before {
  border-radius: 36% 36% 52% 52%;
  clip-path: polygon(50% 0, 92% 16%, 84% 72%, 50% 100%, 16% 72%, 8% 16%);
}

.mayri-page-motion-scene[data-mode="bridge"] .mayri-page-motion-object {
  width: calc(var(--object-size) * 1.45);
  height: calc(var(--object-size) * .58);
}

.mayri-page-motion-scene[data-mode="bridge"] .mayri-page-motion-object::before,
.mayri-page-motion-scene[data-mode="bridge"] .mayri-page-motion-object::after {
  border-radius: 999px;
}

.mayri-page-motion-light .mayri-page-motion-object {
  opacity: .32;
  filter: drop-shadow(0 14px 20px hsla(var(--mayri-motion-hue), 76%, 28%, .08));
}

.mayri-page-motion-light .mayri-page-motion-depth-plane {
  opacity: .28;
}

@keyframes mayri-depth-plane-shift {
  0% {
    transform: perspective(900px) rotateX(68deg) rotateZ(-8deg) translate3d(-12px, 10px, -80px);
  }
  100% {
    transform: perspective(900px) rotateX(64deg) rotateZ(-4deg) translate3d(18px, -14px, -30px);
  }
}

@keyframes mayri-object-drift {
  0% {
    transform:
      translate3d(0, 0, var(--object-depth))
      rotateX(var(--object-rx))
      rotateY(var(--object-ry))
      rotateZ(var(--object-rz));
  }
  50% {
    transform:
      translate3d(var(--object-move-x), var(--object-move-y), calc(var(--object-depth) + 34px))
      rotateX(calc(var(--object-rx) + 18deg))
      rotateY(calc(var(--object-ry) - 16deg))
      rotateZ(calc(var(--object-rz) + 24deg));
  }
  100% {
    transform:
      translate3d(0, 0, calc(var(--object-depth) - 16px))
      rotateX(calc(var(--object-rx) - 12deg))
      rotateY(calc(var(--object-ry) + 22deg))
      rotateZ(calc(var(--object-rz) - 18deg));
  }
}

@media (max-width: 720px) {
  .mayri-page-motion-object-field {
    inset: -4%;
  }

  .mayri-page-motion-depth-plane {
    left: 42%;
    width: 72vw;
    opacity: .3;
  }

  .mayri-page-motion-object:nth-child(n+4) {
    display: none;
  }
}

.mayri-page-motion-lean .mayri-page-motion-object:nth-child(n+4) {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .mayri-page-motion-depth-plane,
  .mayri-page-motion-object {
    animation: none !important;
  }

  .mayri-page-motion-object-field {
    transform: none !important;
    transition: none !important;
  }
}
/* MAYRI DYNAMIC RESPONSE LAYER */
.mayri-page-motion-host > .mayri-page-motion-scene {
  --mayri-scroll-y: 0px;
  --mayri-scroll-rotate: 0deg;
  --mayri-energy-angle: 0deg;
  --mayri-energy-intensity: 1;
}

.mayri-page-motion-object-field {
  transform:
    perspective(1000px)
    translate3d(var(--mayri-shift-x), calc(var(--mayri-shift-y) + var(--mayri-scroll-y)), 0)
    rotateX(var(--mayri-tilt-x))
    rotateY(var(--mayri-tilt-y))
    rotateZ(var(--mayri-scroll-rotate));
}

.mayri-page-motion-dynamic-light {
  position: absolute;
  left: var(--mayri-cursor-x, var(--mayri-motion-left));
  top: var(--mayri-cursor-y, var(--mayri-motion-top));
  width: clamp(280px, 44vw, 680px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, hsla(var(--mayri-motion-hue), 96%, 62%, .16) 0, hsla(var(--mayri-motion-hue-two), 92%, 58%, .08) 28%, transparent 68%);
  opacity: .46;
  filter: blur(3px) brightness(var(--mayri-energy-intensity));
  transform: translate3d(-50%, -50%, 0) scale(.94);
  transition: left .18s ease-out, top .18s ease-out;
  animation: mayri-dynamic-light-breathe 5.8s ease-in-out infinite alternate;
  animation-play-state: paused;
  will-change: left, top, transform;
}

.mayri-page-motion-energy {
  position: absolute;
  inset: -8%;
  transform: translate3d(0, var(--mayri-scroll-y), -10px) rotateZ(var(--mayri-energy-angle));
  transform-origin: center;
  filter: brightness(var(--mayri-energy-intensity));
  will-change: transform;
}

.mayri-page-motion-energy > i {
  position: absolute;
  left: 52%;
  top: 24%;
  width: 42%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, hsla(var(--mayri-motion-hue), 94%, 66%, .42), hsla(var(--mayri-motion-hue-two), 92%, 64%, .2), transparent);
  box-shadow: 0 0 22px hsla(var(--mayri-motion-hue), 90%, 56%, .15);
  opacity: .62;
  transform-origin: center;
  animation: mayri-energy-scan 7.4s ease-in-out infinite alternate;
  animation-play-state: paused;
  will-change: transform, opacity;
}

.mayri-page-motion-energy > i:nth-child(2) {
  top: 48%;
  width: 34%;
  animation-duration: 9.2s;
  animation-delay: -3.6s;
}

.mayri-page-motion-energy > i:nth-child(3) {
  top: 70%;
  width: 28%;
  animation-duration: 6.5s;
  animation-delay: -5.1s;
}

.mayri-page-motion-scene.is-active .mayri-page-motion-dynamic-light,
.mayri-page-motion-scene.is-active .mayri-page-motion-energy > i {
  animation-play-state: running;
}

.mayri-page-motion-scene[data-mode="constellation"] .mayri-page-motion-energy > i,
.mayri-page-motion-scene[data-mode="orbit"] .mayri-page-motion-energy > i,
.mayri-page-motion-scene[data-mode="pulse"] .mayri-page-motion-energy > i {
  left: 67%;
  top: 21%;
  width: 180px;
  height: 180px;
  border: 1px solid hsla(var(--mayri-motion-hue), 92%, 66%, .18);
  border-top-color: hsla(var(--mayri-motion-hue-two), 94%, 70%, .48);
  border-radius: 50%;
  background: transparent;
  animation-name: mayri-energy-orbit;
  animation-duration: 13s;
}

.mayri-page-motion-scene[data-mode="constellation"] .mayri-page-motion-energy > i:nth-child(2),
.mayri-page-motion-scene[data-mode="orbit"] .mayri-page-motion-energy > i:nth-child(2),
.mayri-page-motion-scene[data-mode="pulse"] .mayri-page-motion-energy > i:nth-child(2) {
  left: 73%;
  top: 31%;
  width: 260px;
  height: 260px;
  animation-duration: 17s;
  animation-direction: reverse;
}

.mayri-page-motion-scene[data-mode="constellation"] .mayri-page-motion-energy > i:nth-child(3),
.mayri-page-motion-scene[data-mode="orbit"] .mayri-page-motion-energy > i:nth-child(3),
.mayri-page-motion-scene[data-mode="pulse"] .mayri-page-motion-energy > i:nth-child(3) {
  left: 60%;
  top: 45%;
  width: 112px;
  height: 112px;
  animation-duration: 9s;
}

.mayri-page-motion-scene[data-mode="bridge"] .mayri-page-motion-energy > i {
  height: 92px;
  border-top: 1px solid hsla(var(--mayri-motion-hue), 92%, 66%, .3);
  border-radius: 50%;
  background: transparent;
}

.mayri-page-motion-scene[data-mode="formation"] .mayri-page-motion-energy > i,
.mayri-page-motion-scene[data-mode="shield"] .mayri-page-motion-energy > i {
  clip-path: polygon(0 45%, 88% 45%, 100% 50%, 88% 55%, 0 55%);
}

.mayri-page-motion-light .mayri-page-motion-dynamic-light {
  opacity: .2;
  mix-blend-mode: multiply;
}

.mayri-page-motion-light .mayri-page-motion-energy > i {
  opacity: .3;
}

.mayri-page-motion-dark .mayri-page-motion-dynamic-light {
  mix-blend-mode: screen;
}

@keyframes mayri-dynamic-light-breathe {
  0% { transform: translate3d(-50%, -50%, 0) scale(.88); }
  100% { transform: translate3d(-50%, -50%, 0) scale(1.08); }
}

@keyframes mayri-energy-scan {
  0% { transform: translate3d(-10%, -10px, 12px) scaleX(.72); opacity: .26; }
  52% { opacity: .78; }
  100% { transform: translate3d(12%, 14px, 48px) scaleX(1.06); opacity: .38; }
}

@keyframes mayri-energy-orbit {
  0% { transform: translate3d(-10px, 6px, 8px) rotate(0deg) rotateX(62deg); opacity: .28; }
  50% { opacity: .68; }
  100% { transform: translate3d(14px, -10px, 44px) rotate(360deg) rotateX(68deg); opacity: .34; }
}

@media (max-width: 720px) {
  .mayri-page-motion-dynamic-light {
    width: 74vw;
    opacity: .22;
  }

  .mayri-page-motion-energy {
    inset: -3%;
    opacity: .7;
  }

  .mayri-page-motion-energy > i:nth-child(3) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mayri-page-motion-dynamic-light,
  .mayri-page-motion-energy > i {
    animation: none !important;
  }

  .mayri-page-motion-dynamic-light {
    transition: none !important;
  }

  .mayri-page-motion-energy {
    transform: none !important;
  }
}