/* Content remains visible until script explicitly prepares its entrance. */
.motion-reveal{--motion-rest-rotate:0deg;--reveal-y:30px}
.motion-reveal.motion-pending{opacity:0;translate:var(--reveal-x,0px) var(--reveal-y,30px)}
.motion-reveal.motion-revealing{animation:namz-reveal 620ms cubic-bezier(.22,.72,.24,1) both;animation-delay:var(--reveal-delay,0ms)}
.motion-reveal.motion-quick{--reveal-y:24px}
.motion-reveal.motion-quick.motion-revealing{animation-duration:420ms}
.about-brand{--motion-rest-rotate:-2deg}
.hero-spotlight,.resource-finder{--motion-rest-rotate:0deg}
@keyframes namz-reveal{
  from{opacity:0;translate:var(--reveal-x,0px) var(--reveal-y,30px);rotate:var(--motion-rest-rotate,0deg);scale:1}
  to{opacity:1;translate:0 0;rotate:var(--motion-rest-rotate,0deg);scale:1}
}

/* Rounded panels travel firmly into position and settle without overshoot. */
.motion-panel{--reveal-y:54px}
.motion-panel.motion-pending{scale:.988;clip-path:inset(0 0 18% 0 round 36px)}
.motion-panel.motion-revealing{animation-name:namz-panel-reveal;animation-duration:780ms}
.motion-section{--reveal-y:40px}
.motion-section.motion-revealing{animation-name:namz-stage-reveal;animation-duration:700ms}
@keyframes namz-panel-reveal{
  from{opacity:.15;translate:var(--reveal-x,0px) var(--reveal-y,54px);scale:.988;rotate:var(--motion-rest-rotate,0deg);clip-path:inset(0 0 18% 0 round 36px)}
  to{opacity:1;translate:0 0;scale:1;rotate:var(--motion-rest-rotate,0deg);clip-path:inset(0 0 0 0 round 0px)}
}
@keyframes namz-stage-reveal{
  from{opacity:.2;translate:var(--reveal-x,0px) var(--reveal-y,40px);scale:1;rotate:var(--motion-rest-rotate,0deg)}
  to{opacity:1;translate:0 0;scale:1;rotate:var(--motion-rest-rotate,0deg)}
}

/* Headline lines arrive in sequence; the brand underline draws once. */
.hero-line{display:block;overflow:hidden;padding-bottom:.15em;margin-bottom:-.15em}
.hero-line-last{padding:.04em .08em .18em;margin:-.04em -.08em -.18em}
.hero-line-inner{display:inline-block;position:relative;will-change:auto}
.hero-line:nth-of-type(1){--hero-line-delay:100ms}
.hero-line:nth-of-type(2){--hero-line-delay:220ms}
.hero-line:nth-of-type(3){--hero-line-delay:340ms}
.motion-enabled.hero-sequenced .hero-line-inner,.motion-enabled .hero-sequenced .hero-line-inner{animation:namz-title-in 680ms cubic-bezier(.22,.72,.24,1) both;animation-delay:var(--hero-line-delay,100ms)}
.motion-enabled.hero-sequenced .hero-line-accent::before,.motion-enabled .hero-sequenced .hero-line-accent::before{transform-origin:left center;animation:namz-highlight-grow 650ms cubic-bezier(.22,.72,.24,1) 500ms both}
.motion-enabled.hero-sequenced .hero-copy > .eyebrow,.motion-enabled .hero-sequenced .hero-copy > .eyebrow{animation:namz-hero-detail-in 480ms cubic-bezier(.22,.72,.24,1) 40ms both}
.motion-enabled.hero-sequenced .hero-description,.motion-enabled .hero-sequenced .hero-description{animation:namz-hero-detail-in 600ms cubic-bezier(.22,.72,.24,1) 560ms both}
.motion-enabled.hero-sequenced .hero-buttons,.motion-enabled .hero-sequenced .hero-buttons{animation:namz-hero-detail-in 600ms cubic-bezier(.22,.72,.24,1) 680ms both}
.motion-enabled.hero-sequenced .hero-caption,.motion-enabled .hero-sequenced .hero-caption{animation:namz-hero-detail-in 520ms cubic-bezier(.22,.72,.24,1) 820ms both}
.hero-copy{translate:0 var(--hero-copy-y,0px)}
.hero-copy:focus-within :is(.hero-line-inner,.eyebrow,.hero-description,.hero-buttons,.hero-caption){animation:none!important;opacity:1;translate:0 0;rotate:0deg}
.hero-copy:focus-within .hero-line-accent::before{animation:none!important;opacity:1;transform:scaleX(1)}
@keyframes namz-title-in{from{opacity:0;translate:0 112%}to{opacity:1;translate:0 0}}
@keyframes namz-highlight-grow{from{opacity:0;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}
@keyframes namz-hero-detail-in{from{opacity:0;translate:-18px 14px}to{opacity:1;translate:0 0}}

/* A firm rounded wipe introduces the motorcycle, followed by a shallow camera push. */
.motion-enabled.hero-sequenced .hero-photo-frame,.motion-enabled .hero-sequenced .hero-photo-frame{animation:namz-hero-frame-in 1150ms cubic-bezier(.22,.72,.24,1) 100ms both}
.hero-media .hero-photo{transform:translateY(calc(-30px + var(--hero-y,0px))) scale(var(--hero-zoom,1));rotate:var(--hero-turn,0deg);transform-origin:center}
.motion-enabled .hero-media .hero-photo{will-change:transform}
@keyframes namz-hero-frame-in{
  from{opacity:.45;translate:34px 0;clip-path:inset(0 100% 0 0 round 40px)}
  to{opacity:1;translate:0 0;clip-path:inset(0 0 0 0 round 0px)}
}

/* This is a single camera movement; product cards and backdrop remain grounded. */
.motion-enabled.hero-sequenced .hero-photo,.motion-enabled .hero-sequenced .hero-photo{animation:namz-camera-push 14s cubic-bezier(.1,.4,.2,1) 250ms both;animation-play-state:paused}
.motion-enabled.hero-in-view .hero-photo,.motion-enabled .hero-in-view .hero-photo{animation-play-state:running}
@keyframes namz-camera-push{from{scale:1}to{scale:1.035}}

.motion-enabled dialog[open]{animation:namz-dialog-in 260ms cubic-bezier(.22,.72,.24,1) both}
.motion-enabled dialog[open]::backdrop{animation:namz-backdrop-in 240ms ease-out both}
@keyframes namz-dialog-in{from{opacity:0;translate:0 18px;scale:.992}to{opacity:1;translate:0 0;scale:1}}
@keyframes namz-backdrop-in{from{opacity:0}to{opacity:1}}
.motion-enabled .faq-list details[open] p{animation:namz-faq-in 300ms cubic-bezier(.22,.72,.24,1) both}
@keyframes namz-faq-in{from{opacity:0;translate:0 -10px}to{opacity:1;translate:0 0}}

.motion-strip{overflow:hidden}
.motion-track{display:flex;width:max-content;gap:0}
.motion-enabled .motion-track{animation:namz-marquee 42s linear infinite;will-change:transform}
.motion-segment{display:flex;align-items:center;gap:48px;padding-inline-end:48px;flex-shrink:0}
.motion-strip:hover .motion-track,.motion-strip:focus-within .motion-track{animation-play-state:paused}
@keyframes namz-marquee{to{transform:translateX(-50%)}}

/* A brief reflection answers direct interaction with the product display. */
.product-image::after{content:'';position:absolute;inset:-35% -65%;background:linear-gradient(110deg,transparent 42%,#ffffff38 49%,transparent 57%);pointer-events:none;opacity:0;translate:-60% 0}
.motion-enabled .product-image:focus-visible::after,.motion-enabled .product-card:focus-within .product-image::after{animation:namz-product-reflection 650ms cubic-bezier(.22,.72,.24,1) both}
@media(hover:hover) and (pointer:fine){.motion-enabled .product-image:hover::after{animation:namz-product-reflection 650ms cubic-bezier(.22,.72,.24,1) both}}
@keyframes namz-product-reflection{0%{opacity:0;translate:-60% 0}20%{opacity:.8}100%{opacity:0;translate:60% 0}}

/* A saved preference or device setting gives the complete static composition. */
html.motion-off{scroll-behavior:auto!important}
.motion-off *,.motion-off *::before,.motion-off *::after{animation:none!important;transition-duration:0s!important;transition-delay:0s!important}
.motion-off .motion-reveal{opacity:1!important;translate:0 0!important;scale:1!important;rotate:var(--motion-rest-rotate,0deg)!important;clip-path:none!important}
.motion-off .hero-copy,.motion-off .hero-photo-frame,.motion-off .hero-line-inner{opacity:1!important;translate:0 0!important;scale:1!important;clip-path:none!important}
.motion-off .hero-media .hero-photo{transform:translateY(-30px) scale(1)!important;rotate:0deg!important;scale:1!important;will-change:auto}
.motion-off .hero-photo-frame{transform:none!important}
.motion-off :is(.category-card,.product-card,.button):hover,.motion-off :is(.category-card,.product-card):hover img{transform:none!important}
.motion-off .hero-spotlight:hover{rotate:0deg}
.motion-off .motion-strip{rotate:0deg;overflow:visible}
.motion-off .motion-track{transform:none!important;will-change:auto;width:100%;display:block}
.motion-off .motion-segment:first-child{flex-wrap:wrap;justify-content:center;gap:14px 28px;padding:0 20px}
.motion-off .motion-segment[aria-hidden]{display:none}

@media(max-width:800px){
  .motion-reveal{--reveal-x:0px!important;--reveal-y:24px;--reveal-rotate:0deg!important}
  .motion-reveal.motion-revealing{animation-duration:540ms}
  .motion-reveal.motion-quick.motion-revealing{animation-duration:390ms}
  .motion-panel{--reveal-y:34px}
  .motion-panel.motion-pending{scale:.992;clip-path:inset(0 0 14% 0 round 28px)}
  .motion-panel.motion-revealing{animation-duration:650ms}
  .motion-section{--reveal-y:28px}
  .motion-section.motion-revealing{animation-duration:600ms}
  .motion-enabled.hero-sequenced .hero-line-inner,.motion-enabled .hero-sequenced .hero-line-inner{animation-duration:600ms}
  .motion-enabled.hero-sequenced .hero-photo-frame,.motion-enabled .hero-sequenced .hero-photo-frame{animation-name:namz-hero-frame-mobile;animation-duration:980ms}
  .motion-enabled.hero-sequenced .hero-photo,.motion-enabled .hero-sequenced .hero-photo{animation-name:namz-camera-push-mobile}
  .motion-segment{gap:30px;padding-inline-end:30px}
}
@keyframes namz-hero-frame-mobile{from{opacity:.45;translate:0 22px;clip-path:inset(0 0 100% 0 round 32px)}to{opacity:1;translate:0 0;clip-path:inset(0 0 0 0 round 0px)}}
@keyframes namz-camera-push-mobile{from{scale:1}to{scale:1.02}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation:none!important;transition-duration:0s!important;transition-delay:0s!important}
  .motion-reveal{opacity:1!important;translate:0 0!important;scale:1!important;rotate:var(--motion-rest-rotate,0deg)!important;clip-path:none!important}
  .hero-copy,.hero-photo-frame,.hero-line-inner{opacity:1!important;translate:0 0!important;scale:1!important;clip-path:none!important}
  .hero-media .hero-photo{transform:translateY(-30px) scale(1)!important;rotate:0deg!important;scale:1!important;will-change:auto}
  .hero-photo-frame{transform:none!important}
  :is(.category-card,.product-card,.button):hover,:is(.category-card,.product-card):hover img{transform:none!important}
  .hero-spotlight:hover{rotate:0deg}
  .motion-strip{rotate:0deg;overflow:visible}
  .motion-track{transform:none!important;will-change:auto;width:100%;display:block}
  .motion-segment:first-child{flex-wrap:wrap;justify-content:center;gap:14px 28px;padding:0 20px}
  .motion-segment[aria-hidden]{display:none}
}