/* =====================================================================
   KULURA · Pagina "sito in lavorazione" — foglio di stile
   Collegato da index.html. Indice:
     1. Caratteri  2. Palette  3. Base  4. Impaginazione e messaggio
     5. Pulsanti  6. Punti vendita  7. Foto di sfondo  8. Telefono
   ===================================================================== */

/* ---------- 1. Caratteri (ospitati sul sito) ---------- */
@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/instrument-serif-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/instrument-serif-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/inter-latin-500-normal.woff2') format('woff2'); }

/* ---------- 2. Palette Kulura (dal logo) ---------- */
:root {
  --nero: #1F1E1C; --grafite: #2A2926; --tortora: #9C917C; --tortora-chiaro: #C9C1B2;
  --fondo: #FAF8F5; --bianco: #FFFFFF;
  --titoli: 'Instrument Serif', Georgia, serif;
  --corpo: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --curva: cubic-bezier(.65, 0, .35, 1);
}

/* ---------- 3. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--nero); overscroll-behavior-y: none; }
body { margin: 0; min-height: 100vh; min-height: 100svh; color: var(--bianco); font-family: var(--corpo); line-height: 1.6; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
h1, p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--bianco); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 4. Impaginazione: messaggio al centro, sopra le foto ---------- */
.pagina { position: relative; isolation: isolate; display: grid; grid-template-rows: 1fr auto; min-height: 100vh; min-height: 100svh; padding: clamp(28px, 5vh, 48px) clamp(20px, 5vw, 64px) clamp(20px, 3vh, 32px); }

.centro { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(22px, 3.5vh, 34px); text-align: center; }
.centro__logo { height: clamp(110px, 17vh, 170px); width: auto; filter: drop-shadow(0 4px 24px rgb(0 0 0 / .35)); }
h1 { font-family: var(--titoli); font-weight: 400; font-size: clamp(64px, 12vw, 176px); line-height: .88; letter-spacing: -.02em; text-wrap: balance; text-shadow: 0 2px 30px rgb(0 0 0 / .25); }
h1 em { display: block; color: var(--tortora-chiaro); }

/* ---------- 5. Pulsanti ---------- */
.azioni { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }
.pulsante { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 13px 24px; border: 1px solid rgb(255 255 255 / .55); border-radius: 999px; font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background-color .3s, color .3s, border-color .3s; }
.pulsante svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pulsante--pieno { background: var(--fondo); border-color: var(--fondo); color: var(--nero); }
.pulsante--pieno:hover { background: var(--tortora); border-color: var(--tortora); }
.pulsante--contorno { background: rgb(31 30 28 / .25); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.pulsante--contorno:hover { background: var(--bianco); color: var(--nero); border-color: var(--bianco); }

/* ---------- 6. Punti vendita e note in basso ---------- */
.fondo { display: flex; flex-direction: column; gap: 18px; padding-top: 26px; border-top: 1px solid rgb(255 255 255 / .2); }
.negozi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 32px; margin: 0; padding: 0; list-style: none; }
.negozi strong { display: block; font-family: var(--titoli); font-weight: 400; font-size: 22px; line-height: 1.1; }
.negozi strong em { color: var(--tortora-chiaro); }
.negozi p { margin-top: 4px; font-size: 14px; line-height: 1.55; }
.negozi a { color: var(--bianco); text-decoration: none; }
.negozi a:hover { text-decoration: underline; text-underline-offset: 3px; }
.piede { font-size: 12px; color: rgb(255 255 255 / .6); text-align: center; }

/* ---------- 7. Foto a tutto schermo che si alternano (solo CSS) ----------
   4 foto, ciclo di 20 s: ogni foto entra "scoprendosi" dal basso sopra la
   precedente e resta 5 s. Una velatura scura tiene leggibile il testo. */
/* Lo sfondo resta FERMO mentre si scorre (position: fixed) ed è alto quanto
   lo schermo più grande (100lvh): così su telefono non "salta" quando la barra
   del browser compare o scompare, e la foto non viene stirata. */
.foto { position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100lvh; z-index: -1; overflow: hidden; background: var(--grafite); pointer-events: none; }
.foto figure { position: absolute; inset: 0; margin: 0; clip-path: inset(100% 0 0 0); animation: giro 20s var(--curva) infinite; }
.foto picture, .foto figure img { width: 100%; height: 100%; }
.foto figure img { object-fit: cover; animation: zoom 20s linear infinite; }
.foto figure:nth-child(1), .foto figure:nth-child(1) img { animation-delay: -1.3s; }
.foto figure:nth-child(2), .foto figure:nth-child(2) img { animation-delay: 3.7s; }
.foto figure:nth-child(3), .foto figure:nth-child(3) img { animation-delay: 8.7s; }
.foto figure:nth-child(4), .foto figure:nth-child(4) img { animation-delay: 13.7s; }
@keyframes giro {
  0%      { clip-path: inset(100% 0 0 0); z-index: 3; }
  6.5%    { clip-path: inset(0); z-index: 3; }
  31.4%   { clip-path: inset(0); z-index: 3; }
  31.5%   { clip-path: inset(0); z-index: 1; }
  38%     { clip-path: inset(0); z-index: 1; }
  38.1%, 100% { clip-path: inset(100% 0 0 0); z-index: 0; }
}
@keyframes zoom { 0% { transform: scale(1.12); } 38% { transform: scale(1); } 100% { transform: scale(1); } }
.foto::after { content: ''; position: absolute; inset: 0; z-index: 5; background: radial-gradient(ellipse at center, rgb(31 30 28 / .55) 0%, rgb(31 30 28 / .72) 60%, rgb(31 30 28 / .88) 100%); }

/* Con "riduci movimento" la prima foto resta ferma */
@media (prefers-reduced-motion: reduce) {
  .foto figure, .foto figure img { animation: none; }
  .foto figure:first-child { clip-path: none; }
}

/* ---------- 8. Telefono ---------- */
@media (max-width: 760px) {
  .pagina { grid-template-rows: minmax(78svh, 1fr) auto; }
  /* Niente sfocatura dietro ai pulsanti: su telefono rallenta lo scorrimento */
  .pulsante--contorno { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(31 30 28 / .55); }
  /* Foto più leggere da muovere durante lo scorrimento */
  .foto figure img { will-change: transform; }
  .azioni .pulsante--pieno { flex-basis: 100%; }
  .azioni .pulsante--contorno { flex: 1 1 0; }
  .negozi { grid-template-columns: 1fr; text-align: center; gap: 18px; }
}