/* MoxRex Dimensional Play: homepage only */
.page-id-2708 {
  background: #08090b;
  color: #f5f3ee;
}

.page-id-2708 :is(.mx3d-hero, .elementor-element-mx3d-hero) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 42%, rgba(224, 128, 0, .12), transparent 34%),
    #08090b;
}

.page-id-2708 .mx3d-motion-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.page-id-2708 .mx3d-motion-field::before {
  content: "";
  position: absolute;
  width: 980px;
  height: 980px;
  right: -250px;
  top: -350px;
  border-radius: 50%;
  opacity: .72;
  background:
    conic-gradient(
      from 20deg,
      transparent 0 12%,
      rgba(224, 128, 0, .22) 12% 14%,
      transparent 14% 31%,
      rgba(160, 16, 48, .24) 31% 34%,
      transparent 34% 66%,
      rgba(245, 161, 42, .18) 66% 68%,
      transparent 68% 100%
    );
  mask: radial-gradient(circle, transparent 0 42%, #000 43% 66%, transparent 67%);
  -webkit-mask: radial-gradient(circle, transparent 0 42%, #000 43% 66%, transparent 67%);
}

.page-id-2708 .mx3d-motion-field::after {
  content: "";
  position: absolute;
  width: 82vw;
  height: 2px;
  left: -24vw;
  top: 57%;
  opacity: .62;
  background: linear-gradient(90deg, transparent, #e08000 42%, #f5a12a 52%, transparent 78%);
  transform: rotate(-19deg) translate3d(-12%, 0, 0);
  transform-origin: center;
}

.page-id-2708 .mx3d-motion-field svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.page-id-2708 .mx3d-motion-orbit {
  fill: none;
  stroke: rgba(245, 161, 42, .52);
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: center;
}

.page-id-2708 .mx3d-motion-orbit:nth-of-type(2) {
  stroke: rgba(160, 16, 48, .62);
  stroke-width: 2;
}

.page-id-2708 .mx3d-motion-path {
  fill: none;
  stroke: rgba(245, 243, 238, .3);
  stroke-width: 1.35;
  stroke-dasharray: 12 16;
  vector-effect: non-scaling-stroke;
}

.page-id-2708 .mx3d-motion-node {
  fill: #e08000;
  opacity: 1;
  transform-box: fill-box;
  transform-origin: center;
}

.page-id-2708 .mx3d-motion-haze {
  position: absolute;
  width: 34vw;
  height: 34vw;
  min-width: 360px;
  min-height: 360px;
  border-radius: 50%;
  opacity: .62;
  filter: blur(54px);
  background: radial-gradient(circle, rgba(224, 128, 0, .72), rgba(160, 16, 48, .28) 42%, transparent 70%);
  transform: translate3d(var(--mx-parallax-x, 0), var(--mx-parallax-y, 0), 0);
  transition: transform .8s cubic-bezier(.16, 1, .3, 1);
}

.page-id-2708 .mx3d-motion-haze-a {
  right: 9%;
  top: 5%;
}

.page-id-2708 .mx3d-motion-haze-b {
  left: -14%;
  bottom: -28%;
  opacity: .38;
}

.page-id-2708 :is(.mx3d-hero, .elementor-element-mx3d-hero)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(110deg, #08090b 0%, rgba(8, 9, 11, .94) 42%, rgba(8, 9, 11, .25) 76%, #08090b 100%);
}

.page-id-2708 :is(.mx3d-hero-copy, .elementor-element-mx3d-hero-copy) {
  position: relative;
  z-index: 4;
}

.page-id-2708 .mx3d-hero-title .elementor-heading-title {
  max-width: 9ch;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.page-id-2708 .mx3d-hero-body {
  max-width: 34rem;
}

.page-id-2708 :is(.mx3d-stage, .elementor-element-mx3d-hero-stage) {
  position: relative;
  z-index: 3;
  perspective: 1400px;
  transform-style: preserve-3d;
}

.page-id-2708 .mx3d-story-deck {
  position: absolute;
  z-index: 6;
  right: 2%;
  bottom: 2%;
  width: min(390px, 76%);
  overflow: hidden;
  border: 1px solid rgba(245, 161, 42, .48);
  border-radius: 16px;
  color: #f5f3ee;
  background:
    linear-gradient(135deg, rgba(24, 27, 34, .9), rgba(8, 9, 11, .76)),
    rgba(8, 9, 11, .82);
  box-shadow:
    inset 0 1px 0 rgba(245, 243, 238, .12),
    0 28px 70px rgba(3, 4, 7, .62);
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  transform: translateZ(220px);
}

.page-id-2708 .mx3d-story-deck::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, #f5a12a, #e08000 54%, #a01030);
}

.page-id-2708 .mx3d-story-viewport {
  position: relative;
  min-height: 132px;
}

.page-id-2708 .mx3d-story-slide {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  gap: 7px;
  padding: 22px 24px 18px;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(28px, 0, 0);
  transition:
    opacity .52s cubic-bezier(.16, 1, .3, 1),
    transform .52s cubic-bezier(.16, 1, .3, 1),
    visibility 0s linear .52s;
}

.page-id-2708 .mx3d-story-slide[aria-hidden="false"] {
  position: relative;
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0);
  transition-delay: 0s;
}

.page-id-2708 .mx3d-story-label {
  margin: 0;
  color: #f5a12a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.page-id-2708 .mx3d-story-title {
  margin: 0;
  color: #f5f3ee;
  font-family: Montserrat, sans-serif;
  font-size: clamp(18px, 2vw, 25px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.035em;
}

.page-id-2708 .mx3d-story-copy {
  max-width: 34ch;
  margin: 0;
  color: #b8bbc4;
  font-size: 13px;
  line-height: 1.45;
}

.page-id-2708 .mx3d-story-controls {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 24px 17px;
}

.page-id-2708 .mx3d-story-dot {
  width: 28px;
  height: 3px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: rgba(245, 243, 238, .22);
  cursor: pointer;
  transition: width .3s ease, background-color .3s ease;
}

.page-id-2708 .mx3d-story-dot[aria-current="true"] {
  width: 46px;
  background: #e08000;
}

.page-id-2708 .mx3d-story-dot:focus-visible {
  outline: 2px solid #f5a12a;
  outline-offset: 4px;
}

.page-id-2708 .mx3d-hero-art {
  position: relative;
  z-index: 2;
  transform: rotateY(-7deg) rotateX(2deg) translateZ(0);
  transform-origin: 52% 50%;
  filter: drop-shadow(-28px 34px 34px rgba(224, 128, 0, .14));
}

.page-id-2708 .mx3d-hero-art img {
  border-radius: 16px;
}

.page-id-2708 .mx3d-float {
  position: absolute;
  z-index: 3;
  width: 28%;
  max-width: 180px;
  transform-style: preserve-3d;
  filter: drop-shadow(0 18px 12px rgba(4, 4, 6, .55));
}

.page-id-2708 .mx3d-float img {
  border: 1px solid rgba(245, 161, 42, .38);
  border-radius: 12px;
}

.page-id-2708 .mx3d-float-a {
  left: 1%;
  bottom: 6%;
  transform: translateZ(90px) rotateY(16deg) rotateZ(-6deg);
}

.page-id-2708 .mx3d-float-b {
  right: -2%;
  top: 8%;
  transform: translateZ(120px) rotateY(-18deg) rotateZ(7deg);
}

.page-id-2708 .mx3d-button .elementor-button {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(245, 243, 238, .2);
  transition: transform .24s cubic-bezier(.16, 1, .3, 1), background-color .24s ease;
}

.page-id-2708 .mx3d-button .elementor-button:hover {
  transform: translateY(-3px);
}

.page-id-2708 .mx3d-button .elementor-button:active {
  transform: translateY(1px) scale(.985);
}

.page-id-2708 :is(.mx3d-rail, .elementor-element-mx3d-rail) {
  position: relative;
  min-height: 160px;
  overflow: hidden;
  background:
    radial-gradient(circle at center, rgba(224, 128, 0, .13), transparent 55%),
    #08090b !important;
  transform: none;
}

.page-id-2708 .mx3d-rail-text {
  position: absolute;
  z-index: 2;
  left: -12%;
  top: 52px;
  width: 124%;
  min-height: 58px;
  display: flex;
  align-items: center;
  padding-inline: 34px;
  min-width: 124%;
  white-space: pre;
  color: #08090b;
  background: #e08000;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .38);
  transform: rotate(-4.2deg);
  transform-origin: center;
}

.page-id-2708 .mx3d-rail-text .elementor-heading-title {
  color: #08090b !important;
  letter-spacing: .055em;
  word-spacing: 1.8em;
  white-space: nowrap;
}

.page-id-2708 :is(.mx3d-rail, .elementor-element-mx3d-rail)::after {
  content: "MONEYJUMP   GOARROW   MIGHTY PINBALL   TICTACTOE X   MEGA SUDOKU   MIGHTY BRICKS BREAKER   MONEYJUMP   GOARROW   MIGHTY PINBALL";
  position: absolute;
  z-index: 1;
  left: -14%;
  top: 51px;
  width: 128%;
  min-height: 58px;
  display: flex;
  align-items: center;
  padding-inline: 40px;
  color: #f5f3ee;
  background: #a01030;
  font-family: Montserrat, sans-serif;
  font-size: clamp(11px, 1.2vw, 15px);
  font-weight: 800;
  letter-spacing: .08em;
  word-spacing: 1.5em;
  white-space: nowrap;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .38);
  transform: rotate(4.2deg);
  transform-origin: center;
}

.page-id-2708 :is(.mx3d-poster-wall, .elementor-element-mx3d-poster-wall) {
  position: relative;
  display: flex !important;
  flex-flow: row wrap !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 34px 26px !important;
  min-height: 840px;
  perspective: 1500px;
  transform-style: preserve-3d;
}

.page-id-2708 :is(
  .mx3d-poster,
  .elementor-element-mx3d-game-money,
  .elementor-element-mx3d-game-arrow,
  .elementor-element-mx3d-game-pinball,
  .elementor-element-mx3d-game-tic,
  .elementor-element-mx3d-game-sudoku,
  .elementor-element-mx3d-game-bricks
) {
  width: 27% !important;
  max-width: 330px;
  flex: 0 0 27% !important;
  position: relative;
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.16, 1, .3, 1), filter .5s ease;
}

.page-id-2708 :is(
  .mx3d-poster,
  .elementor-element-mx3d-game-money,
  .elementor-element-mx3d-game-arrow,
  .elementor-element-mx3d-game-pinball,
  .elementor-element-mx3d-game-tic,
  .elementor-element-mx3d-game-sudoku,
  .elementor-element-mx3d-game-bricks
):hover {
  z-index: 8;
  transform: translateY(-18px) translateZ(90px) rotateY(0deg) rotateZ(0deg);
  filter: saturate(1.08);
}

.page-id-2708 .mx3d-poster-image img {
  border-radius: 14px;
  box-shadow: 0 26px 36px rgba(3, 4, 7, .48);
}

.page-id-2708 .mx3d-poster-title .elementor-heading-title {
  letter-spacing: -.025em;
}

.page-id-2708 :is(.mx3d-poster-a, .elementor-element-mx3d-game-money) {
  transform: translateY(48px) rotateY(17deg) rotateZ(-4deg);
}

.page-id-2708 :is(.mx3d-poster-b, .elementor-element-mx3d-game-arrow) {
  transform: translateY(-18px) translateZ(45px) rotateY(8deg) rotateZ(2deg);
}

.page-id-2708 :is(.mx3d-poster-c, .elementor-element-mx3d-game-pinball) {
  transform: translateY(22px) translateZ(70px) rotateY(-4deg) rotateZ(-1deg);
}

.page-id-2708 :is(.mx3d-poster-d, .elementor-element-mx3d-game-tic) {
  transform: translateY(-34px) translateZ(40px) rotateY(-12deg) rotateZ(3deg);
}

.page-id-2708 :is(.mx3d-poster-e, .elementor-element-mx3d-game-sudoku) {
  transform: translateY(56px) rotateY(14deg) rotateZ(-3deg);
}

.page-id-2708 :is(.mx3d-poster-f, .elementor-element-mx3d-game-bricks) {
  transform: translateY(4px) rotateY(-17deg) rotateZ(4deg);
}

.page-id-2708 :is(.mx3d-app-art-wrap, .elementor-element-mx3d-app-art-wrap) {
  position: relative;
  perspective: 1300px;
}

.page-id-2708 .mx3d-app-art {
  transform: rotateY(9deg) rotateZ(-3deg);
  filter: drop-shadow(30px 38px 34px rgba(4, 5, 8, .58));
}

.page-id-2708 .mx3d-app-art img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}

.page-id-2708 .mx3d-app-title .elementor-heading-title,
.page-id-2708 .mx3d-games-title .elementor-heading-title,
.page-id-2708 .mx3d-studio-title .elementor-heading-title {
  max-width: 12ch;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.page-id-2708 :is(.mx3d-studio, .elementor-element-mx3d-studio) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.page-id-2708 :is(.mx3d-studio, .elementor-element-mx3d-studio)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("https://moxrex.com/wp-content/uploads/2026/07/about-studio.webp") center 44% / cover no-repeat;
  transform: scale(1.025);
}

.page-id-2708 :is(.mx3d-studio, .elementor-element-mx3d-studio)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8, 9, 11, .96) 0%, rgba(8, 9, 11, .78) 42%, rgba(8, 9, 11, .22) 72%),
    linear-gradient(0deg, rgba(8, 9, 11, .88), transparent 58%);
}

.page-id-2708 :is(.mx3d-studio-overlay, .elementor-element-mx3d-studio-overlay) {
  position: relative;
  z-index: 2;
}

.page-id-2708 .mx3d-blog-widget img {
  border-radius: 14px;
  transition: transform .6s cubic-bezier(.16, 1, .3, 1), filter .4s ease;
}

.page-id-2708 .mx3d-blog-widget a:hover img {
  transform: scale(1.035);
  filter: saturate(1.08);
}

@media (prefers-reduced-motion: no-preference) {
  .page-id-2708 .mx3d-motion-field::before {
    animation: mx3d-field-spin 28s linear infinite;
  }

  .page-id-2708 .mx3d-motion-field::after {
    animation: mx3d-beam 6.5s ease-in-out infinite alternate;
  }

  .page-id-2708 .mx3d-motion-orbit:first-of-type {
    animation: mx3d-orbit 22s linear infinite;
  }

  .page-id-2708 .mx3d-motion-orbit:nth-of-type(2) {
    animation: mx3d-orbit-reverse 31s linear infinite;
  }

  .page-id-2708 .mx3d-motion-path {
    animation: mx3d-dash 18s linear infinite;
  }

  .page-id-2708 .mx3d-motion-node {
    animation: mx3d-node 3.6s ease-in-out infinite alternate;
  }

  .page-id-2708 .mx3d-hero-art {
    animation: mx3d-hero-in 1s cubic-bezier(.16, 1, .3, 1) both;
  }

  .page-id-2708 .mx3d-float-a {
    animation: mx3d-float-a 6s ease-in-out 1s infinite alternate;
  }

  .page-id-2708 .mx3d-float-b {
    animation: mx3d-float-b 7s ease-in-out 1.2s infinite alternate;
  }

  .page-id-2708 .mx3d-rail-text {
    animation: mx3d-cross-a 17s ease-in-out infinite alternate;
  }

  .page-id-2708 :is(.mx3d-rail, .elementor-element-mx3d-rail)::after {
    animation: mx3d-cross-b 20s ease-in-out infinite alternate;
  }
}

@keyframes mx3d-field-spin {
  to { transform: rotate(360deg); }
}

@keyframes mx3d-beam {
  to { transform: rotate(-19deg) translate3d(28%, 0, 0); opacity: .92; }
}

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

@keyframes mx3d-orbit-reverse {
  to { transform: rotate(-360deg); }
}

@keyframes mx3d-dash {
  to { stroke-dashoffset: -260; }
}

@keyframes mx3d-node {
  to { opacity: .28; transform: scale(.62); }
}

@keyframes mx3d-hero-in {
  from {
    opacity: 0;
    transform: rotateY(-18deg) rotateX(6deg) translate3d(70px, 24px, -90px);
  }
  to {
    opacity: 1;
    transform: rotateY(-7deg) rotateX(2deg) translateZ(0);
  }
}

@keyframes mx3d-float-a {
  to {
    transform: translate3d(8px, -16px, 110px) rotateY(12deg) rotateZ(-3deg);
  }
}

@keyframes mx3d-float-b {
  to {
    transform: translate3d(-10px, 18px, 140px) rotateY(-13deg) rotateZ(4deg);
  }
}

@keyframes mx3d-cross-a {
  from { transform: rotate(-4.2deg) translate3d(-5%, 0, 0); }
  to { transform: rotate(-4.2deg) translate3d(5%, 0, 0); }
}

@keyframes mx3d-cross-b {
  from { transform: rotate(4.2deg) translate3d(5%, 0, 0); }
  to { transform: rotate(4.2deg) translate3d(-5%, 0, 0); }
}

@media (max-width: 1024px) {
  .page-id-2708 .mx3d-hero-title .elementor-heading-title {
    max-width: 12ch;
  }

  .page-id-2708 :is(.mx3d-stage, .elementor-element-mx3d-hero-stage) {
    width: 100%;
    max-width: 780px;
    margin-inline: auto;
  }

  .page-id-2708 :is(
    .mx3d-poster,
    .elementor-element-mx3d-game-money,
    .elementor-element-mx3d-game-arrow,
    .elementor-element-mx3d-game-pinball,
    .elementor-element-mx3d-game-tic,
    .elementor-element-mx3d-game-sudoku,
    .elementor-element-mx3d-game-bricks
  ) {
    width: 42% !important;
    flex-basis: 42% !important;
  }
}

@media (max-width: 767px) {
  .page-id-2708 :is(.mx3d-hero, .elementor-element-mx3d-hero)::before {
    background: linear-gradient(180deg, #08090b 0%, rgba(8, 9, 11, .8) 58%, rgba(8, 9, 11, .18) 100%);
  }

  .page-id-2708 :is(.mx3d-stage, .elementor-element-mx3d-hero-stage) {
    min-height: 390px;
    perspective: 900px;
  }

  .page-id-2708 .mx3d-motion-field {
    opacity: .72;
  }

  .page-id-2708 .mx3d-motion-haze {
    min-width: 260px;
    min-height: 260px;
    filter: blur(46px);
  }

  .page-id-2708 .mx3d-hero-art {
    transform: rotateY(-3deg) rotateX(1deg);
  }

  .page-id-2708 .mx3d-float {
    max-width: 112px;
  }

  .page-id-2708 .mx3d-float-a {
    left: 0;
    bottom: 2%;
  }

  .page-id-2708 .mx3d-float-b {
    right: 0;
    top: 1%;
  }

  .page-id-2708 .mx3d-story-deck {
    right: 0;
    bottom: -10px;
    width: min(306px, 91%);
    transform: translateZ(120px);
  }

  .page-id-2708 .mx3d-story-viewport {
    min-height: 124px;
  }

  .page-id-2708 .mx3d-story-slide {
    padding: 18px 18px 14px;
  }

  .page-id-2708 .mx3d-story-copy {
    font-size: 12px;
  }

  .page-id-2708 .mx3d-story-controls {
    padding: 0 18px 15px;
  }

  .page-id-2708 :is(.mx3d-rail, .elementor-element-mx3d-rail) {
    min-height: 124px;
    transform: none;
  }

  .page-id-2708 .mx3d-rail-text,
  .page-id-2708 :is(.mx3d-rail, .elementor-element-mx3d-rail)::after {
    top: 38px;
    min-height: 48px;
  }

  .page-id-2708 :is(.mx3d-poster-wall, .elementor-element-mx3d-poster-wall) {
    min-height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px 14px;
    perspective: none;
  }

  .page-id-2708 :is(
    .mx3d-poster,
    .elementor-element-mx3d-game-money,
    .elementor-element-mx3d-game-arrow,
    .elementor-element-mx3d-game-pinball,
    .elementor-element-mx3d-game-tic,
    .elementor-element-mx3d-game-sudoku,
    .elementor-element-mx3d-game-bricks
  ) {
    width: 100% !important;
    flex-basis: 100% !important;
    max-width: none;
    transform: none;
  }

  .page-id-2708 :is(
    .mx3d-poster,
    .elementor-element-mx3d-game-money,
    .elementor-element-mx3d-game-arrow,
    .elementor-element-mx3d-game-pinball,
    .elementor-element-mx3d-game-tic,
    .elementor-element-mx3d-game-sudoku,
    .elementor-element-mx3d-game-bricks
  ):hover {
    transform: translateY(-6px);
  }

  .page-id-2708 .mx3d-app-art {
    transform: rotateY(0deg) rotateZ(-2deg);
  }

  .page-id-2708 :is(.mx3d-studio, .elementor-element-mx3d-studio)::before {
    background: linear-gradient(0deg, rgba(8, 9, 11, .96) 0%, rgba(8, 9, 11, .72) 70%, rgba(8, 9, 11, .3) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-id-2708 *,
  .page-id-2708 *::before,
  .page-id-2708 *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }

  .page-id-2708 .mx3d-rail-text {
    transform: rotate(-4.2deg);
  }

  .page-id-2708 :is(.mx3d-rail, .elementor-element-mx3d-rail)::after {
    transform: rotate(4.2deg);
  }

  .page-id-2708 .mx3d-motion-field {
    opacity: .36;
  }

  .page-id-2708 .mx3d-motion-haze {
    transform: none;
    transition: none;
  }

  .page-id-2708 .mx3d-story-slide {
    transition: none;
  }
}