/* Local motion preview. Keep layout, type, and the published visual identity. */
:root { --motion-ease: cubic-bezier(.16, 1, .3, 1); }
.design-stage { position: relative; }
.design-stage.is-switching { overflow: clip; overflow-anchor: none; }
.motion-ghost {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  pointer-events: none;
  user-select: none;
  z-index: 2;
}
.motion-ghost, .motion-ghost * {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  animation: none !important;
  transition: none !important;
}
.motion-enabled .rv { opacity: 1; transform: none; transition: none; }
.motion-enabled .motion-pending { opacity: 0; transform: translate3d(0, 22px, 0); }
.motion-enabled .motion-pending:focus-within { opacity: 1; transform: none; }
.motion-enabled .gal-card:not(.is-revealing),
.motion-enabled .collection-empty { animation: none; }
.motion-enabled :is(.category-preview, .gal-tile, .motion-shot) img { transition: opacity .4s ease, transform .8s var(--motion-ease); }
.motion-enabled img.media-pending { opacity: 0; }
body.fade-sw { animation: none; }
.collection-view { scroll-margin-top: 96px; }
.gal-bar { scroll-margin-top: 96px; }
.category-card { transition: transform .5s var(--motion-ease), border-color .35s, box-shadow .5s; }
.category-arrow { transition: background .3s, color .3s, transform .5s var(--motion-ease); }
.category-card:is(:hover, :focus-visible) .category-arrow { transform: rotate(-35deg); }
html[dir="rtl"] .category-card:is(:hover, :focus-visible) .category-arrow { transform: rotate(35deg); }
.category-card:active { transform: translateY(-1px) scale(.99); }
.collection-back { transition: transform .35s var(--motion-ease), color .25s, border-color .25s, background .25s; }
.collection-back:hover { transform: translateX(-4px); background: rgba(178, 128, 245, .09); }
html[dir="rtl"] .collection-back:hover { transform: translateX(4px); }
.chip { transition: color .25s, background .3s, border-color .3s, transform .4s var(--motion-ease), box-shadow .3s; }
.chip:hover { transform: translateY(-2px); }
.chip:active { transform: scale(.96); }
.brand img { transition: transform .5s var(--motion-ease), filter .35s; }
.brand:hover img { transform: rotate(-5deg) scale(1.06); filter: drop-shadow(0 0 10px rgba(183, 121, 255, .35)); }
.btn { transition: transform .4s var(--motion-ease), box-shadow .35s, border-color .3s, background .3s; }
.btn:active { transform: translateY(1px) scale(.98); }
.svc-ic { transition: transform .55s var(--motion-ease), box-shadow .4s; }
.svc:is(:hover, :focus-within) .svc-ic { transform: translateY(-3px) rotate(-5deg); box-shadow: 0 12px 28px -8px rgba(194, 131, 255, .65); }
.step { transition: transform .5s var(--motion-ease); }
.step::before { transition: color .3s, text-shadow .4s; }
.step:hover { transform: translateY(-4px); }
.step:hover::before { color: #fff; text-shadow: 0 0 18px rgba(197, 149, 255, .6); }
.payment-method { transition: transform .5s var(--motion-ease), background .3s, border-color .3s, box-shadow .4s; }
.payment-method:hover { transform: translateY(-5px); border-color: rgba(213, 174, 255, .45); background: rgba(170, 113, 241, .1); box-shadow: 0 16px 28px -22px rgba(182, 121, 255, .7); }
.payment-icon { transition: transform .5s var(--motion-ease); }
.payment-method:hover .payment-icon { transform: rotate(-7deg) scale(1.08); }
.about-card { transition: border-color .4s, box-shadow .5s; }
.about-card:hover { border-color: rgba(211, 174, 255, .4); box-shadow: 0 20px 48px -32px rgba(169, 102, 255, .5); }
.tags > * { transition: transform .35s var(--motion-ease), background .3s, border-color .3s; }
.tags > *:hover { transform: translateY(-3px); border-color: rgba(214, 178, 255, .4); }
.marquee:hover .marquee-track { animation-play-state: paused; }
.gal-card-extra.is-revealing { animation-duration: .5s; animation-timing-function: var(--motion-ease); }
@media (hover: none) {
  .category-card:active { transform: scale(.985); }
  .step:hover, .payment-method:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .motion-enabled .motion-pending { opacity: 1; transform: none; }
  .motion-enabled img.media-pending { opacity: 1; }
  .motion-ghost { display: none; }
  .design-stage { height: auto !important; }
}