/* ============================================================
   ETERNITY SCULPT — design system
   Born to shine, beyond all time
   ============================================================ */

:root{
  /* superfici */
  --bianco:        #F7F5F2;   /* carrara caldo */
  --bianco-puro:   #FFFFFF;
  --avorio:        #EFEBE5;
  --venatura:      #D9D3CA;
  --grigio:        #8C857B;
  --inchiostro:    #14110F;
  --marquina:      #0A0908;
  --oro:           #B08D57;
  --oro-chiaro:    #D8BB8A;

  /* tipografia */
  --serif: "Cormorant Garamond", "Freight Big Pro", Garamond, "Times New Roman", serif;
  --sans:  "Jost", "Brandon Grotesque", "Futura", "Century Gothic", system-ui, sans-serif;

  --traccia: .18em;      /* letter-spacing dei sovratitoli */
  --misura:  68ch;       /* larghezza di lettura */

  /* ritmo */
  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --sezione: clamp(5rem, 12vh, 11rem);
  --bordo: 1px solid color-mix(in srgb, var(--inchiostro) 12%, transparent);

  --transizione: cubic-bezier(.22, 1, .36, 1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--bianco);
  color:var(--inchiostro);
  font-family:var(--sans);
  font-size:clamp(1rem, .95rem + .2vw, 1.075rem);
  line-height:1.75;
  font-weight:300;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

/* ---------- tipografia ---------- */

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:300;
  line-height:1.06;
  margin:0;
  letter-spacing:-.01em;
}
h1{ font-size:clamp(2.75rem, 7vw, 6.5rem); }
h2{ font-size:clamp(2.1rem, 5vw, 4.25rem); }
h3{ font-size:clamp(1.5rem, 2.6vw, 2.25rem); }

.occhiello{
  font-family:var(--sans);
  font-size:.7rem;
  font-weight:400;
  letter-spacing:var(--traccia);
  text-transform:uppercase;
  color:var(--grigio);
  margin:0 0 1.5rem;
  display:flex;
  align-items:center;
  gap:.9rem;
}
.occhiello::before{
  content:"";
  width:clamp(1.5rem,4vw,3.5rem);
  height:1px;
  background:var(--oro);
  flex:none;
}
.occhiello.centrato{ justify-content:center; }

p{ margin:0 0 1.35em; max-width:var(--misura); }
.testo-grande{ font-size:clamp(1.1rem,1.6vw,1.35rem); line-height:1.7; }

.slogan{
  font-family:var(--serif);
  font-style:italic;
  letter-spacing:.02em;
  color:var(--oro);
}

/* ---------- layout ---------- */

.wrap{ width:min(100% - (var(--gutter) * 2), 1440px); margin-inline:auto; }
.stretto{ width:min(100% - (var(--gutter) * 2), 880px); margin-inline:auto; }
.sezione{ padding-block:var(--sezione); }
.centro{ text-align:center; }
.centro p{ margin-inline:auto; }

.duecolonne{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  gap:clamp(2rem, 6vw, 6rem);
  align-items:center;
}

/* ---------- barra di avanzamento ---------- */

.progresso{
  position:fixed; inset:0 0 auto 0; height:2px; z-index:120;
  background:linear-gradient(90deg, var(--oro) var(--p, 0%), transparent var(--p, 0%));
  transition:background .1s linear;
  pointer-events:none;
}

/* ---------- testata ---------- */

.testata{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem;
  padding:1.15rem var(--gutter);
  color:var(--bianco);
  mix-blend-mode:difference;
  transition:padding .4s var(--transizione);
}
.testata.compatta{ padding-block:.7rem; }
.testata.su-chiaro{ mix-blend-mode:normal; color:var(--inchiostro); background:color-mix(in srgb, var(--bianco) 88%, transparent); backdrop-filter:blur(14px); border-bottom:var(--bordo); }

.marchio{
  font-family:var(--serif);
  font-size:1.05rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  white-space:nowrap;
}
.marchio small{ display:block; font-family:var(--sans); font-size:.5rem; letter-spacing:.3em; opacity:.65; margin-top:.25rem; }

.menu{ display:flex; gap:clamp(1rem,2.4vw,2.4rem); list-style:none; margin:0; padding:0; }
.menu a{
  font-size:.72rem; letter-spacing:var(--traccia); text-transform:uppercase;
  position:relative; padding-block:.4rem;
}
.menu a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--transizione);
}
.menu a:hover::after, .menu a[aria-current]::after{ transform:scaleX(1); transform-origin:left; }
@media (max-width:900px){ .menu{ display:none; } }

.apri-menu{
  display:none; background:none; border:0; color:inherit; font:inherit;
  font-size:.72rem; letter-spacing:var(--traccia); text-transform:uppercase; cursor:pointer;
}
@media (max-width:900px){ .apri-menu{ display:block; } }

.menu-pieno{
  position:fixed; inset:0; z-index:110;
  background:var(--marquina); color:var(--bianco);
  display:grid; place-content:center; gap:.5rem; text-align:center;
  clip-path:inset(0 0 100% 0); transition:clip-path .8s var(--transizione);
}
.menu-pieno[data-aperto="true"]{ clip-path:inset(0 0 0 0); }
.menu-pieno a{ font-family:var(--serif); font-size:clamp(2rem,7vw,3.5rem); line-height:1.3; }
.menu-pieno .chiudi{ position:absolute; top:1.4rem; right:var(--gutter); background:none; border:0; color:inherit; font:inherit; letter-spacing:var(--traccia); text-transform:uppercase; font-size:.72rem; cursor:pointer; }

/* ---------- hero ---------- */

.hero{
  position:relative;
  min-height:100vh;   /* fallback per i browser che non conoscono svh */
  min-height:100svh;
  display:grid; align-items:end;
  color:var(--bianco);
  overflow:hidden;
  background:var(--marquina);
}
.hero-media{ position:absolute; inset:0; z-index:0; will-change:transform; }
.hero-media img{ width:100%; height:120%; object-fit:cover; opacity:.82; }
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,9,8,.55) 0%, rgba(10,9,8,.15) 35%, rgba(10,9,8,.88) 100%);
}
.hero-testo{ position:relative; z-index:1; padding:var(--gutter); padding-bottom:clamp(4rem,10vh,8rem); }
.hero h1{ max-width:14ch; }
.hero .sottotitolo{ max-width:46ch; margin-top:1.75rem; opacity:.86; }

.scorri{
  position:absolute; bottom:1.75rem; left:50%; transform:translateX(-50%);
  z-index:2; font-size:.62rem; letter-spacing:var(--traccia); text-transform:uppercase; opacity:.7;
  display:grid; justify-items:center; gap:.65rem;
}
.scorri::after{
  content:""; width:1px; height:3rem; background:currentColor;
  animation:filo 2.4s var(--transizione) infinite;
  transform-origin:top;
}
@keyframes filo{ 0%{transform:scaleY(0)} 45%{transform:scaleY(1)} 100%{transform:scaleY(0); transform-origin:bottom} }

/* ---------- movimento continuo ----------
   Il respiro lento sulle immagini e il nastro dei materiali servono a far
   vivere la pagina anche quando si sta fermi. Si spengono se il visitatore
   ha chiesto meno animazioni. */

@keyframes respiro{
  from{ transform:scale(1); }
  to{   transform:scale(1.11); }
}
.respiro{ animation:respiro 26s var(--transizione) infinite alternate; will-change:transform; }
.hero-media img{ animation:respiro 32s var(--transizione) infinite alternate; }

.nastro-materiali{
  overflow:hidden; border-block:var(--bordo);
  background:var(--avorio);
  padding-block:.85rem;
}
.nastro-materiali-pista{ display:flex; width:max-content; animation:scorri 46s linear infinite; }
.nastro-materiali-gruppo{ display:flex; align-items:center; flex:none; }
.nastro-materiali span{
  font-size:.68rem; letter-spacing:var(--traccia); text-transform:uppercase;
  color:var(--grigio); white-space:nowrap;
}
.nastro-materiali i{ color:var(--oro); font-style:normal; margin-inline:1.6rem; }
@keyframes scorri{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }
.nastro-materiali:hover .nastro-materiali-pista{ animation-play-state:paused; }

/* ---------- capitoli a schermo pieno ---------- */

.capitolo{ position:relative; }
.capitolo-sticky{
  position:sticky; top:0; overflow:hidden;
  height:100vh;
  height:100svh;
  display:grid; place-items:center;
}
.capitolo-media{ position:absolute; inset:0; }
.capitolo-media img{ width:100%; height:100%; object-fit:cover; }
.capitolo-media::after{ content:""; position:absolute; inset:0; background:rgba(10,9,8,.55); }
.capitolo-corpo{
  position:relative; z-index:1; color:var(--bianco);
  width:min(100% - 2.5rem, 62rem); text-align:center;
}
.capitolo-numero{
  font-family:var(--serif); font-size:clamp(4rem,14vw,11rem); line-height:1;
  color:transparent; -webkit-text-stroke:1px color-mix(in srgb, var(--oro) 70%, transparent);
  display:block; margin-bottom:-.35em; opacity:.55;
}
.capitolo .didascalia{
  position:absolute; bottom:1.5rem; left:var(--gutter); z-index:1;
  color:var(--bianco); font-size:.65rem; letter-spacing:var(--traccia);
  text-transform:uppercase; opacity:.62;
}
.capitolo-spazio{ height:75vh; }

/* ---------- griglia prodotti ---------- */

.barra-catalogo{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1.25rem; padding-block:1.1rem;
  border-block:var(--bordo); margin-bottom:clamp(2rem,5vw,3.5rem);
  font-size:.7rem; letter-spacing:var(--traccia); text-transform:uppercase;
}
.filtri{ display:flex; flex-wrap:wrap; gap:.5rem; }
.filtro{
  background:none; border:1px solid color-mix(in srgb, var(--inchiostro) 18%, transparent);
  border-radius:100px; padding:.5rem 1.05rem; cursor:pointer;
  font:inherit; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  transition:background .4s var(--transizione), color .4s var(--transizione), border-color .4s var(--transizione);
}
.filtro:hover{ border-color:var(--oro); }
.filtro[aria-pressed="true"]{ background:var(--inchiostro); color:var(--bianco); border-color:var(--inchiostro); }
select.ordina{
  font:inherit; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  border:0; border-bottom:1px solid var(--inchiostro); background:none; padding:.35rem 0; cursor:pointer;
}

/* sottocategorie: le "sottocartelle" con cui il cliente scende al tipo di oggetto */
.sottocategorie{
  list-style:none; padding:0; margin:1.75rem 0 0;
  display:flex; gap:.5rem; flex-wrap:wrap;
}
.sottocategorie a{
  display:inline-block;
  border:1px solid color-mix(in srgb, var(--inchiostro) 15%, transparent);
  border-radius:100px; padding:.5rem 1.05rem;
  font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  transition:border-color .4s var(--transizione), background .4s var(--transizione);
}
.sottocategorie a:hover{ border-color:var(--oro); background:var(--avorio); }

/* raggruppamento delle collezioni: da acquistare / su misura */
.ramo{ margin-bottom:clamp(3rem,7vw,5rem); }
.ramo > header{ margin-bottom:2rem; }
.ramo h2{ font-size:clamp(1.6rem,3vw,2.4rem); }
.ramo p.nota{ color:var(--grigio); font-size:.9rem; margin-top:.6rem; max-width:56ch; }

.griglia{
  display:grid; gap:clamp(1.75rem,3.5vw,3rem);
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}
.scheda{ position:relative; display:flex; flex-direction:column; }
.scheda-media{
  position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--avorio);
  margin-bottom:1.1rem;
}
.scheda-media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s var(--transizione), filter 1.2s var(--transizione);
}
.scheda:hover .scheda-media img{ transform:scale(1.06); }
.badge{
  position:absolute; top:.85rem; left:.85rem; z-index:2;
  background:color-mix(in srgb, var(--bianco) 92%, transparent);
  padding:.4rem .7rem; font-size:.58rem; letter-spacing:.16em; text-transform:uppercase;
}
.badge.scuro{ background:var(--inchiostro); color:var(--bianco); }
.scheda .atelier{ font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--grigio); margin-bottom:.4rem; }
.scheda .nome{ font-family:var(--sans); font-size:.82rem; letter-spacing:.09em; text-transform:uppercase; line-height:1.5; margin-bottom:.55rem; font-weight:400; }
.scheda .prezzo{ font-size:.95rem; letter-spacing:.04em; }
.scheda .tempi{ font-size:.62rem; letter-spacing:.13em; text-transform:uppercase; color:var(--grigio); margin-top:.45rem; }

/* ---------- scheda prodotto ---------- */

.prodotto{
  display:grid; gap:clamp(2rem,5vw,5rem);
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  align-items:start;
}
@media (max-width:960px){ .prodotto{ grid-template-columns:1fr; } }

.prodotto-galleria{ display:grid; gap:1rem; }
.prodotto-galleria img{ width:100%; aspect-ratio:4/5; object-fit:cover; background:var(--avorio); }
.prodotto-dettagli{ position:sticky; top:6rem; }
@media (max-width:960px){ .prodotto-dettagli{ position:static; } }

.briciole{ font-size:.63rem; letter-spacing:.15em; text-transform:uppercase; color:var(--grigio); margin-bottom:2rem; }
.briciole a:hover{ color:var(--oro); }

.prezzo-grande{ font-size:1.6rem; font-family:var(--serif); margin:1.25rem 0 .35rem; }
.bottone{
  display:inline-flex; align-items:center; justify-content:center; gap:.75rem;
  width:100%; padding:1.05rem 1.5rem; margin-top:.5rem;
  background:var(--inchiostro); color:var(--bianco); border:1px solid var(--inchiostro);
  font:inherit; font-size:.7rem; letter-spacing:var(--traccia); text-transform:uppercase; cursor:pointer;
  transition:background .5s var(--transizione), color .5s var(--transizione);
}
.bottone:hover{ background:transparent; color:var(--inchiostro); }
.bottone.chiaro{ background:transparent; color:var(--inchiostro); }
.bottone.chiaro:hover{ background:var(--inchiostro); color:var(--bianco); }

.tabella-dettagli{ width:100%; border-collapse:collapse; margin-top:2.5rem; font-size:.85rem; }
.tabella-dettagli th, .tabella-dettagli td{ text-align:left; padding:.85rem 0; border-bottom:var(--bordo); vertical-align:top; }
.tabella-dettagli th{ font-weight:400; color:var(--grigio); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; width:42%; }

/* note di trasporto e manutenzione, sotto la tabella dei dettagli */
.note-opera{ margin-top:2.5rem; display:grid; gap:1.5rem; }
.note-opera h4{
  font-family:var(--sans); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--oro); margin:0 0 .55rem; font-weight:400;
}
.note-opera p{ font-size:.85rem; color:var(--grigio); margin:0; max-width:none; }

.racconto{ margin-top:clamp(3rem,8vw,6rem); }
.racconto h3{ margin-bottom:1.25rem; }
.racconto p{ font-size:1.05rem; }
.racconto .capolettera::first-letter{
  font-family:var(--serif); font-size:3.6em; line-height:.82; float:left;
  padding:.06em .12em 0 0; color:var(--oro);
}

/* ---------- rassicurazioni / servizi ---------- */

.rassicurazioni{ display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr)); margin-top:3rem; }
.rassicurazioni div{ border-top:1px solid var(--oro); padding-top:1rem; }
.rassicurazioni h4{ font-family:var(--sans); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:.5rem; }
.rassicurazioni p{ font-size:.85rem; color:var(--grigio); margin:0; }

/* ---------- galleria orizzontale ---------- */

.orizzontale{ position:relative; }
.orizzontale-pin{ position:sticky; top:0; height:100vh; height:100svh; display:flex; align-items:center; overflow:hidden; }
.orizzontale-nastro{ display:flex; gap:clamp(1rem,3vw,2.5rem); padding-inline:var(--gutter); will-change:transform; }
.orizzontale-nastro figure{ margin:0; flex:0 0 clamp(16rem,32vw,28rem); }
.orizzontale-nastro img{ width:100%; aspect-ratio:3/4; object-fit:cover; background:var(--avorio); }
.orizzontale-nastro figcaption{ margin-top:.9rem; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--grigio); }

/* ---------- processo ---------- */

.fasi{ counter-reset:fase; display:grid; gap:0; }
.fase{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(1.5rem,4vw,4rem);
  padding-block:clamp(2rem,5vw,3.5rem); border-top:var(--bordo); align-items:baseline;
}
.fase .num{ font-family:var(--serif); font-size:clamp(2rem,5vw,3.5rem); color:var(--oro); line-height:1; }
.fase h3{ margin-bottom:.75rem; }

/* ---------- fondo pagina ---------- */

.piede{ background:var(--marquina); color:var(--bianco); padding-block:clamp(4rem,9vw,7rem) 2.5rem; }
.piede .claim{ font-family:var(--serif); font-size:clamp(1.75rem,4.5vw,3.25rem); max-width:20ch; margin-bottom:clamp(3rem,7vw,5rem); line-height:1.15; }
.piede-colonne{ display:grid; gap:2.5rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr)); }
.piede h4{ font-family:var(--sans); font-size:.65rem; letter-spacing:.16em; text-transform:uppercase; color:var(--oro); margin:0 0 1.1rem; font-weight:400; }
.piede ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; font-size:.85rem; opacity:.8; }
.piede a:hover{ color:var(--oro-chiaro); }
.piede .legale{ margin-top:clamp(3rem,7vw,5rem); padding-top:1.5rem; border-top:1px solid rgba(247,245,242,.14); font-size:.68rem; letter-spacing:.06em; opacity:.55; }

/* ---------- FAQ ---------- */

.faq details{ border-bottom:var(--bordo); padding-block:1.4rem; }
.faq summary{ cursor:pointer; list-style:none; font-family:var(--serif); font-size:clamp(1.1rem,2vw,1.5rem); display:flex; justify-content:space-between; gap:2rem; align-items:baseline; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:var(--oro); font-family:var(--sans); font-size:1.25rem; transition:transform .5s var(--transizione); }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq p{ margin:1rem 0 0; color:var(--grigio); }

/* ---------- animazioni di scorrimento ---------- */

[data-anim]{ opacity:0; will-change:transform,opacity; }
[data-anim="sali"]{ transform:translateY(2.75rem); }
[data-anim="scendi"]{ transform:translateY(-2rem); }
[data-anim="destra"]{ transform:translateX(-2.5rem); }
[data-anim="sinistra"]{ transform:translateX(2.5rem); }
[data-anim="scala"]{ transform:scale(.94); }
[data-anim="velo"]{ clip-path:inset(0 0 100% 0); opacity:1; }
[data-anim].visibile{
  opacity:1; transform:none; clip-path:inset(0 0 0 0);
  transition:opacity 1.1s var(--transizione), transform 1.25s var(--transizione), clip-path 1.4s var(--transizione);
  transition-delay:var(--ritardo, 0ms);
}

/* righe di titolo che salgono una a una */
.riga{ display:block; overflow:hidden; }
.riga > span{ display:block; transform:translateY(105%); transition:transform 1.15s var(--transizione); transition-delay:var(--ritardo,0ms); }
.visibile .riga > span{ transform:none; }

/* immagine con parallasse */
.parallasse{ overflow:hidden; }
.parallasse img{ will-change:transform; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  [data-anim], [data-anim].visibile, .riga > span{ opacity:1 !important; transform:none !important; clip-path:none !important; transition:none !important; }
  .capitolo-sticky, .orizzontale-pin{ position:relative; height:auto; }
  .scorri::after{ animation:none; }
  .respiro, .hero-media img, .nastro-materiali-pista{ animation:none !important; }
}

/* recapiti in pagina contatti: prima non c'era modo di scriverci */
.recapiti{ margin-top:2.5rem; padding-top:2rem; border-top:1px solid var(--oro); }
.recapiti h2{ font-family:var(--sans); font-size:.7rem; letter-spacing:var(--traccia); text-transform:uppercase; color:var(--grigio); margin-bottom:1rem; font-weight:400; }
.recapiti p{ font-size:1.05rem; margin-bottom:1rem; }
.recapiti a{ border-bottom:1px solid var(--venatura); padding-bottom:.15rem; }
.recapiti a:hover{ border-color:var(--oro); }
.recapiti .nota{ font-size:.9rem; color:var(--grigio); max-width:52ch; }
/* nota sotto il prezzo: le opere non stanno in magazzino, nascono su ordinazione */
.nota-catalogo{
  font-size:.8rem; color:var(--grigio); line-height:1.6;
  margin:.9rem 0 0; padding-top:.9rem;
  border-top:1px solid color-mix(in srgb, var(--inchiostro) 10%, transparent);
  max-width:44ch;
}