/* Astroman Motion — astroman.ge
   Everything here is transform and opacity. Nothing runs on an element that is
   off screen: entrances fire once as things come into view (motion.js adds
   .am-in), the lean exists only on the card under the pointer (.am-tilt), and
   button light moves only on hover. Reduced-motion turns it all off. */

html.am-motion { --am-ease: cubic-bezier(.2, .7, .2, 1); --am-out: cubic-bezier(.16, 1, .3, 1); }

/* ── Entrances: rise once into view ───────────────────────────── */
html.am-motion .am-rise { opacity: 0; transform: translateY(26px); }
html.am-motion .am-rise.am-in {
  opacity: 1; transform: none;
  transition: opacity .6s var(--am-out) var(--am-d, 0ms), transform .8s var(--am-out) var(--am-d, 0ms);
}
/* A layer of its own only while it moves (motion.js drops .am-go at the end), so a hundred cards
   waiting below the fold cost nothing and the ones in flight never repaint their neighbours. */
html.am-motion .am-go { will-change: transform, opacity; }
html.am-motion .am-now, html.am-motion .am-now .liner-continer::after, html.am-motion .am-now .woodmart-title-container::after { transition: none !important; }
/* A card deals in: lower, smaller and a touch turned, then settles. */
html.am-motion .am-deal { opacity: 0; transform: translateY(34px) scale(.96) rotate(-1deg); }
html.am-motion .am-deal.am-in {
  opacity: 1; transform: none;
  transition: opacity .5s var(--am-out) var(--am-d, 0ms), transform .75s var(--am-out) var(--am-d, 0ms);
}
/* Section titles: the text rises, the line beneath it draws. */
html.am-motion .am-rise .liner-continer::after,
html.am-motion .am-rise .woodmart-title-container::after { transform-origin: left center; }
html.am-motion .title-wrapper.am-rise:not(.am-in) .liner-continer::after,
html.am-motion .title-wrapper.am-rise:not(.am-in) .woodmart-title-container::after { transform: scaleX(0); }
html.am-motion .title-wrapper.am-rise.am-in .liner-continer::after,
html.am-motion .title-wrapper.am-rise.am-in .woodmart-title-container::after { transition: transform .9s var(--am-out) calc(var(--am-d, 0ms) + 250ms); }

/* ── Product cards: lean toward the pointer, glare follows ──────── */
html.am-motion .wd-product .product-element-top {
  --am-rx: 0deg; --am-ry: 0deg; --am-gx: 50%; --am-gy: 50%;
  position: relative; transform-style: preserve-3d;
  transition: transform .55s var(--am-ease), box-shadow .55s var(--am-ease);
}
html.am-motion .wd-product .product-element-top.am-tilt {
  will-change: transform;
  transform: perspective(900px) rotateX(var(--am-rx)) rotateY(var(--am-ry)) translateZ(0) scale(1.025);
  transition: transform .09s ease-out, box-shadow .4s var(--am-ease);
  box-shadow: 0 26px 40px -24px rgba(10, 14, 40, .45);
  z-index: 2;
}
html.am-motion .wd-product .product-element-top.am-tilt .product-image-link img { transform: scale(1.04); }
html.am-motion .wd-product .product-image-link img { transition: transform .8s var(--am-out); }
/* The glare: one oversized sheet moved by translate, present only while leaning. */
html.am-motion .wd-product .product-element-top.am-tilt::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; border-radius: inherit;
  background: radial-gradient(circle at var(--am-gx) var(--am-gy), rgba(255, 255, 255, .34), rgba(255, 255, 255, .06) 28%, transparent 56%);
  mix-blend-mode: soft-light; opacity: 0; animation: am-glare-in .35s ease-out forwards;
}
@keyframes am-glare-in { to { opacity: 1; } }
/* The name and price rise a little toward the lifted card. */
html.am-motion .wd-product .product-element-bottom { transition: transform .5s var(--am-ease); }
html.am-motion .wd-product.am-hot .product-element-bottom { transform: translateY(-3px); }

/* Sale label: a single pass of light when its card comes into view. */
html.am-motion .wd-product.am-deal.am-in .product-label.onsale { position: relative; overflow: hidden; }
html.am-motion .wd-product.am-deal.am-in .product-label.onsale::after {
  content: ''; position: absolute; inset: -40% -60%; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .55) 50%, transparent 60%);
  transform: translateX(-80%); animation: am-sweep-once 1.1s var(--am-ease) calc(var(--am-d, 0ms) + 700ms) both;
}
@keyframes am-sweep-once { to { transform: translateX(80%); } }

/* ── Buttons: lift on hover, a pass of light across them ─────────── */
html.am-motion :is(.btn, .button, .wd-add-btn > a, .amsr-cta, .elementor-button, .wd-button-wrapper a) {
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform .25s var(--am-ease), box-shadow .25s var(--am-ease), background-color .25s, color .25s, border-color .25s;
}
html.am-motion :is(.btn, .button, .amsr-cta, .elementor-button, .wd-button-wrapper a)::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
  transform: translateX(-110%);
}
@media (hover: hover) and (pointer: fine) {
  html.am-motion :is(.btn, .button, .amsr-cta, .elementor-button, .wd-button-wrapper a):hover { transform: translateY(-2px); }
  html.am-motion :is(.btn, .button, .amsr-cta, .elementor-button, .wd-button-wrapper a):hover::after { transform: translateX(110%); transition: transform .8s cubic-bezier(.3, .6, .2, 1); }
  html.am-motion :is(.btn, .button, .amsr-cta, .elementor-button, .wd-button-wrapper a):active { transform: translateY(0) scale(.97); transition-duration: 70ms; }
}

/* ── Info boxes, brands, posts: the icon nods, the image lifts ──── */
html.am-motion .wd-info-box .info-box-icon { transition: transform .5s var(--am-out); }
@media (hover: hover) { html.am-motion .wd-info-box:hover .info-box-icon { transform: translateY(-4px) rotate(-6deg); } }
html.am-motion .wd-post .post-img-wrapp img, html.am-motion .wd-post .entry-thumbnail img { transition: transform .9s var(--am-out); }
@media (hover: hover) { html.am-motion .wd-post:hover :is(.post-img-wrapp, .entry-thumbnail) img { transform: scale(1.05); } }
html.am-motion .wd-brand-item, html.am-motion .brand-item { transition: transform .4s var(--am-ease), opacity .4s; }
@media (hover: hover) { html.am-motion :is(.wd-brand-item, .brand-item):hover { transform: translateY(-4px); } }

/* ── Header: the logo answers a hand ───────────────────────────── */
html.am-motion .wd-logo img { transition: transform .6s cubic-bezier(.18, 1.25, .3, 1); }
@media (hover: hover) { html.am-motion .wd-logo:hover img { transform: rotate(-4deg) scale(1.03); } }

/* ── Off: reduced motion, and anything we must never move ────────── */
@media (prefers-reduced-motion: reduce) {
  html.am-motion .am-rise, html.am-motion .am-deal { opacity: 1; transform: none; transition: none; }
  html.am-motion .am-rise .liner-continer::after, html.am-motion .am-rise .woodmart-title-container::after { transform: none; transition: none; }
  html.am-motion .wd-product .product-element-top.am-tilt { transform: none; box-shadow: none; }
  html.am-motion .wd-product .product-element-top.am-tilt::after, html.am-motion .product-label.onsale::after { animation: none; }
  html.am-motion :is(.btn, .button, .amsr-cta, .elementor-button, .wd-button-wrapper a):hover::after { transition: none; transform: translateX(-110%); }
}
/* Woodmart's own quick-shop and hover-tiled transitions on the card keep working; we never touch
   .wd-carousel-wrap (the slider moves it) or the single-product gallery. */
html.am-motion .single-product .product-element-top { transform: none !important; }