/* ============================================================
   OneCart V7 — 30+ CLEAN LUXURY MOTION SYSTEM
   No glow / no neon / no flashy effects.
   ============================================================ */
:root{
  --motion-ease:cubic-bezier(.22,.61,.36,1);
  --motion-fast:220ms;
  --motion-med:420ms;
}

/* 01 page entrance */
body{animation:ocPageIn .55s var(--motion-ease) both}
@keyframes ocPageIn{from{opacity:0}to{opacity:1}}

/* 02 sticky header compression */
.site-header,.header,.topbar{transition:height var(--motion-med) var(--motion-ease),padding var(--motion-med) var(--motion-ease),background var(--motion-med) ease}

/* 03 nav underline slide */
.navlinks a{position:relative;transition:color var(--motion-fast) ease}
.navlinks a:after{content:"";position:absolute;left:50%;bottom:-7px;width:0;height:1px;background:#1f5f8b;transform:translateX(-50%);transition:width var(--motion-med) var(--motion-ease)}
.navlinks a:hover:after,.navlinks a.active:after{width:70%}

/* 04 logo micro lift */
.logo,.brand{transition:transform var(--motion-med) var(--motion-ease)}
.logo:hover,.brand:hover{transform:translateY(-2px)}

/* 05 hero text stagger */
.hero .eyebrow,.hero h1,.hero p,.hero .btn{animation:ocRise .7s var(--motion-ease) both}
.hero .eyebrow{animation-delay:.05s}.hero h1{animation-delay:.12s}.hero p{animation-delay:.20s}.hero .btn{animation-delay:.28s}
@keyframes ocRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* 06 hero image cinematic zoom */
.hero img{animation:ocKenBurns 10s var(--motion-ease) both}
@keyframes ocKenBurns{from{transform:scale(1.015)}to{transform:scale(1.055)}}

/* 07 hero parallax hook */
.oc-parallax{transition:transform .18s ease-out}

/* 08 buttons subtle magnetic feel */
.btn,.lux-btn{transition:transform var(--motion-fast) var(--motion-ease),background var(--motion-fast) ease,border-color var(--motion-fast) ease,box-shadow var(--motion-fast) ease}
.btn:hover,.lux-btn:hover{transform:translateY(-2px)}
.btn:active,.lux-btn:active{transform:translateY(0) scale(.985)}

/* 09 button arrow slide */
.btn .i-arrow,.lux-btn .i-arrow{transition:transform var(--motion-fast) var(--motion-ease)}
.btn:hover .i-arrow,.lux-btn:hover .i-arrow{transform:translateX(4px)}

/* 10 category card image zoom */
.cat img,.category-card img{transition:transform .75s var(--motion-ease)}
.cat:hover img,.category-card:hover img{transform:scale(1.045)}

/* 11 category content rise */
.cat,.category-card{transition:transform var(--motion-med) var(--motion-ease),border-color var(--motion-med) ease}
.cat:hover,.category-card:hover{transform:translateY(-4px)}

/* 12 product grid stagger */
.products .product:nth-child(1){--d:.02s}.products .product:nth-child(2){--d:.06s}.products .product:nth-child(3){--d:.10s}.products .product:nth-child(4){--d:.14s}.products .product:nth-child(5){--d:.18s}.products .product:nth-child(6){--d:.22s}.products .product:nth-child(7){--d:.26s}.products .product:nth-child(8){--d:.30s}
.products .product{animation:ocProductIn .6s var(--motion-ease) var(--d,0s) both}
@keyframes ocProductIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* 13 product card lift */
.product{transition:transform var(--motion-med) var(--motion-ease),border-color var(--motion-med) ease,box-shadow var(--motion-med) ease}
.product:hover{transform:translateY(-5px);border-color:#c8d7e1;box-shadow:0 12px 28px rgba(24,50,71,.07)}

/* 14 product image zoom */
.product .pimg img,.product-image img{transition:transform .7s var(--motion-ease)}
.product:hover .pimg img,.product:hover .product-image img{transform:scale(1.035)}

/* 15 badge entrance */
.product .badge{transition:transform var(--motion-fast) var(--motion-ease)}
.product:hover .badge{transform:translateY(-2px)}

/* 16 wishlist micro interaction */
.heart{transition:transform var(--motion-fast) var(--motion-ease),color var(--motion-fast) ease}
.heart:hover{transform:scale(1.08)}
.heart:active{transform:scale(.92)}

/* 17 search focus */
.search,.searchbox{transition:border-color var(--motion-med) ease,transform var(--motion-med) var(--motion-ease)}
.search:focus-within,.searchbox:focus-within{border-color:#aebfcb;transform:translateY(-1px)}

/* 18 filter panel */
.filters,.filter-panel{transition:transform var(--motion-med) var(--motion-ease),opacity var(--motion-med) ease}

/* 19 sort control */
select,.sort-select{transition:border-color var(--motion-fast) ease,transform var(--motion-fast) var(--motion-ease)}
select:hover,.sort-select:hover{transform:translateY(-1px);border-color:#b9cad5}

/* 20 product modal scale */
.lux-modal-backdrop{animation:ocBackdrop .25s ease both}
@keyframes ocBackdrop{from{opacity:0}to{opacity:1}}
.lux-product-modal{animation:ocModal .42s var(--motion-ease) both}
@keyframes ocModal{from{opacity:0;transform:translateY(18px) scale(.975)}to{opacity:1;transform:none}}

/* 21 modal image reveal */
.lux-product-modal img{animation:ocModalImage .55s var(--motion-ease) .05s both}
@keyframes ocModalImage{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}

/* 22 quantity press */
.qty button,.quantity button{transition:transform var(--motion-fast) var(--motion-ease),background var(--motion-fast) ease}
.qty button:hover,.quantity button:hover{transform:translateY(-1px)}
.qty button:active,.quantity button:active{transform:scale(.92)}

/* 23 add-to-cart state */
.added-state{animation:ocAdded .38s var(--motion-ease) both}
@keyframes ocAdded{from{opacity:.5;transform:translateY(3px)}to{opacity:1;transform:none}}

/* 24 gallery slide-ready */
.product-gallery img{transition:opacity .35s ease,transform .55s var(--motion-ease)}
.product-gallery img:hover{transform:scale(1.02)}

/* 25 section reveal utility */
.oc-reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--motion-ease),transform .7s var(--motion-ease)}
.oc-reveal.is-visible{opacity:1;transform:none}

/* 26 editorial image parallax-ready */
.oc-editorial-image{transition:transform .7s var(--motion-ease)}

/* 27 value cards stagger */
.value-card:nth-child(1){--vd:.04s}.value-card:nth-child(2){--vd:.10s}.value-card:nth-child(3){--vd:.16s}.value-card:nth-child(4){--vd:.22s}
.value-card.oc-stagger{animation:ocValue .6s var(--motion-ease) var(--vd,0s) both}
@keyframes ocValue{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* 28 stats count visual */
.stat-number{transition:letter-spacing .45s var(--motion-ease)}
.stat-number:hover{letter-spacing:.02em}

/* 29 FAQ accordion */
.faq-item,.accordion-item{transition:border-color var(--motion-med) ease,transform var(--motion-med) var(--motion-ease)}
.faq-item:hover,.accordion-item:hover{transform:translateY(-2px);border-color:#c9d8e2}
.faq-answer,.accordion-answer{overflow:hidden;transition:max-height .45s var(--motion-ease),opacity .35s ease}

/* 30 contact cards */
.contact-card{transition:transform .45s var(--motion-ease),border-color .45s ease,box-shadow .45s ease}
.contact-card:hover{transform:translateY(-5px);border-color:#c8d7e1;box-shadow:0 12px 28px rgba(24,50,71,.07)}

/* 31 WhatsApp / CTA arrow only — no pulse */
.whatsapp,.whatsapp-btn{transition:transform var(--motion-med) var(--motion-ease),box-shadow var(--motion-med) ease}
.whatsapp:hover,.whatsapp-btn:hover{transform:translateY(-3px);box-shadow:0 10px 20px rgba(24,50,71,.10)!important}

/* 32 back-to-top reveal */
.back-top{transition:opacity .35s ease,transform .35s var(--motion-ease)}
.back-top:hover{transform:translateY(-3px)}

/* 33 mobile menu */
.mobile-menu{transition:opacity .35s ease,transform .35s var(--motion-ease)}
.mobile-menu.is-open{transform:none;opacity:1}

/* 34 breadcrumb reveal */
.breadcrumb{animation:ocBread .55s var(--motion-ease) .12s both}
@keyframes ocBread{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}

/* 35 image loading fade */
img[loading="lazy"]{animation:ocImageIn .65s ease both}
@keyframes ocImageIn{from{opacity:.65}to{opacity:1}}

/* 36 collection overlay transition */
.collection-overlay{transition:padding .55s var(--motion-ease)}
.collection-card:hover .collection-overlay{padding-bottom:42px}

/* 37 editorial headings */
.home-editorial h2,.section-title{transition:letter-spacing .45s var(--motion-ease)}
.home-editorial h2:hover,.section-title:hover{letter-spacing:-.035em}

/* 38 trust feature lift */
.features>div,.feature-item{transition:transform .4s var(--motion-ease)}
.features>div:hover,.feature-item:hover{transform:translateY(-3px)}

/* 39 footer link underline */
.footer a{position:relative;transition:color var(--motion-fast) ease}
.footer a:after{content:"";position:absolute;left:0;bottom:-3px;width:0;height:1px;background:#fff;opacity:.55;transition:width .35s var(--motion-ease)}
.footer a:hover:after{width:100%}

/* 40 smooth focus treatment */
input,textarea,select{transition:border-color .25s ease,transform .25s var(--motion-ease)}
input:focus,textarea:focus,select:focus{border-color:#9fb3c1;outline:none;transform:translateY(-1px)}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
}