/* Vetrina di libreria storica: avorio caldo, bordeaux, oro antico. Un'unica colonna, bande piene a tutta larghezza. */
:root {
  --avorio: #F4EEE3;
  --carta: #FBF7F0;
  --bordeaux: #4A1C1F;
  --inchiostro: #2B1416;
  --seppia: #6E4A3A;
  --oro: #9C7A3C;
  --oro-chiaro: #C9A462;
  --luce: #F3D9A4;
  --display: "Cormorant Garamond", "EB Garamond", Garamond, "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --testo: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --misura: 68ch;
  color-scheme: light;
}

/* Font locale (nessuna chiamata a server esterni). Metti i file .woff2 (o .ttf) in /fonts per avere il carattere esatto del logo. */
@font-face { font-family: "Cormorant Garamond"; font-weight: 500; font-display: swap; src: local("Cormorant Garamond Medium"), url("fonts/CormorantGaramond-Medium.woff2") format("woff2"), url("fonts/CormorantGaramond-Medium.ttf") format("truetype"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 600; font-display: swap; src: local("Cormorant Garamond SemiBold"), url("fonts/CormorantGaramond-SemiBold.woff2") format("woff2"), url("fonts/CormorantGaramond-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 500; font-style: italic; font-display: swap; src: local("Cormorant Garamond Medium Italic"), url("fonts/CormorantGaramond-MediumItalic.woff2") format("woff2"), url("fonts/CormorantGaramond-MediumItalic.ttf") format("truetype"); }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--avorio); color: var(--inchiostro); font-family: var(--testo); font-size: 1.0625rem; line-height: 1.65; }
img { max-width: 100%; height: auto; }
a { color: var(--bordeaux); text-underline-offset: 3px; }
a:hover { color: var(--oro); }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); font-weight: 500; line-height: 1.1; text-wrap: balance; margin: 0; color: var(--bordeaux); }

.salta { position: absolute; left: -999px; top: 0; background: var(--bordeaux); color: var(--avorio); padding: .5rem 1rem; }
.salta:focus { left: 1rem; }

.fascia { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.contenuto { max-width: 1080px; margin-inline: auto; }

/* Testata */
.testata { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; padding-block: 1.25rem; border-bottom: 1px solid color-mix(in srgb, var(--oro) 40%, transparent); background: color-mix(in srgb, var(--avorio) 92%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: padding .3s ease, box-shadow .3s ease; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 21; background: var(--avorio); }
.testata.compatta { padding-block: .6rem; box-shadow: 0 8px 24px -12px rgba(43, 20, 22, .25); }
.marchio img { transition: width .3s ease; }
.testata.compatta .marchio img { width: 36px; }
.menu a { position: relative; }
.menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--oro); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.menu a:hover::after, .menu a.attivo::after { transform: scaleX(1); }
.menu a.attivo { color: var(--oro); }
main section { scroll-margin-top: 96px; }
.testata .contenuto { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.marchio { display: flex; align-items: center; gap: .9rem; text-decoration: none; color: var(--bordeaux); }
.marchio img { width: 46px; }
.marchio-testo { display: flex; flex-direction: column; font-family: var(--display); line-height: 1; }
.marchio-testo small { font-size: .72rem; font-weight: 600; letter-spacing: .42em; text-transform: uppercase; }
.marchio-testo span { font-size: 1.9rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.menu { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; list-style: none; margin: 0; padding: 0; font-family: var(--display); font-size: 1.15rem; font-weight: 600; }
.menu a { text-decoration: none; }

/* Apertura */
.apertura { padding-block: clamp(3rem, 8vw, 6rem); }
.apertura .contenuto { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
.occhiello { font-family: var(--display); font-size: .85rem; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: var(--seppia); margin: 0 0 1rem; }
.apertura h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); font-style: italic; }
.apertura p { max-width: 46ch; margin: 1.25rem 0 2rem; font-size: 1.15rem; color: var(--seppia); }
.vetrina { justify-self: center; width: min(300px, 100%); }
.azioni { display: flex; flex-wrap: wrap; gap: .75rem; }
.bottone { display: inline-flex; align-items: center; min-height: 48px; padding: .7rem 1.5rem; border: 1px solid var(--bordeaux); font-family: var(--display); font-size: 1.15rem; font-weight: 600; letter-spacing: .04em; text-decoration: none; }
.bottone-pieno { background: var(--bordeaux); color: var(--avorio); }
.bottone-pieno:hover { background: var(--inchiostro); color: var(--luce); }
.bottone-vuoto { color: var(--bordeaux); }
.bottone-vuoto:hover { background: var(--carta); color: var(--bordeaux); }

/* Sezioni */
.sezione { padding-block: clamp(3rem, 7vw, 5rem); }
.sezione-carta { background: var(--carta); }
.sezione h2 { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 1.25rem; }
.sezione h2::after { content: ""; display: block; width: 56px; height: 1px; background: var(--oro); margin-top: .9rem; }
.sezione p { max-width: var(--misura); margin: 0 0 1rem; }
.griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 2rem; margin-top: 1rem; }
.voce h3 { font-size: 1.6rem; margin-bottom: .5rem; }
.voce p { margin: 0; color: var(--seppia); }
.piattaforme { list-style: none; padding: 0; margin: 1.5rem 0 1rem; display: flex; flex-wrap: wrap; gap: .75rem; }
.nota { font-size: .95rem; color: var(--seppia); }

.contatti { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 1.5rem 2rem; margin: 1rem 0 0; }
.contatti div { min-width: 0; }
.contatti dt { font-family: var(--display); font-size: .8rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--seppia); }
.contatti dd { margin: .25rem 0 0; overflow-wrap: anywhere; }

/* Dati da compilare: evidenziati finché non li sostituisci */
.dato { background: color-mix(in srgb, var(--luce) 70%, transparent); padding: 0 .2em; overflow-wrap: anywhere; }

/* Piè di pagina con i dati obbligatori */
.piede { background: var(--inchiostro); color: var(--avorio); padding-block: 3rem 2rem; font-size: .95rem; }
.piede a { color: var(--luce); }
.piede a:hover { color: var(--oro-chiaro); }
.piede .contenuto { display: flex; flex-direction: column; gap: 1.5rem; }
.piede .dato { background: transparent; color: var(--luce); outline: 1px dashed var(--oro-chiaro); }
.dati-legali { margin: 0; font-style: normal; line-height: 1.8; }
.dati-legali strong { font-family: var(--display); font-size: 1.3rem; font-weight: 600; letter-spacing: .08em; }
.link-legali { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; list-style: none; margin: 0; padding: 0; }
.copyright { margin: 0; color: #CDBBA4; font-size: .85rem; }

/* Pagine legali */
.legale { padding-block: 3rem 4rem; }
.legale .contenuto { max-width: var(--misura); }
.legale h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); margin-bottom: .5rem; }
.legale h2 { font-size: 1.6rem; margin: 2.25rem 0 .6rem; }
.legale p, .legale li { margin: 0 0 .8rem; }
.legale ul { padding-left: 1.25rem; }
.aggiornato { color: var(--seppia); font-style: italic; }

/* ---------- Animazioni e sezioni aggiuntive ---------- */

/* Apertura: parole che salgono, sottolineatura d'oro che si disegna */
.parola { display: inline-block; animation: sale .8s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i) * 90ms + .2s); }
.sottolinea { position: relative; }
.sottolinea::after { content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: 2px; background: var(--oro); transform: scaleX(0); transform-origin: left; animation: disegna .9s 1.1s cubic-bezier(.6, 0, .2, 1) forwards; }
.entra { animation: sale .8s cubic-bezier(.2, .7, .2, 1) both; animation-delay: var(--ritardo, 0s); }
@keyframes sale { from { opacity: 0; transform: translateY(.6em); } to { opacity: 1; transform: none; } }
@keyframes disegna { to { transform: scaleX(1); } }

/* Vetrina: la luce si accende, i libri si posano, il mappamondo gira */
.vetrina { position: relative; display: grid; place-items: center; }
.vetrina-anim { position: relative; width: 100%; height: auto; overflow: visible; }
.alone { position: absolute; inset: 8% -10% 0; background: radial-gradient(closest-side, rgba(243, 217, 164, .75), rgba(243, 217, 164, 0)); animation: alone-accendi 1.4s .3s ease-out both, respira 6s 2s ease-in-out infinite; }
@keyframes alone-accendi { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }
@keyframes respira { 50% { opacity: .65; transform: scale(.96); } }
.luce { animation: luce-accendi 1.2s .3s ease-out both; }
@keyframes luce-accendi { 0% { fill: #CDBFA8; } 40% { fill: #EAD3A2; } 55% { fill: #D9C59B; } 100% { fill: #F3D9A4; } }
.libro { transform-box: fill-box; transform-origin: 50% 100%; animation: posa .7s cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: calc(var(--n) * 150ms + .8s); }
@keyframes posa { from { opacity: 0; transform: translateY(-46px) rotate(-6deg); } to { opacity: 1; transform: none; } }
.globo { transform-box: fill-box; transform-origin: 50% 100%; animation: compare .7s 1.5s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes compare { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
.meridiano { transform-box: fill-box; transform-origin: center; animation: gira 5s 2.2s linear infinite; }
.meridiano-2 { animation-delay: -.3s; }
@keyframes gira { 0% { transform: scaleX(1); } 50% { transform: scaleX(.04); } 100% { transform: scaleX(1); } }
.chiave { transform-box: fill-box; transform-origin: center; animation: brilla 7s 2.5s ease-in-out infinite; }
@keyframes brilla { 0%, 86%, 100% { transform: none; } 92% { transform: scale(1.35) rotate(45deg); } }

/* Bottoni: freccia che scivola */
.freccia { display: inline-block; margin-left: .5rem; transition: transform .25s ease; }
.bottone:hover .freccia, .bottone:focus-visible .freccia { transform: translateX(4px); }
.bottone { transition: background-color .25s ease, color .25s ease, transform .25s ease; }
.bottone:active { transform: scale(.98); }

/* Nastro dei generi */
.nastro { overflow: hidden; background: var(--bordeaux); color: var(--avorio); padding-block: 1rem; }
.nastro-traccia { display: flex; width: max-content; animation: scorri 38s linear infinite; }
.nastro:hover .nastro-traccia { animation-play-state: paused; }
.nastro span { display: inline-flex; align-items: center; gap: 2rem; padding-right: 2rem; font-family: var(--display); font-size: 1.5rem; font-style: italic; white-space: nowrap; }
.nastro span::after { content: ""; width: 8px; height: 8px; background: var(--oro-chiaro); transform: rotate(45deg); }
@keyframes scorri { to { transform: translateX(-50%); } }

/* Chi siamo con timbro ex libris che ruota */
.chi-siamo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3rem; align-items: center; }
.timbro svg { display: block; width: 220px; height: auto; }
.timbro-anello { transform-origin: 110px 110px; animation: ruota 40s linear infinite; }
@keyframes ruota { to { transform: rotate(360deg); } }

/* Icone delle voci e sollevamento al passaggio */
.voce { padding: 1.75rem; background: var(--carta); border: 1px solid color-mix(in srgb, var(--oro) 30%, transparent); transition: transform .3s ease, box-shadow .3s ease; }
.voce:hover { transform: translateY(-4px); box-shadow: 0 18px 30px -18px rgba(43, 20, 22, .35); }
.icona { display: block; color: var(--oro); margin-bottom: 1rem; transition: transform .4s ease; }
.voce:hover .icona { transform: rotate(-6deg) scale(1.06); }

/* Come funziona: tre passi uniti da un filo d'oro */
.sezione-scura { background: var(--inchiostro); color: var(--avorio); }
.sezione-scura h2, .sezione-scura h3 { color: var(--avorio); }
.sezione-scura p { color: #E3D3BC; }
.passi { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; list-style: none; margin: 1.5rem 0 0; padding: 0; }
.passi::before { content: ""; position: absolute; top: 28px; left: 28px; right: 16%; height: 1px; background: var(--oro-chiaro); transform-origin: left; transition: transform 1.4s .3s cubic-bezier(.6, 0, .2, 1); }
.passi li { position: relative; min-width: 0; }
.passi h3 { font-size: 1.5rem; margin: 1.1rem 0 .4rem; }
.passi p { margin: 0; }
.passo-numero { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid var(--oro-chiaro); border-radius: 50%; background: var(--inchiostro); font-family: var(--display); font-size: 1.6rem; font-style: italic; color: var(--oro-chiaro); }

/* Comparsa allo scorrimento (attiva solo con JavaScript e senza "riduci movimento") */
[data-rivela] { transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--ritardo, 0s); }
.rivela-pronto [data-rivela].nascosto { opacity: 0; transform: translateY(28px); }
.rivela-pronto .passi.nascosto::before { transform: scaleX(0); }
.rivela-pronto .passi li { transition: opacity .6s ease, transform .6s ease; }
.rivela-pronto .passi.nascosto li { opacity: 0; transform: translateY(16px); }
.passi li:nth-child(2) { transition-delay: .35s; }
.passi li:nth-child(3) { transition-delay: .7s; }

/* Pulsante del menu: compare solo su telefono */
body { overflow-x: clip; }
.apri-menu { display: none; }

/* Telefono: menu a tendina, bottoni a tutta larghezza, spazi più compatti */
@media (max-width: 760px) {
  body { font-size: 1rem; }

  .testata { padding-block: .75rem; }
  .testata .contenuto { flex-wrap: wrap; gap: 0 1rem; }
  .marchio img { width: 36px; }
  .marchio-testo small { font-size: .66rem; letter-spacing: .36em; }
  .marchio-testo span { font-size: 1.6rem; }
  .testata nav { flex-basis: 100%; }
  .menu { gap: .1rem 1.1rem; padding-top: .5rem; font-size: 1.05rem; }
  .menu a { display: inline-block; padding-block: .35rem; }

  /* Con JavaScript attivo il menu si apre e si chiude dal pulsante */
  .menu-js .apri-menu { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; padding: .4rem .9rem; border: 1px solid color-mix(in srgb, var(--oro) 55%, transparent); border-radius: 999px; background: transparent; color: var(--bordeaux); font-family: var(--display); font-size: 1.05rem; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .apri-menu-linee, .apri-menu-linee::before, .apri-menu-linee::after { display: block; width: 18px; height: 1.5px; background: currentColor; border-radius: 1px; transition: transform .3s ease, background-color .2s ease; }
  .apri-menu-linee { position: relative; }
  .apri-menu-linee::before, .apri-menu-linee::after { content: ""; position: absolute; left: 0; }
  .apri-menu-linee::before { top: -6px; }
  .apri-menu-linee::after { top: 6px; }
  .menu-aperto .apri-menu-linee { background: transparent; }
  .menu-aperto .apri-menu-linee::before { transform: translateY(6px) rotate(45deg); }
  .menu-aperto .apri-menu-linee::after { transform: translateY(-6px) rotate(-45deg); }

  .menu-js .testata nav { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .35s ease, visibility 0s linear .35s; }
  .menu-js .testata.menu-aperto nav { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .35s ease; }
  .menu-js .menu { flex-direction: column; flex-wrap: nowrap; gap: 0; min-height: 0; overflow: hidden; padding-top: 0; font-size: 1.3rem; }
  .menu-js .menu li:first-child { margin-top: .6rem; }
  .menu-js .menu a { display: block; padding: .8rem 0; border-top: 1px solid color-mix(in srgb, var(--oro) 25%, transparent); }
  .menu-js .menu a::after { display: none; }

  .apertura { padding-block: 1.75rem 2.5rem; }
  .apertura .contenuto { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .vetrina { order: -1; width: 128px; }
  .occhiello { font-size: .75rem; margin-bottom: .6rem; }
  .apertura h1 { font-size: clamp(2.2rem, 10vw, 2.8rem); }
  .apertura p { font-size: 1.05rem; margin: 1rem 0 1.5rem; }
  .azioni { flex-direction: column; }
  .bottone { width: 100%; justify-content: center; text-align: center; min-height: 52px; }

  .sezione { padding-block: 2.5rem; }
  .sezione h2 { margin-bottom: 1rem; }
  .griglia { gap: 1.5rem; }
  .voce h3 { font-size: 1.45rem; }
  .piattaforme { flex-direction: column; }
  .contatti { gap: 1.1rem; }
  .contatti dd a { display: inline-block; padding-block: .3rem; }

  .piede { padding-block: 2.25rem 1.5rem; font-size: .9rem; }
  .dati-legali { line-height: 1.7; }
  .dati-legali strong { font-size: 1.15rem; }
  .link-legali a { display: inline-block; padding-block: .4rem; }

  .legale { padding-block: 2rem 3rem; }
  .legale h2 { font-size: 1.4rem; margin-top: 1.75rem; }

  .testata.compatta { padding-block: .4rem; }
  .testata.compatta .marchio img { width: 30px; }
  main section { scroll-margin-top: 110px; }
  .vetrina { width: 150px; }
  .nastro { padding-block: .75rem; }
  .nastro span { font-size: 1.2rem; gap: 1.4rem; padding-right: 1.4rem; }
  .chi-siamo { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .timbro { justify-self: center; }
  .timbro svg { width: 170px; }
  .voce { padding: 1.4rem; }
  .passi { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .passi::before { top: 28px; bottom: 28px; left: 28px; right: auto; width: 1px; height: auto; transform-origin: top; }
  .rivela-pronto .passi.nascosto::before { transform: scaleY(0); }
  .passi li { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 1.1rem; }
  .passo-numero { grid-row: span 2; }
  .passi h3 { margin: .6rem 0 .3rem; }
}

/* Chi preferisce meno movimento vede subito tutto, fermo */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .nastro-traccia { animation: none !important; }
}