/* Cadouri în cutii (din demo-ul Voost) · P3 Grafică și identitate (Voost Vision).
   Se încarcă DUPĂ style.css. Ornamentele se adaugă din gfx.js; aici stau doar stilurile lor.
   Totul urmează paletele (variabilele din :root și html[data-pal]). Pe telefon nimic fix sau lipit. */

:root{--gfx-ul:none}

/* ── 1. Granulație de film: textură care se derulează odată cu pagina (fundal, niciodată peste text) */
body{background-image:url(img/gfx/grain.png)}
footer.site{background-color:var(--bg0);background-image:url(img/gfx/grain.png),radial-gradient(55% 80% at 100% 100%,color-mix(in srgb,var(--glow) 50%,transparent),transparent 72%)}

/* hero: granulație + lumina roșie de laborator, sub text (.wrap e la z 2, .hnote/.hcap la 3) */
.hero > .gfx-grain,.hero > .gfx-leak{position:absolute;inset:0;pointer-events:none;z-index:1}
.hero > .gfx-grain{background:url(img/gfx/grain-o.png);mix-blend-mode:overlay;opacity:.05}
/* pe ecrane tactile, peste canvasul animat, fără blend mode (încă o trecere de compoziție pe fiecare cadru) */
@media (hover:none),(max-width:900px){.hero > .gfx-grain{background-image:url(img/gfx/grain.png);mix-blend-mode:normal;opacity:1}}
.hero > .gfx-leak{background:radial-gradient(60% 50% at 8% 92%,var(--glow),transparent 70%);opacity:.6}
/* legenda și notița rămân lizibile peste pozele luminoase */
.hero .hcap,.hero .hnote{isolation:isolate}
.hero .hcap::before,.hero .hnote::before{content:"";position:absolute;inset:-26px -22px -18px -56px;background:radial-gradient(closest-side,rgba(9,7,6,.6),transparent);z-index:-1;pointer-events:none}

/* ── 2. Bandă de film între secțiuni */
.gfx-film{position:relative;height:34px;margin:0 0 44px;background:var(--bg0);border-block:1px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden;pointer-events:none}
.sec + .gfx-film{margin-top:-44px}
.gfx-film::before,.gfx-film::after{content:"";position:absolute;left:0;right:0;height:8px;background:var(--bg3);
  -webkit-mask:url(img/gfx/perf.svg) 50% 0/24px 8px repeat-x;mask:url(img/gfx/perf.svg) 50% 0/24px 8px repeat-x}
.gfx-film::before{top:5px}
.gfx-film::after{bottom:5px}
.gfx-film span{position:relative;font:500 9.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;color:color-mix(in srgb,var(--gold) 55%,transparent)}
.gfx-film--foot{margin:40px 0 0}
.gfx-film--foot + footer.site{margin-top:0;border-top:0}

/* ── 3. Sublinieri de mână (data URI din --red2, refăcut de gfx.js la schimbarea paletei) */
.hero h1 em,.phead h1 em,.gfx-ul em{background:var(--gfx-ul) no-repeat 0 100%/100% .2em;padding-bottom:.06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* săgeata desenată de lângă vitrina 3D (doar pe desktop) */
.gfx-try{position:relative;display:inline-block;width:0;height:0;vertical-align:baseline}
.gfx-try-in{position:absolute;left:22px;top:-30px;display:flex;align-items:flex-start;gap:2px;white-space:nowrap;transform:rotate(-4deg);transform-origin:0 50%}
.gfx-try i{font:600 25px/1 var(--hand);font-style:normal;color:var(--gold2);letter-spacing:0;text-transform:none}
.gfx-try svg{width:52px;height:38px;margin-top:10px;fill:none;stroke:var(--gold2);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
@media (prefers-reduced-motion:no-preference){
  .gfx-try.pre path{stroke-dasharray:1;stroke-dashoffset:1}
  .gfx-try.pre i{opacity:0}
  .gfx-try.go i{opacity:1;transition:opacity .4s ease-out}
  .gfx-try.go path{stroke-dashoffset:0;transition:stroke-dashoffset .6s cubic-bezier(.45,0,.2,1)}
  .gfx-try.go path + path{transition-duration:.22s;transition-delay:.5s}
}

/* ── 4. Ștampila rotundă (copiată după semnul de pe stand) */
.gfx-stamp{position:relative;flex:none;width:116px;height:116px;align-self:center;transform:rotate(-8deg);color:#fff;-webkit-tap-highlight-color:transparent}
.gfx-stamp .gfx-st-in{position:absolute;inset:0;display:block}
.gfx-stamp svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.gfx-stamp .gfx-st-base{filter:drop-shadow(0 10px 18px rgba(0,0,0,.45))}
.gfx-stamp .st-ring{fill:var(--red)}
.gfx-stamp .st-disc{fill:var(--bg2)}
.gfx-stamp .st-hair{fill:none;stroke:var(--gold);stroke-width:1}
.gfx-stamp .st-t{fill:#fff;font-family:var(--sans);font-weight:700;font-size:13px}
.gfx-stamp .st-star{fill:#fff}
.gfx-stamp .gfx-st-txt{will-change:transform}
.gfx-stamp.pre .gfx-st-in{opacity:0}
.gfx-stamp.still{transform:rotate(-12deg)}
@media (prefers-reduced-motion:reduce){.gfx-stamp{transform:rotate(-12deg)}.gfx-stamp .gfx-st-txt{will-change:auto}}
.hero .facts > .gfx-stamp{margin-left:4px}
/* ștampila își are propria intrare (gfx.js); n-o mai urcăm și cu secvența cifrelor din fx.js */
html.mo .mo-go .facts > div.gfx-stamp{animation:none}
/* 901–1100 px: legenda pozei (.hcap) ajunge lângă rândul de cifre, așa că ștampila coboară pe rândul ei, la stânga */
@media (min-width:901px) and (max-width:1100px){
  .hero .facts > .gfx-stamp{width:96px;height:96px;margin:-12px calc(100% - 96px) 0 0}
}
/* magazin: titlul rămâne pe toată lățimea; ștampila (pusă înaintea paragrafului) stă în coloana din dreapta,
   lângă paragraf și lângă ce mai vine după el (de ex. căutarea din P4); „dense” urcă paragraful lângă ea */
.phead .gfx-stamp{width:104px;height:104px}
@media (min-width:901px){
  .phead .wrap.gfx-ph{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-auto-flow:row dense;column-gap:40px;align-items:center}
  .phead .wrap.gfx-ph > *{grid-column:1/-1}
  .phead .wrap.gfx-ph > .eyebrow{justify-self:start;margin:10px 0 6px}
  .phead .wrap.gfx-ph > .gfx-stamp ~ *{grid-column:1}
  .phead .wrap.gfx-ph > .gfx-stamp{grid-column:2;justify-self:end;margin-right:10px}
  .phead .wrap.gfx-ph > .gfx-stamp:nth-last-child(n+3){grid-row:span 2}
}

/* ── 5. Carduri de produs: prețul pe un rând, „gata în N min” pe poză, fără rând orfan */
/* prețul: „de la”, suma și unitatea sunt bucăți care nu se rup; dacă unitatea („/ literă”, „/ buc”) nu încape,
   trece singură pe rândul următor (cardurile înguste de pe telefon), altfel totul stă pe un rând */
a.pcard .price{display:inline-flex;flex-wrap:wrap;align-items:baseline;column-gap:.36em;row-gap:5px;white-space:nowrap}
a.pcard .pr{justify-content:flex-start}
a.pcard .pr .t20{position:absolute;top:10px;right:10px;z-index:3;display:inline-flex;align-items:center;gap:5px;height:26px;box-sizing:border-box;padding:0 8px;background:rgba(9,7,6,.82);border:1px solid var(--line2);border-radius:2px;font:600 11px/1 var(--mono);letter-spacing:.06em;color:var(--text);white-space:nowrap;pointer-events:none}
a.pcard .pr .t20 svg{width:12px;height:12px;color:var(--red2);flex:none}
/* card îngust cu etichete în stânga sus („preț de la atelier”, „nou”, care pot ocupa două rânduri): ceasul coboară
   în dreapta jos a pozei (100cqw = latura pozei pătrate), deasupra locului lui „vezi în 3D”. Așa nu se suprapun nici
   pe telefon, unde „vezi în 3D” rămâne mereu vizibil (fx.css), nici la hover pe calculator. */
a.pcard{container:pcard / inline-size}
@container pcard (max-width:300px){
  a.pcard .pr .t20{letter-spacing:.02em}
  a.pcard:has(.tags > *) .pr .t20{top:calc(100cqw - 36px)}
  a.pcard:has(.tags > *):has(.v3d) .pr .t20{top:calc(100cqw - 68px)}
}
@container pcard (max-width:200px){
  a.pcard .pr .t20{height:22px;padding:0 6px;font-size:10px}
  a.pcard .pr .t20 svg{display:none}
  a.pcard:has(.tags > *) .pr .t20{top:calc(100cqw - 30px)}
  a.pcard:has(.tags > *):has(.v3d) .pr .t20{top:calc(100cqw - 64px)}
}
@media (min-width:1101px){
  #top-grid:has(>.pcard:nth-child(6):last-child),#top-grid:has(>.pcard:nth-child(9):last-child){grid-template-columns:repeat(3,1fr)}
  #top-grid:has(>.pcard:nth-child(5):last-child){grid-template-columns:repeat(5,1fr)}
}

/* ── 6. Portofoliu: printuri polaroid (rama e BORDURĂ, ca să se compună cu LQIP și cu ::after din P2) */
.masonry .ph{border:10px solid var(--paper);border-bottom-width:30px;border-radius:2px;box-shadow:0 18px 30px -18px rgba(0,0,0,.85);rotate:var(--gfx-r,0deg);transition:rotate .4s cubic-bezier(.2,.7,.2,1),translate .4s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover) and (min-width:901px){.masonry .ph:hover{rotate:0deg;translate:0 -4px}}
@media (max-width:900px){.masonry .ph{border-width:6px 6px 18px;rotate:calc(var(--gfx-r,0deg) * .5)}}
.masonry .ph.gfx-wait{border-width:0;box-shadow:none}
/* fx.js poate marca pozele de sub ecran cu .mo-rv (tranziția lui are prioritate): păstrăm și îndreptarea la hover */
html.mo .masonry > .ph.mo-rv{transition:opacity .7s cubic-bezier(.2,.7,.2,1),translate .9s cubic-bezier(.2,.7,.2,1),rotate .4s cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion:reduce){.masonry .ph,html.mo .masonry > .ph.mo-rv{transition:none}}

/* ── 7. Recenzii: bilețele prinse cu bandă adezivă */
/* doar cardurile din .revs (recenzii pe prima pagină, contactele din „Oameni frumoși”); clasa .rev mai apare
   și în alte locuri (ex. insigna „revine” din panou), unde nu vrem bandă adezivă */
.rev::before{content:none}
.revs > .rev::after{content:"";position:absolute;top:-11px;left:50%;width:84px;height:22px;margin-left:-42px;background:rgba(239,229,212,.38);transform:rotate(-3deg);pointer-events:none;
  clip-path:polygon(2% 0,98% 0,100% 22%,97% 42%,100% 62%,97% 82%,99% 100%,1% 100%,3% 80%,0 60%,3% 40%,0 20%)}
.revs > .rev:nth-child(even)::after{transform:rotate(3deg)}
.rev .gfx-q{position:absolute;right:22px;top:22px;width:46px;height:34px;fill:var(--red);opacity:.55;pointer-events:none}
/* înclinarea doar la recenzii; contactele (telefoane, adrese) rămân drepte, ca să se citească ușor */
@media (min-width:901px){
  #revs > .rev:nth-child(odd){rotate:-.6deg}
  #revs > .rev:nth-child(even){rotate:.5deg}
}
@media (max-width:900px){.revs.m-rail{padding-top:14px}}

/* ── 8. Iconițe (sprite assets/img/gfx/icons.svg) */
.gi{display:inline-block;width:1em;height:1em;flex:none;overflow:visible;vertical-align:-.15em}
.chip{display:inline-flex;gap:8px;align-items:center}
.chip .gi{width:18px;height:18px}
.chip.on .gi{color:var(--red)}
@media (prefers-reduced-motion:no-preference){.chip.on .gi{animation:gfx-pop .22s cubic-bezier(.34,1.56,.64,1)}}
@keyframes gfx-pop{from{transform:scale(.8)}to{transform:none}}
footer.site a.gfx-fi{display:flex;gap:9px;align-items:center}
footer.site a.gfx-fi .gi{width:15px;height:15px;color:var(--gold);opacity:.75}
footer.site a.gfx-fi:hover .gi{opacity:1}

/* ── 9. Stări goale */
/* coș gol: copacul „Amintiri” de pe peretele standului */
.gfx-tree{display:block;width:min(360px,80vw);height:auto;margin:0 auto 14px;overflow:visible}
.gfx-tree .br{fill:none;stroke:var(--text);stroke-opacity:.7;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.gfx-tree .br.t1{stroke-width:4}
.gfx-tree .br.t2{stroke-width:3.1}
.gfx-tree .br.t3{stroke-width:2.3}
.gfx-tree .lf{fill:#86c79a;fill-opacity:.7}
.gfx-tree .ht{fill:var(--red)}
.gfx-tree .bd{fill:none;stroke:var(--text);stroke-opacity:.55;stroke-width:1.2;stroke-linecap:round}
.gfx-tree .sg{fill:none;stroke:var(--text);stroke-opacity:.45;stroke-width:.8}
.gfx-tree .fr{fill:var(--paper)}
.gfx-tree .fi{fill:none;stroke:var(--ink);stroke-opacity:.35;stroke-width:1;stroke-dasharray:3 3}
.gfx-tree .tx{font-family:var(--hand);font-weight:700;font-size:17px;fill:var(--ink)}
.gfx-tree .am{font-family:var(--hand);font-weight:700;font-size:25px;fill:#86c79a}
.gfx-tree .swing{transform-box:view-box;transform-origin:270px 78px}
@media (prefers-reduced-motion:no-preference){
  .gfx-tree .swing{animation:gfx-swing 6s ease-in-out infinite alternate}
  .gfx-tree.off .swing{animation-play-state:paused}
}
@keyframes gfx-swing{from{transform:rotate(-2deg)}to{transform:rotate(2deg)}}

/* comandă negăsită + coloană goală în panou: doar CSS (zonele se redesenează des) */
#track .empty{grid-column:1/-1}
#track .empty::before,.kanban .cards > p.muted::before{content:"";display:block;width:160px;height:120px;margin:0 auto 18px;background:var(--gold);
  -webkit-mask:url(img/gfx/empty-order.svg) 50% 50%/contain no-repeat;mask:url(img/gfx/empty-order.svg) 50% 50%/contain no-repeat}
#track .empty::before{opacity:.85}
.kanban .cards > p.muted{text-align:center}
.kanban .cards > p.muted::before{margin:22px auto 8px;opacity:.4;-webkit-mask-image:url(img/gfx/empty-col.svg);mask-image:url(img/gfx/empty-col.svg)}

/* ── Telefon */
@media (max-width:900px){
  .gfx-film{height:26px;margin-bottom:28px}
  .sec + .gfx-film{margin-top:-24px}
  .gfx-film::before,.gfx-film::after{height:6px;-webkit-mask-size:18px 6px;mask-size:18px 6px}
  .gfx-film::before{top:3px}
  .gfx-film::after{bottom:3px}
  .gfx-film span{font-size:8.5px;letter-spacing:.16em}
  .gfx-film--foot{margin:28px 0 0}
  .gfx-try{display:none}
  .hero .facts > .gfx-stamp{grid-column:1/-1;justify-self:start;width:92px;height:92px;margin:2px 0 0}
  /* pe telefon ștampila plutește în dreapta, iar paragraful curge în jurul cercului: nu adaugă înălțime */
  .phead .wrap.gfx-ph{display:flow-root}
  .phead .wrap.gfx-ph > .gfx-stamp{float:right;width:84px;height:84px;margin:18px 2px 4px 12px;shape-outside:circle(50%);shape-margin:6px}
  .phead .wrap.gfx-ph > .gfx-stamp ~ :not(p){clear:both}
  #track .empty::before,.kanban .cards > p.muted::before{width:120px;height:90px}
}