/* ============================================================
   GB Event · Giusy Event — proposta di sito (4/11/2026)
   Nero e oro del suo marchio, colore dei suoi allestimenti.
   ============================================================ */
:root{
  --nero:#0a090b; --carbone:#131117; --carta:#1b1820; --carta2:#231f29;
  --crema:#f6efe4; --soft:#cfc6ba; --soft2:#8d8479;
  --oro:#c9a227; --oro-chiaro:#f0d794; --oro-scuro:#8c6f14;
  --salvia:#9db5a0; --rosa:#e4b2b8; --notte:#2b3f6b;
  --metallo:linear-gradient(104deg,#8c6f14 0%,#f0d794 38%,#c9a227 62%,#f7e7bd 100%);
  --barra:88px; --gutter:clamp(20px,4.5vw,64px);
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Jost",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--nero);color:var(--crema);font:16px/1.7 var(--sans);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
::selection{background:var(--oro);color:#1a1405}

/* --------------------------------------------------- grana: dà "pellicola" a tutto */
body::after{content:"";position:fixed;inset:-50%;z-index:9;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='r'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='220' height='220' filter='url(%23r)'/></svg>");
  animation:grana 7s steps(6) infinite}
@keyframes grana{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,1%)}100%{transform:translate(0,0)}}

.guscio{width:min(1320px,100% - var(--gutter)*2);margin-inline:auto}

/* --------------------------------------------------- testata */
.testata{position:fixed;top:0;left:0;right:0;height:var(--barra);z-index:60;display:flex;align-items:center;
  gap:28px;padding:0 var(--gutter);transition:background .5s,backdrop-filter .5s,height .5s,border-color .5s;
  border-bottom:1px solid transparent}
.testata.posata{height:70px;background:rgba(10,9,11,.86);backdrop-filter:blur(16px);border-bottom-color:rgba(201,162,39,.22)}
.marchio{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.marchio .tondo{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  border:1px solid rgba(240,215,148,.55);background:radial-gradient(circle at 30% 25%,#1e1a24,#0b0a0c)}
.marchio .tondo span{font:700 17px/1 var(--serif);background:var(--metallo);-webkit-background-clip:text;
  background-clip:text;color:transparent;letter-spacing:.02em}
.marchio b{font:600 19px/1 var(--serif);letter-spacing:.06em}
.marchio i{display:block;font:400 9.5px/1.4 var(--sans);font-style:normal;letter-spacing:.3em;
  text-transform:uppercase;color:var(--soft2);margin-top:4px}
.menu{display:flex;gap:30px;margin-left:auto;align-items:center}
.menu a{font-size:13.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--soft);position:relative;padding:6px 0}
.menu a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--metallo);
  transition:right .45s cubic-bezier(.2,.8,.2,1)}
.menu a:hover{color:var(--crema)}
.menu a:hover::after{right:0}
.bottone-oro{padding:11px 22px;border-radius:999px;border:1px solid rgba(240,215,148,.5);font-size:13px;
  letter-spacing:.12em;text-transform:uppercase;cursor:pointer;background:transparent;transition:.4s;white-space:nowrap}
.bottone-oro:hover{background:var(--metallo);color:#1a1405;border-color:transparent}
.apri-menu{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px;padding:8px}
.apri-menu i{display:block;width:24px;height:1.5px;background:var(--crema)}

/* --------------------------------------------------- apertura */
.apertura{position:relative;min-height:100svh;display:grid;align-items:end;overflow:hidden}
.apertura .sfondo{position:absolute;inset:-4%;z-index:0}
.apertura .sfondo img{width:100%;height:100%;object-fit:cover;filter:saturate(.92) contrast(1.04)}
.apertura .velo{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,9,11,.82) 0%,rgba(10,9,11,.28) 32%,rgba(10,9,11,.72) 72%,var(--nero) 100%),
             linear-gradient(96deg,rgba(10,9,11,.80) 0%,rgba(10,9,11,.30) 48%,transparent 78%)}
.apertura .dentro{position:relative;z-index:2;width:min(1320px,100% - var(--gutter)*2);margin-inline:auto;
  padding-bottom:clamp(54px,9vh,110px)}
.occhiello{display:flex;align-items:center;gap:14px;font-size:11.5px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--oro-chiaro);margin:0 0 26px}
.occhiello::before{content:"";width:46px;height:1px;background:var(--metallo)}
.titolone{margin:0;font-family:var(--serif);font-weight:300;line-height:.96;letter-spacing:-.01em;
  font-size:clamp(46px,8.4vw,132px)}
.titolone .riga{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.titolone em{font-style:italic;background:var(--metallo);-webkit-background-clip:text;background-clip:text;color:transparent}
.sottotitolo{max-width:52ch;color:var(--soft);font-size:clamp(15px,1.5vw,18.5px);margin:26px 0 0}
.pulsanti{display:flex;gap:16px;flex-wrap:wrap;margin-top:38px}
.pieno{background:var(--metallo);color:#1a1405;border:0;font-weight:600}
.pieno:hover{filter:brightness(1.12)}
.scendi{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;display:grid;justify-items:center;
  gap:10px;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--soft2)}
.scendi i{display:block;width:1px;height:46px;background:linear-gradient(var(--oro),transparent);animation:scorri 2.4s ease-in-out infinite}
@keyframes scorri{0%,100%{opacity:.25;transform:scaleY(.5)}50%{opacity:1;transform:scaleY(1)}}

/* --------------------------------------------------- sezioni */
.sez{padding:clamp(76px,10vw,150px) 0;position:relative}
.sez.stretta{padding:clamp(56px,7vw,104px) 0}
.etichetta{display:flex;align-items:center;gap:14px;font-size:11px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--oro);margin:0 0 20px}
.etichetta::before{content:"";width:34px;height:1px;background:var(--metallo)}
.titolo{font-family:var(--serif);font-weight:300;font-size:clamp(34px,5.2vw,74px);line-height:1.02;margin:0 0 20px;
  letter-spacing:-.01em}
.titolo .riga{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em}
.testo{color:var(--soft);max-width:60ch;font-size:16.5px}

/* la sua frase */
.citazione{position:relative;text-align:center;padding:clamp(80px,11vw,170px) 0;background:var(--carbone);
  overflow:hidden}
.citazione::before,.citazione::after{content:"";position:absolute;left:50%;transform:translateX(-50%);
  width:min(760px,80%);height:1px;background:linear-gradient(90deg,transparent,rgba(201,162,39,.5),transparent)}
.citazione::before{top:0}.citazione::after{bottom:0}
.citazione blockquote{margin:0 auto;max-width:21ch;font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:clamp(28px,4.6vw,62px);line-height:1.18}
.citazione blockquote span{background:var(--metallo);-webkit-background-clip:text;background-clip:text;color:transparent}
.citazione .chi{margin:34px 0 0;font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--soft2)}

/* occasioni */
.griglia{display:grid;gap:clamp(14px,1.6vw,22px)}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.occasione{position:relative;aspect-ratio:3/4;border-radius:4px;overflow:hidden;cursor:pointer;
  background:var(--carta)}
.occasione img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s cubic-bezier(.2,.8,.2,1);
  filter:saturate(.95)}
.occasione:hover img{transform:scale(1.07)}
.occasione .velo-o{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,9,11,.12) 30%,rgba(10,9,11,.88) 100%)}
.occasione .scritta{position:absolute;left:0;right:0;bottom:0;padding:26px 24px;z-index:2}
.occasione h3{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.4vw,31px)}
.occasione p{margin:7px 0 0;font-size:13.5px;color:var(--soft);letter-spacing:.02em}
.occasione .filo{position:absolute;left:24px;right:24px;bottom:18px;height:1px;background:var(--metallo);
  transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.occasione:hover .filo{transform:scaleX(1)}

/* bomboniere con prezzo */
.prodotti{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,30px)}
.prodotto{background:var(--carta);border:1px solid rgba(240,215,148,.14);border-radius:6px;overflow:hidden;
  transition:transform .6s cubic-bezier(.2,.8,.2,1),border-color .5s}
.prodotto:hover{transform:translateY(-7px);border-color:rgba(240,215,148,.42)}
.prodotto .foto{aspect-ratio:4/3;overflow:hidden;background:var(--carta2)}
.prodotto .foto img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.prodotto:hover .foto img{transform:scale(1.06)}
.prodotto .sotto{padding:24px}
.prodotto h3{margin:0 0 8px;font-family:var(--serif);font-weight:400;font-size:25px}
.prodotto p{margin:0;color:var(--soft);font-size:14.5px;min-height:3.2em}
.riga-prezzo{display:flex;align-items:baseline;gap:12px;margin-top:18px;padding-top:18px;
  border-top:1px solid rgba(240,215,148,.16)}
.prezzo{font-family:var(--serif);font-size:30px;background:var(--metallo);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.prezzo small{font-size:14px;letter-spacing:.06em}
.bollino{margin-left:auto;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--salvia);
  border:1px solid rgba(157,181,160,.45);border-radius:999px;padding:4px 10px}

/* allestimenti: album che si sfoglia */
.album{position:relative;height:clamp(420px,56vw,660px);margin-top:50px}
.lastra{position:absolute;inset:0;border-radius:5px;overflow:hidden;box-shadow:0 36px 90px rgba(0,0,0,.6);
  transform-origin:center bottom}
.lastra img{width:100%;height:100%;object-fit:cover}
.lastra .didascalia{position:absolute;left:0;right:0;bottom:0;padding:30px 32px;
  background:linear-gradient(transparent,rgba(10,9,11,.92));font-family:var(--serif);font-size:clamp(20px,2.4vw,30px)}
.comandi-album{display:flex;gap:12px;justify-content:center;margin-top:28px}
.comandi-album button{width:46px;height:46px;border-radius:50%;border:1px solid rgba(240,215,148,.35);
  background:transparent;cursor:pointer;transition:.4s;display:grid;place-items:center}
.comandi-album button:hover{background:var(--metallo);color:#1a1405;border-color:transparent}

/* numeri */
.numeri{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
.numero b{display:block;font-family:var(--serif);font-weight:300;font-size:clamp(40px,6vw,86px);line-height:1;
  background:var(--metallo);-webkit-background-clip:text;background-clip:text;color:transparent}
.numero span{display:block;margin-top:12px;font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--soft2)}

/* bacheca avvisi */
.avviso{display:flex;gap:22px;align-items:center;flex-wrap:wrap;background:var(--carta);
  border:1px solid rgba(240,215,148,.2);border-radius:6px;padding:26px 30px}
.avviso .punto{width:9px;height:9px;border-radius:50%;background:var(--oro);flex:0 0 auto;
  box-shadow:0 0 0 5px rgba(201,162,39,.16);animation:pulsa 2.6s ease-in-out infinite}
@keyframes pulsa{0%,100%{box-shadow:0 0 0 4px rgba(201,162,39,.14)}50%{box-shadow:0 0 0 11px rgba(201,162,39,0)}}
.avviso b{font-family:var(--serif);font-size:21px;font-weight:400}
.avviso p{margin:4px 0 0;color:var(--soft);font-size:14.5px}

/* contatti */
.contatti{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,80px);align-items:center}
.recapito{display:block;padding:22px 0;border-bottom:1px solid rgba(240,215,148,.16);transition:padding-left .45s}
.recapito:hover{padding-left:14px}
.recapito span{display:block;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--soft2);margin-bottom:7px}
.recapito b{font-family:var(--serif);font-weight:400;font-size:clamp(21px,2.3vw,30px)}
.foto-negozio{aspect-ratio:4/5;border-radius:5px;overflow:hidden}
.foto-negozio img{width:100%;height:100%;object-fit:cover}

/* piede */
.piede{border-top:1px solid rgba(240,215,148,.16);padding:60px 0 40px;background:var(--carbone)}
.piede .righe{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:center}
.piede small{color:var(--soft2);font-size:12.5px;letter-spacing:.04em}
.nota-bozza{margin-top:26px;padding:16px 20px;border-radius:5px;border:1px dashed rgba(228,178,184,.5);
  color:var(--rosa);font-size:12.5px;letter-spacing:.03em}

/* entrate */
.entra{opacity:0;transform:translateY(34px)}

@media (max-width:1000px){
  .g3,.prodotti{grid-template-columns:repeat(2,1fr)}
  .contatti{grid-template-columns:1fr}
  .numeri{grid-template-columns:repeat(2,1fr);gap:34px}
}
@media (max-width:720px){
  .menu{position:fixed;inset:0;background:rgba(10,9,11,.97);backdrop-filter:blur(18px);flex-direction:column;
    justify-content:center;gap:28px;z-index:80;transform:translateY(-100%);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
  .menu.aperto{transform:none}
  .menu a{font-size:19px}
  .apri-menu{display:flex;margin-left:auto;z-index:90;position:relative}
  .testata .bottone-oro.desktop{display:none}
  .g3,.prodotti,.g2{grid-template-columns:1fr}
  .occasione{aspect-ratio:4/3}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .entra{opacity:1;transform:none}
}


/* ============================================================
   Ingresso: il sigillo che si disegna, i confetti, poi il velo
   si apre in due. Si vede una volta per sessione; con
   ?senzaingresso non parte (serve a provare il resto in fretta).
   ============================================================ */
.ingresso{position:fixed;inset:0;z-index:200;display:grid;place-items:center;pointer-events:none}
.lastra-ing{position:absolute;left:0;right:0;height:50.5%;background:var(--nero);will-change:transform}
.lastra-ing.alto{top:0}
.lastra-ing.basso{bottom:0}
.sigillo{position:relative;display:grid;place-items:center;z-index:2}
.sigillo svg{display:block}
/* stato di partenza scritto qui e non nel JS: se il codice arriva con un attimo
   di ritardo (ricarica forzata, rete lenta) non si deve vedere il cerchio già fatto */
#cerchio-ing{stroke-dasharray:540;stroke-dashoffset:540}
#cerchio-ing2{stroke-dasharray:497;stroke-dashoffset:497}
.sigla{position:absolute;font-family:var(--serif);font-size:46px;letter-spacing:.04em;
  background:var(--metallo);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:0}
.dicitura{position:absolute;bottom:-34px;font-size:9.5px;letter-spacing:.42em;text-transform:uppercase;
  color:var(--soft2);white-space:nowrap;opacity:0}
.confetti{position:absolute;inset:0;z-index:1;overflow:hidden}
.confetto{position:absolute;width:9px;height:12px;border-radius:50%;opacity:0;will-change:transform}
body.in-ingresso{overflow:hidden}