/* =========================================================
   Movimento: entrada 3D, parallax, revelações, tilt
   ========================================================= */

/* --- entrada 3D da página --- */

.stage {
  perspective: 1500px;
  perspective-origin: 50% 25%;
}

.stage__inner {
  transform-style: preserve-3d;
  animation: pageIn 1.6s var(--ease-out) 0.1s both;
}

@keyframes pageIn {
  from {
    opacity: 0;
    transform: translate3d(0, 90px, -460px) rotateX(11deg) scale(0.95);
    filter: blur(16px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

/*
  Terminada a entrada, o palco larga o transform. Um transform ou perspective
  persistente cria bloco de contenção e faz com que qualquer `position: fixed`
  cá dentro deixe de ser fixo ao viewport — é o que partiria o parallax.
*/
.stage.is-settled {
  perspective: none;
}

.stage.is-settled .stage__inner {
  animation: none;
  transform: none;
  transform-style: flat;
}

/* --- cortina de abertura --- */

.boot {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  background: radial-gradient(120% 90% at 50% 45%, #0e1c33 0%, var(--ink) 65%);
  animation: bootOut 1.4s var(--ease-out) 0.8s forwards;
}

.boot img {
  width: clamp(140px, 34vw, 200px);
  animation: bootMark 1.5s var(--ease-out) both;
}

@keyframes bootMark {
  from {
    opacity: 0;
    transform: translateZ(-140px) scale(0.9);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

@keyframes bootOut {
  to {
    opacity: 0;
    visibility: hidden;
    transform: scale(1.12);
    filter: blur(20px);
  }
}

/* --- revelações --- */

[data-reveal] {
  opacity: 0;
  transition:
    opacity 1s var(--ease-out),
    transform 1.15s var(--ease-out),
    filter 1s var(--ease-out);
  will-change: transform, opacity;
}

[data-reveal='up'] {
  transform: translate3d(0, 46px, 0);
}

[data-reveal='3d'] {
  transform: perspective(1100px) translate3d(0, 64px, -150px) rotateX(13deg);
  filter: blur(7px);
}

[data-reveal='left'] {
  transform: perspective(1100px) translate3d(-48px, 24px, -90px) rotateY(13deg);
}

[data-reveal='right'] {
  transform: perspective(1100px) translate3d(48px, 24px, -90px) rotateY(-13deg);
}

[data-reveal='scale'] {
  transform: scale(0.92);
  filter: blur(8px);
}

[data-reveal='mask'] {
  clip-path: inset(0 0 100% 0);
  transform: translate3d(0, 18px, 0);
}

[data-reveal].is-in {
  opacity: 1;
  transform: none;
  filter: blur(0);
  clip-path: inset(0 0 0 0);
}

/* --- parallax: o JS escreve --py em px --- */

[data-parallax] {
  will-change: transform;
  transform: translate3d(0, var(--py, 0px), 0);
}

/* --- tilt 3D com o ponteiro --- */

.tilt {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform 0.7s var(--ease-out);
}

.tilt.is-tilting {
  transition: transform 0.16s linear;
}

.tilt__spot {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(
    320px circle at var(--mx, 50%) var(--my, 0%),
    rgba(243, 203, 142, 0.16),
    transparent 62%
  );
  transition: opacity 0.5s var(--ease-out);
}

.tilt:hover .tilt__spot {
  opacity: 1;
}

/* --- brilhos ambiente --- */

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  will-change: transform;
}

.orb--gold {
  background: radial-gradient(circle, rgba(224, 165, 92, 0.34), transparent 68%);
}

.orb--cyan {
  background: radial-gradient(circle, rgba(63, 150, 196, 0.26), transparent 68%);
}

@keyframes drift {
  0%,
  100% {
    transform: translate3d(-4%, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(4%, -5%, 0) scale(1.15);
  }
}

@keyframes floaty {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -14px, 0);
  }
}

@keyframes pulseGlow {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* --- respeitar quem pede menos movimento --- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
  [data-parallax] {
    transform: none !important;
  }
  html {
    scroll-behavior: auto;
  }
}