/* Shared motion language: warm light, soft depth and short, purposeful feedback. */
:root { --motion-ease: cubic-bezier(.22, 1, .36, 1); }
.motion-hero { position: relative; isolation: isolate; }
.motion-hero::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  inset: 0;
  mask-image: radial-gradient(ellipse at center, #000 20%, transparent 72%);
  background: radial-gradient(ellipse at 24% 32%, #ff6a0014, transparent 48%),
    radial-gradient(ellipse at 78% 52%, #ffaa5110, transparent 48%);
  transform-origin: center;
}
[data-theme=dark] .motion-hero::after {
  background: radial-gradient(ellipse at 24% 32%, #ff6a0024, transparent 48%),
    radial-gradient(ellipse at 78% 52%, #ffaf5815, transparent 48%);
}
.site-header { transition: background-color .3s, box-shadow .3s, border-color .3s; }
.is-scrolled .site-header {
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 8px 32px -20px #0005;
}
.motion-toggle { min-height: 44px; }
.button.primary { position: relative; isolation: isolate; overflow: hidden; }
.button.primary::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 20%, #ffffff35 48%, transparent 75%);
  translate: -120% 0;
}
@media (prefers-reduced-motion: no-preference) {
  [data-motion=on] :is(.button, .text-link .icon, .icon-button, .vp-hero-side,
    .tool-card, .use-card, .download-card, .store-card, .plan-card, .blog-card,
    .vp-tools-grid > *, .vv-feature-index > a) {
    transition: translate .35s var(--motion-ease), box-shadow .35s var(--motion-ease),
      border-color .3s, background-color .3s, color .3s;
  }
  [data-motion=on] .site-header details[open] > :is(.product-dropdown, .language-options),
  [data-motion=on] .mobile-nav:not([hidden]) {
    animation: motion-menu .24s var(--motion-ease) both;
  }
  [data-motion=on] .product-menu > summary .icon,
  [data-motion=on] .language-menu > summary .icon:last-child { transition: rotate .25s var(--motion-ease); }
  [data-motion=on] :is(.product-menu, .language-menu)[open] > summary .icon:last-child { rotate: 180deg; }
  [data-motion=on] .motion-hero::after { animation: motion-light 16s ease-in-out infinite alternate paused; }
  [data-motion=on] :is(.membership-infinity, .vp-membership-mark > span) {
    animation: motion-float 7s ease-in-out infinite paused;
  }
  [data-motion=on][data-page-visible=true] .motion-hero.motion-in-view::after,
  [data-motion=on][data-page-visible=true] .motion-in-view :is(.membership-infinity, .vp-membership-mark > span) { animation-play-state: running; }
  [data-motion=on] .story-orbit { animation-play-state: paused; }
  [data-motion=on][data-page-visible=true] .story-emblem.motion-in-view .story-orbit { animation-play-state: running; }
  [data-motion=on] .button:active { translate: 0 1px; }
  [data-motion=on] .button:focus-visible::after { animation: motion-sheen .65s var(--motion-ease); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  [data-motion=on] :is(.tool-card, .use-card, .download-card, .store-card, .plan-card, .blog-card, .vp-tools-grid > *, .vv-feature-index > a):hover {
    translate: 0 -5px; border-color: color-mix(in srgb, var(--brand-primary) 48%, var(--line));
    box-shadow: 0 18px 40px -24px #f5660940, var(--shadow-hover);
  }
  [data-motion=on] .vp-hero-side:hover { translate: 0 -6px; }
  [data-motion=on] .button:hover { translate: 0 -2px; }
  [data-motion=on] .button.primary:hover::after { animation: motion-sheen .7s var(--motion-ease); }
  [data-motion=on] .text-link:hover .icon { translate: 4px 0; }
  [data-motion=on] .icon-button:hover { translate: 0 -2px; }
}
@keyframes motion-menu { from { opacity: 0; translate: 0 -6px; } to { opacity: 1; translate: 0 0; } }
@keyframes motion-light { from { transform: scale(.94); opacity: .65; } to { transform: scale(1); opacity: 1; } }
@keyframes motion-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes motion-sheen { from { translate: -120% 0; } to { translate: 120% 0; } }
/* The saved preference applies to old demos as well as the shared layer. */
[data-motion=off] { scroll-behavior: auto; }
[data-motion=off] *, [data-motion=off] *::before, [data-motion=off] *::after {
  animation: none !important; transition: none !important; scroll-behavior: auto !important;
}
[data-page-visible=false] *, [data-page-visible=false] *::before, [data-page-visible=false] *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}