/* Hero della home: mare fermo con l'isoletta in fondo, titolo come la locandina, volo fino all'isola col primo scroll. Caricato solo in home.
   Senza classi è la versione ferma (senza JavaScript, "riduci movimento", risparmio dati, file mancanti): poster, titolo, isola grande e link sempre visibili.
   html.hxs-live la mette lo script in head prima del primo disegno, quindi la disposizione non salta. Il movimento è in hero.js. */
@font-face{font-family:"Hxs Anton";src:url(fonts/anton.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Hxs Electro";src:url(fonts/electroharmonix.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
 --hxs-hh:77px;  /* header più l'eventuale barra di WordPress: lo aggiorna hero.js */
 --hxs-stage-h:calc(100vh - var(--hxs-hh));
 --hxs-barra:0px; /* quanto si allunga la finestra quando la barra del telefono si chiude */
 --hxs-fs:min(19vw,calc(var(--hxs-stage-h)*.34),calc(var(--hxs-stage-h)*.4025 - 48px)); /* corpo di riferimento del titolo: BRAND è ,7966 e CREA IL TUO ,575, il blocco resta alto 1,3787. L'ultimo limite tiene la seconda riga sopra l'isola a riposo con finestre basse */
 --hxs-K:.52;    /* scala del titolo a fine ingresso: la legge anche hero.js */
 --hxs-subT:.82; /* scala della seconda riga a fine ingresso (rispetto al suo corpo): a fine corsa non supera la larghezza del titolo */
 --hxs-top:calc(var(--hxs-stage-h)*.045);
 --hxs-pb:calc(var(--hxs-stage-h)*.04);
 --hxs-gap:clamp(4px,.6vw,10px);
 --hxs-pw0:min(calc((86vw - var(--hxs-gap)*3)/4),calc(var(--hxs-stage-h)*.79 - 200px)); /* posto del prodotto, regge isola e fila: la fila sta nell'86% della larghezza, così l'isola che la porta si legge ancora come isola; anche con finestre basse gli oggetti stanno sotto il titolo rimpicciolito */
 --hxs-pk:.9;    /* quanto il prodotto occupa del suo posto: stessi centri e stessa linea d'appoggio, l'isola non cambia */
 --hxs-pw:calc(var(--hxs-pw0)*var(--hxs-pk)); /* lato del prodotto */
 --hxs-pgap:calc(var(--hxs-gap) + var(--hxs-pw0)*(1 - var(--hxs-pk))); /* spazio tra i prodotti: il gap più quello che ognuno lascia libero */
 --hxs-tsz:clamp(26px,calc(var(--hxs-fs)*var(--hxs-K)*.43),72px); /* corpo di TOP SALES */
 --hxs-tssu:.2; /* quanto TOP SALES entra nel riquadro vuoto sopra gli oggetti, in lati: con .2 sta dove stava nella 1.6 (.28 del posto, meno il 10% che il prodotto ha perso). La ciotola tonda resta sotto la scritta */
 /* fine del titolo rimpicciolito, in fondo alla seconda riga: dalle regole qui sotto */
 --hxs-tb:calc(var(--hxs-top) + var(--hxs-fs)*var(--hxs-K)*1.3787 + 8px + clamp(16px,2.4vmin,23px)*1.81*var(--hxs-subT));
 /* quanto la fila sta sopra il bordo, così i prodotti poggiano sull'isola in basso. Con finestre basse scende per lasciare posto a TOP SALES */
 --hxs-fila:max(12px,min(calc(var(--hxs-stage-h)*.195),calc(var(--hxs-stage-h) - var(--hxs-tb) - 24px - var(--hxs-tsz)*1.1 - var(--hxs-pw)*(1 - var(--hxs-tssu)) - 50px)));
 /* Isola a fine corsa, agganciata alla fila: --hxs-lab è il tratto dal fondo delle foto al fondo della vetrina (lo corregge hero.js se un'etichetta va a capo) */
 --hxs-lab:50px;
 --hxs-S:12;    /* quante volte è più piccola a riposo */
 --hxs-k1:.125; /* misura del piano lontano, in frazione di quella finale */
 --hxs-fy:calc(var(--hxs-stage-h)*.6); /* orizzonte e punto di fuga */
 --hxs-iw:calc((var(--hxs-pw0)*4 + var(--hxs-gap)*3)*1.2);
 --hxs-ih:calc(var(--hxs-iw)*.2831);
 --hxs-iapp:.49; /* linea d'appoggio dei prodotti, in altezza dell'isola: a metà del pianoro */
}
@supports (height:100svh){:root{--hxs-stage-h:calc(100svh - var(--hxs-hh))}}
@supports (height:100lvh){:root{--hxs-barra:calc(100lvh - 100svh)}}
@media (max-aspect-ratio:1/1){
 :root{
  --hxs-fs:min(35vw,calc(var(--hxs-stage-h)*.3),calc(var(--hxs-stage-h)*.29 - 14px - clamp(16px,2.4vmin,23px)*2));
  --hxs-K:.6;
  --hxs-subT:1;
  --hxs-fila:var(--hxs-pb);
  --hxs-gap:8px;
  --hxs-pw0:min(calc((100vw - 40px)/2),calc((var(--hxs-stage-h)*.91 - var(--hxs-fs)*.72 - 170px - var(--hxs-tsz))/2));
  --hxs-tsz:clamp(26px,min(8.3vw,calc(var(--hxs-stage-h)*.06)),64px);
  --hxs-tssu:.04;
  --hxs-lab:44px;
  --hxs-S:7;
  --hxs-k1:.2128;
  --hxs-fy:calc(var(--hxs-stage-h)*.45);
  /* due isolette per le due file, col mare in mezzo (isola-v-*: stesse linee d'appoggio delle terrazze di prima): l'altezza viene dal passo tra le file (lato, etichetta, spazi), lo corregge hero.js */
  --hxs-sp:calc(var(--hxs-pw0) + 52px);
  --hxs-iw:calc(var(--hxs-sp)*2.1);
  --hxs-ih:calc(var(--hxs-iw)*1.3069);
  --hxs-iapp:.7858;
 }
}

.hx-section[id],.hxb-sez{scroll-margin-top:var(--hxs-hh)}

.hxs{position:relative}
.hxs-stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:clamp(20px,4vh,40px);min-height:var(--hxs-stage-h);padding:var(--hxs-top) 16px var(--hxs-fila);overflow:hidden;background:#f6dcb8}
.hxs-bg{position:absolute;inset:0;overflow:hidden}
.hxs-poster img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 60%}
.hxs-ipic{display:contents}
@media (max-aspect-ratio:1/1){.hxs-poster img{object-position:50% 45%}}

/* Isola nella versione ferma: grande, in fondo, con i prodotti sopra */
.hxs-ferma{position:absolute;left:calc(50% - var(--hxs-iw)/2);bottom:calc(var(--hxs-fila) + var(--hxs-lab) - var(--hxs-ih)*(1 - var(--hxs-iapp)));width:var(--hxs-iw);height:var(--hxs-ih);max-width:none}
.hxs-piano{display:none}

/* Titolo */
.hxs-title{--fs:calc(var(--hxs-fs)*var(--hxs-K));--l1max:calc(14.19vw*var(--hxs-K));position:relative;z-index:1;text-align:center;color:#111}
.hxs-h1{margin:0;color:#111;font-weight:400;letter-spacing:0;text-transform:uppercase}
.hxs-l1,.hxs-l2{display:block;white-space:nowrap}
.hxs-l1{font:400 min(calc(var(--fs)*.575),var(--l1max))/1.04 "Hxs Electro","Hxs Anton",Impact,sans-serif} /* il limite è il 90% della larghezza: conta solo in verticale */
.hxs-l2{font:400 calc(var(--fs)*.7966)/.98 "Hxs Anton",Impact,"Arial Narrow",sans-serif}
.hxs-c{display:inline-block;white-space:pre}
.hxs-sub{box-sizing:border-box;width:fit-content;max-width:calc(var(--hxs-fs)*var(--hxs-K)*3.4/var(--hxs-subT));margin:clamp(6px,1.2vh,12px) auto 0;padding:.28em .75em;text-wrap:balance;border-radius:var(--r-btn,9px);background:rgba(255,248,238,.92);font:700 clamp(16px,2.4vmin,23px)/1.25 var(--f-body);color:#111} /* passa su sole e cielo: un fondo di carta, non un alone */

/* TOP SALES e i 4 prodotti: link veri, con la foto dentro */
.hxs-vetr{position:relative;z-index:1;margin:auto 0 0}
.hxs-ts{position:relative;z-index:2;margin:0 0 calc(var(--hxs-pw)*var(--hxs-tssu)*-1);padding:0;text-align:center;color:#111;font:400 var(--hxs-tsz)/1.1 "Hxs Electro","Hxs Anton",Impact,sans-serif;letter-spacing:.02em;text-transform:uppercase;text-shadow:0 0 .14em rgba(255,250,240,.6);pointer-events:none} /* il velo chiaro serve solo dove la scritta passa sui pini: sul cielo non si vede */
.hxs-prods{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,var(--hxs-pw));justify-content:center;gap:var(--hxs-pgap);margin:0;padding:0;list-style:none}
.hxs-prods li{margin:0;padding:0;min-width:0}
.hxs-prods a{display:flex;flex-direction:column;align-items:center;gap:10px;color:#fff;text-decoration:none;border-radius:16px}
.hxs-prods img{display:block;width:100%;height:auto;aspect-ratio:1;pointer-events:none;transform:scale(1.25);transition:scale .3s var(--ease,ease),opacity .45s linear} /* la foto è il riquadro del 3D, 1,25 volte il link (MARGINE in vetrina3d.js): stessa posa e stessa misura */
.hxs-lab{position:relative;z-index:1;display:inline-flex;align-items:center;width:max-content;max-width:var(--hxs-pw0);min-height:40px;padding:0 16px;border-radius:var(--r-btn,9px);background:#111;color:#fff;font:700 15px/1.2 var(--f-body);text-align:center;transition:background .15s}
.hxs-prods a:focus-visible{outline:3px solid var(--focus);outline-offset:3px;box-shadow:0 0 0 3px #fff}
@media (hover:hover){
 .hxs-prods a:hover img{scale:1.04}
 .hxs-prods a:hover .hxs-lab{background:#333}
}
@media (max-aspect-ratio:1/1){
 .hxs-sub{max-width:90vw} /* su una riga dove ci sta: su due coprirebbe l'isola a riposo */
 .hxs-prods{grid-template-columns:repeat(2,var(--hxs-pw))}
 .hxs-prods a{gap:8px}
 .hxs-lab{min-height:36px;padding:0 12px;font-size:14px}
}
@media (max-aspect-ratio:1/1) and (max-width:360px){.hxs-lab{padding:0 8px;font-size:13px}.hxs-sub{padding:.28em .55em;font-size:15px}}
@media (max-aspect-ratio:1/1) and (max-height:520px){.hxs-lab{max-width:calc(var(--hxs-pw0) + 8px);padding:2px 6px;font-size:12px}}
/* Telefono in orizzontale: le etichette non ci stanno, restano solo per chi legge con lo screen reader; lo spazio va alle foto */
@media (min-aspect-ratio:1001/1000) and (max-height:480px){
 :root{--hxs-pw0:min(calc((86vw - var(--hxs-gap)*3)/4),calc(var(--hxs-stage-h)*.79 - 150px));--hxs-lab:0px}
 .hxs-lab{position:absolute;width:1px;height:1px;min-height:0;padding:0;overflow:hidden;clip-path:inset(50%)}
}

/* Dal vivo: palco fermo per il volo e una sosta. Il titolo si stringe verso l'alto, l'isola arriva in basso, i prodotti compaiono sopra. */
/* Il palco arriva fino alla finestra con la barra del telefono chiusa, ma tutto è disposto sulla finestra con la barra aperta: quando si chiude si scopre altro mare e non salta nulla */
.hxs-live .hxs{height:250vh}
.hxs-live .hxs-stage{position:sticky;top:var(--hxs-hh);display:block;height:calc(var(--hxs-stage-h) + var(--hxs-barra));min-height:0;padding:0;background:#8fbcc6}
.hxs-live .hxs-poster img{bottom:auto;height:var(--hxs-stage-h)}
@media (max-aspect-ratio:1/1){.hxs-live .hxs{height:225vh}}
.hxs-live .hxs-title{--fs:var(--hxs-fs);--l1max:14.19vw;position:absolute;top:var(--hxs-top);left:0;right:0;transform:scale(var(--hxs-k,1));transform-origin:50% 0}
.hxs-live .hxs-title:not(.is-on){opacity:0}
.hxs-live .hxs-sub{transform:scale(calc((var(--hxs-subT) + (1 - var(--hxs-subT))*(var(--hxs-k,1) - var(--hxs-K))/(1 - var(--hxs-K)))/var(--hxs-k,1)));transform-origin:50% 0} /* la seconda riga resta leggibile, ma a fine corsa sta nella larghezza del titolo */
.hxs-live .hxs-vetr{position:absolute;left:16px;right:16px;bottom:calc(var(--hxs-fila) + var(--hxs-barra));margin:0}
/* TOP SALES entra a fine volo stringendo le lettere di lato in dissolvenza, come il titolo: non sale mai dal basso. --hxs-te lo aggiorna hero.js, sulla scritta */
.hxs-live .hxs-ts{opacity:var(--hxs-te,0)}
.hxs-live .hxs-ts .hxs-c{transform:translate3d(calc(var(--dx,0em)*(1 - var(--hxs-te,0))),0,0)}
.hxs-live .hxs-prods a{--e:0;opacity:var(--e);transform:scale(calc(.78 + .22*var(--e))) rotate(calc((1 - var(--e))*var(--r,0deg)));pointer-events:none}
.hxs-live .hxs-prods li:nth-child(1) a{--r:-7deg}
.hxs-live .hxs-prods li:nth-child(2) a{--r:5deg}
.hxs-live .hxs-prods li:nth-child(3) a{--r:-4deg}
.hxs-live .hxs-prods li:nth-child(4) a{--r:7deg}
.hxs-live .hxs-prods a.is-in{pointer-events:auto}
.hxs-live .hxs-prods a:focus-visible{opacity:1;transform:none}

/* Isola dal vivo: tre piani a risoluzione diversa, ognuno disegnato alla misura più grande a cui si usa e mai ingrandito. Il punto di fuga è sull'orizzonte: ingrandendo attorno a lui, la base dell'isola scende da sola */
.hxs-live .hxs-ferma{display:none}
.hxs-live .hxs-piano{--k:1;--iy:calc(var(--hxs-stage-h) - var(--hxs-fila) - var(--hxs-lab) - var(--hxs-ih)*var(--hxs-iapp));position:absolute;display:block;left:calc(50% - var(--hxs-iw)*var(--k)/2);top:calc(var(--hxs-fy) + (var(--iy) - var(--hxs-fy))*var(--k));width:calc(var(--hxs-iw)*var(--k));height:calc(var(--hxs-ih)*var(--k));max-width:none;transform-origin:50% calc((var(--hxs-fy) - var(--iy))*var(--k));will-change:transform}
.hxs-live .hxs-piano--1{--k:var(--hxs-k1);transform:scale(calc(1/var(--hxs-S)/var(--hxs-k1)))}
.hxs-live .hxs-piano--2{--k:.5}
.hxs-live .hxs-piano.is-spento{visibility:hidden}

/* Livelli della scena: posizione e scala li mette hero.js, solo transform e opacity. Il poster resta sotto finché non sono tutti pronti */
.hxs-sc{position:absolute;inset:0;opacity:0;transition:opacity .4s linear;pointer-events:none}
.hxs-scena .hxs-sc{opacity:1}
.hxs-poster.is-spento{visibility:hidden}
.hxs-lv{position:absolute;display:block;max-width:none;will-change:transform}
.hxs-lv.is-spento{visibility:hidden}
.hxs-fo{overflow:visible}
.hxs-fo i{position:absolute;top:0;left:0;display:block;width:200%;height:100%;background-repeat:repeat-x;background-size:50% 100%;animation:hxs-deriva var(--t,50s) linear infinite paused;will-change:transform}
.hxs-velo{position:absolute;left:0;right:0;bottom:0;top:calc(var(--hxs-fy) - var(--hxs-stage-h)*.1);opacity:0;background:linear-gradient(to bottom,rgba(255,236,212,0),rgba(255,236,212,.95) 16%,rgba(240,232,216,.9) 60%,rgba(235,232,222,.8));will-change:opacity}
.hxs-vivo{position:absolute;inset:0;opacity:0;will-change:opacity}
.hxs-sci{animation:hxs-scintilla 3.4s ease-in-out infinite alternate paused}
.hxs-onda{animation:hxs-dondola 7s ease-in-out infinite alternate paused}
.hxs-vita .hxs-fo i,.hxs-vita .hxs-sci,.hxs-vita .hxs-onda{animation-play-state:running}
/* Vita dell'acqua: nessuna scala, si muove solo di lato o in dissolvenza */
@keyframes hxs-deriva{to{transform:translate3d(-50%,0,0)}}
@keyframes hxs-dondola{from{translate:0 -3px}to{translate:0 3px}}
@keyframes hxs-scintilla{from{opacity:.15;translate:-4px 2px}to{opacity:.9;translate:4px -2px}}

/* 3D: canvas unico sotto i link, che restano al loro posto e prendono il clic. L'ingresso lo fa il 3D: al link restano solo le etichette. */
.hxs-3dcv{position:absolute;z-index:0;display:block;pointer-events:none;opacity:0;transition:opacity .45s linear}
.hxs-3d .hxs-3dcv{opacity:1}
.hxs-live .hxs-3d .hxs-prods a{transform:none}
.hxs-3d .hxs-prods img{opacity:0;scale:1!important}

/* Le lettere si stringono in dissolvenza: si muovono solo di lato, mai dal basso */
@keyframes hxs-lettera{from{opacity:0;filter:blur(.05em);transform:translate3d(var(--dx,0),0,0)}to{opacity:1;filter:blur(0);transform:none}}
@keyframes hxs-riga{from{opacity:0;filter:blur(3px)}to{opacity:1;filter:blur(0)}}
.hxs-title.is-on .hxs-c{animation:hxs-lettera 1.25s cubic-bezier(.16,.84,.3,1) var(--dl,0s) both}
.hxs-title.is-on .hxs-sub{animation:hxs-riga .8s linear .75s both}

/* Dodicesima scheda del catalogo in home */
.hx-cat--all .hx-cat__img{display:grid;place-items:center;background:#111;color:#fff}
.hx-cat--all .hx-cat__img svg{width:clamp(28px,22%,44px);height:auto}