/* Reviewed motion layer. Decorative depth follows native scrolling. */
/* Clip horizontal decoration without creating a scroll container that traps sticky headers. */
html, body { overflow-x: clip; }
@media (min-width: 1201px) {
  .site-header { position: sticky; top: 0; z-index: 100; }
}
.hero { position: relative; isolation: isolate; overflow: hidden; }
.hero-grid { position: relative; z-index: 1; }
.motion-scene { position: absolute; inset: -15%; z-index: 0; pointer-events: none; overflow: hidden; }
.motion-scene > span { position: absolute; display: block; pointer-events: none; }
.motion-orbit {
  width: 100vw; height: 48vw; min-height: 420px; right: -22vw; top: 12%;
  border-radius: 50%; border: 1px solid rgb(125 214 255 / 28%);
  background: radial-gradient(ellipse, transparent 50%, rgb(65 153 237 / 10%) 70%, transparent 72%);
  box-shadow: 0 0 0 38px rgb(112 194 255 / 3%), 0 0 0 95px rgb(112 194 255 / 2%);
  transform: rotate(-24deg); translate: 0 var(--motion-near, 0px);
}
.motion-glow {
  inset: -8%;
  background: radial-gradient(ellipse at 80% 28%, rgb(35 147 207 / 25%), transparent 42%),
    radial-gradient(ellipse at 12% 76%, rgb(80 71 184 / 26%), transparent 40%);
  translate: 0 var(--motion-far, 0px);
}
.motion-stars {
  inset: 0;
  background-image: radial-gradient(circle, rgb(210 235 255 / 65%) 1px, transparent 1.5px),
    radial-gradient(circle, rgb(160 203 255 / 40%) 1px, transparent 1.5px);
  background-size: 173px 193px, 281px 233px;
  background-position: 29px 38px, 109px 87px;
  opacity: .46; translate: 0 var(--motion-far, 0px);
  mask-image: linear-gradient(transparent, #000 20%, #000 80%, transparent);
}
[data-motion-theme="shopmate"] .motion-orbit {
  width: 66vw; height: 46vw; right: -4%; top: 19%;
  border-color: rgb(126 213 205 / 28%);
  background: radial-gradient(ellipse, transparent 48%, rgb(89 179 183 / 11%) 69%, transparent 71%);
  box-shadow: 0 0 0 38px rgb(244 183 64 / 3%), 0 0 0 95px rgb(126 213 205 / 3%);
}
[data-motion-theme="shopmate"] .motion-glow {
  background: radial-gradient(ellipse at 77% 36%, rgb(45 180 167 / 23%), transparent 37%),
    radial-gradient(ellipse at 24% 83%, rgb(244 183 64 / 17%), transparent 35%);
}
[data-motion-theme="shopmate"] .motion-stars { display: none; }
.motion-product { translate: 0 var(--motion-product-y, 0px); }

/* Use independent translate: original hover transforms remain available. */
.motion-reveal {
  opacity: 1;
  transition: opacity 680ms cubic-bezier(.16,1,.3,1), translate 680ms cubic-bezier(.16,1,.3,1),
    transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
  transition-delay: var(--motion-delay, 0ms), var(--motion-delay, 0ms), 0ms, 0ms, 0ms;
}
.motion-reveal.motion-pending {
  opacity: 0; translate: 0 calc(32px * var(--motion-direction, 1)); transition: none;
}
.motion-reveal.motion-shown { opacity: 1; translate: 0 0; }
.architecture-card.motion-reveal { translate: none; }
.motion-instant { transition: none !important; }

/* Replace old whole-section hiding with leaf reveals; tall sections stay readable. */
.motion-active.has-js .reveal { opacity: 1; transform: none; transition: none; }
main section[id] { scroll-margin-top: var(--motion-header-offset, 6.5rem); }

@media (max-width: 767px) {
  .motion-scene { opacity: .55; }
  .motion-orbit { width: 160vw; height: 110vw; right: -45vw; }
  [data-motion-theme="shopmate"] .motion-orbit { width: 145vw; height: 120vw; top: 47%; right: -30vw; }
  .motion-reveal.motion-pending { translate: 0 calc(20px * var(--motion-direction, 1)); }
  .architecture-card.motion-reveal { translate: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .motion-product, .motion-scene > span, .motion-reveal,
  .motion-reveal.motion-pending, .motion-reveal.motion-shown { translate: none !important; opacity: 1; }
  .has-js .reveal { opacity: 1; transform: none; }
}
@media print {
  .motion-scene { display: none; }
  .motion-reveal, .motion-reveal.motion-pending { opacity: 1; translate: none; }
  .motion-product { translate: none; }
}