/*
================================================

Space Vanta Theme 1.0

Module:
On-Demand

File:
motion.css

Version:
ON-DEMAND-HERO-001

Purpose:
Subtle spatial movement.
Motion must support discovery,
not carry information.

================================================
*/


/* =================================================
   HERO ENTRANCE
   ================================================= */

@keyframes sv-on-demand-hero-content-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


@keyframes sv-on-demand-hero-space-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}


.sv-on-demand__hero-content {
  animation:
    sv-on-demand-hero-content-in 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}


.sv-on-demand__hero-space {
  animation:
    sv-on-demand-hero-space-in 1000ms cubic-bezier(0.22, 1, 0.36, 1) 100ms both;
}


/* =================================================
   SPATIAL OBJECT IDLE
   ================================================= */

@keyframes sv-on-demand-space-float {
  0% {
    transform:
      translate(-50%, -50%) rotate(-9deg) translate3d(0, 0, 0);
  }

  50% {
    transform:
      translate(-50%, -50%) rotate(-7.5deg) translate3d(0, -7px, 0);
  }

  100% {
    transform:
      translate(-50%, -50%) rotate(-9deg) translate3d(0, 0, 0);
  }
}


.sv-on-demand__hero-space-object {
  animation:
    sv-on-demand-space-float 7s ease-in-out infinite;
}


/* =================================================
   REFLECTION / SIGNAL
   ================================================= */

@keyframes sv-on-demand-signal-pulse {

  0%,
  100% {
    opacity: 0.38;
  }

  50% {
    opacity: 0.72;
  }
}


.sv-on-demand__hero-object-signal {
  animation:
    sv-on-demand-signal-pulse 3.8s ease-in-out infinite;
}


/* =================================================
   SPATIAL PLANES
   ================================================= */

@keyframes sv-on-demand-plane-shift {

  0%,
  100% {
    transform:
      rotateY(-24deg) rotateX(8deg) rotateZ(7deg) translate3d(0, 0, 0);
  }

  50% {
    transform:
      rotateY(-24deg) rotateX(8deg) rotateZ(7deg) translate3d(5px, -4px, 0);
  }
}


.sv-on-demand__hero-space-plane--back {
  animation:
    sv-on-demand-plane-shift 9s ease-in-out infinite;
}


/* =================================================
   EXPLORE INTERACTION
   ================================================= */

.sv-on-demand__hero-space:has(~ .sv-on-demand__hero-content .sv-on-demand__hero-explore:hover) .sv-on-demand__hero-space-object {
  transform:
    translate(-50%, -50%) rotate(-6deg) scale(1.025);
}


/*
================================================
NOTE

The main Explore interaction remains CSS-light.

No continuous mouse tracking is introduced here.
The spatial object must remain understandable
and performant across desktop and mobile.
================================================
*/


/* =================================================
   REDUCED MOTION
   ================================================= */

@media (prefers-reduced-motion: reduce) {

  .sv-on-demand__hero-content,
  .sv-on-demand__hero-space,
  .sv-on-demand__hero-space-object,
  .sv-on-demand__hero-object-signal,
  .sv-on-demand__hero-space-plane--back {
    animation: none;
  }

}