/* Activate pointer depth after real mouse movement; respect reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .mouse-depth-enabled .hero-console {
    transform: rotateX(var(--hero-rotate-x, 0deg)) rotateY(var(--hero-rotate-y, 0deg));
    transition: transform .14s ease-out, box-shadow .2s ease-out;
    will-change: transform;
  }
  .mouse-depth-enabled .hero-glow {
    translate: var(--hero-glow-x, 0px) var(--hero-glow-y, 0px);
    transition: translate .2s ease-out;
  }
  .mouse-depth-enabled .hero-pipeline {
    transform: translate3d(var(--hero-layer-x, 0px), var(--hero-layer-y, 0px), 0);
    transition: transform .18s ease-out;
  }
  .mouse-depth-enabled .hero-preview {
    transform: translate3d(var(--hero-preview-x, 0px), var(--hero-preview-y, 0px), 0);
    transition: transform .18s ease-out;
  }
  .mouse-depth-enabled .hero-console {
    box-shadow: 0 30px 75px rgba(58, 29, 19, .32), inset 0 1px rgba(255, 255, 255, .12);
  }
  .mouse-depth-enabled .tilt-surface {
    transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(-3px);
    transition: transform .13s ease-out, box-shadow .2s ease, border-color .2s ease;
    will-change: transform;
  }
  .mouse-depth-enabled .setup-card.tilt-surface::after,
  .mouse-depth-enabled .billing-product.tilt-surface::after {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(circle at var(--shine-x, 50%) var(--shine-y, 50%), rgba(252, 122, 70, .18), transparent 58%);
    content: "";
    pointer-events: none;
  }
  .mouse-depth-enabled .setup-card.tilt-surface > *,
  .mouse-depth-enabled .billing-product.tilt-surface > * {
    position: relative;
    z-index: 1;
  }
  :root[data-theme="dark"].mouse-depth-enabled .setup-card.tilt-surface::after,
  :root[data-theme="dark"].mouse-depth-enabled .billing-product.tilt-surface::after {
    background: radial-gradient(circle at var(--shine-x, 50%) var(--shine-y, 50%), rgba(255, 155, 103, .17), transparent 58%);
  }
  .brand-mark { transition: transform .3s var(--ease-out); }
  .brand:hover .brand-mark { transform: rotate(-6deg) scale(1.07); }
}