/* Forge engine: motion. Loaded on marketing routes only (never on the cart,
   checkout or account pages).

   Reveals fail open: .reveal elements are visible unless motion.js has added
   html.is-ready, which it does only after it can reveal them. With no script,
   with reduced motion (html.is-static) or after any error, content shows. */

.is-ready .reveal:not(.is-in) { opacity: 0; transform: translate3d(0, 14px, 0); }
.is-ready .reveal { transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.is-ready .grid .reveal:nth-child(4n + 2) { transition-delay: 60ms; }
.is-ready .grid .reveal:nth-child(4n + 3) { transition-delay: 120ms; }
.is-ready .grid .reveal:nth-child(4n + 4) { transition-delay: 180ms; }
.is-static .reveal, .no-js .reveal { opacity: 1; transform: none; }

/* hero video pause control (WCAG 2.2.2) */
.hero-pause { position: absolute; right: var(--gutter); bottom: var(--s5); z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); border-radius: var(--radius-pill); border: 1px solid color-mix(in srgb, var(--hero-fg) 35%, transparent); background: color-mix(in srgb, var(--hero-bg) 55%, transparent); color: var(--hero-fg); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hero-pause:hover { border-color: var(--hero-fg); }
.hero-pause-icon { display: inline-flex; }
.hero-pause[aria-pressed="false"] .hero-pause-icon--play, .hero-pause[aria-pressed="true"] .hero-pause-icon--pause { display: none; }

/* nav over the hero picks up a hairline once the page scrolls */
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--line), 0 12px 24px -18px color-mix(in srgb, var(--shadow-ink) 60%, transparent); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}
/* Hero seal (brand.json hero.seal): a slow-turning ring of text around the brand mark, in the gap
   between the headline column and the product. Hidden on phones; still under reduced motion. */
.hero-seal { position: absolute; left: 42%; bottom: 9%; z-index: 2; width: 128px; height: 128px; color: var(--hero-fg); pointer-events: none; }
.hero-seal svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hero-seal text { font: 600 10.5px/1 var(--font-body); letter-spacing: 0.14em; fill: currentColor; }
.hero-seal-disc { fill: none; stroke: currentColor; stroke-opacity: 0.22; }
.hero-seal-ring { transform-origin: 60px 60px; animation: hero-seal-turn 26s linear infinite; }
@keyframes hero-seal-turn { to { transform: rotate(360deg); } }
.hero-seal-mark { position: absolute; inset: 0; display: grid; place-items: center; }
.hero-seal-mark svg { width: auto; height: 15px; max-width: 58px; }
.hero-seal-mark svg path, .hero-seal-mark svg g { fill: currentColor; }
@media (max-width: 767px) { .hero-seal { display: none; } }
@media (prefers-reduced-motion: reduce) { .hero-seal-ring { animation: none; } }