/* Purposeful motion add-on. Load after motion.css and conversion.css.
   All content remains visible without this file or without JavaScript. */

/* Existing fold hooks keep their names so app.js cleanup still works, but the bike only fades and translates uniformly. */
@keyframes fold-squash{from{opacity:.72;transform:translate3d(14px,0,0)}to{opacity:1;transform:none}}
@keyframes fold-stretch{from{opacity:.72;transform:translate3d(-14px,0,0)}to{opacity:1;transform:none}}

@keyframes me-hero-copy{from{opacity:0;transform:translate3d(0,14px,0)}}
@keyframes me-hero-media{from{opacity:.65;transform:translate3d(0,12px,0);clip-path:inset(0 0 12% 0)}to{opacity:1;transform:none;clip-path:inset(0)}}
@keyframes me-scene-arrive{from{opacity:.88;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
@keyframes me-ring-in{from{opacity:.25;transform:translate3d(var(--me-ring-x,0),0,0) scale(.82)}to{opacity:1;transform:none}}
@keyframes me-text-swap{from{opacity:.3;transform:translate3d(var(--me-text-x,10px),0,0)}to{opacity:1;transform:none}}
@keyframes me-dot-in{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:none}}
@keyframes me-line-in{from{transform:translateY(-50%) scaleX(0)}to{transform:translateY(-50%) scaleX(1)}}
@keyframes me-dot-select{50%{transform:scale(1.13)}to{transform:none}}
@keyframes me-readout{from{opacity:.35;transform:translate3d(0,7px,0)}to{opacity:1;transform:none}}
@keyframes me-status-ok{0%{opacity:.25;transform:translate3d(0,5px,0)}55%{transform:translate3d(0,-2px,0)}to{opacity:1;transform:none}}
@keyframes me-status-check{0%,100%{transform:none}35%{transform:translate3d(-3px,0,0)}70%{transform:translate3d(3px,0,0)}}
@keyframes me-sticker-once{0%,100%{translate:0 0;rotate:0deg}45%{translate:0 -5px;rotate:-4deg}}
@keyframes me-sticker-pop{from{scale:0;rotate:-40deg}to{scale:1;rotate:0deg}}

@media(prefers-reduced-motion:no-preference){
  /* First-view reveal runs once per session. Controls remain clickable for the whole animation. */
  .me-hero-intro :is(.hero-copy,[data-hero])>*{animation:me-hero-copy .5s cubic-bezier(.2,.7,.2,1) backwards}
  .me-hero-intro :is(.hero-copy,[data-hero])>:nth-child(2){animation-delay:.04s}
  .me-hero-intro :is(.hero-copy,[data-hero])>:nth-child(3){animation-delay:.08s}
  .me-hero-intro :is(.hero-copy,[data-hero])>:nth-child(n+4){animation-delay:.12s}
  .me-hero-intro :is(.hero-image,.pp-hero-product,.pp-hero-folded,.ed-hero__media,.ed-rhero__media,.join-card){animation:me-hero-media .72s cubic-bezier(.2,.75,.2,1) .06s backwards}

  /* One subtle arrival per major product/scene section; nothing is pre-hidden. */
  .me-scene-arrive{animation:me-scene-arrive .62s cubic-bezier(.2,.7,.2,1) both}
  .cx.me-scene-arrive .cx-card{animation:me-hero-media .68s cubic-bezier(.2,.75,.2,1) .06s backwards}

  /* Selected color follows aria-pressed. The new ring arrives from the previous swatch's direction. */
  .color-controls [data-color]{position:relative;isolation:isolate}
  .color-controls [data-color]::after{content:"";position:absolute;inset:2px;border:2px solid var(--accent,#ef4926);opacity:0;pointer-events:none;transform:scale(.86)}
  .color-controls [data-color][aria-pressed=true]::after{opacity:1;transform:none}
  .color-controls [data-color].me-color-enter::after{animation:me-ring-in .42s cubic-bezier(.2,.8,.2,1)}
  .me-text-swap{animation:me-text-swap .38s cubic-bezier(.2,.75,.2,1)}
  .cx-bar .swatch.me-swatch-morph,.cx-color .swatch.me-swatch-morph{animation:me-dot-select .36s cubic-bezier(.2,.8,.2,1)}

  /* Detail points draw once on arrival; state changes stay short and tactile. */
  .dx-dot::after{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:20px;border-top:1px solid var(--ink,#20221f);transform:translateY(-50%);transform-origin:0 50%;translate:12px 0;pointer-events:none}
  .me-details-in .dx-dot{animation:me-dot-in .42s cubic-bezier(.2,.8,.2,1) calc(var(--me-i,0) * 70ms) backwards}
  .me-details-in .dx-dot::after{animation:me-line-in .36s cubic-bezier(.2,.75,.2,1) calc(.12s + var(--me-i,0) * 70ms) backwards}
  .dx-dot.me-dot-select span{animation:me-dot-select .34s cubic-bezier(.2,.8,.2,1)}
  .dx-readout.me-readout-swap{animation:me-readout .34s cubic-bezier(.2,.75,.2,1)}

  /* Honest copy feedback: success lifts, fallback gets one small nudge. */
  .cx-status.me-status-pop.is-ok{animation:me-status-ok .48s cubic-bezier(.2,.8,.2,1)}
  .cx-status.me-status-pop:not(.is-ok){animation:me-status-check .32s ease}

  /* Replace legacy automatic loops with bounded runs. */
  .photo-sticker{animation:me-sticker-pop .62s cubic-bezier(.3,1.4,.5,1) .38s backwards,me-sticker-once 2.4s ease-in-out 1.05s 1 both!important}
  .tiny-dot::after{animation:dot-ping 2.5s cubic-bezier(0,0,.2,1) .7s 1 both!important}
  .motion-ride.is-riding .motion-ride__run{animation-duration:4.4s!important}
  .motion-ride.is-riding .motion-ride__bike{animation-iteration-count:24!important}
  .motion-ride.is-riding .motion-ride__wheel{animation-iteration-count:8!important}
  .motion-ride.is-riding .motion-ride__bird{animation-iteration-count:13!important}
}

.me-fold-step{display:inline-flex;align-items:center;min-height:28px;margin-left:auto;padding:3px 9px;border:1px solid currentColor;font-size:.75rem;font-weight:800;line-height:1;letter-spacing:.08em}

/* Save-Data keeps state feedback but skips decorative entrances and ambient flourishes. */
.me-save-data :is(.me-hero-intro,.me-scene-arrive,.photo-sticker){animation:none!important}
.me-save-data .tiny-dot::after{animation:none!important}
.me-save-data .me-details-in .dx-dot,.me-save-data .me-details-in .dx-dot::after{animation:none!important}

@media(prefers-reduced-motion:reduce){
  :is(.me-hero-intro,.me-scene-arrive,.me-text-swap,.me-color-enter,.me-dot-select,.me-readout-swap,.me-status-pop,.photo-sticker,.motion-ride__run,.motion-ride__bike,.motion-ride__wheel,.motion-ride__bird,.motion-swap-host.is-folding>img,.motion-swap-host.is-unfolding>img){animation:none!important;transition:none!important;transform:none!important;translate:none!important;clip-path:none!important;opacity:1!important}
  .tiny-dot::after{animation:none!important;transition:none!important;transform:none!important;opacity:1!important}
  .dx-dot::after{animation:none!important;transform:translateY(-50%) scaleX(1)!important}
}

@media print{
  :is(.me-hero-intro,.me-scene-arrive,.me-text-swap,.me-color-enter,.me-dot-select,.me-readout-swap,.me-status-pop){animation:none!important;transform:none!important;opacity:1!important;clip-path:none!important}
}