/* The scene owns scroll reveals; the card owns pointer tilt. Neither affects layout. */
.card-scene { display: flex; min-width: 0; }
.card-scene > .car-card { width: 100%; }
.motion-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border: 1px solid var(--line); background: var(--surface); font-size: .8125rem; white-space: nowrap; }
.motion-toggle svg { width: 18px; height: 18px; }
.motion-toggle[aria-pressed=true] { color: var(--cyan); border-color: var(--cyan); background: var(--soft-cyan); }
.motion-toggle:hover:not(:disabled) { box-shadow: 0 0 20px var(--glow); transform: translateY(-1px); }

@media (prefers-reduced-motion: no-preference) {
  .motion-enabled body { isolation: isolate; }
  .motion-enabled body::before {
    content: ""; position: fixed; inset: -10vh -5vw; z-index: -1; pointer-events: none;
    background: radial-gradient(ellipse 40% 35% at 100% 32%, #6550e51c, transparent 75%), radial-gradient(ellipse 40% 35% at 0% 76%, #29c9b315, transparent 75%);
    transform: translate3d(0, var(--ambient-shift, 0px), 0);
  }
  .motion-enabled .card-scene { transform-origin: 50% 25%; }
  .motion-enabled .car-card {
    position: relative;
    transform: perspective(1200px) translate3d(0, var(--card-lift, 0px), 0) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    transition: transform .28s cubic-bezier(.2,.65,.25,1), box-shadow .28s, border-color .28s;
  }
  .motion-enabled .car-card.entering { animation: none; }
  .motion-enabled .car-card::after {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
    background: radial-gradient(ellipse at var(--light-x, 50%) var(--light-y, 20%), #ffffff1f, transparent 58%);
    opacity: 0; transition: opacity .3s;
  }
  .motion-enabled .card-visual .car-photo img {
    transform: translate3d(var(--photo-x, 0px), clamp(-1.5%, calc(var(--photo-scroll, 0px) + var(--photo-y, 0px)), 1.5%), 0) scale(1.04);
    transition: transform .2s ease-out;
  }
  .motion-enabled .card-visual .car-photo img.photo-cover {
    transform: translate3d(var(--photo-x, 0px), clamp(-4%, calc(var(--photo-scroll, 0px) + var(--photo-y, 0px)), 4%), 0) scale(1.1);
  }
  .motion-enabled .preset {
    transform: perspective(800px) translate3d(0, var(--preset-lift, 0px), 0) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    transition: transform .25s cubic-bezier(.2,.65,.25,1), border-color .2s, background .2s, box-shadow .2s;
  }
  .motion-enabled .preset:active { transform: perspective(800px) rotateX(2deg) scale(.98); }
  .motion-enabled dialog[open] { transform-origin: 50% 35%; animation: depth-dialog-in .38s cubic-bezier(.16,1,.3,1); }
  .motion-enabled .compare-dock { animation: depth-dock-in .4s cubic-bezier(.16,1,.3,1); }
  @keyframes depth-dialog-in {
    from { opacity: .3; transform: perspective(1600px) translateY(18px) rotateX(6deg) scale(.975); }
    to { opacity: 1; transform: perspective(1600px) translateY(0) rotateX(0deg) scale(1); }
  }
  @keyframes depth-dock-in {
    from { opacity: .3; transform: translateX(-50%) perspective(1000px) translateY(18px) rotateX(10deg); }
    to { opacity: 1; transform: translateX(-50%) perspective(1000px) translateY(0) rotateX(0deg); }
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .motion-enabled .car-card:hover { --card-lift: -5px; border-color: var(--accent); box-shadow: 0 25px 45px #05081738, 0 3px 10px #7765d914; }
  .motion-enabled .car-card.is-tilting::after { opacity: 1; }
  .motion-enabled .car-card.is-tilting { will-change: transform; }
  .motion-enabled .preset:hover { --preset-lift: -3px; box-shadow: 0 12px 25px #05081720; }
}

@media (max-width: 560px) {
  .header-actions { gap: 7px; }
  .motion-toggle { padding: 7px 8px; gap: 5px; font-size: .75rem; }
  .motion-toggle svg { width: 16px; height: 16px; }
  .theme-toggle { padding: 7px 9px; }
  #themeLabel { display: none; }
  .theme-toggle { width: 38px; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .motion-enabled .car-card, .motion-enabled .preset, .motion-enabled .card-visual .car-photo img { transform: none !important; }
  .motion-enabled body::before, .motion-enabled .car-card::after { display: none; }
}