/* Continuous, low-amplitude artwork only. Runtime controls visibility and pause.
   Animation declarations never depend on the running class: resuming keeps phase. */
.motion-setting, .motion-device-note { display: none; }
.motion-toggle {
  appearance: none; display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; max-width: 100%; padding: 10px 15px; border-radius: 30px;
  border: 1px solid #cfddd3; background: #ffffffb8; color: #3d5847;
  font: inherit; font-size: 10px; line-height: 1.4; cursor: pointer;
}
.motion-toggle[hidden] { display: none !important; }
.motion-toggle:hover, .motion-toggle:focus-visible { border-color: #1E8149; background: #eaf7ee; }
.motion-toggle[aria-pressed="true"] { border-color: #a6cdb2; color: #174f30; }

/* Functional content does not enter, float, flash, or shift when hovered.
   These also neutralize legacy FAQ/mobile-nav/explorer entrance animations. */
html.motion-v7-ready :is(
  h1, h2, h3, h4, .lead, .hero-actions, .device-pair, .section-intro,
  .menu-feature, .side-features article, .project, .care-heading,
  .care-list article, .steps article, .contact-section .shell,
  .faq details, .faq details[open] > p, .nav-links.is-open,
  .explorer-enhanced .feature-panel.is-active,
  .menu-language-enhanced .demo-menu.is-active, .deep-dive-content
) { animation: none !important; }
html.motion-v7-ready .button,
html.motion-v7-ready .button:hover,
html.motion-v7-ready .button:focus-visible,
html.motion-v7-ready .button:active {
  transform: none !important;
  box-shadow: 0 4px 12px rgb(30 129 73 / 9%);
  transition: none !important;
}
html.motion-v7-ready .button::after { display: none !important; animation: none !important; transition: none !important; }
html.motion-v7-ready .button > span,
html.motion-v7-ready .text-link > span,
html.motion-v7-ready .project .project-image > img,
html.motion-v7-ready .project-open { transform: none !important; transition: none !important; }
html.motion-v7-ready .menu-toggle span,
html.motion-v7-ready .nav-links a::after,
html.motion-v7-ready .locale-chevron,
html.motion-v7-ready .faq summary svg,
html.motion-v7-ready .experience-deep-dive > summary > svg { transition: none !important; }
html.motion-v7-ready [data-motion-art="menu"] .menu-paper {
  transform: rotate(-5deg) translateY(20px) !important;
  transition: none !important;
}
html.motion-v7-ready [data-motion-art="identity"] i { transform: none !important; transition: none !important; }
html.motion-v7-ready[data-motion-enabled="false"] { scroll-behavior: auto !important; }

@media screen {
  html.motion-v7-ready .motion-setting {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    max-width: 580px; margin: 14px auto 0;
  }
  .motion-setting .motion-toggle { font-size: 11px; }
  .motion-setting .motion-device-note {
    max-width: 540px; margin: 0; color: var(--muted);
    font-size: 11px; line-height: 1.6; text-align: center;
  }
  @media (prefers-reduced-motion: reduce) {
    html.motion-v7-ready[data-motion-preference="auto"][data-motion-enabled="false"] .motion-device-note { display: block; }
  }

  /* Short color-only responses retain affordance without lifting the controls. */
  html.motion-v7-ready[data-motion-enabled="true"] :is(
    .button, .text-link, .motion-toggle, .nav-links a, .locale-picker > summary,
    .locale-options a, .explorer-tabs button, .demo-language button,
    .faq summary, .project-open, .project-name h3
  ) { transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease !important; }

  /* Paused initial frames equal the existing artwork. Individual translate
     preserves the phone's rotation and the menu's established transform. */
  html.motion-v7-ready [data-motion-art="hero"] .phone {
    transform: rotate(4deg);
    animation: adven-phone-v7 10s ease-in-out infinite paused both !important;
  }
  html.motion-v7-ready [data-motion-art="hero"] .desktop {
    animation: adven-desktop-v7 14s ease-in-out infinite paused both !important;
  }
  html.motion-v7-ready [data-motion-art="hero"]::before {
    animation: adven-atmosphere-v7 36s ease-in-out infinite paused both !important;
  }
  html.motion-v7-ready [data-motion-art="menu"] .menu-paper {
    animation: adven-menu-v7 12s ease-in-out infinite paused both !important;
  }
  html.motion-v7-ready [data-motion-art="identity"] i:nth-child(even) {
    animation: adven-swatch-v7 10s ease-in-out infinite paused both !important;
  }
  html.motion-v7-ready [data-motion-art="identity"] i:nth-child(4) { animation-delay: 2.5s !important; }
  html.motion-v7-ready [data-motion-art="care"] .orbit-one {
    animation: adven-orbit-clockwise-v7 48s linear infinite paused both !important;
  }
  html.motion-v7-ready [data-motion-art="care"] .orbit-two {
    animation: adven-orbit-counterclockwise-v7 64s linear infinite paused both !important;
  }

  /* This is the entire running-state delta. Never replace animation or delays. */
  html.motion-v7-ready[data-motion-enabled="true"] [data-motion-art="hero"].motion-art-running .phone,
  html.motion-v7-ready[data-motion-enabled="true"] [data-motion-art="hero"].motion-art-running .desktop,
  html.motion-v7-ready[data-motion-enabled="true"] [data-motion-art="hero"].motion-art-running::before,
  html.motion-v7-ready[data-motion-enabled="true"] [data-motion-art="menu"].motion-art-running .menu-paper,
  html.motion-v7-ready[data-motion-enabled="true"] [data-motion-art="identity"].motion-art-running i:nth-child(even),
  html.motion-v7-ready[data-motion-enabled="true"] [data-motion-art="care"].motion-art-running .orbit-one,
  html.motion-v7-ready[data-motion-enabled="true"] [data-motion-art="care"].motion-art-running .orbit-two {
    animation-play-state: running !important;
  }

  /* Defense in depth: only an explicit local opt-in can override OS reduction. */
  @media (prefers-reduced-motion: reduce) {
    html.motion-v7-ready:not([data-motion-preference="on"]) [data-motion-art="hero"].motion-art-running .phone,
    html.motion-v7-ready:not([data-motion-preference="on"]) [data-motion-art="hero"].motion-art-running .desktop,
    html.motion-v7-ready:not([data-motion-preference="on"]) [data-motion-art="hero"].motion-art-running::before,
    html.motion-v7-ready:not([data-motion-preference="on"]) [data-motion-art="menu"].motion-art-running .menu-paper,
    html.motion-v7-ready:not([data-motion-preference="on"]) [data-motion-art="identity"].motion-art-running i:nth-child(even),
    html.motion-v7-ready:not([data-motion-preference="on"]) [data-motion-art="care"].motion-art-running .orbit-one,
    html.motion-v7-ready:not([data-motion-preference="on"]) [data-motion-art="care"].motion-art-running .orbit-two {
      animation-play-state: paused !important;
    }
  }

  @keyframes adven-phone-v7 { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
  @keyframes adven-desktop-v7 { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
  @keyframes adven-menu-v7 { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
  @keyframes adven-swatch-v7 { 0%, 100% { translate: 0 0; } 50% { translate: 0 -2px; } }
  @keyframes adven-atmosphere-v7 {
    0%, 100% { opacity: 1; transform: translateX(0) scale(1); }
    50% { opacity: .9; transform: translateX(.65%) scale(1.01); }
  }
  @keyframes adven-orbit-clockwise-v7 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
  @keyframes adven-orbit-counterclockwise-v7 { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
}

@media print {
  .motion-setting, .motion-device-note, .motion-toggle { display: none !important; }
  html.motion-v7-ready [data-motion-art],
  html.motion-v7-ready [data-motion-art] *,
  html.motion-v7-ready [data-motion-art]::before { animation: none !important; }
}