/* Each stationary label and moving dot share the ellipse of their parent ring. */
header { position: relative; z-index: 2; }
.hero { position: relative; display: block; min-height: 590px; padding: 72px 0 60px; }
.hero-copy { position: relative; z-index: 1; width: 56%; max-width: 630px; }
.hero h1 { font-size: clamp(3rem, 7.4vw, 6rem); }
.hero .hero-note { font-size: .85rem; margin-top: 40px; }
.hero-art-clip { position: absolute; width: 100vw; left: 50%; top: -100px; bottom: 0; transform: translateX(-50%); overflow: hidden; pointer-events: none; }
.hero-orbit { position: absolute; width: 1000px; height: 900px; right: calc(max(20px, (100vw - 1120px) / 2) - 360px); top: -190px; background: radial-gradient(ellipse at 55% 48%, #efab6350, transparent 68%); mask-image: linear-gradient(90deg, transparent, #000 28%); }
.orbit-ring { position: absolute; left: 50%; top: 50%; width: 80%; height: 80%; border: 1px solid #b67a495c; border-radius: 50%; transform: translate(-50%, -50%) rotate(-26deg); }
.orbit-websites { width: 53%; height: 80%; transform: translate(-50%, -50%) rotate(40deg); }
.orbit-shopify { width: 80%; height: 33%; }
.orbit-tools { width: 69%; height: 49%; transform: translate(-50%, -50%) rotate(24deg); }
.orbit-dot, .orbit-label { position: absolute; left: 0; top: 0; offset-path: ellipse(50% 50% at 50% 50%); offset-anchor: center; offset-rotate: 0deg; }
.orbit-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 7px #ff7a1a18, 0 0 26px #ff7a1a80; animation: orbit-travel 42s linear infinite; animation-delay: -18s; }
.orbit-websites .orbit-dot { animation-duration: 49s; animation-delay: -30s; }
.orbit-shopify .orbit-dot { animation-duration: 55s; animation-delay: -20s; }
.orbit-tools .orbit-dot { animation-duration: 63s; animation-delay: -45s; }
.orbit-label { pointer-events: auto; display: flex; align-items: center; min-height: 44px; white-space: nowrap; background: #fffdf9; color: #625442; border: 1px solid var(--border); padding: 10px 15px; border-radius: 30px; font-size: .8rem; line-height: 1.5; box-shadow: 0 7px 25px #53341908; transform: rotate(26deg); z-index: 1; }
.orbit-label:hover { background: #fff3e6; border-color: #c58a5b; text-decoration: underline; text-underline-offset: 3px; }
.orbit-label:focus-visible { outline: 3px solid #a44400; outline-offset: 4px; }
.orbit-marketing .orbit-label { offset-distance: 42.031%; }
.orbit-websites .orbit-label { offset-distance: 45.252%; transform: rotate(-40deg); }
.orbit-shopify .orbit-label { offset-distance: 25%; }
.orbit-tools .orbit-label { offset-distance: 21.661%; transform: rotate(-24deg); }
.orbit-toggle { position: absolute; right: 0; bottom: 10px; z-index: 1; padding: 10px 0 10px 12px; border: 0; background: transparent; font: inherit; font-size: .75rem; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 44px; }
.hero[data-motion-paused="true"] .orbit-dot { animation-play-state: paused; }
@keyframes orbit-travel { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@media (max-width: 860px) {
  .hero { padding-top: 42px; min-height: 530px; }
  .hero-copy { width: 76%; }
  .hero-orbit { right: -490px; mask-image: none; }
  .orbit-label { display: none; }
  .hero-art-clip { top: -150px; }
}
@media (max-width: 520px) {
  .hero { min-height: 570px; padding-bottom: 60px; }
  .hero-copy { width: 100%; }
  .hero h1 { font-size: clamp(3rem, 13vw, 3.8rem); max-width: 360px; }
  .hero-orbit { width: 900px; height: 950px; right: -510px; top: -210px; }
  .hero .hero-note { max-width: 250px; }
}
@media (prefers-reduced-motion: reduce) { .orbit-dot { animation: none; offset-distance: 42%; } .orbit-toggle { display: none; } }
@supports not (offset-path: ellipse(50% 50% at 50% 50%)) { .orbit-dot, .orbit-label, .orbit-toggle { display: none; } }