/* Duas faces reais para a rotação 360° guiada pelo scroll */
.cookie-rig {
  transform:
    translate(-50%, -50%)
    rotateX(calc(8deg + var(--ty, 0deg) + var(--scroll-x, 0deg)))
    rotateY(calc(var(--tx, 0deg) + var(--scroll-y, 0deg)))
    rotateZ(var(--scroll-z, 0deg))
    translateZ(80px);
}

.cookie-rig .cookie-main,
.cookie-rig .cookie-back-face {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
}

.cookie-rig .cookie-main { transform: translateZ(7px); }
.cookie-rig .cookie-back-face { transform: rotateY(180deg) translateZ(7px); }
.cookie-rig .cookie-depth { opacity: 0; }

.cookie-portal { transform-style: preserve-3d; }
.cookie-portal .portal-front,
.cookie-portal .portal-back {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
}
.cookie-portal .portal-front { transform: translateZ(18px); }
.cookie-portal .portal-back { transform: rotateY(180deg) translateZ(18px); }

@media (prefers-reduced-motion: reduce) {
  .cookie-rig,
  .cookie-portal { transform: none; }
  .cookie-rig .cookie-back-face,
  .cookie-portal .portal-back { display: none; }
}