/* Public marketing pages opt in explicitly; content is always visible without JS. */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .site-motion-enabled [data-site-card] {
        rotate: var(--site-card-tilt, 1 0 0 0deg);
        transition-property: color, background-color, border-color, box-shadow, opacity, transform, rotate, translate;
        transition-duration: 220ms;
        transition-timing-function: ease-out;
    }
    .site-motion-enabled [data-site-card].site-card-active {
        translate: 0 -2px;
    }
    .site-motion-enabled [data-site-card]:focus-within {
        rotate: none;
        translate: none;
    }
    .site-motion-enabled [data-site-button] {
        transition-property: color, background-color, border-color, box-shadow, transform, translate;
        transition-duration: 180ms;
        transition-timing-function: ease-out;
    }
    .site-motion-enabled [data-site-button]:hover { translate: 0 -2px; }
    .site-motion-enabled [data-site-button]:active { translate: none; }

    .site-motion-enabled [data-site-depth].site-depth-visible > [data-site-depth-layer] {
        transform: perspective(1400px) translate3d(0, calc(var(--site-depth-progress, 0) * -12px), 0)
            rotateX(calc(var(--site-depth-progress, 0) * 3deg))
            rotateY(calc(var(--site-depth-progress, 0) * -3deg));
        transition: transform 240ms ease-out;
    }
    .site-motion-enabled [data-site-depth].site-depth-visible > [data-site-depth-layer="phone"] {
        transform: perspective(1200px) translate3d(0, calc(var(--site-depth-progress, 0) * -16px), 0)
            rotateX(calc(2deg + var(--site-depth-progress, 0) * 2deg))
            rotateY(calc(-6deg + var(--site-depth-progress, 0) * -3deg));
    }
    .site-motion-enabled [data-site-depth].site-depth-visible > [data-site-depth-layer="screen"] {
        transform: perspective(1600px) translate3d(0, calc(var(--site-depth-progress, 0) * 8px), 0)
            rotateX(calc(2deg + var(--site-depth-progress, 0) * -2deg))
            rotateY(calc(3deg + var(--site-depth-progress, 0) * 2deg));
    }
    .site-motion-enabled [data-site-depth].site-depth-visible > [data-site-depth-layer="icon"] {
        transform: perspective(600px) translate3d(0, calc(var(--site-depth-progress, 0) * -8px), 0)
            rotateY(calc(var(--site-depth-progress, 0) * 9deg));
    }
    /* Keep zoom targets and keyboard controls still while they are being used. */
    .site-motion-enabled [data-site-depth].site-depth-visible:is(:hover, :focus-within) > [data-site-depth-layer] {
        transform: none;
    }
}

[data-site-card]:focus-visible,
[data-site-button]:focus-visible {
    outline: 2px solid #60a5fa;
    outline-offset: 4px;
}

/* A preference change takes effect immediately, including mid-animation. */
@media (prefers-reduced-motion: reduce) {
    [data-site-reveal], [data-site-card], [data-site-button] {
        rotate: none !important;
        translate: none !important;
    }
}