/* ==========================================================================
   Nikonyx shared motion system — tokens + reusable utilities
   Progressive enhancement: animations only when html.nx-motion is set.
   ========================================================================== */

:root{
  /* Distance */
  --nx-motion-y:18px;
  --nx-motion-y-sm:10px;
  --nx-motion-y-xs:6px;
  --nx-motion-x:14px;
  --nx-motion-scale-in:.985;
  --nx-motion-scale-hover:1.035;

  /* Duration */
  --nx-motion-dur-xs:.22s;
  --nx-motion-dur-sm:.35s;
  --nx-motion-dur-md:.55s;
  --nx-motion-dur-lg:.85s;
  --nx-motion-dur-hero:1.05s;
  --nx-motion-dur-img:.45s;

  /* Easing */
  --nx-motion-ease:cubic-bezier(.22,1,.36,1);
  --nx-motion-ease-out:cubic-bezier(.2,.8,.2,1);
  --nx-motion-ease-soft:cubic-bezier(.33,1,.68,1);

  /* Stagger */
  --nx-motion-stagger:80ms;
  --nx-motion-stagger-sm:70ms;
  --nx-motion-stagger-lg:100ms;
}

/* Align legacy tokens */
:root{
  --nx-exp-ease:var(--nx-motion-ease-out);
  --nx-exp-dur:var(--nx-motion-dur-md);
  --nx-ease:var(--nx-motion-ease);
  --nx-dur:var(--nx-motion-dur-md);
}

/* ---- Progressive reveal (hidden only when motion is armed) ---- */
html.nx-motion .nx-reveal{
  opacity:0;
  transform:translate3d(0,var(--nx-motion-y),0);
  transition:
    opacity var(--nx-motion-dur-lg) var(--nx-motion-ease),
    transform var(--nx-motion-dur-lg) var(--nx-motion-ease);
  will-change:opacity,transform;
}
html.nx-motion .nx-reveal.is-in{
  opacity:1;
  transform:none;
  will-change:auto;
}

/* Stagger children inside a revealed parent */
html.nx-motion [data-nx-stagger] > .nx-motion-item,
html.nx-motion [data-nx-stagger] > .nx-inspire__cell,
html.nx-motion [data-nx-stagger] > .nx-trust-item,
html.nx-motion [data-nx-stagger] > .nx-trust__proof-item,
html.nx-motion [data-nx-stagger] > .nx-how__step{
  opacity:0;
  transform:translate3d(0,var(--nx-motion-y-sm),0);
  transition:
    opacity var(--nx-motion-dur-md) var(--nx-motion-ease),
    transform var(--nx-motion-dur-md) var(--nx-motion-ease);
}
html.nx-motion [data-nx-stagger].is-in > .nx-motion-item,
html.nx-motion [data-nx-stagger].is-in > .nx-inspire__cell:not(.is-filtered-out):not([hidden]),
html.nx-motion [data-nx-stagger].is-in > .nx-trust-item,
html.nx-motion [data-nx-stagger].is-in > .nx-trust__proof-item,
html.nx-motion [data-nx-stagger].is-in > .nx-how__step{
  opacity:1;
  transform:none;
}
html.nx-motion [data-nx-stagger].is-in > :nth-child(1){transition-delay:calc(var(--nx-motion-stagger) * 0)}
html.nx-motion [data-nx-stagger].is-in > :nth-child(2){transition-delay:calc(var(--nx-motion-stagger) * 1)}
html.nx-motion [data-nx-stagger].is-in > :nth-child(3){transition-delay:calc(var(--nx-motion-stagger) * 2)}
html.nx-motion [data-nx-stagger].is-in > :nth-child(4){transition-delay:calc(var(--nx-motion-stagger) * 3)}
html.nx-motion [data-nx-stagger].is-in > :nth-child(5){transition-delay:calc(var(--nx-motion-stagger) * 4)}
html.nx-motion [data-nx-stagger].is-in > :nth-child(6){transition-delay:calc(var(--nx-motion-stagger) * 5)}
html.nx-motion [data-nx-stagger].is-in > :nth-child(7){transition-delay:calc(var(--nx-motion-stagger) * 6)}
html.nx-motion [data-nx-stagger].is-in > :nth-child(8){transition-delay:calc(var(--nx-motion-stagger) * 7)}

/* Image mask / fade utility */
html.nx-motion .nx-motion-mask{
  clip-path:inset(12% 8% 12% 8%);
  opacity:.72;
  transform:scale(1.04);
  transition:
    clip-path var(--nx-motion-dur-hero) var(--nx-motion-ease),
    opacity var(--nx-motion-dur-hero) var(--nx-motion-ease),
    transform 18s linear;
  will-change:clip-path,opacity,transform;
}
html.nx-motion .is-in .nx-motion-mask,
html.nx-motion .is-ready .nx-motion-mask,
html.nx-motion .nx-motion-mask.is-in{
  clip-path:inset(0 0 0 0);
  opacity:1;
  transform:scale(1.03);
}

/* Caption after image */
html.nx-motion .nx-motion-caption{
  opacity:0;
  transform:translate3d(0,8px,0);
  transition:
    opacity var(--nx-motion-dur-md) var(--nx-motion-ease) .12s,
    transform var(--nx-motion-dur-md) var(--nx-motion-ease) .12s;
}
html.nx-motion .is-in .nx-motion-caption,
html.nx-motion .nx-motion-caption.is-in{
  opacity:1;
  transform:none;
}

/* Image swap / crossfade helpers */
.nx-motion-swap{
  transition:
    opacity var(--nx-motion-dur-img) var(--nx-motion-ease),
    transform var(--nx-motion-dur-img) var(--nx-motion-ease);
}
.nx-motion-swap.is-swapping,
.try-photo-single.is-swapping,
[data-ward-preview].is-swapping{
  opacity:.35;
  transform:scale(1.015);
}

/* Selected / press feedback */
.nx-motion-press:active{
  transform:translateY(1px) scale(.985);
}
.nx-btn,
.nx-studio-rail button,
.nx-inspire__filter,
.nx-wardrobe-lab__set,
.nx-wardrobe-lab__item,
.nx-how__play,
.nx-how__step,
.nxp-outfit__thumb{
  transition:
    color var(--nx-motion-dur-xs) ease,
    background var(--nx-motion-dur-xs) ease,
    border-color var(--nx-motion-dur-xs) ease,
    box-shadow var(--nx-motion-dur-sm) var(--nx-motion-ease),
    transform var(--nx-motion-dur-sm) var(--nx-motion-ease),
    opacity var(--nx-motion-dur-sm) ease;
}
.nx-btn:active,
.nx-final-cta .nx-btn--on-dark:active,
.nx-wardrobe-lab .nx-btn--primary:active{
  transform:translateY(1px) scale(.985);
}

/* Decorative rule scale */
.nx-motion-rule{
  display:block;
  width:48px;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform var(--nx-motion-dur-md) var(--nx-motion-ease);
}
.is-in .nx-motion-rule,
.nx-motion-rule.is-in{
  transform:scaleX(1);
}

/* Filter re-entrance */
html.nx-motion .nx-inspire__cell.is-reenter{
  animation:nxMotionReenter var(--nx-motion-dur-md) var(--nx-motion-ease) both;
}
@keyframes nxMotionReenter{
  from{opacity:0;transform:translate3d(0,10px,0) scale(.99)}
  to{opacity:1;transform:none}
}

/* Quiet divider grow for benefits */
html.nx-motion .nx-trust-item::before{
  content:"";
  display:block;
  width:28px;
  height:1px;
  background:rgba(0,17,56,.28);
  margin:0 0 14px;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform var(--nx-motion-dur-md) var(--nx-motion-ease);
}
html.nx-motion .nx-trust-item.is-in::before,
html.nx-motion .nx-trust__grid.is-in .nx-trust-item::before{
  transform:scaleX(1);
}
html.nx-motion .nx-trust__grid.is-in .nx-trust-item:nth-child(1)::before{transition-delay:40ms}
html.nx-motion .nx-trust__grid.is-in .nx-trust-item:nth-child(2)::before{transition-delay:120ms}
html.nx-motion .nx-trust__grid.is-in .nx-trust-item:nth-child(3)::before{transition-delay:200ms}
html.nx-motion .nx-trust__grid.is-in .nx-trust-item:nth-child(4)::before{transition-delay:280ms}

/* Failsafe: never leave content invisible */
@media (prefers-reduced-motion:reduce){
  html.nx-motion .nx-reveal,
  html.nx-motion .nx-reveal.is-in,
  html.nx-motion [data-nx-stagger] > *,
  html.nx-motion [data-nx-stagger].is-in > *,
  html.nx-motion .nx-motion-mask,
  html.nx-motion .nx-motion-caption,
  html.nx-motion .nx-motion-rule,
  html.nx-motion .nx-trust-item::before,
  .nx-motion-swap,
  .try-photo-single.is-swapping,
  [data-ward-preview].is-swapping{
    opacity:1 !important;
    transform:none !important;
    clip-path:none !important;
    transition:none !important;
    animation:none !important;
    will-change:auto !important;
  }
  html.nx-motion .nx-inspire__cell.is-reenter{animation:none}
  .nx-btn:active,
  .nx-final-cta .nx-btn--on-dark:active{transform:none}
}