/* =====================================================================
   I CONFINI SEGRETI DEL GIAPPONE — Pagina contenuti extra
   ---------------------------------------------------------------------
   Indice
   0. Font
   1. Variabili (colori, font, misure)  ← le modifiche di stile partono da qui
   2. Base
   3. Sfondo: foto, sfumatura, curve di livello
   4. Contenuto: titolo, sottotitolo, nota
   5. Area di caricamento (dropzone) e barra di avanzamento
   6. Bottoni e messaggi
   7. Pagina mappa (mappa.html)
   8. Responsive
   9. Accessibilità e movimento ridotto
   ===================================================================== */


/* ---------------------------------------------------------------------
   0. FONT
   EB Garamond: alternativa gratuita ad Adobe Garamond Pro (licenza OFL).
   Figtree: bottoni (licenza OFL).
   Sono file "variabili": un solo file contiene tutti i pesi.
   Per passare ad Adobe Fonts: eliminare questi @font-face, inserire il
   <link> di Adobe Fonts nell'<head> e cambiare --font-serif qui sotto.
   --------------------------------------------------------------------- */
@font-face {
  font-family: "EB Garamond";
  src: url("../assets/fonts/EBGaramond-Variable.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "EB Garamond";
  src: url("../assets/fonts/EBGaramond-Italic-Variable.woff2") format("woff2");
  font-weight: 400 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Figtree";
  src: url("../assets/fonts/Figtree-Variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}


/* ---------------------------------------------------------------------
   1. VARIABILI
   --------------------------------------------------------------------- */
:root {
  /* Colori
     I primi tre sono i codici forniti; gli altri sono ricavati dallo screenshot. */
  --tint:         125, 122, 101;            /* #7d7a65 in RGB: sfumatura, riempimenti, bordi */
  --text-dark:    #7d7a65;                  /* testi su fondo chiaro */
  --cream:        #f6f0db;                  /* testi su fondo scuro */
  --cream-rgb:    246, 240, 219;            /* lo stesso crema in RGB, per le trasparenze */
  --cream-soft:   rgba(246, 240, 219, .62); /* titolo semitrasparente */
  --olive-dark:   #6a674c;                  /* contorno del focus sull’area di caricamento */
  --paper:        #e3dcbc;                  /* colore di riserva se la foto non carica */
  --error:        #7a3b2a;                  /* messaggi di errore */
  --red:          #ff2d39;                  /* bottone "seleziona / carica / Accedi alla mappa" */
  --red-dark:     #e01f2b;                  /* hover dei bottoni */

  /* Font */
  --font-serif: "EB Garamond", "Adobe Garamond Pro", Garamond, "Times New Roman", serif;
  --weight-title: 400;   /* EB Garamond è un filo più leggero di Adobe Garamond:  */
  --weight-text:  450;   /* per i testi correnti un peso leggermente maggiore lo avvicina */
  --font-sans:  "Figtree", "Futura", "Century Gothic", "Helvetica Neue", Arial, sans-serif;

  /* Dimensioni testo: clamp(minimo, fluido, massimo) */
  --fs-title: clamp(2.3rem, .9rem + 3.15vw, 4.5rem);
  --fs-lead:  clamp(1.2rem, .95rem + 1.12vw, 2rem);
  --fs-hint:  clamp(1rem, .9rem + .4vw, 1.3rem);
  --fs-note:  clamp(.95rem, .9rem + .2vw, 1.1rem);
  --fs-btn:   clamp(1rem, .95rem + .25vw, 1.2rem);

  /* Curve di livello */
  --contours-opacity: .20;    /* tarata sullo screenshot: al 60% le linee risultano
                                 circa il doppio più scure del mockup */
  --contours-shift-x: 0px;    /* aggiornate da js/background.js (parallasse) */
  --contours-shift-y: 0px;

  /* Area di caricamento */
  --dropzone-width:  min(22.5rem, 100%);
  --dropzone-height: clamp(5.5rem, 14vh, 7.5rem);
}


/* ---------------------------------------------------------------------
   2. BASE
   --------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  background: var(--paper);
  color: var(--cream);
  font-family: var(--font-serif);
  font-weight: var(--weight-text);
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

[hidden] { display: none !important; }


/* ---------------------------------------------------------------------
   3. SFONDO
   Tre livelli fissi alla finestra (position: fixed), così restano fermi
   anche quando su mobile la pagina scorre.
   --------------------------------------------------------------------- */
.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;           /* le curve "sbordano" ma senza creare scroll */
  pointer-events: none;
}

/* 3.1 Foto del muro: sempre a tutta altezza, ancorata al bordo inferiore
       così la parte scrostata resta sempre visibile in fondo */
.bg__photo {
  position: absolute;
  inset: 0;
  background-color: var(--paper);
  background-image: url("../assets/img/back.jpg");
  background-image: image-set(
    url("../assets/img/back.webp") type("image/webp"),
    url("../assets/img/back.jpg")  type("image/jpeg")
  );
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
}

/* 3.2 Sfumatura verde oliva, in "multiply" (moltiplica) sulla foto: il colore
       scurisce il muro invece di coprirlo, così la grana resta visibile.
       Piena in alto, cala in fretta fino a metà pagina e poi sfuma con una
       coda leggera fino all'80%: la coda dà ai testi crema (sottotitolo,
       area di caricamento, bottone) il fondo che serve per leggerli, senza
       scurire i testi scuri e la parte bassa della foto. */
.bg__tint {
  position: absolute;
  inset: 0;
  mix-blend-mode: multiply;
  background: linear-gradient(
    to bottom,
    rgba(var(--tint), .97) 0%,     /* partenza: #7d7a65 quasi pieno */
    rgba(var(--tint), .6)  42%,    /* all'altezza del sottotitolo */
    rgba(var(--tint), .3)  62%,    /* all'altezza dell'area di caricamento */
    rgba(var(--tint), 0)   80%
  );
}

/* 3.3 Curve di livello
   - centrate rispetto alla finestra (center center)
   - più grandi della finestra, quindi sbordano su tutti i lati
   - la larghezza cresce più lentamente della finestra (600px + 85vw):
     ridimensionando, le curve si muovono con un ritmo diverso dalla foto
     → effetto parallasse. La transizione rende il movimento morbido. */
.bg__contours {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(calc(600px + 85vw), 155vh);
  aspect-ratio: 1569 / 1209;
  transform: translate(
    calc(-50% + var(--contours-shift-x)),
    calc(-50% + var(--contours-shift-y))
  );
  opacity: var(--contours-opacity);
  transition:
    width 1.1s cubic-bezier(.22, .61, .36, 1),
    transform 1.1s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}

.bg__contours img {
  display: block;
  width: 100%;
  height: 100%;
}


/* ---------------------------------------------------------------------
   4. CONTENUTO
   --------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding:
    max(clamp(3.5rem, 13vh, 10rem), env(safe-area-inset-top))
    clamp(1.25rem, 5vw, 3rem)
    max(clamp(3rem, 12vh, 8rem), env(safe-area-inset-bottom));
}

.hero__title {
  margin: 0;
  max-width: 14em;
  font-size: var(--fs-title);
  font-weight: var(--weight-title);
  line-height: 1.08;
  letter-spacing: -.005em;
  color: var(--cream-soft);
  text-wrap: balance;
}

.hero__lead {
  margin: clamp(2.5rem, 9vh, 6.5rem) 0 0;
  max-width: 34em;
  font-size: var(--fs-lead);
  line-height: 1.3;
  color: var(--cream);
  text-wrap: balance;
}

.hero__lead em { font-style: italic; }

/* L'a capo del sottotitolo vale solo su schermi larghi */
.br-wide { display: none; }

/* Nota con asterisco: in basso a destra su desktop */
.hero__note {
  position: absolute;
  right: 20%;
  bottom: clamp(2rem, 6vh, 4.5rem);
  margin: 0;
  max-width: 24em;
  font-size: var(--fs-note);
  line-height: 1.3;
  color: var(--text-dark);
  text-wrap: balance;
}


/* ---------------------------------------------------------------------
   5. AREA DI CARICAMENTO
   Gli elementi interni compaiono o scompaiono in base a data-state
   sull'elemento .uploader (gestito da js/upload.js):
     idle        nessun file
     ready       file scelto, in attesa di "upload"
     processing  barra di avanzamento in corso
     done        completato
     error       file non valido (si comporta come idle + messaggio)
   --------------------------------------------------------------------- */
.uploader {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: clamp(2rem, 6.5vh, 5rem);
}

.dropzone {
  position: relative;
  width: var(--dropzone-width);
  height: var(--dropzone-height);
  display: grid;
  place-items: center;
  padding: 0 1.25rem;
  border: 1.5px dashed rgba(var(--tint), .7);
  background: rgba(var(--tint), .4);
  cursor: pointer;
  transition: background-color .25s ease, border-color .25s ease;
}

/* Tutti gli elementi interni occupano la stessa cella della griglia */
.dropzone > * { grid-area: 1 / 1; }

.dropzone:hover {
  background: rgba(var(--tint), .5);
}

/* Focus da tastiera (l'input nascosto riceve il focus) */
.dropzone:focus-within:has(:focus-visible) {
  outline: 2px solid var(--olive-dark);
  outline-offset: 4px;
}

/* File trascinato sopra l'area */
.dropzone.is-dragover {
  background: rgba(var(--tint), .6);
  border-color: var(--cream);
}

.dropzone__hint,
.dropzone__drag,
.dropzone__file {
  font-size: var(--fs-hint);
  font-weight: 500;
  color: var(--cream);
  line-height: 1.25;
}

.dropzone__drag,
.dropzone__file,
.progress { visibility: hidden; }

.dropzone.is-dragover .dropzone__hint { visibility: hidden; }
.dropzone.is-dragover .dropzone__drag { visibility: visible; }

/* Nome del file: una riga, con puntini se troppo lungo */
.dropzone__file {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

[data-state="ready"] .dropzone__hint,
[data-state="processing"] .dropzone__hint,
[data-state="done"] .dropzone__hint { visibility: hidden; }

[data-state="ready"] .dropzone__file,
[data-state="processing"] .dropzone__file,
[data-state="done"] .dropzone__file { visibility: visible; }

/* Durante l'elaborazione il nome sale e sotto compare la barra */
[data-state="processing"] .dropzone__file,
[data-state="done"] .dropzone__file { transform: translateY(-.8em); }

[data-state="processing"] .dropzone,
[data-state="done"] .dropzone { cursor: default; }

[data-state="processing"] .dropzone:hover,
[data-state="done"] .dropzone:hover { background: rgba(var(--tint), .4); }

/* Barra di avanzamento */
.progress {
  align-self: center;
  width: 70%;
  height: 3px;
  margin-top: 1.9em;
  background: rgba(var(--cream-rgb), .35);
  overflow: hidden;
}

[data-state="processing"] .progress,
[data-state="done"] .progress { visibility: visible; }

.progress__bar {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--cream);
  transform-origin: left center;
  transform: scaleX(0);        /* aggiornato da JS: scaleX(0 → 1) */
}


/* ---------------------------------------------------------------------
   6. BOTTONI E MESSAGGI
   --------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 9.5rem;
  min-height: 2.9rem;
  margin-top: clamp(1.4rem, 3.8vh, 2.5rem);
  padding: .55em 2.2em .6em;
  border: 0;
  border-radius: 999px;
  background: var(--red);
  color: var(--cream);
  font-family: var(--font-sans);
  font-size: var(--fs-btn);
  font-weight: 700;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease, opacity .2s ease;
}

.btn:hover { background: var(--red-dark); }
.btn:active { transform: translateY(1px); }

.btn:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

/* Durante l'elaborazione il bottone upload resta visibile ma inattivo */
.btn:disabled {
  opacity: .45;
  cursor: default;
  transform: none;
}

.btn:disabled:hover { background: var(--red); }

/* Messaggio di stato / errore sotto l'area */
.uploader__status {
  min-height: 1.35em;           /* riserva lo spazio: la pagina non "salta" */
  margin: .6rem 0 -.6rem;
  font-size: var(--fs-note);
  color: var(--text-dark);
}

[data-state="error"] .uploader__status { color: var(--error); }

/* Comparsa morbida del bottone mappa */
#map-link { animation: appear .6s ease both; }

@keyframes appear {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}


/* ---------------------------------------------------------------------
   7. PAGINA MAPPA (mappa.html) — segnaposto, da progettare
   --------------------------------------------------------------------- */
.map-page {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.5rem, 4vh, 2.5rem);
  justify-content: center;         /* contenuti centrati anche in verticale */
  padding:
    max(2.5rem, env(safe-area-inset-top))
    clamp(1.25rem, 5vw, 3rem)
    max(2.5rem, env(safe-area-inset-bottom));
  text-align: center;
}

/* Il titolo qui è più lungo: gli lasciamo più spazio in larghezza */
.map-page .hero__title { max-width: 20em; }

.map-page__text {
  margin: 0;
  max-width: 30em;
  font-size: var(--fs-lead);
  color: var(--cream);
  text-wrap: balance;
}

/* "Salva questa pagina tra i preferiti": un bottone che sembra un link */
.link-btn {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  cursor: pointer;
}

.link-btn:hover { text-decoration-thickness: 2px; }

.link-btn:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Istruzioni che compaiono dopo il click: su un fondo proprio,
   così restano leggibili a qualunque altezza cadano */
.map-page__hint {
  margin: 0;
  max-width: 26em;
  padding: .6em 1.2em .7em;
  border-radius: 1.2em;
  background: rgba(var(--tint), .6);
  font-size: var(--fs-hint);
  font-weight: 500;
  color: var(--cream);
  text-wrap: balance;
  animation: appear .4s ease both;
}


/* ---------------------------------------------------------------------
   8. RESPONSIVE
   --------------------------------------------------------------------- */

/* Schermi larghi: a capo nel sottotitolo come nello screenshot */
@media (min-width: 64em) {
  .br-wide { display: inline; }
}

/* Tablet e mobile: la nota passa in fondo, centrata, dentro il flusso */
@media (max-width: 56em) {
  .hero__note {
    position: static;
    margin-top: auto;
    padding-top: 3rem;
  }
}

/* Mobile: foto con taglio verticale (più leggera) */
@media (max-width: 40em) and (orientation: portrait) {
  .bg__photo {
    background-image: url("../assets/img/back-mobile.jpg");
    background-image: image-set(
      url("../assets/img/back-mobile.webp") type("image/webp"),
      url("../assets/img/back-mobile.jpg")  type("image/jpeg")
    );
  }
}

/* Schermi bassi (laptop piccoli, telefono in orizzontale): meno aria */
@media (max-height: 40em) and (min-width: 40em) {
  .hero { padding-top: 2.5rem; }
  .hero__lead { margin-top: 1.75rem; }
  .uploader { margin-top: 1.5rem; }
}


/* ---------------------------------------------------------------------
   9. ACCESSIBILITÀ
   --------------------------------------------------------------------- */

/* Nasconde visivamente ma resta leggibile da screen reader e tastiera */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Chi ha chiesto meno animazioni al sistema operativo non vede la parallasse */
@media (prefers-reduced-motion: reduce) {
  .bg__contours,
  .dropzone,
  .btn { transition: none; }

  #map-link,
  .map-page__hint { animation: none; }
}