/* Continuous artwork on top of v7. Devices and controls stay still; the phone's
   existing preview scrolls inside its frame. Runtime changes only play-state. */
.hero-rating {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px; margin: 0 auto 24px; color: #656569;
  font-size: 15px; line-height: 1.5; letter-spacing: 0;
  animation: none !important; transform: none !important; translate: none !important;
}
.hero-rating strong { color: #1d1d1f; font-weight: 650; font-variant-numeric: tabular-nums; }
.hero-rating .rating-stars { color: #1d1d1f; letter-spacing: 1px; white-space: nowrap; }
/* The menu sits 10px below its trigger. A transparent bridge keeps pointer hover
   continuous across that gap, without adding another interactive control. */
.locale-options::before { content: ""; position: absolute; top: -12px; height: 12px; left: 0; right: 0; }

/* The illustration's existing hero and product photos form one continuous page.
   Its navigation and physical frame never move; no new menu content is invented. */
.phone { --phone-scroll-height: 330px; }
.phone-scroll-viewport { height: var(--phone-scroll-height); overflow: hidden; }
.phone-scroll-content { display: flow-root; min-height: var(--phone-scroll-height); }
.phone .phone-scroll-content .product-pictures { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.phone .phone-scroll-content .product-pictures img { height: 115px; width: 100%; object-fit: cover; }
@media (max-width: 1000px) { .phone { --phone-scroll-height: 300px; } }
@media (max-width: 760px) {
  .phone { --phone-scroll-height: 250px; }
  .phone .phone-scroll-content .product-pictures img { height: 105px; }
}
@media (max-width: 430px) {
  .phone { --phone-scroll-height: 230px; }
  .phone .phone-scroll-content .product-pictures img { height: 100px; }
}

@media screen {
  /* Six real dots replace the two legacy pseudo-dots. Their parent rings keep
     v7's 48s/64s opposing rotation; the dots themselves need no animation. */
  [data-motion-art="care"] .orbit::after { content: none !important; display: none !important; }
  [data-motion-art="care"] .orbit-dot {
    display: block; position: absolute; left: 100%; top: 50%;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--green); box-shadow: 0 0 0 4px rgb(194 237 206 / 52%);
    transform: translate(-50%, -50%); pointer-events: none;
  }
  [data-motion-art="care"] .orbit-one .orbit-dot:nth-child(2) { left: 25%; top: 93.3013%; }
  [data-motion-art="care"] .orbit-one .orbit-dot:nth-child(3) { left: 25%; top: 6.6987%; }
  [data-motion-art="care"] .orbit-two .orbit-dot { width: 7px; height: 7px; left: 75%; top: 93.3013%; }
  [data-motion-art="care"] .orbit-two .orbit-dot:nth-child(2) { left: 0; top: 50%; }
  [data-motion-art="care"] .orbit-two .orbit-dot:nth-child(3) { left: 75%; top: 6.6987%; }

  html.motion-v7-ready [data-motion-art="hero"] .phone,
  html.motion-v7-ready [data-motion-art="hero"] .desktop {
    animation: none !important; translate: none !important;
  }
  html.motion-v7-ready [data-motion-art="hero"] .phone-scroll-content {
    animation: adven-phone-scroll-v8 20s ease-in-out infinite paused both !important;
  }
  /* A deliberate paint-only exception for the large headline: the glyphs do not
     move. Every gradient color retains at least 3:1 contrast on the white hero. */
  html.motion-v7-ready [data-motion-art="hero"] h1 > span {
    background-image: linear-gradient(90deg, #1E8149 0%, #135c36 25%, #399b61 50%, #135c36 75%, #1E8149 100%);
    background-size: 200% 100%; background-repeat: repeat;
    animation: adven-headline-glow-v8 8s linear infinite paused both !important;
  }
  /* Only below-the-fold headings opted in by runtime get a one-time opacity
     transition. Default, no-JS, disabled and reduced views retain the full text. */
  html.motion-v7-ready[data-motion-enabled="true"] .text-reveal-ready {
    transition: opacity 650ms ease !important;
  }
  html.motion-v7-ready[data-motion-enabled="true"] .text-reveal-ready[data-text-reveal-state="waiting"] { opacity: .55; }
  html.motion-v7-ready[data-motion-enabled="true"] .text-reveal-ready[data-text-reveal-state="shown"] { opacity: 1; }
  html.motion-v7-ready[data-motion-enabled="false"] .text-reveal-ready {
    opacity: 1 !important; transition: none !important;
  }
  html.motion-v7-ready [data-motion-art="menu"] .menu-paper {
    animation: adven-menu-v8 7.5s ease-in-out infinite paused both !important;
  }
  /* :nth-child(n) has the specificity of the legacy even-only rule. */
  html.motion-v7-ready [data-motion-art="identity"] i:nth-child(n) {
    animation: adven-swatch-v8 6s ease-in-out infinite paused both !important;
  }
  html.motion-v7-ready [data-motion-art="identity"] i:nth-child(1) { animation-delay: 0s !important; }
  html.motion-v7-ready [data-motion-art="identity"] i:nth-child(2) { animation-delay: 1s !important; }
  html.motion-v7-ready [data-motion-art="identity"] i:nth-child(3) { animation-delay: 2s !important; }
  html.motion-v7-ready [data-motion-art="identity"] i:nth-child(4) { animation-delay: 3s !important; }

  /* Only the small leading icons move; labels and illustrated action rows do not. */
  html.motion-v7-ready [data-motion-art="actions"] > span > svg:first-child {
    animation: adven-action-icon-v8 6s ease-in-out infinite paused both !important;
    transform-origin: center;
  }
  html.motion-v7-ready [data-motion-art="actions"] > span:nth-child(2) > svg:first-child { animation-delay: 1s !important; }
  html.motion-v7-ready [data-motion-art="actions"] > span:nth-child(3) > svg:first-child { animation-delay: 2s !important; }

  /* Scale is STATIC and more specific than v7's transform:none!important reset.
     Pan uses individual translate, so the important static scale cannot suppress
     it. 4% overscan on each side exceeds the 1.5% travel: no exposed image edges. */
  html.motion-v7-ready .project .project-image[data-motion-art="work"] > img {
    transform: scale(1.08) !important;
    animation: adven-work-photo-v8 14s ease-in-out infinite paused both !important;
  }

  /* Existing short rail highlights move above the copy without changing layout. */
  html.motion-v7-ready [data-motion-art="process"] article::before {
    animation: adven-process-signal-v8 8s ease-in-out infinite paused both !important;
  }
  html.motion-v7-ready [data-motion-art="process"] article:nth-child(2)::before { animation-delay: 1.3s !important; }
  html.motion-v7-ready [data-motion-art="process"] article:nth-child(3)::before { animation-delay: 2.6s !important; }

  /* The already-clipped side arcs move, not the contact copy or its buttons. */
  html.motion-v7-ready [data-motion-art="contact"]::before,
  html.motion-v7-ready [data-motion-art="contact"]::after {
    animation: adven-contact-arc-v8 12s ease-in-out infinite paused both !important;
  }
  html.motion-v7-ready [data-motion-art="contact"]::after { animation-delay: 3s !important; }

  /* Changing running/paused never changes name, duration or delay, preserving phase. */
  html.motion-v7-ready[data-motion-enabled="true"] [data-motion-art="hero"].motion-art-running .phone-scroll-content,
  html.motion-v7-ready[data-motion-enabled="true"] [data-motion-art="hero"].motion-art-running h1 > span,
  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(n),
  html.motion-v7-ready[data-motion-enabled="true"] [data-motion-art="actions"].motion-art-running > span > svg:first-child,
  html.motion-v7-ready[data-motion-enabled="true"] .project .project-image[data-motion-art="work"].motion-art-running > img,
  html.motion-v7-ready[data-motion-enabled="true"] [data-motion-art="process"].motion-art-running article::before,
  html.motion-v7-ready[data-motion-enabled="true"] [data-motion-art="contact"].motion-art-running::before,
  html.motion-v7-ready[data-motion-enabled="true"] [data-motion-art="contact"].motion-art-running::after {
    animation-play-state: running !important;
  }

  @media (prefers-reduced-motion: reduce) {
    html.motion-v7-ready:not([data-motion-preference="on"]) [data-motion-art="hero"].motion-art-running .phone-scroll-content,
    html.motion-v7-ready:not([data-motion-preference="on"]) [data-motion-art="hero"].motion-art-running h1 > span,
    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(n),
    html.motion-v7-ready:not([data-motion-preference="on"]) [data-motion-art="actions"].motion-art-running > span > svg:first-child,
    html.motion-v7-ready:not([data-motion-preference="on"]) .project .project-image[data-motion-art="work"].motion-art-running > img,
    html.motion-v7-ready:not([data-motion-preference="on"]) [data-motion-art="process"].motion-art-running article::before,
    html.motion-v7-ready:not([data-motion-preference="on"]) [data-motion-art="contact"].motion-art-running::before,
    html.motion-v7-ready:not([data-motion-preference="on"]) [data-motion-art="contact"].motion-art-running::after {
      animation-play-state: paused !important;
    }
    html.motion-v7-ready:not([data-motion-preference="on"]) .text-reveal-ready {
      opacity: 1 !important; transition: none !important;
    }
  }

  @keyframes adven-phone-scroll-v8 {
    0%, 10%, 100% { transform: translateY(0); }
    55%, 70% { transform: translateY(calc(-100% + var(--phone-scroll-height))); }
  }
  @keyframes adven-headline-glow-v8 {
    from { background-position: 0% 50%; }
    to { background-position: 200% 50%; }
  }
  @keyframes adven-menu-v8 { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
  @keyframes adven-swatch-v8 { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
  @keyframes adven-action-icon-v8 {
    0%, 100% { translate: 0 0; transform: scale(1); opacity: .85; }
    50% { translate: 0 -3px; transform: scale(1.08); opacity: 1; }
  }
  @keyframes adven-work-photo-v8 { 0%, 100% { translate: -1.5% 0; } 50% { translate: 1.5% 0; } }
  @keyframes adven-process-signal-v8 {
    0%, 100% { translate: 0 0; opacity: .65; }
    50% { translate: 120px 0; opacity: 1; }
  }
  @keyframes adven-contact-arc-v8 {
    0%, 100% { translate: 0 0; transform: scale(1); opacity: 1; }
    50% { translate: -15px -8px; transform: scale(1.025); opacity: .75; }
  }
}

/* Screen-only declarations cannot beat the existing print motion reset. */
@media print {
  .text-reveal-ready { opacity: 1 !important; transition: none !important; }
  [data-motion-art="care"] .orbit::after { content: none !important; 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,
  html.motion-v7-ready [data-motion-art]::after,
  html.motion-v7-ready [data-motion-art] article::before { animation: none !important; }
}