/* produkts.it — stile comune della bozza. Le pagine tengono gli stili inline dei mockup di Claude Design; qui stanno animazioni, stati e componenti condivisi. */
html,body{overflow-x:clip;max-width:100%}
/* La barra di scorrimento non deve spostare il contenuto: spazio riservato su entrambi i lati, così resta centrato */
html{scrollbar-gutter:stable both-edges}
/* Barra di scorrimento: sottile e scura, arancio al passaggio (Chrome, Edge, Safari); Firefox usa i suoi colori */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#080808}
::-webkit-scrollbar-thumb{background:#2E2E2E;border-radius:10px;border:3px solid #080808}
::-webkit-scrollbar-thumb:hover{background:#B46428}
::-webkit-scrollbar-thumb:active{background:#D98A4E}
::-webkit-scrollbar-corner{background:#080808}
@supports (-moz-appearance:none){html{scrollbar-width:thin;scrollbar-color:#3A3A3A #080808}}
body{margin:0;background:#080808;color:#E8E4DF;font-family:'Space Grotesk',sans-serif;-webkit-font-smoothing:antialiased}
@media (max-width:640px){[style*="px 56px"],[style*="padding: 0 56px"]{padding-left:16px!important;padding-right:16px!important}}
a{color:#E8E4DF;text-decoration:none}a:hover{color:#D98A4E}
a:focus-visible,button:focus-visible{outline:1px solid #D98A4E;outline-offset:4px}
[hidden]{display:none!important}
.if{display:contents}

/* Selezione del testo: arancio senza sfondo; il testo già arancio diventa blu */
::selection{color:#B46428;background:transparent}
[style*="#B46428"]::selection,[style*="#D98A4E"]::selection,[style*="#B46428"] *::selection,[style*="#D98A4E"] *::selection{color:#336699;background:transparent}

/* Intro del logo: solo all'ingresso sul sito e alla ricarica (deciso nello script in <head>) */
html.intro{overflow:hidden}
html.intro body::before{content:'';position:fixed;inset:0;background:#080808;z-index:99}
html.intro body>*:not(.loader),html.intro body>*:not(.loader) *{animation-play-state:paused!important}
.loader{position:fixed;inset:0;z-index:100;background:#080808;display:flex;align-items:center;justify-content:center;cursor:pointer;
  border-bottom:1px solid #B46428;transition:transform .8s cubic-bezier(.77,0,.18,1) .18s}
.loader.out{transform:translateY(-101%);pointer-events:none}
.loader svg{width:min(80vw,520px);height:auto;overflow:visible;transition:opacity .45s ease,filter .45s ease,transform .6s cubic-bezier(.6,0,.2,1)}
.loader.out svg{opacity:0;filter:blur(6px);transform:translateY(-18px) scale(.94)}
.loader .g{fill:none;stroke:#a7a9ac;stroke-opacity:.32;stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1;animation:lddraw .9s cubic-bezier(.6,0,.2,1) both}
.loader .g.d1{animation-delay:.35s}.loader .g.d2{animation-delay:.45s}.loader .g.d3{animation-delay:.55s}.loader .g.d4{animation-delay:.65s}.loader .g.d0{animation-delay:.25s}
.loader .c{fill:none;stroke:#336699;stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:lddraw .6s cubic-bezier(.2,.7,.2,1) .05s both}
.loader .ring{transform-box:fill-box;transform-origin:center;animation:ldfocus 1s cubic-bezier(.2,.7,.1,1) .8s both}
.loader .dot{transform-box:fill-box;transform-origin:center;animation:ldpop .5s cubic-bezier(.3,1.6,.5,1) 1.45s both}
.loader .ring,.loader .dot{fill:#B46428}
.loader .word{animation:ldwipe .9s cubic-bezier(.6,0,.2,1) 1.35s both}
.loader .w{fill:#E8E4DF}.loader .wi{fill:#9A948C}
.loader .skip{position:absolute;left:0;right:0;bottom:max(28px,env(safe-area-inset-bottom,0px));text-align:center;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#9A948C;animation:fadein .6s ease .9s both;transition:opacity .3s}
.loader.out .skip{opacity:0}
.loader .skip .t{display:none}
@media (hover:none),(pointer:coarse){.loader .skip .c{display:none}.loader .skip .t{display:inline}}
@keyframes lddraw{to{stroke-dashoffset:0}}
@keyframes ldfocus{0%{opacity:0;transform:scale(2.4);filter:blur(6px)}60%{opacity:1;transform:scale(.94);filter:blur(0)}100%{opacity:1;transform:none;filter:blur(0)}}
@keyframes ldpop{from{opacity:0;transform:scale(0)}to{opacity:1;transform:none}}
@keyframes ldwipe{from{clip-path:inset(0 100% 0 0);filter:blur(4px)}to{clip-path:inset(0 0 0 0);filter:blur(0)}}

/* Passaggio tra le pagine: dissolvenza con leggero movimento (View Transitions tra documenti) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:pgout .35s cubic-bezier(.7,0,.8,.3) both}
::view-transition-new(root){animation:pgin .55s cubic-bezier(.2,.7,.2,1) .1s both}
@keyframes pgout{to{opacity:0;transform:translateY(-12px)}}
@keyframes pgin{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
/* Transizioni interne alla pagina (filtri, elenchi): la pagina resta ferma, si muovono gli elementi */
html.vt-local::view-transition-old(root),html.vt-local::view-transition-new(root){animation:none}
html.vt-local::view-transition-group(*){animation-duration:.85s;animation-timing-function:cubic-bezier(.7,0,.15,1)}
html.vt-local::view-transition-new(*):only-child{animation:vtin .7s cubic-bezier(.2,.7,.2,1) .25s both}
html.vt-local::view-transition-old(*):only-child{animation:vtout .4s cubic-bezier(.7,0,.8,.3) both}
html.vt-local::view-transition-old(*),html.vt-local::view-transition-new(*){height:100%;object-fit:cover}
@keyframes vtin{from{opacity:0;transform:scale(.85) translateY(30px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes vtout{to{opacity:0;transform:scale(.85);filter:blur(6px)}}

/* Entrata degli elementi */
@keyframes rise{from{transform:translateY(110%)}to{transform:none}}
@keyframes fade{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes lb{from{height:50%}to{height:0}}
@keyframes lbv{from{width:50%}to{width:0}}
@keyframes kb{from{transform:scale(1.02)}to{transform:scale(1.1) translateY(-1.5%)}}
@keyframes laurel{from{opacity:0;transform:scale(.9);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes rec{0%,55%{opacity:1}56%,100%{opacity:.15}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes zoom{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@keyframes drawc{from{width:0;height:0}to{width:44px;height:44px}}
@keyframes drawp{from{stroke-dashoffset:60}to{stroke-dashoffset:0}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes scan{0%{transform:translateY(-100%)}100%{transform:translateY(100%)}}
@keyframes pop{0%{transform:scale(.94)}60%{transform:scale(1.04)}100%{transform:none}}
@keyframes fieldin{from{opacity:0;transform:translateY(-8px);max-height:0}to{opacity:1;transform:none;max-height:120px}}
.rise{animation:rise 1.1s cubic-bezier(.2,.7,.1,1) .15s both}
.rise.d2{animation-delay:.3s}
.fade{animation:fade 1s ease .5s both}
.fade.d2{animation-delay:.65s}
.fade.d3{animation-delay:.8s}
.fade.d4{animation-delay:.95s}
.lb{animation:lb 1.6s cubic-bezier(.7,0,.2,1) .1s both}
.lb-b{bottom:0}
.lbv{animation:lbv 1.6s cubic-bezier(.7,0,.2,1) .1s both}
.lbv-r{right:0}
.kb{animation:kb 20s ease-in-out infinite alternate}
.laurel{animation:laurel 1.2s cubic-bezier(.2,.7,.2,1) 1.1s both}
.rec{animation:rec 1.2s steps(1) infinite}
/* 4 copie della frase: metà della striscia copre sempre anche gli schermi larghi, il giro è continuo */
.marquee{animation:marquee 80s linear infinite}
.stag{animation:fade .9s ease both}
.st{animation:fade .8s ease both}
.dot{animation:pulse 2s ease infinite}
.draw{animation:drawc 1s cubic-bezier(.2,.7,.2,1) .3s both}
.scan{animation:scan 3.5s ease-in-out infinite}
.check path{stroke-dasharray:60;animation:drawp .8s ease .2s both}
.field-in{animation:fieldin .45s cubic-bezier(.2,.7,.2,1) both;overflow:hidden}
@supports (animation-timeline: view()){
  .reveal{animation:fade linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
  .line{animation:grow linear both;animation-timeline:view();animation-range:entry 10% cover 60%}
}

/* Stati al passaggio */
.btn{transition:background .3s,color .3s}
.btn:hover{background:#B46428!important;color:#080808!important}
.pill{transition:background .3s,color .3s,border-color .3s}
.pill:hover{background:#E8E4DF!important;color:#080808!important;border-color:#E8E4DF!important}
.work .frame{transition:transform .7s cubic-bezier(.2,.7,.2,1),background .5s}
.work:hover .frame{transform:scale(1.015);background:#1B1B1B}
.work .br{transition:all .45s cubic-bezier(.2,.7,.2,1)}
.work:hover .br-tl{top:8px!important;left:8px!important;width:44px!important;height:44px!important;border-color:#B46428!important}
.work:hover .br-br{bottom:8px!important;right:8px!important;width:44px!important;height:44px!important;border-color:#B46428!important}
.work .arr{display:inline-block;opacity:0;transform:translateX(-8px);transition:all .4s}
.work:hover .arr{opacity:1;transform:none}
.also{transition:color .3s,gap .4s cubic-bezier(.2,.7,.2,1)}
.also:hover{color:#E8E4DF!important;gap:12px!important}
.crow{transition:padding .5s cubic-bezier(.2,.7,.2,1),background .4s}
.crow:hover{padding-left:12px!important;background:#0D0D0D}
.row{transition:padding .5s cubic-bezier(.2,.7,.2,1),background .4s}
.row:hover{padding-left:16px!important;background:#0D0D0D}
.cl{transition:padding .5s cubic-bezier(.2,.7,.2,1)}
.cl:hover{padding-left:12px!important}
.kit{transition:border-color .4s,background .4s}
.kit:hover{border-color:#336699!important;background:#0F0F0F}
.kit .kn{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.kit:hover .kn{transform:translateX(8px)}
.card{transition:border-color .5s,transform .7s cubic-bezier(.2,.7,.2,1)}
.card:hover{border-color:#336699!important;transform:translateY(-4px)}
.chip{transition:background .3s,color .3s,border-color .3s}
.chip:hover{border-color:#E8E4DF!important}
.chip.on{animation:pop .35s ease both}
.star{transition:transform .25s}
.star:hover{transform:scale(1.15)}
.flt{transition:color .35s,border-color .35s}
.field{transition:border-color .3s}
.field:focus{outline:none;border-color:#B46428!important}
.toc a{transition:padding .4s cubic-bezier(.2,.7,.2,1),color .3s}
.toc a:hover{padding-left:10px!important}
.next .arrow{display:inline-block;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.next:hover .arrow{transform:translateX(16px)}
.next .nt{transition:letter-spacing .7s cubic-bezier(.2,.7,.2,1)}
.next:hover .nt{letter-spacing:0.02em}
.ph .img{transition:transform .9s cubic-bezier(.2,.7,.2,1),background .5s}
.ph:hover .img{transform:scale(1.03);background:#1D1D1D}
.ph .cap{opacity:0;transform:translateY(8px);transition:all .4s}
.ph:hover .cap,.ph:focus-visible .cap{opacity:1;transform:none}
.ph .ov{opacity:0;transition:opacity .4s}
.ph:hover .ov,.ph:focus-visible .ov{opacity:1}
@media (hover: none){.ph .cap,.ph .ov{opacity:1;transform:none}}
.lbx{animation:fadein .35s ease both}
.lbx .big{animation:zoom .5s cubic-bezier(.2,.7,.2,1) both}

/* Carosello dei fotogrammi (2:3) — 4 alla volta da PC, piccolo da telefono */
.car-track{display:flex;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.car-track::-webkit-scrollbar{display:none}
.car-track:focus-visible{outline:1px solid #D98A4E;outline-offset:6px}
.car-item{flex:0 0 calc((100% - 48px) / 4);aspect-ratio:2/3;background:#161616;overflow:hidden;scroll-snap-align:start}
.car-item img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.car-item:hover img{transform:scale(1.04)}
.car-btn{transition:border-color .3s,color .3s}
.car-btn:hover{border-color:#D98A4E!important;color:#D98A4E!important}
@media (max-width:640px){.car-track{gap:8px}.car-item{flex-basis:30vw;max-width:140px}.car-nav{display:none!important}}

/* Orologio di Altamura nell'intestazione; su telefono va su una riga sotto logo e menu */
.pk-hdr{flex-wrap:wrap}
.pk-clock{display:flex;align-items:center;gap:10px;margin-left:auto;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#9A948C;font-variant-numeric:tabular-nums;white-space:nowrap}
.pk-clock i{width:8px;height:8px;border-radius:50%;background:#B46428;animation:rec 1.2s steps(1) infinite}
.pk-hdr .mb{margin-left:24px}
@media (max-width:640px){.pk-clock{order:3;flex-basis:100%;margin:-8px 0 0;font-size:11px;letter-spacing:.12em}.pk-hdr .mb{margin-left:auto}}

/* Moduli: campo trappola per i bot (invisibile) e messaggio di errore */
.pk-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.pk-err{margin:0;color:#D98A4E;font-size:14px;line-height:1.5}
.pk-ts:empty{display:none}
button[data-act="send"][aria-busy="true"]{opacity:.6;cursor:progress}

/* Contatti: suggerimenti per "Dove" e calendario per "Quando" (si aprono sotto il campo) */
@keyframes pkpop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.pk-ac{position:relative}
/* il blocco che contiene una tendina aperta sta sopra ai blocchi che seguono (le animazioni di entrata creano livelli separati) */
.st:has(.pk-ac),.pk-ac{position:relative;z-index:5}
.st:has(.pk-ac [aria-expanded="true"]){z-index:6}
.pk-ac:has([aria-expanded="true"]){z-index:7}
.pk-ac-list,.pk-cal{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;margin:0;background:#0E0E0E;border:1px solid #3A3A3A;box-shadow:0 18px 40px rgba(0,0,0,.55);animation:pkpop .22s cubic-bezier(.2,.7,.2,1) both}
.pk-ac-list{list-style:none;padding:6px 0;max-height:300px;overflow-y:auto}
.pk-ac-list li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 16px;font-size:15px;color:#E8E4DF;cursor:pointer;transition:background .2s,color .2s}
.pk-ac-list li:hover,.pk-ac-list li[aria-selected="true"]{background:#1A1A1A;color:#D98A4E}
.pk-ac-p{font-size:12px;letter-spacing:.12em;color:#9A948C}
.pk-cal{max-width:360px;padding:16px;box-sizing:border-box}
.pk-cal-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.pk-cal-mese{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:24px;text-transform:capitalize}
.pk-cal-nav{width:40px;height:40px;border-radius:50%;border:1px solid #2A2A2A;background:transparent;color:#E8E4DF;font-size:20px;line-height:1;cursor:pointer;transition:border-color .3s,color .3s}
.pk-cal-nav:hover:not(:disabled){border-color:#D98A4E;color:#D98A4E}
.pk-cal-nav:disabled{opacity:.25;cursor:default}
.pk-cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
.pk-cal-g{text-align:center;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#6E6A64;padding:6px 0}
.pk-cal-d{aspect-ratio:1;min-width:0;border:1px solid transparent;border-radius:50%;background:transparent;color:#E8E4DF;font:inherit;font-size:14px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.pk-cal-d:hover:not(:disabled),.pk-cal-d:focus-visible{border-color:#D98A4E;color:#D98A4E;outline:none}
.pk-cal-d.oggi{border-color:#336699}
.pk-cal-d.on{background:#B46428;border-color:#B46428;color:#080808}
.pk-cal-d:disabled{color:#3A3A3A;cursor:default}
.pk-cal-foot{margin-top:12px;border-top:1px solid #1F1F1F;padding-top:10px}
.pk-cal-x{background:none;border:0;padding:8px 0;color:#9A948C;font:inherit;font-size:12px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.pk-cal-x:hover{color:#D98A4E}
input[readonly].field{cursor:pointer}

/* Menu */
@keyframes mopen{from{clip-path:circle(0% at calc(100% - 90px) 52px)}to{clip-path:circle(150% at calc(100% - 90px) 52px)}}
@keyframes mclose{from{clip-path:circle(150% at calc(100% - 90px) 52px)}to{clip-path:circle(0% at calc(100% - 90px) 52px)}}
@keyframes mlink{from{opacity:0;transform:translateY(60%) skewY(4deg)}to{opacity:1;transform:none}}
@keyframes pv{from{opacity:0;letter-spacing:.4em}to{opacity:1}}
.mo{animation:mopen .9s cubic-bezier(.77,0,.18,1) both}
.mo.closing{animation:mclose .6s cubic-bezier(.77,0,.18,1) both}
.ml{animation:mlink .8s cubic-bezier(.2,.7,.1,1) both}
.ml .mt{display:inline-block;transition:transform .5s cubic-bezier(.2,.7,.2,1),color .3s}
.ml:hover .mt,.ml:focus-visible .mt{transform:translateX(24px);color:#D98A4E!important}
.mfade{animation:fade .8s ease .7s both}
.pv{animation:pv .5s ease both}
/* Frame del menu: immagine, video o frase di una recensione; entra "mettendosi a fuoco" */
@keyframes pvf{from{opacity:0;filter:blur(14px);transform:scale(1.04)}to{opacity:1;filter:none;transform:none}}
.pvf{position:absolute;inset:0;overflow:hidden;animation:pvf .6s cubic-bezier(.3,.6,.2,1) both}
.pvf img,.pvf video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pvf blockquote{position:absolute;inset:0;margin:0;padding:56px 40px;display:flex;flex-direction:column;justify-content:center;gap:20px;box-sizing:border-box}
.pvf blockquote p{margin:0;font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;font-size:clamp(24px,2.4vw,34px);line-height:1.25;color:#E8E4DF;text-wrap:balance}
.pvf blockquote footer{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#9A948C}
.mb .l1,.mb .l2{transition:width .4s cubic-bezier(.2,.7,.2,1)}
.mb:hover .l1{width:16px!important}.mb:hover .l2{width:28px!important}
.mx .x1,.mx .x2{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.mx:hover .x1{transform:rotate(135deg)!important}.mx:hover .x2{transform:rotate(45deg)!important}
html.menu-open{overflow:hidden}

@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}