/* Homepage motion layer — subtle, RTL-aware, transform/opacity only */
:root{--motion-fast:250ms;--motion-base:360ms;--motion-slow:480ms;--motion-ease:cubic-bezier(.22,.61,.36,1)}
/* Progressive enhancement: reveal elements are hidden only after JS confirms motion support. */
html.motion-ready .reveal{opacity:0;transform:translateY(20px);transition:opacity var(--motion-base) var(--motion-ease),transform var(--motion-base) var(--motion-ease);transition-delay:var(--reveal-delay,0ms)}
html.motion-ready .reveal.is-visible{opacity:1;transform:none}
html.motion-ready .hero-motion{opacity:0;transform:translateY(16px);transition:opacity var(--motion-slow) var(--motion-ease),transform var(--motion-slow) var(--motion-ease);transition-delay:var(--hero-delay,0ms)}
html.motion-ready .hero-motion.is-visible{opacity:1;transform:none}
/* Header state is toggled by an IntersectionObserver sentinel. Shadow itself is not animated. */
.home-motion .nav.is-scrolled{box-shadow:0 10px 28px rgba(8,43,80,.10)}
/* Reserve useful space while CMS content arrives, then release it after rendering. */
.home-motion #homeOffers.is-loading{min-height:190px}.home-motion #homeNews.is-loading{min-height:260px}.home-motion #homeBranches.is-loading{min-height:220px}.home-motion #investedShops.is-loading{min-height:112px}
.home-motion .motion-skeleton{display:grid;place-items:center;min-height:inherit;border:1px solid #dbe6ef;border-radius:14px;background:#f7faff;color:#60758a;animation:motionPulse 1.25s ease-in-out infinite}
@keyframes motionPulse{0%,100%{opacity:.48}50%{opacity:.9}}
/* Existing cards keep their design; interaction motion is restrained. */
@media (hover:hover) and (pointer:fine){
 .home-motion .service,.home-motion .home-offer-card,.home-motion .home-news-card,.home-motion .branch{transition:transform var(--motion-fast) var(--motion-ease)}
 .home-motion .service:hover,.home-motion .home-offer-card:hover,.home-motion .home-news-card:hover,.home-motion .branch:hover{transform:translateY(-4px)}
 .home-motion .btn{transition:transform var(--motion-fast) var(--motion-ease)}.home-motion .btn:hover{transform:scale(1.02)}
 .home-motion .contact-card .contact-icon{transition:transform var(--motion-fast) var(--motion-ease)}.home-motion .contact-card:hover .contact-icon{transform:translateY(-3px)}
}
@media (hover:none){
 .home-motion .service:active,.home-motion .home-offer-card:active,.home-motion .home-news-card:active,.home-motion .branch:active{transform:translateY(-2px)}
 .home-motion .btn:active{transform:scale(.985)}
 .home-motion .contact-card:active .contact-icon{transform:translateY(-2px)}
}
/* Mobile menu remains in layout only while open, with RTL entrance from the right. */
@media(max-width:980px){
 html.motion-ready .home-motion .links.mobile-open{animation:rtlMenuIn var(--motion-fast) var(--motion-ease) both}
 @keyframes rtlMenuIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
}
@media(prefers-reduced-motion:reduce){
 html.motion-ready .reveal,html.motion-ready .hero-motion{opacity:1!important;transform:none!important;transition:none!important}
 .home-motion .motion-skeleton{animation:none!important;opacity:.75}
 html.motion-ready .home-motion .links.mobile-open{animation:none!important}
 .home-motion .service,.home-motion .home-offer-card,.home-motion .home-news-card,.home-motion .branch,.home-motion .btn,.home-motion .contact-icon{transition:none!important}
}