/* Hallmark · shape: one-page den · genre: playful · theme: custom «Entra nel branco» (by request: «deve lasciare il segno») · job: book · v2.0.0
 * hero: night scene, the Due Torri against the moon, a wolf cub on the portico · nav: edge-aligned, wordmark and one action · footer: night close with the address
 * signature: the wolf cub that howls when touched; paw prints link the three booking steps · imagery: drawn scene, two library photographs in arches
 * axes: dark-to-light/soft-serif/warm · posture: committed */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R3 V5 · weakest: R, the hero carries moon, towers, portico and cub; kept the stars sparse and cleared them from the text */
/* Hallmark · waive 79 · the portico band and its lanterns fill the hero foot below the actions · il portico di Bologna chiude la notte del branco sotto i pulsanti */
/* Hallmark · waive 80 · the wolf cub and the Due Torri are the proposed brand, drawn because no photo of the den exists yet · il lupetto e la tana di Bologna sono il marchio proposto, in attesa delle foto vere */
@import url("./tokens.css");
@import url("./base.css");

/* Avviso di anteprima: unico, da togliere alla pubblicazione */
.anteprima { padding: var(--space-xs) var(--margine); background: var(--luna); color: var(--notte); font-size: var(--text-sm); font-weight: 700; text-align: center; }
.da-confermare { text-decoration-line: underline; text-decoration-style: dotted; text-decoration-color: var(--fuoco); text-decoration-thickness: 3px; text-underline-offset: 0.2em; }

/* Testata */
.testata { --focus: var(--luna); background: var(--notte); color: var(--carta); }
.testata-riga { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: var(--testata); }
.marchio { display: inline-flex; align-items: center; gap: var(--space-sm); min-height: 48px; font-family: var(--font-display); font-weight: 900; font-size: 1.85rem; line-height: 1; text-decoration: none; white-space: nowrap; }
.marchio img { width: 48px; }
.testata nav { display: flex; gap: var(--space-xl); }
.testata nav a { position: relative; display: inline-flex; align-items: center; min-height: 48px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.testata nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 3px; border-radius: 3px; background: var(--luna); transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-short) var(--ease-out); }
.testata nav a:hover::after, .testata nav a:focus-visible::after { transform: scaleX(1); }
.testata nav a:active { color: var(--luna); }

/* Pulsanti: una sola ricetta, con l'ombra dura dei giocattoli */
.bottone {
  --ombra: var(--notte-scura);
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 58px; padding: 0 var(--space-lg);
  border: var(--bordo) solid var(--notte-scura); border-radius: var(--raggio-pill);
  background: var(--fuoco); color: var(--notte);
  font: 700 var(--text-md)/1 var(--font-body);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: 0 6px 0 var(--ombra);
  transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out);
}
.bottone:hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--ombra); }
.bottone:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--ombra); }
.bottone-contorno { border-color: currentColor; background: none; color: inherit; box-shadow: none; }
.bottone-contorno:hover { box-shadow: none; background: var(--notte-chiara); }
.bottone-contorno:active { transform: translateY(2px); box-shadow: none; }
.bottone-piccolo { min-height: 46px; padding: 0 var(--space-md); font-size: var(--text-sm); box-shadow: 0 4px 0 var(--ombra); }

/* Hero: la notte su Bologna */
.hero { --focus: var(--luna); position: relative; isolation: isolate; padding-bottom: var(--portico); background: var(--notte); color: var(--carta); }
.cielo { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.cielo .puntino { fill: var(--carta); opacity: 0.75; }
.cielo .stella { color: var(--luna); }
.cielo .brilla { animation: brilla 2.8s ease-in-out infinite alternate; }
.cielo .brilla:nth-of-type(4) { animation-delay: -1.4s; }
@keyframes brilla { to { opacity: 0.2; } }
.hero-griglia { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--colonne); align-items: end; }
.hero-testo { align-self: center; padding-block: var(--space-2xl) var(--space-xl); }
.hero h1 { max-width: 9ch; font-size: var(--text-hero); line-height: 0.9; letter-spacing: -0.025em; }
.hero-frase { margin-top: var(--space-lg); max-width: 27ch; font-size: var(--text-lead); }
.azioni { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-xl); }

.scena { --lupo-w: clamp(150px, 19vw, 270px); position: relative; z-index: var(--z-sopra); align-self: end; padding-top: var(--space-xl); }
.scena-sfondo { width: 100%; }
.luna { fill: var(--luna); }
.luna-cratere { fill: var(--luna-ombra); }
.torri { fill: var(--notte-scura); }

.lupetto { position: absolute; right: 2%; bottom: calc(var(--lupo-w) * -0.07); width: var(--lupo-w); padding: 0; border: 0; background: none; cursor: pointer; }
.lupetto:disabled { cursor: default; }
.lupetto:focus-visible { outline-offset: 6px; border-radius: var(--raggio); }
.lupetto svg { width: 100%; overflow: visible; }
.lupetto .pelo { fill: var(--lupo); }
.lupetto .pelo-scuro { fill: var(--lupo-scuro); }
.lupetto .rosa { fill: var(--rosa); }
.lupetto .guancia { opacity: 0.75; }
.lupetto .muso, .lupetto .luce { fill: var(--carta); }
.lupetto .scuro { fill: var(--notte); }
.lupetto .bocca, .lupetto .dita { fill: none; stroke-width: 3; stroke-linecap: round; }
.lupetto .bocca { stroke: var(--notte); }
.lupetto .dita { stroke: var(--lupo-scuro); }
.lupetto .orecchio, .lupetto .testa, .lupetto .occhi { transform-box: fill-box; }
.lupetto .orecchio { transform-origin: 50% 100%; transition: transform var(--dur-short) var(--ease-rimbalzo); }
.lupetto .testa { transform-origin: 50% 100%; }
.lupetto .occhi { transform-origin: center; animation: sbatti 6s infinite; }
.lupetto:not(:disabled):hover .orecchio-s { transform: rotate(-14deg); }
.lupetto:not(:disabled):hover .orecchio-d { transform: rotate(14deg); }
.lupetto.ulula .testa { animation: ulula 1.5s var(--ease-out); }
@keyframes ulula { 20%, 70% { transform: translateY(-10px) rotate(-12deg); } }
@keyframes sbatti { 0%, 95%, 100% { transform: none; } 97% { transform: scaleY(0.1); } }

.ululato {
  position: absolute; z-index: 1; right: calc(var(--lupo-w) * 0.82); bottom: calc(var(--lupo-w) * 0.8);
  padding: 0.35em 0.8em; border: var(--bordo) solid var(--notte); border-radius: var(--raggio-pill);
  background: var(--carta); color: var(--notte);
  font-family: var(--font-display); font-weight: 900; font-size: clamp(1.4rem, 2.2vw, 2.2rem); line-height: 1;
  transform: rotate(-6deg);
  transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-long) var(--ease-rimbalzo);
  pointer-events: none;
}
.js .ululato:not(.visibile) { opacity: 0; transform: translateY(12px) scale(0.6) rotate(-6deg); }

.portico { position: absolute; left: 0; bottom: 0; z-index: 1; width: 100%; height: var(--portico); }
.portico .muro { fill: var(--carta); }
.portico .interno { fill: var(--notte-chiara); }
.portico .cornice { fill: var(--carta-scura); }
.portico .filo { stroke: var(--carta); stroke-width: 2; }
.portico .lampada { fill: var(--luna); }
.portico .alone { fill: url(#bagliore); }
.portico .bagliore-luce { stop-color: var(--luna); }

/* Servizi: quattro blocchi come giocattoli */
.servizi { padding-block: var(--sezione-s) var(--sezione); }
.servizi-griglia { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--colonne); margin-top: var(--space-2xl); }
.servizio {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-md);
  padding: var(--space-xl); border: var(--bordo) solid var(--notte); border-radius: var(--raggio);
  box-shadow: var(--ombra-dura) var(--ombra-dura) 0 var(--notte);
  transition: transform var(--dur-short) var(--ease-rimbalzo);
}
.servizio:hover { transform: translateY(-4px) rotate(-0.8deg); }
.servizio p { max-width: 36ch; }
.icona { width: 72px; height: 72px; flex: none; }
.icona .scuro { fill: var(--notte); }
.icona .chiaro { fill: var(--carta); }
.icona .filo { fill: none; stroke: var(--notte); stroke-width: 3; stroke-linecap: round; }
.servizio-laboratori { position: relative; overflow: hidden; grid-column: 1 / 8; grid-row: span 2; background: var(--rosa); }
.servizio-laboratori .icona { position: absolute; right: -24px; bottom: -24px; width: min(300px, 44%); height: auto; }
.servizio-laboratori > :not(.icona) { position: relative; }
.servizio-laboratori h3 { font-size: clamp(2.2rem, 2.6vw + 1rem, 3.75rem); }
.servizio-laboratori p { font-size: var(--text-lead); }
.servizio-baby { grid-column: 8 / 13; background: var(--menta); }
.servizio-feste { grid-column: 8 / 13; background: var(--fuoco); }
.servizio-negozio { grid-column: 1 / 13; flex-direction: row; align-items: center; gap: var(--space-xl); background: var(--luna); }
.negozio-testo { display: grid; flex: 1; gap: var(--space-xs); }
.fasce { display: flex; flex-wrap: wrap; gap: var(--space-xs); list-style: none; }
.fasce li { padding: var(--space-2xs) var(--space-md); border: 2px solid var(--notte); border-radius: var(--raggio-pill); background: var(--carta); font-weight: 700; }
.link-servizio { display: inline-flex; align-items: center; min-height: 48px; margin-top: auto; font-weight: 700; text-decoration-thickness: 3px; }
.link-servizio:hover { text-decoration-style: wavy; }
.link-servizio:active { color: var(--notte-chiara); }
.servizio-negozio .link-servizio { margin-top: 0; }

/* Come prenotare: le impronte collegano i passi */
.prenotare { padding-block: var(--sezione); background: var(--luna); }
.prenotare h2 { max-width: 15ch; }
.impronte { width: 100%; height: auto; margin-block: var(--space-xl) var(--space-lg); color: var(--fuoco); overflow: visible; }
.orma { transform-box: fill-box; transform-origin: center; transition: opacity 260ms var(--ease-out), transform 420ms var(--ease-rimbalzo); transition-delay: calc(var(--i) * 70ms); }
.js .impronte:not(.visto) .orma { opacity: 0; transform: scale(0.2); }
.passi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--colonne); margin-bottom: var(--space-2xl); list-style: none; }
.passi li { display: grid; align-content: start; gap: var(--space-sm); }
.passo-numero { font-variant-numeric: tabular-nums; font-family: var(--font-display); font-weight: 900; font-size: var(--text-numero); line-height: 0.85; }
.passi p { max-width: 30ch; }

/* La tana: foto negli archi del portico */
.tana { padding-block: var(--sezione); }
.tana-griglia { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--colonne); align-items: center; }
.testo-grande { margin-top: var(--space-lg); max-width: 26ch; font-size: var(--text-lead); }
.archi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--colonne); align-items: start; }
.arco { margin: 0; aspect-ratio: 3 / 4.2; overflow: hidden; border: var(--bordo) solid var(--notte); border-radius: var(--raggio-pill) var(--raggio-pill) 0 0; }
.arco img { width: 100%; height: 100%; object-fit: cover; }
.arco-rosa { box-shadow: var(--ombra-dura) var(--ombra-dura) 0 var(--rosa); }
.arco-rosa img { object-position: 62% 50%; }
.arco-menta { margin-top: var(--space-3xl); box-shadow: var(--ombra-dura) var(--ombra-dura) 0 var(--menta); }

/* Dove siamo: si torna alla notte */
.dove { --focus: var(--luna); position: relative; isolation: isolate; overflow: clip; padding-block: var(--sezione) var(--space-3xl); background: var(--notte); color: var(--carta); }
.luna-piccola { position: absolute; z-index: -1; top: var(--space-3xl); right: -10vw; width: clamp(240px, 36vw, 540px); aspect-ratio: 1; border-radius: 50%; background: var(--luna); box-shadow: inset -36px -18px 0 var(--luna-ombra); }
.dove h2 { max-width: 11ch; }
.indirizzo { margin-block: var(--space-xl); font-family: var(--font-display); font-weight: 900; font-size: var(--text-indirizzo); line-height: 0.95; letter-spacing: -0.02em; color: var(--luna); }
.dove-griglia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl); max-width: 980px; margin-top: var(--space-3xl); }
.dove h3 { margin-bottom: var(--space-md); }
.elenco div { display: flex; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-sm); border-top: 1px solid var(--lupo-scuro); }
.elenco dt { font-weight: 700; }

.piede { --focus: var(--luna); padding-block: var(--space-xl); background: var(--notte-scura); color: var(--carta); font-size: var(--text-sm); }
.piede-riga { display: grid; gap: var(--space-xs); }
.crediti { color: var(--lupo); }
.piede a:hover { color: var(--luna); }

@media (max-width: 64rem) {
  .testata nav { gap: var(--space-lg); }
  .servizio-laboratori { grid-column: 1 / -1; grid-row: auto; }
  .servizio-baby { grid-column: 1 / 7; }
  .servizio-feste { grid-column: 7 / 13; }
  .tana-griglia { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-2xl); }
}
@media (max-width: 56rem) {
  .testata nav { display: none; }
}
@media (max-width: 50rem) {
  .hero-griglia { grid-template-columns: minmax(0, 1fr); }
  .hero-testo { padding-block: var(--space-2xl) 0; }
  .scena { --lupo-w: clamp(140px, 30vw, 240px); justify-self: end; width: min(100%, 560px); }
}
@media (max-width: 40rem) {
  .cielo .solo-largo { display: none; }
  .marchio { font-size: 1.5rem; }
  .marchio img { width: 40px; }
  .scena { --lupo-w: 42vw; }
  .servizio { padding: var(--space-lg); }
  .servizio-baby, .servizio-feste { grid-column: 1 / -1; }
  .servizio-laboratori { padding-bottom: 152px; }
  .servizio-laboratori .icona { width: 150px; right: -16px; bottom: -16px; }
  .servizio-negozio { flex-direction: column; align-items: flex-start; gap: var(--space-md); }
  .impronte { display: none; }
  .passi { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); margin-top: var(--space-xl); }
  .archi { gap: var(--space-md); }
  .arco-menta { margin-top: var(--space-2xl); }
  .luna-piccola { top: -36px; right: -36px; width: 112px; box-shadow: inset -16px -8px 0 var(--luna-ombra); }
  .dove-griglia { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); margin-top: var(--space-2xl); }
  .elenco div { flex-direction: column; gap: 0; }
}