/* Le superfici esterne si inclinano; i livelli della scena restano indipendenti. */
@media (hover: hover) and (pointer: fine) and (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .pointer-surface.hero-art.hero-motion,
  .pointer-surface.journey-scene {
    transform: perspective(1100px) translateX(var(--shift-x, 0px)) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    transition: transform .4s cubic-bezier(.2, .7, .3, 1);
  }
  .pointer-surface.hero-motion .art-frame::after,
  .pointer-surface.journey-scene::after {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    background: radial-gradient(circle at var(--light-x, 50%) var(--light-y, 50%), rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 62%);
    opacity: var(--pointer-active, 0);
    transition: opacity .35s ease;
    pointer-events: none;
  }
  .pointer-surface.journey-scene::after {
    background: radial-gradient(circle at var(--light-x, 50%) var(--light-y, 50%), rgba(255, 255, 255, .11), rgba(255, 255, 255, 0) 60%);
  }
}