/* ============================================================
   Strato residuo minimo: solo ciò che Tailwind non può esprimere
   (pseudo-elementi, sfondi compositi, stati pilotati dal JS,
   motore di riserva, media query di accessibilità)
   ============================================================ */
:root{
  --luce:#F6F1E4;
  --carta:#EFE8D4;
  --inchiostro:#211C12;
  --patina:#57503E;
  --oro:#8A6E2F;
  --oro-chiaro:#C2A868;
  --ceralacca:#6B2321;
  --ceralacca-ombra:#4A1715;
  --smeraldo:#1E3D2F;
  --vetro:rgba(250,246,235,.58);
  --vetro-bordo:rgba(255,255,255,.55);
  --ease-out:cubic-bezier(0.22,1,0.36,1);
}

/* grana della carta: la luce qui è materia */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:2;opacity:.45;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.34 0 0 0 0 0.29 0 0 0 0 0.19 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection{background:var(--oro);color:var(--luce)}
:focus{outline:none}
:focus-visible{outline:2px solid var(--oro);outline-offset:3px;border-radius:6px}

h1,h2,h3{font-family:'Marcellus',serif;font-weight:400;text-wrap:balance}
p{text-wrap:pretty}
a{color:inherit}

/* etichette d'archivio: usate dal JS (.footer .mono) */
.mono{font-family:'IBM Plex Mono',monospace;font-size:12.5px;letter-spacing:.14em;color:var(--patina);text-transform:uppercase}
.eyebrow{display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--oro)}

/* sottolineatura incisa dei link nav (desktop) */
.nav__voci a::after{
  content:"";position:absolute;left:0;right:100%;bottom:-5px;height:1.5px;
  background:var(--oro);border-radius:2px;
  transition:right 260ms var(--ease-out);
}
.nav__voci a:hover::after{right:0}

/* sfondi compositi */
.hero__bloom{
  background:
    radial-gradient(42% 34% at 50% 44%, rgba(194,168,104,.4), transparent 70%),
    radial-gradient(60% 50% at 50% 60%, rgba(138,110,47,.16), transparent 75%);
}
.scheda__figura{
  background:radial-gradient(60% 60% at 50% 42%, rgba(194,168,104,.28), transparent 75%);
}

/* tratto d'incisione dei gioielli */
.disegno{stroke:var(--oro);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.disegno--scuro{stroke:var(--patina)}
.gemma{fill:rgba(30,61,47,.2);stroke:var(--smeraldo)}

/* hover schede: solo puntatori fini */
@media (hover:hover) and (pointer:fine){
  .scheda:not(.scheda--intro):hover{
    border-color:rgba(138,110,47,.6);
    background:rgba(252,249,240,.72);
    box-shadow:0 34px 90px -30px rgba(33,28,18,.45), 0 10px 26px -10px rgba(138,110,47,.28);
  }
  .scheda:not(.scheda--intro):hover .scheda__figura svg{transform:scale(1.07) rotate(-1.5deg)}
  .scheda__dati span:hover{border-color:var(--oro);color:var(--inchiostro);background:rgba(194,168,104,.16)}
}
.scheda__figura svg{transition:transform 480ms var(--ease-out)}
.scheda__dati span{transition:border-color 200ms var(--ease-out),color 200ms var(--ease-out),background-color 200ms var(--ease-out)}

/* pallino della timeline atelier (calc su clamp) */
.fase::before{
  content:"";position:absolute;left:calc(-1 * clamp(30px,5vw,54px) + 3px);top:calc(clamp(26px,4vh,40px) + 14px);
  width:14px;height:14px;border-radius:50%;
  background:var(--luce);border:2px solid var(--oro);
}

/* stati di validazione pilotati dal JS */
.campo .errore{display:none}
.campo.non-valido input{border-color:var(--ceralacca)}
.campo.non-valido .errore{display:block}

/* ---------- HAMBURGER: due tratti che si incrociano ---------- */
.hamburger{
  display:grid;place-items:center;
  width:42px;height:42px;border-radius:999px;
  background:transparent;border:1px solid rgba(138,110,47,.4);
  cursor:pointer;
  transition:border-color 200ms var(--ease-out),background-color 200ms var(--ease-out),transform 120ms var(--ease-out);
}
.hamburger:hover{border-color:var(--oro)}
.hamburger:active{transform:scale(.94)}
.hamburger span{
  grid-area:1/1;display:block;
  width:17px;height:1.5px;border-radius:2px;
  background:var(--inchiostro);
  transition:transform 480ms var(--ease-out);
}
.hamburger span:first-child{transform:translateY(-3.5px)}
.hamburger span:last-child{transform:translateY(3.5px)}
.nav[data-aperto="true"] .hamburger span:first-child{transform:rotate(45deg)}
.nav[data-aperto="true"] .hamburger span:last-child{transform:rotate(-45deg)}

/* ---------- MENU MOBILE: la pillola di vetro si apre ---------- */
.menu-mobile{
  position:absolute;top:calc(100% + 10px);left:0;right:0;
  padding:14px 24px 22px;
  border-radius:24px;
  background:rgba(250,246,235,.92);
  -webkit-backdrop-filter:blur(20px) saturate(170%);
  backdrop-filter:blur(20px) saturate(170%);
  border:1px solid var(--vetro-bordo);
  box-shadow:0 24px 70px -28px rgba(33,28,18,.35);
  white-space:normal;
  clip-path:inset(0px 0px 100% 0px round 24px);
  opacity:0;
  transform:translateY(-12px) scale(.985);
  transform-origin:top center;
  visibility:hidden;pointer-events:none;
  transition:
    clip-path 520ms var(--ease-out),
    opacity 260ms ease,
    transform 520ms var(--ease-out),
    visibility 0s 520ms;
}
.nav[data-aperto="true"] .menu-mobile{
  clip-path:inset(-80px -80px -80px -80px round 24px);
  opacity:1;transform:none;
  visibility:visible;pointer-events:auto;
  transition:
    clip-path 560ms var(--ease-out),
    opacity 220ms ease,
    transform 560ms var(--ease-out);
}
/* le voci affiorano una alla volta */
.menu-mobile .voce{
  opacity:0;transform:translateY(14px);
  transition:opacity 240ms ease,transform 380ms var(--ease-out);
}
.nav[data-aperto="true"] .menu-mobile .voce{opacity:1;transform:none}
.nav[data-aperto="true"] .menu-mobile .voce:nth-child(1){transition-delay:90ms}
.nav[data-aperto="true"] .menu-mobile .voce:nth-child(2){transition-delay:150ms}
.nav[data-aperto="true"] .menu-mobile .voce:nth-child(3){transition-delay:210ms}
.nav[data-aperto="true"] .menu-mobile .voce:nth-child(4){transition-delay:270ms}
.nav[data-aperto="true"] .menu-mobile .menu-mobile__cta{transition-delay:340ms}
.menu-mobile__cta{
  opacity:0;transform:translateY(14px);
  transition:opacity 240ms ease,transform 380ms var(--ease-out);
}
.nav[data-aperto="true"] .menu-mobile .menu-mobile__cta{opacity:1;transform:none}

/* ---------- Layout "senza scene pinnate": motore di riserva
   e versione a movimento ridotto (fade semplici, mai pagina morta) ---------- */
.no-motore .galleria__scena{min-height:auto;overflow:visible}
.no-motore .galleria__binario{flex-wrap:wrap;justify-content:center;padding:90px clamp(16px,4vw,60px);transform:none !important}
.no-motore .storia__scena{min-height:auto;padding-top:130px;padding-bottom:110px}
.no-motore .storia__blocchi{min-height:0}
.no-motore .storia__blocco{position:static;margin-bottom:30px}

/* ---------- Trasparenza ridotta ---------- */
@media (prefers-reduced-transparency: reduce){
  .nav,.menu-mobile{background:var(--luce) !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;border-color:var(--oro) !important}
  .scheda,.contatto__scheda{background:var(--luce) !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
}

/* ---------- Reduced motion: dissolvenze semplici, niente parallasse/suono ---------- */
@media (prefers-reduced-motion: reduce){
  .sigillo__audio{display:none}
  .hero h1 .riga span{transform:none !important}
  .menu-mobile,.menu-mobile .voce,.menu-mobile__cta,.hamburger span{transition:none}
}