/* Motion tokens, presets & scroll-driven accents — dealership stress test */

:root {
  --vm-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --vm-motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --vm-motion-fast: 220ms;
  --vm-motion-base: 420ms;
  --vm-motion-slow: 780ms;
  --vm-motion-stagger: 55ms;
  /* Preset aliases (Animation Composer / Registry surface) */
  --vm-preset-hero: heroReveal;
  --vm-preset-enter: fade;
  --vm-preset-section: slide;
  --vm-preset-hover: lift;
}

.vm-cinema__copy[velin-motion],
.vm-path,
.vm-tile,
.vm-mag a,
.vm-offer,
.vm-news,
.vm-inv-rail {
  will-change: transform, opacity;
}

/* Composer: group section transitions */
[data-vm-composer="inventory"] .vm-inv-rail,
[data-vm-composer="inventory"] .vm-inv-meta,
[data-vm-composer="inventory"] .vm-vehicle-grid {
  transition: opacity var(--vm-motion-base) var(--vm-motion-ease),
    transform var(--vm-motion-base) var(--vm-motion-ease);
}

.vm-parallax-band {
  position: relative;
  overflow: clip;
  min-block-size: 18rem;
}

.vm-parallax-band__bg {
  position: absolute;
  inset: -10% 0;
  background-size: cover;
  background-position: center;
}

@supports (animation-timeline: view()) {
  .vm-scroll-fade {
    animation: vm-view-fade linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 35%;
  }
  .vm-scroll-scale {
    animation: vm-view-scale linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
  }
  .vm-sticky-motion {
    animation: vm-sticky-tone linear both;
    animation-timeline: scroll();
    animation-range: 0% 18%;
  }
  @keyframes vm-view-fade {
    from { opacity: 0.15; transform: translateY(1.25rem); }
    to { opacity: 1; transform: none; }
  }
  @keyframes vm-view-scale {
    from { opacity: 0.4; transform: scale(0.97); }
    to { opacity: 1; transform: none; }
  }
  @keyframes vm-sticky-tone {
    from { box-shadow: none; }
    to { box-shadow: 0 12px 32px oklch(0% 0 0 / 0.35); }
  }
}

.vm-progress-track {
  block-size: 0.35rem;
  background: color-mix(in oklch, var(--vm-ice, white) 12%, transparent);
  overflow: hidden;
}
.vm-progress-track > span {
  display: block;
  block-size: 100%;
  background: var(--vm-signal, var(--velin-color-primary));
  transform-origin: inline-start;
  transition: inline-size var(--vm-motion-base) var(--vm-motion-ease);
}

.vm-gallery[velin-motion] velin-carousel {
  transition: opacity var(--vm-motion-base) var(--vm-motion-ease);
}

.vm-wizard [data-panel]:not([hidden]) {
  animation: vm-panel-in var(--vm-motion-base) var(--vm-motion-ease) both;
}
@keyframes vm-panel-in {
  from { opacity: 0; transform: translateX(0.75rem); }
  to { opacity: 1; transform: none; }
}

/* Loading motion */
.vm-skeleton {
  animation: vm-shimmer 1.1s linear infinite;
}

/* Drawer / Modal / Accordion — respect motion tokens when WCs animate */
velin-drawer,
velin-modal,
velin-sheet,
velin-accordion details {
  transition: opacity var(--vm-motion-fast) var(--vm-motion-ease);
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--vm-motion-fast);
}

/* Motion Accessibility — hard stop decorative motion */
@media (prefers-reduced-motion: reduce) {
  .vm-scroll-fade,
  .vm-scroll-scale,
  .vm-sticky-motion {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    box-shadow: none !important;
  }
  .vm-cinema__shot img,
  .vm-skeleton {
    animation: none !important;
  }
  .vm-wizard [data-panel]:not([hidden]) {
    animation: none !important;
  }
  .vm-tile:hover .vm-tile__media img {
    transform: none !important;
  }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
  [data-vm-composer] * {
    transition: none !important;
  }
}