/* Cadouri în cutii (din demo-ul Voost) — stratul de mișcare (P2). Se încarcă ultimul în <head>.
   Orice stare ascunsă stă sub html.mo (pus de fx.js doar fără „reducerea mișcării”):
   fără fx.js sau cu mișcarea redusă, tot conținutul rămâne vizibil și static.
   Se animă doar transform / opacity / translate / scale / rotate. */
:root{--e-out:cubic-bezier(.2,.7,.2,1);--e-sheet:cubic-bezier(.32,.72,0,1);--e-spring:cubic-bezier(.34,1.56,.64,1);--e-in:cubic-bezier(.4,0,1,1);--e-io:cubic-bezier(.65,0,.35,1);--d-tap:90ms;--d-s:180ms;--d-m:320ms;--d-l:700ms}

@keyframes mo-fade{from{opacity:0}}
@keyframes mo-fade-out{to{opacity:0}}
@keyframes mo-up{from{opacity:0;translate:0 10px}}
@keyframes mo-pop{from{opacity:0;scale:.4}}
@keyframes mo-spin{to{rotate:360deg}}
@keyframes mo-shim{to{translate:250% 0}}
@keyframes mo-breathe{from{opacity:.25}}
@keyframes mo-prog{from{transform:scaleX(0)}}
@keyframes mo-show{to{opacity:1}}
@keyframes mo-ring{from{scale:1;opacity:.5}to{scale:2.2;opacity:0}}
@keyframes mo-tin{from{scale:1.25;opacity:0}}
@keyframes mo-nudge{50%{translate:4px 0}}
@keyframes mo-draw{to{stroke-dashoffset:0}}
@keyframes mo-sheet-in{from{opacity:0;scale:.94}}
@keyframes mo-sheet-up{from{translate:0 100%}}
@keyframes mo-sheet-out{to{opacity:0;scale:.97}}
@keyframes mo-sheet-down{to{translate:0 100%}}
@keyframes mo-lb-in{from{opacity:0;scale:.965}}
@keyframes mo-lb-out{to{opacity:0;scale:.98}}

html.mo-boot *,html.mo-boot *::before,html.mo-boot *::after{transition:none!important}

/* ── mișcare redusă: totul instant, nimic nu pulsează (livedot, pasul curent, Face ID) */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  html{scroll-behavior:auto!important}
}

/* ── atingere: hover-ul nu rămâne „lipit” după o atingere (valorile de bază din style.css) */
@media (hover:none){
  .pcard:hover{transform:none;border-color:var(--line)}
  .pcard:hover .im img,.masonry .ph:hover img{transform:none}
  .btn:hover{transform:none;box-shadow:5px 5px 0 #000;background:var(--c);border-color:var(--c)}
  .btn.sm:hover{box-shadow:3px 3px 0 #000}
  .btn.ghost:hover{background:transparent;border-color:var(--line2)}
  .btn.paper:hover{background:var(--c);border-color:var(--c)}
  .btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 #000}
  .pcard .v3d,.masonry .ph .b3d{opacity:1;transform:none}
}

/* ── apariții la scroll: decalajul folosește proprietatea translate, ca să se compună cu înclinarea */
html.mo .rv{transform:var(--rv-t,none);translate:0 18px;transition:opacity .7s var(--e-out),translate .9s var(--e-out)}
html.mo .rv.in{translate:0 0}
html.mo .mo-rv{transition:opacity .7s var(--e-out),translate .9s var(--e-out),transform .2s,border-color .2s}
html.mo .mo-rv:not(.in){opacity:0;translate:0 18px}
html.mo.mo-touch .rv:not(.in),html.mo.mo-touch .mo-rv:not(.in){translate:0 12px}
html.mo.mo-touch .rv,html.mo.mo-touch .mo-rv{transition-duration:.56s,.72s,.2s,.2s}
.poster{--rv-t:rotate(-1.2deg)}
.pol{--rv-t:rotate(2deg)}
@media (max-width:900px){.poster{--rv-t:none}}
/* titlurile de secțiune: containerul rămâne, intră pe rând eticheta, titlul, textul */
html.mo .sec-h.rv,html.mo .how.rv{opacity:1;translate:none;transition:none}
html.mo .sec-h.rv .eyebrow{opacity:0;translate:0 8px;transition:opacity .5s var(--e-out),translate .5s var(--e-out)}
html.mo .sec-h.rv h2{opacity:0;translate:0 16px;transition:opacity .9s var(--e-out) 90ms,translate .9s var(--e-out) 90ms}
html.mo .sec-h.rv>p,html.mo .sec-h.rv>.btn{opacity:0;translate:0 10px;transition:opacity .7s var(--e-out) .2s,translate .7s var(--e-out) .2s,transform .15s,box-shadow .15s,background .15s,border-color .15s}
html.mo .sec-h.rv.in .eyebrow,html.mo .sec-h.rv.in h2,html.mo .sec-h.rv.in>p,html.mo .sec-h.rv.in>.btn{opacity:1;translate:0 0}
html.mo .how.rv>div{opacity:0;translate:0 18px;transition:opacity .7s var(--e-out),translate .9s var(--e-out)}
html.mo .how.rv.in>div{opacity:1;translate:0 0}
html.mo .how.rv>div:nth-child(2){transition-delay:80ms}
html.mo .how.rv>div:nth-child(3){transition-delay:160ms}
html.mo .how.rv>div:nth-child(4){transition-delay:240ms}

/* ── sosirea pozelor (contract .lq cu P5: P2 pune .ld la încărcare) */
html.mo img.lq,html.mo img.mo-lq{transition:opacity .42s var(--e-out),scale .6s var(--e-out),transform .6s var(--e-out)}
html.mo body:not(.admin) img.lq:not(.ld):not(#track img),html.mo img.mo-lq:not(.ld){opacity:0;scale:1.03}
#show-price,#slot-l,[data-ready]{display:inline-block}

/* ── galeria: „developarea” în camera obscură, doar opacity + scale (merge și pe telefon) */
html.mo .develop{filter:none!important}
html.mo .masonry .ph img{scale:1.04;transition:opacity .42s var(--e-out),scale 1.2s var(--e-out) var(--d,0ms),transform .7s var(--e-out)}
html.mo .masonry .ph.mo-in img{scale:1}
html.mo .masonry .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#2a120c,#120807);background:linear-gradient(180deg,color-mix(in srgb,var(--reddk) 28%,var(--bg0)),var(--bg0));opacity:.82;transition:opacity 1.2s var(--e-out) var(--d,0ms);pointer-events:none;z-index:1}
html.mo .masonry .ph.mo-in::after{opacity:0}
.masonry .ph .b3d{z-index:2}
@media (hover:none){
  html.mo .masonry .ph .b3d,html.mo .pcard.mo-rv .v3d{transition:opacity .3s var(--e-out) .25s,transform .3s var(--e-out) .25s}
  html.mo .masonry .ph:not(.mo-in) .b3d,html.mo .pcard.mo-rv:not(.in) .v3d{opacity:0;transform:translateY(6px)}
}

/* ── hero: intrarea titlului rând cu rând */
html.mo-pre :is(.hero,.phead) :is(.eyebrow,h1,.lead,.ctas,.facts),html.mo-pre .hero .hnote,html.mo-pre .phead .wrap>p{opacity:0;animation:mo-show 0s 3s forwards}
html.mo .mo-h{opacity:0}
.mo-w{display:inline-block;overflow:hidden;padding:.06em .14em .14em;margin:-.06em -.14em -.14em}
.mo-w>span{display:inline-block}
/* secvența pornește când fx.js pune .mo-go (după fonturi, cel mult 500 ms); fill backwards, ca să nu blocheze translate-ul magnetic */
html.mo .mo-go .eyebrow{animation:mo-up8 .5s var(--e-out) backwards}
html.mo .mo-go h1.mo-fade{animation:mo-fade .6s var(--e-out) 80ms backwards}
html.mo .mo-go .wrap>p{animation:mo-up .7s var(--e-out) .26s backwards}
html.mo .mo-go .ctas .btn{animation:mo-up .6s var(--e-out) .36s backwards}
html.mo .mo-go .ctas .btn:nth-child(2){animation-delay:.42s}
html.mo .mo-go .ctas .btn:nth-child(3){animation-delay:.48s}
html.mo .mo-go .facts>div{animation:mo-up .6s var(--e-out) .46s backwards}
html.mo .mo-go .facts>div:nth-child(2){animation-delay:.53s}
html.mo .mo-go .facts>div:nth-child(3){animation-delay:.6s}
html.mo .mo-go .facts>div:nth-child(4){animation-delay:.67s}
html.mo .mo-go .hnote{animation:mo-note .7s var(--e-out) 1.2s backwards}
html.mo .mo-go .hnote path{animation:mo-draw1 .6s var(--e-out) 1.5s backwards}
@keyframes mo-up8{from{opacity:0;translate:0 8px}}
@keyframes mo-note{from{opacity:0;rotate:-3deg}}
@keyframes mo-draw1{from{stroke-dashoffset:1}}
html.mo .hdots button{position:relative;overflow:hidden}
html.mo .hdots button.on.mo-run{background:rgba(255,255,255,.3)}
html.mo .hdots button.on.mo-run::after{content:"";position:absolute;inset:0;background:var(--red2);transform-origin:left;animation:mo-prog 7s linear both}
html.mo .mo-paused .hdots button::after{animation-play-state:paused}

/* ── scena 3D: poster, sclipire, stări de lucru */
.mo-wait .loading{visibility:hidden}
.vstage.mo-wait .photo{opacity:.5;transition:opacity .42s}
.vstage.mo-wait.ph .photo{opacity:1}
.mo-wait canvas{opacity:0}
.vstage canvas,.show3d .stage canvas{transition:opacity .5s var(--e-out)}
.mo-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;z-index:2;pointer-events:none;transition:opacity .42s}
.mo-skel{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;display:grid;place-items:center;padding:16px;transition:opacity .42s}
.mo-skel::before{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(100deg,transparent,rgba(240,211,166,.07),transparent);translate:-100% 0}
html.mo .mo-skel::before{animation:mo-shim 1.6s linear infinite}
.mo-skel span{position:relative;display:flex;gap:10px;align-items:center;font:500 13px/1.45 var(--mono);color:var(--muted);letter-spacing:.06em;text-align:center;background:rgba(9,7,6,.62);padding:7px 12px;border-radius:2px}
.mo-poster.mo-gone,.vstage .mo-gone{transition-duration:.25s}
html.mo .vstage canvas,html.mo .show3d .stage canvas{transition-delay:.08s}
.mo-skel b{flex-shrink:0;width:7px;height:7px;border-radius:50%;background:var(--red)}
html.mo .mo-skel b{animation:mo-breathe 1.4s var(--e-io) infinite alternate}
.mo-skel.mo-slow{place-items:end center;padding-bottom:64px}
.mo-skel.mo-slow::before{display:none}
.mo-skel.mo-slow span{background:rgba(9,7,6,.86);color:var(--text);padding:11px 14px;max-width:440px;border:1px solid var(--line2);letter-spacing:.02em}
.mo-gone{opacity:0!important}
.mo-busy canvas{opacity:.7}
.mo-bar{position:absolute;left:0;right:0;top:0;height:2px;overflow:hidden;z-index:4;pointer-events:none;opacity:0;transition:opacity .2s}
.mo-bar::before{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;background:var(--red);translate:-100% 0}
.mo-busy .mo-bar{opacity:1}
.mo-busy .mo-bar::before{animation:mo-shim 1.1s var(--e-io) infinite}
.mo-tb{position:relative}
.mo-tb[aria-busy=true]::after{content:"";position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;border:2.5px solid rgba(242,233,220,.25);border-top-color:var(--red2);animation:mo-spin .8s linear infinite;z-index:2}
label.btn[aria-busy=true]::after{content:"";width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:mo-spin .8s linear infinite}
.mo-spin{display:inline-block;width:14px;height:14px;margin-right:8px;vertical-align:-2px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:mo-spin .8s linear infinite}
.mo-shutter{position:absolute;inset:0;z-index:4;pointer-events:none}
.mo-shutter i{position:absolute;left:0;right:0;height:50%;background:#000;scale:1 0}
.mo-shutter i:first-child{top:0;transform-origin:top}
.mo-shutter i:last-child{bottom:0;transform-origin:bottom}

/* ── coș: polaroidul care zboară, insigna, toast-ul */
.mo-fly{position:fixed;left:0;top:0;z-index:150;pointer-events:none}
.mo-fly>div{position:absolute;left:0;top:0}
.mo-pol{position:absolute;left:-52px;top:-58px;width:104px;padding:4px 4px 12px;background:var(--paper);box-shadow:0 14px 30px rgba(0,0,0,.55);border-radius:2px}
.mo-pol img{display:block;width:96px;height:96px;object-fit:cover;background:var(--bg0)}
.cbadge.mo-ring::after{content:"";position:absolute;inset:-1px;border:2px solid var(--red);border-radius:inherit;animation:mo-ring .5s var(--e-out) forwards;pointer-events:none}
html.mo .toast.on img{animation:mo-tin .32s var(--e-spring) 80ms both}
html.mo .toast.on a{animation:mo-nudge .5s var(--e-io) .6s}
.mo-tring{position:absolute;border:2px solid var(--gold);border-radius:3px;pointer-events:none}
/* reparație: cu left:50%, toast-ul se strângea la jumătate de ecran pe telefon (un cuvânt pe rând) */
.toast{width:max-content}

/* ── atingere: răspuns la apăsare */
html.mo-touch :is(a,button,label){-webkit-tap-highlight-color:transparent}
html.mo-touch :is(.slots button,.cal button,.fonts button,.swatches button,.pos9 button,.qty button,.vtools button,.tabs button,.adm-tabs button,.hicon,.burger){transition:scale .16s var(--e-out)}
html.mo-touch .pick3d button{transition:border-color .15s,color .15s,scale .16s var(--e-out)}
html.mo-touch .xp{transition:transform .12s,filter .12s,scale .16s var(--e-out)}
html.mo-touch :is(.chip,.seg button,.slots button,.cal button,.pick3d button,.samples button,.fonts button,.swatches button,.pos9 button,.ed-tools button,.qty button,.vtools button,.tabs button,.adm-tabs button,.hicon,.burger,.xp):active{scale:.96;transition-duration:var(--d-tap)}
html.mo-touch :is(.pcard,.tile):active{scale:.985}
:is(.btn,.chip,.seg button,.slots button,.cal button,.pcard,.tile,nav.main a,.mnav .pane a):focus-visible{outline:2px solid var(--gold2);outline-offset:3px}

/* ── bara de progres a caruselelor de pe telefon (în fluxul paginii) */
.mo-railbar{display:none}
@media (max-width:900px){
  .mo-railbar{display:block;position:relative;width:64px;height:2px;margin:14px auto 0;background:var(--line2);overflow:hidden}
  .mo-railbar[hidden]{display:none}
  .mo-railbar i{position:absolute;left:0;top:0;bottom:0;width:30%;background:var(--red)}
  /* meniul și banda de sus (mesajele lungi trec pe două rânduri, nu se taie) */
  html.mo .mnav .pane{transition:transform .38s var(--e-sheet)}
  html.mo .mnav .pane a{opacity:0;translate:-10px 0;transition:opacity .2s,translate .2s}
  html.mo .mnav.on .pane a{opacity:1;translate:0 0;transition:opacity .26s var(--e-out),translate .26s var(--e-out);transition-delay:calc(120ms + var(--i,0) * 30ms)}
  html.mo .strip .msgs.mo-rot{display:grid;grid-template-columns:minmax(0,1fr);align-items:center}
  html.mo .strip .msgs.mo-rot span{grid-area:1/1;display:block!important;min-width:0;white-space:normal;line-height:1.3;opacity:0;translate:0 6px;transition:opacity .3s var(--e-out),translate .3s var(--e-out)}
  html.mo .strip .msgs.mo-rot span>svg{display:inline-block;vertical-align:-3px;margin-right:4px}
  html.mo .strip .msgs.mo-rot span>.livedot{display:inline-block;vertical-align:1px;margin-right:4px}
  html.mo .strip .msgs.mo-rot span.mo-on{opacity:1;translate:0 0;transition-delay:.12s}
  html.mo .strip .msgs.mo-rot span.mo-out{opacity:0;translate:0 -6px;transition-delay:0s}
  /* pașii produsului: deschidere lină, închidere fără animație */
  html.mo body[data-page=produs] .step>h4{position:relative}
  html.mo body[data-page=produs] .step>h4::before{content:"";position:absolute;left:-10px;top:6px;bottom:6px;width:2px;background:var(--red);transform:scaleY(0);transform-origin:top;transition:transform .32s var(--e-out)}
  html.mo body[data-page=produs] .step:not(.closed)>h4::before{transform:scaleY(1)}
  html.mo .step>h4 .chev{transition:transform .32s var(--e-spring)}
  /* conținutul pasului trece din display:none în vizibil, deci animația pornește doar la deschidere */
  html.mo body[data-page=produs] .step:not(.closed)>:not(h4){animation:mo-stepin .28s var(--e-out) backwards}
  html.mo body[data-page=produs] .step:not(.closed)>:nth-child(3){animation-delay:35ms}
  html.mo body[data-page=produs] .step:not(.closed)>:nth-child(4){animation-delay:70ms}
  html.mo body[data-page=produs] .step:not(.closed)>:nth-child(5){animation-delay:105ms}
  html.mo body[data-page=produs] .step:not(.closed)>:nth-child(6){animation-delay:140ms}
  html.mo body[data-page=produs] .step:not(.closed)>:nth-child(n+7){animation-delay:175ms}
  html.mo body[data-page=produs] .step:not(.closed)>h4 i{animation:mo-ipop .3s var(--e-out)}
}
@keyframes mo-stepin{from{opacity:0;translate:0 -8px}}
@keyframes mo-ipop{50%{scale:1.15}}

/* ── foaia de plată: urcă de jos pe telefon, apare din centru pe calculator */
html.mo .modal.on{animation:mo-fade .24s var(--e-out)}
html.mo .modal.on .card{animation:mo-sheet-in .32s var(--e-spring)}
html.mo .modal.mo-closing{animation:mo-fade-out .2s var(--e-in) forwards;pointer-events:none}
html.mo .modal.mo-closing .card{animation:mo-sheet-out .2s var(--e-in) forwards}
@media (max-width:560px){
  html.mo .modal.on .card{animation:mo-sheet-up .44s var(--e-sheet)}
  html.mo .modal.mo-closing{animation-duration:.26s}
  html.mo .modal.mo-closing .card{animation:mo-sheet-down .26s var(--e-in) forwards}
}
html.mo .ps-ok span{animation:mo-pop .38s var(--e-spring) both}
html.mo .ps-ok svg path{stroke-dasharray:24;stroke-dashoffset:24;animation:mo-draw .36s var(--e-out) .16s forwards}
html.mo .ps-ok b,html.mo .ps-ok p{animation:mo-up .4s var(--e-out) .26s both}
.mo-ghost{position:absolute;left:0;right:0;pointer-events:none;z-index:1}
/* orele de ridicare și zilele: butoanele noi intră eșalonat (cel mult 300 ms); ziua aleasă face un mic arc */
html.mo .slots button{animation:mo-fade .22s var(--e-out) backwards}
html.mo .slots button:nth-child(n+5){animation-delay:60ms}
html.mo .slots button:nth-child(n+9){animation-delay:120ms}
html.mo .slots button:nth-child(n+13){animation-delay:180ms}
html.mo .slots button:nth-child(n+17){animation-delay:240ms}
html.mo .slots button:nth-child(n+21){animation-delay:300ms}
html.mo .cal button.on{animation:mo-cpop .26s var(--e-spring)}
@keyframes mo-cpop{from{scale:.9}}
/* confirmările: cererea de eveniment, programarea, coșul golit */
html.mo :is(#lead,#bookf,#cart)>.empty{animation:mo-up .42s var(--e-out) backwards}
html.mo :is(#lead,#bookf)>.empty .hand{animation:mo-up .42s var(--e-out) .15s backwards}

/* ── lightbox */
html.mo .lb.on{animation:mo-fade .26s var(--e-out);overscroll-behavior:contain}
html.mo .lb.on .lbs{animation:mo-lb-in .36s var(--e-out)}
html.mo .lb.mo-closing{animation:mo-fade-out .2s var(--e-in) forwards;pointer-events:none}
html.mo .lb.mo-closing .lbs{animation:mo-lb-out .2s var(--e-in) forwards}
html.mo-touch .lb.on .lbs{touch-action:none}
.lb .lbs[aria-busy=true]::after{content:"";position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;border:2.5px solid rgba(242,233,220,.25);border-top-color:var(--red2);animation:mo-spin .8s linear infinite;z-index:2;pointer-events:none}
@media (hover:none){.lb .nv{top:auto;bottom:64px;transform:none}}

/* ── comanda: pagina se reconstruiește în fiecare secundă, deci nimic animat în #track */
#track .stages li.cur .d{animation:none}
.mo-flash{position:fixed;inset:0;z-index:145;pointer-events:none}

/* ── trecerea între pagini (View Transitions native, între documente) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:.18s cubic-bezier(.4,0,1,1) both mo-fade-out}
::view-transition-new(root){animation:.3s cubic-bezier(.2,.7,.2,1) .04s both mo-up}
@media (min-width:901px){header.site{view-transition-name:hh-header}}
::view-transition-group(hh-header){animation-duration:.3s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
body[data-page=produs] #vstage{view-transition-name:hh-prod}
::view-transition-group(hh-prod){animation-duration:.38s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
html.mo-leave :is(header.site,main,footer.site){opacity:0;transition:opacity .14s var(--e-in)}

/* ── doar pe calculator: înclinare cu reflexie de lumină + butoane magnetice (după regulile de apariție) */
html.mo.mo-fine .pcard,html.mo.mo-fine .tile{transition:transform .5s var(--e-out),opacity .7s var(--e-out),translate .9s var(--e-out),border-color .2s}
html.mo.mo-fine :is(.pcard,.tile):is(:hover,.mo-tilting){transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px))}
html.mo.mo-fine .mo-tilting{transition:opacity .7s var(--e-out),translate .9s var(--e-out),border-color .2s;will-change:transform}
html.mo.mo-fine :is(.rev,.loc){transition:transform .5s var(--e-out),opacity .7s var(--e-out),translate .9s var(--e-out)}
html.mo.mo-fine :is(.rev,.loc):hover{transform:translateY(-3px)}
html.mo.mo-fine .pcard .im::after,html.mo.mo-fine .mo-glare{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),rgba(255,236,210,.16),transparent 45%);opacity:0;transition:opacity .2s}
html.mo.mo-fine .pcard:hover .im::after,html.mo.mo-fine .tile:hover .mo-glare{opacity:1}
.pcard .tags,.pcard .v3d{z-index:2}
.mo-glare{display:none}
html.mo.mo-fine .mo-glare{display:block}
html.mo .mo-mag{transition:transform .15s,box-shadow .15s,background .15s,border-color .15s!important}
.mo-mag svg{transition:none}