/* motion.css - all animations (pure CSS, transform/opacity only => no layout shift).
   Reveal hidden-state only exists under html.js (set by an inline script in head.php), so with JS off/broken nothing is hidden.
   Safety net: even if motion.js dies, .rv elements fade in by themselves after 3s. Disabled entirely by prefers-reduced-motion. */
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes rv-safe{to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(.4)}60%{transform:scale(1.3)}100%{transform:scale(1)}}
@keyframes heroBg{from{transform:scale(1.05)}to{transform:scale(1)}}
@keyframes added{0%{transform:scale(1)}40%{transform:scale(.96)}100%{transform:scale(1)}}

/* scroll reveal (class .rv is added by motion.js; --d = stagger delay, --x = side offset) */
.js .rv:not(.in){opacity:0;transform:translate(var(--x,0),var(--y,18px));animation:rv-safe .01s 3s forwards}
.js .rv{transition:opacity .6s ease var(--d,0ms),transform .6s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
:where(.js .rv.in){opacity:1;transform:none}
.js .rv.done{transition:transform .2s ease,box-shadow .2s ease,opacity .2s}
/* timeline cards come from their own side (mirrored in RTL) */
.tl-row .tl-card{--x:42px;--y:0px}.tl-row.alt-row .tl-card{--x:-42px}
[dir=rtl] .tl-row .tl-card{--x:-42px}[dir=rtl] .tl-row.alt-row .tl-card{--x:42px}
.tl-art{--y:0px}
@media(max-width:820px){.tl-row .tl-card,.tl-row.alt-row .tl-card,[dir=rtl] .tl-row .tl-card,[dir=rtl] .tl-row.alt-row .tl-card{--x:0px;--y:22px}}

/* hero soft entrance (CSS only) */
.hero::before{animation:heroBg 1.6s ease-out both}
.hero-in>*{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
.hero-in>*:nth-child(2){animation-delay:.08s}.hero-in>*:nth-child(3){animation-delay:.16s}.hero-in>*:nth-child(4){animation-delay:.24s}

/* hover lift (only on devices that hover) */
@media(hover:hover){
  .pc,.tl-card,.ig-c,.good-card,.profile-card{transition:transform .2s ease,box-shadow .2s ease}
  .pc:hover,.tl-card:hover{transform:translateY(-4px);box-shadow:0 10px 26px rgba(59,31,20,.16)}
  .ig-c:hover{transform:translateY(-4px)}
  .pc-img img,.tl-img img{transition:transform .5s ease}.pc:hover .pc-img img,.tl-card:hover .tl-img img{transform:scale(1.04)}
  .pc-img,.tl-img{overflow:hidden}
  .btn{transition:transform .15s ease,box-shadow .15s ease,background .15s,color .15s}
  .btn:hover{transform:translateY(-1px)}
  .btn-offset:hover{transform:translate(1px,1px)}
}
/* button press + add-to-cart feedback */
.btn:active{transform:scale(.97)}.btn-offset:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--b)}
.btn.adding{animation:added .35s ease;pointer-events:none}
body.cart-added .cnt{animation:pop .55s ease}
body.cart-added .notice.ok{animation:rise .4s ease both}
.cartlink .cnt{transform-origin:center}
/* header shadow on scroll */
.hdr{transition:box-shadow .25s ease}.hdr.scrolled{box-shadow:0 4px 18px rgba(59,31,20,.12)}
/* FAQ chevron + smooth height are handled in motion.js (height) and here (icon) */
.faq summary::after{transition:transform .2s}
.hfaq details,.faq details{overflow:hidden}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .rv:not(.in){opacity:1!important;transform:none!important}
}