/* Tilt 3D reativo — perspectiva e sombra que segue o cursor. */
.tilt { transform-style: preserve-3d; will-change: transform; }
.ck-catalog-card { perspective: 800px; perspective-origin: 50% 30%; }
.steps { perspective: 800px; }
.tilt.is-tilting {
  transform:
    translate3d(var(--tx, 0px), var(--ty, 0px), 0)
    rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg));
  transition: transform .12s linear;
  box-shadow:
    calc(var(--tx, 0px) * -1) calc(var(--ty, 0px) * -1 + 18px) 28px #0006,
    inset 0 0 0 1px #ffc21c22;
}
.steps article.tilt.is-tilting { box-shadow:
    calc(var(--tx, 0px) * -1) calc(var(--ty, 0px) * -1 + 14px) 22px #0005,
    inset 0 0 0 1px #ffc21c33;
  transform:
    translate3d(var(--tx, 0px), var(--ty, 0px), 0)
    rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg));
  border-color: #ffc21c66; }
.hero-art.tilt.is-tilting, .acai-art.tilt.is-tilting {
  transition: transform .25s ease-out, box-shadow .25s ease-out;
  box-shadow:
    calc(var(--tx, 0px) * -1.5) calc(var(--ty, 0px) * -1.5 + 24px) 50px #0007,
    inset 0 0 0 1px #ffc21c44;
}
/* Glow que segue o cursor dentro do card */
.ck-catalog-card.tilt.is-tilting::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--glow-x, 50%) var(--glow-y, 50%), #ffc21c14, transparent 60%);
  pointer-events: none;
  opacity: 1;
  transition: opacity .25s;
}
@media (prefers-reduced-motion: reduce) {
  .tilt { will-change: auto; }
  .tilt.is-tilting { transition: none; }
}