/* X adds pitch, Y adds yaw, and the small Z component gives each screen a lean. */
main .hero-highlight-reel__phone,
main .capture-scene__phone,
main .voice-scene__phone {
  --home-desktop-angle: 1 3 0.4 -14deg;
  --home-mobile-angle: 1 3 0.35 -9deg;
}

main .processing-scene__phone,
main .quick-missions__phone:not(.problem-solver__phone),
main .luna-phone--tab {
  --home-desktop-angle: -1 3 0.3 13deg;
  --home-mobile-angle: -1 3 0.25 8deg;
}

main .feedback-scene__phone--center,
main .problem-solver__phone {
  --home-desktop-angle: 1 4 0.25 -11deg;
  --home-mobile-angle: 1 4 0.2 -7deg;
}

main .feedback-scene__phone--far-left,
main .feedback-scene__phone--left {
  --home-desktop-angle: 1 3 0.4 -16deg;
  --home-mobile-angle: 1 3 0.35 -9deg;
}

main .feedback-scene__phone--right,
main .problem-solver__device.is-next .problem-solver__phone {
  --home-desktop-angle: -1 3 0.35 16deg;
  --home-mobile-angle: -1 3 0.3 9deg;
}

main .ipad-mockup,
main .voice-scene__ipad {
  --home-desktop-angle: 1 4 0.3 -11deg;
  --home-mobile-angle: 1 4 0.25 -8deg;
}

main .response-carousel__question-phone {
  --home-desktop-angle: -1 4 0.25 10deg;
  --home-mobile-angle: -1 4 0.2 7deg;
}

/* Feature-size devices favor pitch and yaw with only a slight roll. The small
   handwriting phones above retain their gentler angles. */
main .voice-scene__phone {
  --home-desktop-angle: 2 3.5 0.2 -28deg;
  --home-mobile-angle: 1.8 3.5 0.15 -18deg;
}

/* Keep the lead video easier to see while retaining some 3D depth. */
main .hero-highlight-reel__phone {
  --home-desktop-angle: 2 3.5 0.2 -20deg;
  --home-mobile-angle: 1.8 3.5 0.15 -12deg;
}

main .quick-missions__phone:not(.problem-solver__phone) {
  --home-desktop-angle: -2 3.5 -0.2 27deg;
  --home-mobile-angle: -1.8 3.5 -0.15 18deg;
}

main .luna-phone--tab {
  --home-desktop-angle: -1.8 3.5 -0.2 25deg;
  --home-mobile-angle: -1.6 3.5 -0.15 16deg;
}

main .ipad-mockup {
  --home-desktop-angle: 2 4 0.2 -27deg;
  --home-mobile-angle: 1.8 4 0.15 -20deg;
}

main .voice-scene__ipad {
  --home-desktop-angle: -1.8 3.5 -0.2 25deg;
  --home-mobile-angle: -1.6 3.5 -0.15 16deg;
}

/* Existing layout transforms add a separate five-degree lean on desktop. */
main .voice-scene__phone,
main .quick-missions__phone:not(.problem-solver__phone),
main .luna-phone--tab {
  transform: rotate(-1deg);
}

main .voice-scene__ipad {
  transform: rotate(1deg);
}

@media (min-width: 901px) and (pointer: fine) {
  main .ipad-mockup {
    transform: rotateY(-3deg) rotateX(1deg);
  }

  /* Scroll reveals settle with both pitch and yaw. */
  main :is(.hero-highlight-reel__phone, .capture-scene__phone,
           .processing-scene__phone, .feedback-scene__phone,
           .voice-scene__phone, .voice-scene__ipad, .luna-phone--tab,
           .quick-missions__phone, .ipad-mockup) {
    rotate: var(--home-desktop-angle);
  }

  html[data-tilt-ready] main .is-tilt-revealed:is(
    .capture-scene__phone, .processing-scene__phone,
    .feedback-scene__phone, .voice-scene__phone, .voice-scene__ipad,
    .luna-phone--tab, .quick-missions__phone, .ipad-mockup
  ) {
    rotate: var(--home-desktop-angle) !important;
  }

  main .response-carousel__question-phone:not(.device-tilt),
  main .response-carousel__question-phone.device-tilt.is-device-revealed {
    rotate: var(--home-desktop-angle);
  }
}

@media (max-width: 900px), (pointer: coarse) {
  /* Perspective turns the flat mobile chassis as one surface. The mobile
     scripts still skip extruded rims and hardware-key depth layers. */
  html body main :is(.hero-highlight-reel, .ipad-container,
                     .quick-missions__device-column, .problem-solver__device,
                     .response-carousel__paper, .capture-scene,
                     .processing-scene__stage, .feedback-scene__deck,
                     .voice-scene__devices, .luna-tab-visual) {
    perspective: 1400px;
  }

  html body main :is(.hero-highlight-reel__phone, .capture-scene__phone,
                     .processing-scene__phone, .feedback-scene__phone,
                     .voice-scene__phone, .voice-scene__ipad, .luna-phone--tab,
                     .quick-missions__phone, .ipad-mockup,
                     .response-carousel__question-phone) {
    rotate: var(--home-mobile-angle) !important;
  }

  html[data-tilt-ready] body main .is-tilt-revealed {
    rotate: var(--home-mobile-angle) !important;
  }
}