/* =====================================================================
   NANO MEDICAL — Premium Motion System
   Motion-only layer: preserves the existing layout, content and palette.
   ===================================================================== */
:root {
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --motion-ease-soft: cubic-bezier(.16, 1, .3, 1);
  --motion-fast: 250ms;
}

/* Central reveal system ------------------------------------------------ */
.motion-reveal,
.motion-stagger-item,
.motion-footer-part {
  opacity: 0;
  transform: translate3d(0, 32px, 0) scale(.98);
  transition:
    opacity .7s var(--motion-ease),
    transform .7s var(--motion-ease);
  will-change: opacity, transform;
}
.motion-reveal.motion-revealed,
.motion-stagger-item.motion-revealed,
.motion-footer-part.motion-revealed {
  opacity: 1;
  transform: none;
}
.motion-stagger-item {
  transition-delay: calc(var(--motion-index, 0) * .12s);
}

/* Section headings reveal in a calm two-step cascade ------------------ */
.motion-section-head .motion-section-part {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  transition: opacity .7s var(--motion-ease), transform .7s var(--motion-ease);
  will-change: opacity, transform;
}
.motion-section-head.motion-revealed .motion-section-part {
  opacity: 1;
  transform: none;
}
.motion-section-head .motion-section-part:nth-child(2) { transition-delay: .04s; }
.motion-section-head .motion-section-part:nth-child(3) { transition-delay: .10s; }
.motion-section-head .motion-section-part:nth-child(4) { transition-delay: .16s; }

/* Page-load sequence -------------------------------------------------- */
.motion-navbar,
.motion-top-bar,
.motion-trust,
.motion-hero {
  will-change: opacity, transform;
}
.motion-navbar {
  opacity: 0;
  transform: translate3d(0, -15px, 0);
  transition: opacity .6s var(--motion-ease), transform .6s var(--motion-ease);
}
.motion-navbar > .navbar-inner > * {
  opacity: 0;
  transform: translate3d(0, -8px, 0);
  transition: opacity .5s var(--motion-ease), transform .5s var(--motion-ease);
}
.motion-navbar > .navbar-inner > :nth-child(1) { transition-delay: .05s; }
.motion-navbar > .navbar-inner > :nth-child(2) { transition-delay: .12s; }
.motion-navbar > .navbar-inner > :nth-child(3) { transition-delay: .19s; }
.motion-home-ready .motion-navbar,
.motion-home-ready .motion-navbar > .navbar-inner > * {
  opacity: 1;
  transform: none;
}
.motion-top-bar {
  opacity: 0;
  transform: translate3d(0, -10px, 0);
  transition: opacity .55s var(--motion-ease), transform .55s var(--motion-ease);
}
.motion-home-ready .motion-top-bar { opacity: 1; transform: none; }

.motion-hero {
  opacity: 0;
  transition: opacity .5s var(--motion-ease);
}
.motion-home-ready .motion-hero { opacity: 1; }
.motion-hero .hero-content > .hero-eyebrow,
.motion-hero .hero-content > h1,
.motion-hero .hero-content > .lead,
.motion-hero .hero-content > .hero-actions,
.motion-hero .hero-content > .hero-stats,
.motion-hero .hero-visual .hero-card,
.motion-hero .hero-visual .hero-floating-badge {
  opacity: 0;
  transform: translate3d(0, 35px, 0);
  filter: blur(6px);
  transition:
    opacity .75s var(--motion-ease),
    transform .75s var(--motion-ease),
    filter .75s var(--motion-ease);
  will-change: opacity, transform, filter;
}
.motion-hero .hero-visual .hero-card {
  transform: translate3d(25px, 0, 0) scale(.94);
  filter: none;
  transition-duration: 1s;
}
.motion-hero .hero-visual .hero-card:nth-child(2) { transition-delay: .15s; }
.motion-hero .hero-visual .hero-card:nth-child(3) { transition-delay: .30s; }
.motion-hero .hero-visual .hero-floating-badge {
  transform: translate3d(0, 15px, 0) scale(.9);
  filter: none;
  transition-duration: .6s;
  transition-delay: .55s;
}
.motion-home-ready .motion-hero .hero-content > *,
.motion-home-ready .motion-hero .hero-visual .hero-card,
.motion-home-ready .motion-hero .hero-visual .hero-floating-badge {
  opacity: 1;
  transform: none;
  filter: blur(0);
}
.motion-home-ready .motion-hero .hero-content > .hero-eyebrow { transition-delay: .10s; }
.motion-home-ready .motion-hero .hero-content > h1 { transition-delay: .20s; }
.motion-home-ready .motion-hero .hero-content > .lead { transition-delay: .32s; }
.motion-home-ready .motion-hero .hero-content > .hero-actions { transition-delay: .52s; }
.motion-home-ready .motion-hero .hero-content > .hero-stats { transition-delay: .64s; }
.motion-home-ready .motion-hero .hero-visual .hero-card.main { transition-delay: .35s; }
.motion-home-ready .motion-hero .hero-visual .hero-floating-badge { transition-delay: .85s; }

.motion-trust {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition: opacity .7s var(--motion-ease), transform .7s var(--motion-ease);
}
.motion-home-ready .motion-trust {
  opacity: 1;
  transform: none;
  transition-delay: .62s;
}
.motion-trust .trust-item {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition: opacity .5s var(--motion-ease), transform .5s var(--motion-ease), box-shadow .25s ease;
}
.motion-home-ready .motion-trust .trust-item {
  opacity: 1;
  transform: none;
}
.motion-home-ready .motion-trust .trust-item:nth-child(1) { transition-delay: .82s; }
.motion-home-ready .motion-trust .trust-item:nth-child(2) { transition-delay: .91s; }
.motion-home-ready .motion-trust .trust-item:nth-child(3) { transition-delay: 1.00s; }
.motion-home-ready .motion-trust .trust-item:nth-child(4) { transition-delay: 1.09s; }
.motion-home-ready .motion-trust .trust-item:nth-child(5) { transition-delay: 1.18s; }
.motion-home-ready .motion-trust .trust-item:nth-child(6) { transition-delay: 1.27s; }
.motion-trust .trust-icon {
  transform: scale(.85);
  transition: transform .45s var(--motion-ease);
}
.motion-home-ready .motion-trust .trust-icon { transform: scale(1); }

/* Collection cards use the same section reveal without changing layout -- */
.collections-grid.motion-reveal {
  transform: translate3d(0, 28px, 0) scale(.985);
}
.collection-card .col-bg {
  transition: transform .5s var(--motion-ease), opacity .4s ease;
}

/* Buttons and card hover states --------------------------------------- */
.hero-actions .btn,
.cta-banner-wrap .btn,
.product-actions .btn {
  transition: transform .25s var(--motion-ease), box-shadow .25s ease, background-color .25s ease, border-color .25s ease;
}
.hero-actions .btn:hover:not(:disabled),
.cta-banner-wrap .btn:hover:not(:disabled),
.product-actions .btn:hover:not(:disabled) {
  transform: translate3d(0, -2px, 0) scale(1.03);
}
.btn:active:not(:disabled) {
  transform: scale(.97);
  transition-duration: .18s;
}
.cat-card,
.product-card,
.why-card,
.testi-card {
  transition: transform .3s var(--motion-ease), box-shadow .3s ease, border-color .3s ease;
}
.cat-card:hover { transform: translate3d(0, -5px, 0) scale(1.015); }
.cat-card .cat-image-thumb { transition: transform .5s var(--motion-ease); }
.cat-card:hover .cat-image-thumb { transform: scale(1.04); }
.product-card:hover { transform: translate3d(0, -5px, 0) scale(1.01); }
.product-card:hover .product-image-wrap img { transform: scale(1.04); }
.why-card:hover { transform: translate3d(0, -6px, 0) scale(1.015); }
.why-card .why-icon { transition: transform .35s var(--motion-ease), box-shadow .3s ease; }
.why-card:hover .why-icon { transform: scale(1.04) rotate(-2deg); }
.testi-card:hover { transform: translate3d(0, -4px, 0); }

/* Product image skeleton / graceful image arrival -------------------- */
.product-image-wrap.motion-image-loading::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(105deg, var(--bg-2) 20%, rgba(255,255,255,.68) 42%, var(--bg-2) 64%);
  background-size: 220% 100%;
  animation: motion-skeleton-shimmer 1.35s ease-in-out infinite;
}
.product-image-wrap.motion-image-loading img {
  opacity: 0;
  transform: scale(1.02);
  transition: opacity .5s var(--motion-ease), transform .5s var(--motion-ease);
}
.product-image-wrap.motion-image-loaded img {
  opacity: 1;
  transform: scale(1);
  transition: opacity .5s var(--motion-ease), transform .5s var(--motion-ease);
}
@keyframes motion-skeleton-shimmer {
  0% { background-position: 180% 0; }
  100% { background-position: -80% 0; }
}

/* Footer, CTA and floating elements ---------------------------------- */
.cta-banner-wrap {
  transform: scale(.98);
  transition: opacity .8s var(--motion-ease), transform .8s var(--motion-ease);
}
.cta-banner-wrap.motion-revealed { opacity: 1; transform: scale(1); }
.footer.motion-footer-ready .footer-col,
.footer.motion-footer-ready .footer-bottom,
.footer.motion-footer-ready .footer-powered {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition: opacity .7s var(--motion-ease), transform .7s var(--motion-ease);
}
.footer.motion-footer-ready.motion-revealed .footer-col,
.footer.motion-footer-ready.motion-revealed .footer-bottom,
.footer.motion-footer-ready.motion-revealed .footer-powered {
  opacity: 1;
  transform: none;
}
.footer.motion-footer-ready.motion-revealed .footer-col:nth-child(1) { transition-delay: .04s; }
.footer.motion-footer-ready.motion-revealed .footer-col:nth-child(2) { transition-delay: .12s; }
.footer.motion-footer-ready.motion-revealed .footer-col:nth-child(3) { transition-delay: .20s; }
.footer.motion-footer-ready.motion-revealed .footer-col:nth-child(4) { transition-delay: .28s; }
.footer.motion-footer-ready.motion-revealed .footer-bottom { transition-delay: .38s; }
.footer.motion-footer-ready.motion-revealed .footer-powered { transition-delay: .46s; }
.hero-floating-badge.motion-floating-ready {
  animation: motion-soft-float 4.5s ease-in-out .95s infinite;
}
@keyframes motion-soft-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -7px, 0); }
}

/* Drawer, overlay, modal and checkout micro-interactions -------------- */
.cart-overlay {
  transition: opacity .3s var(--motion-ease);
}
.cart-drawer {
  left: auto;
  right: 0;
  transform: translate3d(105%, 0, 0);
  transition: transform .45s var(--motion-ease);
}
.cart-drawer.open { transform: translate3d(0, 0, 0); }
.cart-item.motion-cart-item {
  animation: motion-cart-item-in .45s var(--motion-ease) both;
}
@keyframes motion-cart-item-in {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to { opacity: 1; transform: none; }
}
.modal-overlay.active {
  animation: none;
  opacity: 1;
}
.modal-overlay.active .modal {
  animation: motion-modal-in .45s var(--motion-ease) both;
}
@keyframes motion-modal-in {
  from { opacity: 0; transform: translate3d(0, 14px, 0) scale(.98); }
  to { opacity: 1; transform: none; }
}
.modal-overlay.active .steps,
.modal-overlay.active #checkoutForm > .form-card,
.modal-overlay.active #checkoutForm > .btn-block {
  animation: motion-form-in .55s var(--motion-ease) both;
}
.modal-overlay.active #checkoutForm > .form-card:nth-of-type(1) { animation-delay: .06s; }
.modal-overlay.active #checkoutForm > .form-card:nth-of-type(2) { animation-delay: .12s; }
.modal-overlay.active #checkoutForm > .form-card:nth-of-type(3) { animation-delay: .18s; }
.modal-overlay.active #checkoutForm > .form-card:nth-of-type(4) { animation-delay: .24s; }
.modal-overlay.active #checkoutForm > .form-card:nth-of-type(5) { animation-delay: .30s; }
.modal-overlay.active #checkoutForm > .btn-block { animation-delay: .36s; }
@keyframes motion-form-in {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to { opacity: 1; transform: none; }
}
#returnStoreModal.active .return-from-store-card,
#returnStoreModal.active #retStoreStep1 .form-group,
#returnStoreModal.active #retStoreStep1 .btn,
#returnStoreModal.active #retStoreStep2 .form-group,
#returnStoreModal.active #retStoreStep2 .btn {
  animation: motion-form-in .5s var(--motion-ease) both;
}
#returnStoreModal.active #retStoreStep1 .form-group:nth-child(1) { animation-delay: .08s; }
#returnStoreModal.active #retStoreStep1 .form-group:nth-child(2) { animation-delay: .16s; }
#returnStoreModal.active #retStoreStep1 .btn { animation-delay: .24s; }

/* Loading screen: quiet pulse rather than a full spin ----------------- */
.site-loader-mark,
.site-loader-mark::after {
  animation: motion-loader-pulse 1.8s ease-in-out infinite !important;
}
.site-loader-mark::after { animation-delay: .18s !important; }
@keyframes motion-loader-pulse {
  0%, 100% { transform: scale(.94); opacity: .72; }
  50% { transform: scale(1); opacity: 1; }
}

/* Reduced motion is a complete accessibility mode -------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
  }
  .motion-navbar,
  .motion-top-bar,
  .motion-trust,
  .motion-hero,
  .motion-reveal,
  .motion-stagger-item,
  .motion-footer-part,
  .motion-section-head .motion-section-part,
  .cta-banner-wrap,
  .footer.motion-footer-ready .footer-col,
  .footer.motion-footer-ready .footer-bottom,
  .footer.motion-footer-ready .footer-powered,
  .motion-hero .hero-content > *,
  .motion-hero .hero-visual .hero-card,
  .motion-hero .hero-visual .hero-floating-badge {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    animation: none !important;
  }
  .product-image-wrap.motion-image-loading::before { animation: none !important; }
  .product-image-wrap.motion-image-loading img,
  .product-image-wrap.motion-image-loaded img { opacity: 1; transform: none; }
}

@media (max-width: 768px) {
  .motion-reveal,
  .motion-stagger-item,
  .motion-footer-part {
    transform: translate3d(0, 20px, 0) scale(.99);
  }
  .motion-section-head .motion-section-part { transform: translate3d(0, 20px, 0); }
  .motion-stagger-item { transition-delay: calc(var(--motion-index, 0) * .08s); }
  .motion-hero .hero-content > *,
  .motion-hero .hero-visual .hero-card,
  .motion-hero .hero-visual .hero-floating-badge {
    transition-duration: .65s;
  }
  .hero-floating-badge.motion-floating-ready { animation: none; }
}

/* Mobile RTL scrollbar polish: keep scrolling, remove the persistent beige gutter/line. */
@media (max-width: 768px) {
  html,
  body {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  html::-webkit-scrollbar,
  body::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
}

@media (max-width: 768px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    scrollbar-gutter: auto;
  }
  html::-webkit-scrollbar,
  body::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
  }
}

/* Cross-browser fallback for mobile browsers that reserve an RTL scrollbar gutter. */
html,
body {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

@media (max-width: 768px) {
  html,
  body {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
}

/* Touch scrolling guard: allow vertical page gestures outside active overlays. */
html,
body {
  overscroll-behavior-y: auto;
}
@media (max-width: 768px) {
  body:not(.modal-open) {
    overflow-y: auto !important;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }
  html:not(.modal-open) {
    touch-action: pan-y;
  }
}

/* Final touch-scroll recovery: make the root scrolling context explicit. */
html:not(.modal-open) {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
@media (max-width: 768px) {
  html:not(.modal-open),
  body:not(.modal-open) {
    min-height: 100%;
    touch-action: pan-y !important;
  }
  body:not(.modal-open) {
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
}

/* Root-scroll fix for touch browsers: HTML owns page scrolling; BODY must not become a nested scroller. */
html:not(.modal-open) {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  touch-action: pan-y !important;
}
html.modal-open {
  overflow: hidden !important;
}
body:not(.modal-open) {
  overflow-y: visible !important;
  overflow-x: clip !important;
  touch-action: pan-y !important;
}
body.modal-open {
  overflow: hidden !important;
}

/* Hero motion disabled by request: restore the original static presentation. */
.hero.motion-hero,
.motion-hero .hero-content > *,
.motion-hero .hero-visual .hero-card,
.motion-hero .hero-visual .hero-floating-badge {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
  animation: none !important;
  will-change: auto !important;
}
.hero .hero-content,
.hero .hero-visual,
.hero .hero-card,
.hero .hero-floating-badge {
  animation: none;
}