/* YCP motion layer (16.10, research/motion_2026-10-16/MOTION.md). Loaded after ycp-sitewide / ycp-pdp / ycp-article.
 * Rules: only transform-family (translate/scale/rotate/transform), opacity, clip-path; nothing on the first paint of the hero;
 * every motion rule sits inside (prefers-reduced-motion:no-preference); hidden states exist only under html.m-on,
 * a class that assets/js/ycp-motion.js adds itself, so a failed script never hides content.
 * The reveal/press/float use the individual `translate` / `scale` / `rotate` properties so they compose with the
 * `transform` hover lifts that Elementor's global classes already set (no transition shorthands fought over). */

:root{
  --m-fast:150ms; --m-base:240ms; --m-slow:420ms; --m-reveal:600ms;
  --m-ease:cubic-bezier(.2,0,0,1);        /* standard */
  --m-ease-out:cubic-bezier(.05,.7,.1,1); /* emphasized decelerate: things arriving */
  --m-ease-in:cubic-bezier(.3,0,1,1);     /* accelerate: things leaving */
  --m-d1:8px; --m-d2:16px; --m-d3:24px;
  --m-stagger:50ms;
  --m-dir:1;                              /* +1 = reading direction points right (LTR) */
}
[dir=rtl]{--m-dir:-1}

@media (prefers-reduced-motion:no-preference){

/* ---------- 1. scroll reveal (JS marks below-the-fold items with data-m-reveal, adds .is-in once) ---------- */
html.m-on [data-m-reveal]:not(.is-in){opacity:0}
html.m-on [data-m-reveal]:focus-within{opacity:1}
html.m-on [data-m-reveal].is-in{animation:m-rise var(--m-reveal) var(--m-ease-out) calc(var(--m-i,0) * var(--m-stagger)) both}
html.m-on [data-m-reveal=head].is-in{--m-rise:12px}
html.m-on .m-swap{animation:m-rise-sm var(--m-base) var(--m-ease-out) calc(var(--m-i,0) * 30ms) backwards}
@keyframes m-rise{from{opacity:0;translate:0 var(--m-rise,var(--m-d2))}} /* implicit end = the live base value (opacity 1, no offset), so fill:both never pins hover state */
@keyframes m-rise-sm{from{opacity:0;translate:0 var(--m-d1)}}
@keyframes m-from-start{from{opacity:0;translate:calc(var(--m-dir) * -1 * var(--m-d2)) 0}}

/* ---------- 2. hero: slow Ken Burns on a copy of the section background (JS adds data-m-kb after load) ---------- */
[data-m-kb]{isolation:isolate;overflow:clip}
[data-m-kb]::before{content:"";position:absolute;inset:0;z-index:-1;background:inherit;transform-origin:50% 40%;pointer-events:none;animation:m-kb 18s ease-in-out infinite alternate}
[data-m-kb].m-paused::before{animation-play-state:paused}
@keyframes m-kb{from{transform:scale(1)}to{transform:scale(1.06)}}

/* ---------- 3. cards: one hover language — lift 2px + shadow (global class), photo 1.04, press .98 ---------- */
.elementor a.ycp-card{transition:border-color var(--m-fast) var(--m-ease),box-shadow var(--m-base) var(--m-ease),transform var(--m-base) var(--m-ease),scale var(--m-fast) var(--m-ease)}
.elementor a.ycp-card:active{scale:.98}
:is(.elementor a.ycp-card>img,.elementor a.ycp-card .ycp-stage>img,.ycp-stage img,.ycp-hp__img img,.ycp-mega-promo-img,.ycp-card__img img){transition:transform var(--m-slow) var(--m-ease),opacity var(--m-slow) var(--m-ease)}
:is(.elementor a.ycp-card:hover>img,.elementor a.ycp-card:focus-visible>img,.elementor a.ycp-card:hover .ycp-stage>img,.elementor a.ycp-card:focus-visible .ycp-stage>img){transform:scale(1.04)}
:is(.woocommerce ul.products li.product,.ycp-rv__i a,.ycp-cards--full .ycp-card,.ycp-qc__t thead a):is(:hover,:focus-within) :is(.ycp-stage img,.ycp-card__img img){transform:scale(1.04)}
.ycp-hp__c a:hover .ycp-hp__img img,.ycp-hp__c a:focus-visible .ycp-hp__img img,.ycp-mega-promo:hover .ycp-mega-promo-img{transform:scale(1.04)}
.woocommerce .related.products ul.products li.product{transition:border-color var(--m-fast) var(--m-ease),box-shadow var(--m-base) var(--m-ease),transform var(--m-base) var(--m-ease),scale var(--m-fast) var(--m-ease)}
.ycp-rv__i a{transition:border-color var(--m-fast) var(--m-ease),box-shadow var(--m-base) var(--m-ease),translate var(--m-base) var(--m-ease),scale var(--m-fast) var(--m-ease)}
.ycp-rv__i a:is(:hover,:focus-visible){translate:0 -2px}
.ycp-cards--full .ycp-card{transition:border-color var(--m-fast) var(--m-ease),box-shadow var(--m-base) var(--m-ease),translate var(--m-base) var(--m-ease)}
.ycp-cards--full .ycp-card:hover{translate:0 -2px;box-shadow:0 18px 40px -24px rgba(14,15,19,.35)}
:is(.woocommerce ul.products li.product,.ycp-rv__i a):active{scale:.98}
/* image tiles painted as section backgrounds (room tiles, brands tile): zoom a copy of the background (JS: data-m-zoom) */
[data-m-zoom]{isolation:isolate}
[data-m-zoom]::before{content:"";position:absolute;inset:0;z-index:-1;background:inherit;border-radius:inherit;pointer-events:none;transition:transform var(--m-slow) var(--m-ease)}
[data-m-zoom]:is(:hover,:focus-visible)::before{transform:scale(1.04)}

/* ---------- 4. buttons: colour eases, press .97, "לכל ה…" arrow nudges forward (left in RTL) ---------- */
:is(.elementor a.ycp-btn-primary,.elementor a.ycp-btn-ghost,.elementor a.e-button-base,.ycp-btn,.ycp-card__add,.ycp-empty-cta a,.ycp-ch__go,.ycp-ch__wa,.ycp-ch__o,.ycp-cc__b button,.ycp-sticky-atc__btn,.ycp-askrow__i,.ycp-chooser-btn,.ycp-hp__nav button,.ycp-ss__go,.ycp-filter-toggle,.ycp-more-filters,.ycp-bmore,.ycp-readmore,.ycp-chip,.ycp-qty-btn){transition:background-color var(--m-fast) var(--m-ease),border-color var(--m-fast) var(--m-ease),color var(--m-fast) var(--m-ease),box-shadow var(--m-base) var(--m-ease),transform var(--m-base) var(--m-ease),scale var(--m-fast) var(--m-ease),opacity var(--m-fast) var(--m-ease)}
:is(.elementor a.ycp-btn-primary,.elementor a.ycp-btn-ghost,.elementor a.e-button-base,.ycp-btn,.ycp-card__add,.ycp-empty-cta a,.ycp-ch__go,.ycp-ch__wa,.ycp-ch__o,.ycp-cc__b button,.ycp-sticky-atc__btn,.ycp-askrow__i,.ycp-chooser-btn,.ycp-hp__nav button,.ycp-ss__go,.ycp-filter-toggle,.ycp-chip,.ycp-qty-btn,.single_add_to_cart_button):active:not([aria-disabled=true]):not(:disabled){scale:.97}
[data-m-arrow]::after{content:"";display:inline-block;flex-shrink:0;width:1em;height:1em;margin-inline-start:.45em;vertical-align:-.14em;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E") center/contain no-repeat;transition:translate var(--m-base) var(--m-ease)}
[dir=ltr] [data-m-arrow]::after{scale:-1 1}
[data-m-arrow]:is(:hover,:focus-visible)::after{translate:calc(var(--m-dir) * 4px) 0}
.ycp-mega-all,.ycp-ss__all a{transition:color var(--m-fast) var(--m-ease)}

/* ---------- 5. header family: arrivals decelerate (240–420ms), departures accelerate (150–240ms, inside the JS hide timeouts) ---------- */
.elementor-location-header>header,.elementor-location-header header.e-con{transition:background-color var(--m-base) var(--m-ease),box-shadow var(--m-base) var(--m-ease)}
.ycp-mega-panel{transition:opacity var(--m-fast) var(--m-ease-in),transform var(--m-fast) var(--m-ease-in),visibility 0s linear var(--m-fast)}
html:not(.ycp-js) .ycp-mega-item:hover>.ycp-mega-panel,html:not(.ycp-js) .ycp-mega-item:focus-within>.ycp-mega-panel,.ycp-mega-item.is-open>.ycp-mega-panel{transition:opacity var(--m-base) var(--m-ease-out),transform var(--m-base) var(--m-ease-out),visibility 0s}
.ycp-mega-item.is-switch>.ycp-mega-panel{transition:opacity 100ms var(--m-ease),visibility 0s}
.ycp-mega-item.is-open>.ycp-mega-panel .ycp-mega-inner>*{animation:m-rise-sm var(--m-base) var(--m-ease-out) calc(var(--m-n,0) * 40ms) backwards}
.ycp-mega-label::after{transition:transform var(--m-base) var(--m-ease)}
.ycp-mega-btn svg,details>summary.ycp-mm__top::after,.ycp-ftr-acc summary::after,.ycp-acc i{transition:transform var(--m-base) var(--m-ease)}
.ycp-scrim{transition:opacity var(--m-base) var(--m-ease)}
.ycp-ss{transition:opacity var(--m-fast) var(--m-ease-in),transform var(--m-fast) var(--m-ease-in)}
.ycp-ss.is-on{transition:opacity var(--m-base) var(--m-ease-out),transform var(--m-base) var(--m-ease-out)}
.ycp-mm{transition:opacity var(--m-base) var(--m-ease),visibility 0s linear var(--m-base)}
.ycp-mm.is-open{transition:opacity var(--m-base) var(--m-ease),visibility 0s}
.ycp-mm__panel{transition:transform var(--m-base) var(--m-ease-in)}
.ycp-mm.is-open .ycp-mm__panel{transition:transform var(--m-slow) var(--m-ease-out)}
.ycp-mm.is-open .ycp-mm__item{animation:m-from-start var(--m-slow) var(--m-ease-out) calc(120ms + var(--m-n,0) * 35ms) backwards}

/* ---------- 6. sheets + dialogs: PDP add-to-cart sheet, chooser, sticky ATC, cart badge ---------- */
.ycp-sheet__scrim,.ycp-ch__scrim{transition:opacity var(--m-base) var(--m-ease)}
.ycp-sheet__panel{transition:transform var(--m-base) var(--m-ease-in)}
.ycp-sheet.is-on .ycp-sheet__panel{transition:transform var(--m-slow) var(--m-ease-out)}
.ycp-sheet.is-on .ycp-sheet__item{animation:m-rise-sm var(--m-base) var(--m-ease-out) calc(160ms + var(--m-n,0) * 40ms) backwards}
.ycp-ch__panel{transition:transform var(--m-fast) var(--m-ease-in),opacity var(--m-fast) var(--m-ease-in)}
.ycp-ch.is-on .ycp-ch__panel{transition:transform var(--m-slow) var(--m-ease-out),opacity var(--m-base) var(--m-ease)}
.ycp-ch.is-on .ycp-ch__o{animation:m-rise-sm var(--m-base) var(--m-ease-out) calc(var(--m-n,0) * 30ms) backwards}
.ycp-ch__bar span,.ycp-sheet__bar span,.ycp-ship__bar span{transition:width var(--m-slow) var(--m-ease)}
.ycp-sticky-atc{transition:transform var(--m-base) var(--m-ease-in),opacity var(--m-fast) var(--m-ease)}
.ycp-sticky-atc.is-visible{transition:transform var(--m-slow) var(--m-ease-out),opacity var(--m-fast) var(--m-ease)}
.ycp-cart-badge.m-pop{animation:m-badge var(--m-slow) var(--m-ease-out)}
@keyframes m-badge{0%{scale:.4;opacity:.3}55%{scale:1.18;opacity:1}100%{scale:1}}
:is(.single_add_to_cart_button,.ycp-card__add,.ycp-sticky-atc__btn).is-done{animation:m-pop var(--m-slow) var(--m-ease-out)}
@keyframes m-pop{0%{scale:.96}55%{scale:1.03}100%{scale:1}}
/* nth-child stagger index for menus / dialogs (reveals get --m-i from JS instead) */
:is(.ycp-mega-inner,.ycp-ch__opts)>:nth-child(2),.ycp-mm__item:nth-child(2),.ycp-sheet__item:nth-child(2){--m-n:1}
:is(.ycp-mega-inner,.ycp-ch__opts)>:nth-child(3),.ycp-mm__item:nth-child(3),.ycp-sheet__item:nth-child(3){--m-n:2}
:is(.ycp-mega-inner,.ycp-ch__opts)>:nth-child(4),.ycp-mm__item:nth-child(4),.ycp-sheet__item:nth-child(4){--m-n:3}
:is(.ycp-mega-inner,.ycp-ch__opts)>:nth-child(5),.ycp-mm__item:nth-child(5),.ycp-sheet__item:nth-child(5){--m-n:4}
:is(.ycp-mega-inner,.ycp-ch__opts)>:nth-child(6),.ycp-mm__item:nth-child(6),.ycp-sheet__item:nth-child(6){--m-n:5}
:is(.ycp-mega-inner,.ycp-ch__opts)>:nth-child(n+7),.ycp-mm__item:nth-child(n+7),.ycp-sheet__item:nth-child(n+7){--m-n:6}

/* ---------- 7. 3D icons: lift + tilt on hover of their tile, one settle when the tile reveals (no perpetual loop) ---------- */
[data-m-i3d] img[src*="icon3d"],[data-m-i3d] .ycp-i3d{transition:translate var(--m-slow) var(--m-ease-out),rotate var(--m-slow) var(--m-ease-out)}
@media (hover:hover){[data-m-i3d]:hover img[src*="icon3d"],[data-m-i3d]:hover .ycp-i3d{translate:0 -4px;rotate:-4deg}}
html.m-on .is-in[data-m-i3d] :is(img[src*="icon3d"],.ycp-i3d),html.m-on .is-in [data-m-i3d] :is(img[src*="icon3d"],.ycp-i3d){animation:m-settle var(--m-reveal) var(--m-ease-out) calc(var(--m-i,0) * var(--m-stagger) + 140ms) backwards}
@keyframes m-settle{from{opacity:0;scale:.88;translate:0 var(--m-d1)}}

/* ---------- 8. loading states: archive swap skeleton sweep, lazy images fade in over a shimmer ---------- */
.ycp-stage,.ycp-hp__img{position:relative}
.elementor-location-archive.ycp-loading .ycp-stage::after,:is(.ycp-stage,.ycp-hp__img)[data-m-wait]::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.7) 50%,rgba(255,255,255,0) 70%);animation:m-shimmer 1.2s var(--m-ease) .2s infinite backwards}
@keyframes m-shimmer{from{translate:calc(var(--m-dir) * -100%) 0}to{translate:calc(var(--m-dir) * 100%) 0}}
html.m-on [data-m-wait]>img{opacity:0}
.elementor-location-archive{transition:opacity var(--m-fast) var(--m-ease)}

/* 9. (removed 16.10 after Tal's screenshot: the scroll-driven edge dim on rail cards left the PDP 'נצפו לאחרונה' strip half-faded at 390.
   Rule kept from it: no opacity is ever mapped to scroll position; every reveal is time-based and ends at opacity 1.) */
}
}

/* reduced motion: hover/press transforms that other files set become still (colour/border feedback stays) */
@media (prefers-reduced-motion:reduce){
  .elementor a.ycp-card:is(:hover,:focus-visible,:active),.elementor a.ycp-btn-primary:is(:hover,:focus-visible),.woocommerce .related.products ul.products li.product:hover,.ycp-wa-float:hover{transform:none}
  :is(.elementor a.ycp-card:hover>img,.elementor a.ycp-card:hover .ycp-stage>img,a.ycp-card:has(.ycp-eyebrow):hover>img,.ycp-hp__c a:hover .ycp-hp__img img,.ycp-mega-promo:hover .ycp-mega-promo-img){transform:none}
}
@media print{html.m-on [data-m-reveal]{opacity:1!important;animation:none!important}[data-m-kb]::before,[data-m-zoom]::before{display:none}}