/* Ellora motion layer — inspired by the official ThemeForest demo.
   Animation only: no spacing, sizing, grid or structural layout changes. */
:root{--el-motion:cubic-bezier(.22,1,.36,1)}

html.ellora-motion [data-el-reveal]{
  opacity:0;
  transform:translate3d(0,28px,0);
  transition:opacity .72s var(--el-motion),transform .82s var(--el-motion);
  transition-delay:var(--el-delay,0ms);
  will-change:opacity,transform;
}
html.ellora-motion [data-el-reveal="left"]{transform:translate3d(-34px,0,0)}
html.ellora-motion [data-el-reveal="right"]{transform:translate3d(34px,0,0)}
html.ellora-motion [data-el-reveal="scale"]{transform:scale(.965)}
html.ellora-motion [data-el-reveal].el-inview{opacity:1;transform:none}

/* Theme-like masked heading reveal without changing text wrapping. */
html.ellora-motion [data-el-text]{
  opacity:0;
  transform:translate3d(0,30px,0);
  clip-path:inset(0 0 100% 0);
  transition:opacity .72s var(--el-motion),transform .9s var(--el-motion),clip-path .9s var(--el-motion);
  transition-delay:var(--el-delay,0ms);
  will-change:opacity,transform,clip-path;
}
html.ellora-motion [data-el-text].el-inview{opacity:1;transform:none;clip-path:inset(0 0 0 0)}

/* Image reveal / gentle zoom. The box size never changes. */
html.ellora-motion [data-el-image]{
  opacity:0;
  clip-path:inset(0 0 12% 0 round 8px);
  transition:opacity .7s var(--el-motion),clip-path 1s var(--el-motion);
  transition-delay:var(--el-delay,0ms);
  will-change:opacity,clip-path;
}
html.ellora-motion [data-el-image].el-inview{opacity:1;clip-path:inset(0 0 0 0 round 8px)}

/* Inner media zoom follows the reveal, preserving the exact card geometry. */
.intro-card img,.philosophy-image img,.why-photo img,.product-image-link img,.main-product-image-wrap img,
.contact-page .map-frame iframe,.history-grid img,.team-grid img{
  transition:transform .85s var(--el-motion),filter .5s ease,opacity .35s ease;
}
.intro-card:hover img,.why-photo:hover img,.product-card:hover .product-image-link img{transform:scale(1.045)}
.philosophy-image:hover img{transform:scale(1.025)}
.history-grid img:hover,.team-grid img:hover{transform:translateY(-3px) scale(1.012)}

/* Header / navigation polish seen in the demo family. */
.shop-topbar .topbar-inner{animation:elTopbarIn .65s var(--el-motion) both}
.shop-header .shop-brand{animation:elHeaderIn .7s var(--el-motion) .04s both}
.shop-header .shop-search{animation:elHeaderIn .7s var(--el-motion) .10s both}
.shop-header .header-actions{animation:elHeaderIn .7s var(--el-motion) .16s both}
.shop-nav{transition:box-shadow .3s ease,background-color .3s ease}
.shop-nav.el-scrolled{box-shadow:0 10px 28px rgba(8,10,14,.18)}
.nav-links>a,.nav-drop>a,.nav-contact a,.header-actions a{transition:opacity .25s ease,transform .3s var(--el-motion),color .25s ease}
.nav-links>a:hover,.nav-drop>a:hover,.nav-contact a:hover{transform:translateY(-1px)}
.header-actions a:hover{transform:translateY(-2px)}

/* Hero entrance and restrained background motion. */
html.ellora-motion .shop-hero .hero-photo{
  transform:scale(1.055) translate3d(0,var(--el-hero-y,0px),0);
  transition:transform 1.55s var(--el-motion);
  will-change:transform;
}
html.ellora-motion .shop-hero.el-hero-ready .hero-photo{transform:scale(1) translate3d(0,var(--el-hero-y,0px),0)}
html.ellora-motion .shop-hero .hero-overlay{opacity:.92;transition:opacity 1s ease}
html.ellora-motion .shop-hero.el-hero-ready .hero-overlay{opacity:1}

/* Product/cart/form interaction polish. */
.product-card,.intro-card,.benefit-card,.contact-form-card,.cart-summary,.checkout-summary,.received-sidebar{
  transition:box-shadow .38s ease,transform .4s var(--el-motion),border-color .3s ease;
}
.intro-card:hover,.benefit-card:hover,.contact-form-card:hover{box-shadow:0 18px 46px rgba(15,18,24,.07)}
.benefit-card:hover{transform:translateY(-4px)}

.add-cart-btn,.checkout-btn,.place-order-btn,.submit-message,.received-btn,.load-more,.outline-cart-btn,.mini-dark-btn{
  transition:transform .32s var(--el-motion),box-shadow .32s ease,background-color .25s ease,color .25s ease;
}
.add-cart-btn:hover,.checkout-btn:hover,.place-order-btn:hover,.submit-message:hover,.received-btn:hover,.load-more:hover,.outline-cart-btn:hover,.mini-dark-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 11px 24px rgba(12,15,20,.12);
}

.color-swatch,.size-options button,.square-action,.product-thumb,.quantity-box button,.shipping-option,.payment-option{
  transition:transform .25s var(--el-motion),box-shadow .25s ease,border-color .25s ease,background-color .25s ease;
}
.color-swatch:hover,.size-options button:hover,.square-action:hover,.product-thumb:hover{transform:translateY(-2px)}

/* Accordion content keeps the original geometry; only the opened content fades/slides in. */
.ellora-motion .faq-item.open .faq-answer,.ellora-motion .principle.open .principle-body{
  animation:elAccordionIn .36s var(--el-motion) both;
}
.ellora-motion .faq-item button span,.ellora-motion .faq-item button i,.ellora-motion .principle .toggle{
  transition:transform .28s var(--el-motion);
}

/* Footer reveal is staggered by JS, with no footer geometry changes. */
.shop-footer .footer-grid>div{will-change:opacity,transform}

@keyframes elTopbarIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes elHeaderIn{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:none}}
@keyframes elAccordionIn{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}

@media(max-width:980px){
  html.ellora-motion .shop-hero .hero-photo{transform:scale(1.035)}
  html.ellora-motion .shop-hero.el-hero-ready .hero-photo{transform:scale(1)}
  .intro-card:hover img,.why-photo:hover img,.product-card:hover .product-image-link img,.philosophy-image:hover img,
  .history-grid img:hover,.team-grid img:hover{transform:none}
  .benefit-card:hover{transform:none}
}

@media(max-width:680px){
  html.ellora-motion [data-el-reveal]{transform:translate3d(0,18px,0);transition-duration:.6s,.7s}
  html.ellora-motion [data-el-reveal="left"],html.ellora-motion [data-el-reveal="right"]{transform:translate3d(0,18px,0)}
  html.ellora-motion [data-el-text]{transform:translate3d(0,20px,0);transition-duration:.6s,.72s,.72s}
}

@media(prefers-reduced-motion:reduce){
  html.ellora-motion [data-el-reveal],html.ellora-motion [data-el-text],html.ellora-motion [data-el-image],
  html.ellora-motion .shop-hero .hero-photo,.shop-topbar .topbar-inner,.shop-header .shop-brand,.shop-header .shop-search,.shop-header .header-actions{
    opacity:1 !important;transform:none !important;clip-path:none !important;animation:none !important;transition:none !important
  }
  .intro-card img,.philosophy-image img,.why-photo img,.product-image-link img,.history-grid img,.team-grid img{transition:none !important}
}


/* Shared product hover language — mirrors the Home featured-product motion
   across Shop, Related Products and Cart recommendations without changing layout. */
@media (hover:hover) and (pointer:fine){
  .product-image-link,.related-image,.interested-image{
    --el-product-x:0px;
    --el-product-y:0px;
    position:relative;
    isolation:isolate;
    overflow:hidden;
    box-shadow:0 12px 34px rgba(13,16,22,0);
    transition:transform .42s var(--el-motion),box-shadow .42s ease;
    will-change:transform;
  }
  .product-image-link::after,.related-image::after,.interested-image::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:linear-gradient(to top,rgba(8,10,14,.08),rgba(8,10,14,0) 26%);
    opacity:0;
    transition:opacity .35s ease;
  }
  .product-image-link img,.related-image img,.interested-image img{
    transform:translate3d(var(--el-product-x),var(--el-product-y),0) scale(1.018);
    transition:transform .6s var(--el-motion),filter .42s ease;
    will-change:transform;
  }
  .product-card:hover .product-image-link,
  .product-card:focus-within .product-image-link,
  .related-card:hover .related-image,
  .related-card:focus-within .related-image,
  .interested-card:hover .interested-image,
  .interested-card:focus-within .interested-image{
    transform:translateY(-7px);
    box-shadow:0 22px 44px rgba(13,16,22,.12);
  }
  .product-card:hover .product-image-link::after,
  .product-card:focus-within .product-image-link::after,
  .related-card:hover .related-image::after,
  .related-card:focus-within .related-image::after,
  .interested-card:hover .interested-image::after,
  .interested-card:focus-within .interested-image::after{opacity:1}
  .product-card:hover .product-image-link img,
  .product-card:focus-within .product-image-link img,
  .related-card:hover .related-image img,
  .related-card:focus-within .related-image img,
  .interested-card:hover .interested-image img,
  .interested-card:focus-within .interested-image img{
    transform:translate3d(var(--el-product-x),var(--el-product-y),0) scale(1.07);
    filter:saturate(1.02) contrast(1.015);
  }
  .product-card .product-name,
  .related-card h3,
  .interested-card h3{
    transition:transform .32s var(--el-motion),opacity .3s ease;
  }
  .product-card:hover .product-name,
  .product-card:focus-within .product-name,
  .related-card:hover h3,
  .related-card:focus-within h3,
  .interested-card:hover h3,
  .interested-card:focus-within h3{transform:translateY(-2px)}

  /* Shop card action buttons now use the same glass-circle treatment as Home. */
  .product-actions{z-index:5;transform:translate(-50%,27px) scale(.96);visibility:hidden;transition:opacity .3s ease,transform .4s var(--el-motion),visibility .3s ease}
  .product-card:hover .product-actions,.product-card:focus-within .product-actions{transform:translate(-50%,0) scale(1);opacity:1;visibility:visible}
  .product-actions button{
    width:41px;height:41px;border:1px solid rgba(255,255,255,.78);background:rgba(255,255,255,.80);
    backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);box-shadow:0 7px 20px rgba(9,12,17,.12);
    transition:color .25s ease,background-color .25s ease,border-color .25s ease,transform .28s var(--el-motion),box-shadow .3s ease;
  }
  .product-actions button:hover{background:#101319;border-color:#101319;color:#fff;transform:translateY(-4px) scale(1.04);box-shadow:0 11px 24px rgba(9,12,17,.18)}
  .product-actions button:hover svg{stroke:#fff;transform:scale(.94)}
  .product-actions button svg{transition:transform .28s var(--el-motion),stroke .25s ease}

  /* Compact line-item media gets only a restrained lift/zoom. */
  .cart-thumb,.checkout-product-image{
    transition:transform .35s var(--el-motion),box-shadow .35s ease;
  }
  .cart-thumb img,.checkout-product-image img{transition:transform .55s var(--el-motion),filter .35s ease}
  .cart-row:hover .cart-thumb,.checkout-order-row:hover .checkout-product-image{transform:translateY(-3px);box-shadow:0 12px 24px rgba(13,16,22,.10)}
  .cart-row:hover .cart-thumb img,.checkout-order-row:hover .checkout-product-image img{transform:scale(1.055);filter:saturate(1.02) contrast(1.01)}
}


/* Shared product hover motion off for reduced-motion users. */
@media(prefers-reduced-motion:reduce){
  .product-image-link,.related-image,.interested-image,.cart-thumb,.checkout-product-image,
  .product-image-link img,.related-image img,.interested-image img,.cart-thumb img,.checkout-product-image img,
  .product-card .product-name,.related-card h3,.interested-card h3,.product-actions,.product-actions button{
    transition:none !important;transform:none !important;filter:none !important
  }
  .product-image-link::after,.related-image::after,.interested-image::after{transition:none !important;opacity:0 !important}
}

/* Inner-page hero headings must remain readable from the first paint.
   We keep the upward motion, but remove the mask that could momentarily clip the title. */
html.ellora-motion .shop-hero .hero-inner h1[data-el-text]{
  opacity:1;
  clip-path:none;
  transform:translate3d(0,12px,0);
  transition:transform .62s var(--el-motion);
}
html.ellora-motion .shop-hero .hero-inner h1[data-el-text].el-inview{
  opacity:1;
  clip-path:none;
  transform:none;
}