/* Mozuki cinematic motion extension — loaded only after the base landing-page stylesheet. */
#mozuki-motion-canvas {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .78;
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(#000 0 86%, transparent 100%);
  mask-image: linear-gradient(#000 0 86%, transparent 100%);
}

.motion-enabled {
  --node-float-distance: 9px;
  --world-drift-distance: 12px;
}

/* Progressive enhancement: only the running module prepares these for its reveal. */
.motion-enabled .reveal.motion-reveal-ready {
  transition:
    opacity 620ms cubic-bezier(.2, .8, .2, 1),
    transform 760ms cubic-bezier(.2, .8, .2, 1);
  transition-delay: calc(var(--motion-reveal-index, 0) * 78ms);
}

.motion-enabled .reveal.motion-reveal-ready:not(.motion-inview) {
  opacity: 0;
  transform: translate3d(0, 32px, 0) scale(.985);
}

.motion-enabled .reveal.motion-reveal-ready.motion-inview {
  opacity: 1;
  transform: none;
}

.motion-enabled .hero__art {
  transform: scale(1.025) translate3d(var(--hero-x, 0), var(--hero-y, 0), 0);
  transform-origin: center 42%;
  will-change: transform;
}

.motion-enabled .hero::before,
.motion-enabled .hero::after {
  position: absolute;
  z-index: 2;
  content: "";
  pointer-events: none;
}

.motion-enabled .hero::before {
  inset: -35%;
  background: conic-gradient(from 110deg, transparent 0 42%, rgb(75 179 255 / 12%) 48%, transparent 54% 100%);
  animation: cinematic-scan 13s linear infinite;
}

.motion-enabled .hero::after {
  inset: auto;
  left: 58%;
  top: 44%;
  width: 18vw;
  height: 18vw;
  min-width: 220px;
  min-height: 220px;
  border: 1px solid rgb(80 190 255 / 34%);
  border-radius: 50%;
  box-shadow: 0 0 44px rgb(0 124 255 / 30%), inset 0 0 44px rgb(0 124 255 / 18%);
  transform: translate(-50%, -50%);
  animation: nexus-wave 4.8s ease-out infinite;
}

.motion-enabled .feature-node {
  animation: node-float 5.4s ease-in-out infinite;
  animation-delay: calc(var(--motion-index, 0) * -640ms);
}

.motion-enabled .feature-node__icon {
  position: relative;
}

.motion-enabled .feature-node__icon::after {
  position: absolute;
  z-index: 0;
  inset: -7px;
  border: 1px solid rgb(111 210 255 / 42%);
  border-radius: inherit;
  content: "";
  pointer-events: none;
  animation: node-ring 3.8s ease-in-out infinite;
}

.motion-enabled .feature-node__icon svg {
  position: relative;
  z-index: 1;
}

.motion-enabled .panel-orbit__rings {
  animation: orbit-turn 42s linear infinite;
}

.motion-enabled .panel-orbit__rings::before {
  animation: orbit-turn-reverse 27s linear infinite;
}

.motion-enabled .orbit-world {
  animation: world-drift 7s ease-in-out infinite;
  animation-delay: calc(var(--motion-index, 0) * -1.4s);
}

.motion-enabled .world-card:nth-of-type(2n) {
  --card-offset: 34px;
}

.motion-enabled .world-card.motion-tilt {
  transform:
    perspective(900px)
    rotateX(var(--tilt-x, 0deg))
    rotateY(var(--tilt-y, 0deg))
    translateY(var(--card-offset, 0px));
  transition: transform 180ms ease-out;
  will-change: transform;
}

.motion-enabled .world-card__visual::before {
  position: absolute;
  z-index: 3;
  inset: -80% -30%;
  background: linear-gradient(110deg, transparent 42%, rgb(116 218 255 / 22%) 49%, transparent 56%);
  content: "";
  pointer-events: none;
  transform: translateX(-55%);
  transition: transform 700ms cubic-bezier(.2, .8, .2, 1);
}

.motion-enabled .world-card:hover .world-card__visual::before {
  transform: translateX(55%);
}

.motion-enabled .workflow-step__station::before,
.motion-enabled .final-cta__portal span:first-child {
  animation: ring-spin 22s linear infinite;
}

.motion-enabled .final-cta__portal span:nth-child(2) {
  animation: ring-spin-reverse 17s linear infinite;
}

.motion-enabled .button-link--primary {
  position: relative;
  overflow: hidden;
}

.motion-enabled .button-link--primary::after {
  position: absolute;
  inset: -80% auto -80% -45%;
  width: 28%;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 42%), transparent);
  content: "";
  pointer-events: none;
  transform: translateX(0) rotate(18deg);
  animation: button-sweep 5.5s ease-in-out infinite;
}

@keyframes cinematic-scan {
  to { transform: rotate(360deg); }
}

@keyframes nexus-wave {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.45); }
  24% { opacity: .75; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.4); }
}

/* translate keeps the base hover transform available and avoids layout reflow. */
@keyframes node-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 calc(var(--node-float-distance) * -1); }
}

@keyframes node-ring {
  0%, 100% { opacity: .25; transform: scale(.92); }
  50% { opacity: .9; transform: scale(1.08); }
}

@keyframes orbit-turn {
  to { transform: perspective(720px) rotateX(64deg) rotate(348deg); }
}

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

@keyframes world-drift {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 calc(var(--world-drift-distance) * -1); }
}

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

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

/* Transform-only sweep: no animated layout property. */
@keyframes button-sweep {
  0%, 62% { transform: translateX(0) rotate(18deg); }
  82%, 100% { transform: translateX(610%) rotate(18deg); }
}

@media (max-width: 900px) {
  .motion-enabled {
    --node-float-distance: 5px;
    --world-drift-distance: 7px;
  }

  .worlds-section {
    overflow-x: clip;
  }

  #mozuki-motion-canvas { opacity: .48; }

  .motion-enabled .hero::after {
    width: 150px;
    height: 150px;
    min-width: 0;
    min-height: 0;
  }

  /* Preserves the base rail's compact alternating offset after desktop-to-mobile resize. */
  .motion-enabled .world-card:nth-of-type(2n) {
    --card-offset: 20px;
  }

  .motion-enabled .world-card.motion-tilt {
    transform: translateY(var(--card-offset, 0px));
  }
}

@media (max-width: 600px) {
  .hero {
    min-height: 1180px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #mozuki-motion-canvas { display: none !important; }

  .motion-enabled .hero__art,
  .motion-enabled .hero::before,
  .motion-enabled .hero::after,
  .motion-enabled .feature-node,
  .motion-enabled .feature-node__icon::after,
  .motion-enabled .reveal.motion-reveal-ready,
  .motion-enabled .panel-orbit__rings,
  .motion-enabled .panel-orbit__rings::before,
  .motion-enabled .orbit-world,
  .motion-enabled .workflow-step__station::before,
  .motion-enabled .final-cta__portal span,
  .motion-enabled .button-link--primary::after {
    animation: none !important;
    transition: none !important;
    transform: none;
    translate: none;
  }

  .motion-enabled .world-card.motion-tilt {
    transition: none !important;
    transform: translateY(var(--card-offset, 0px)) !important;
  }

  .motion-enabled .reveal.motion-reveal-ready {
    opacity: 1 !important;
  }
}