/* ═══════════════════════════════════════════════════════════════
   HOME DI LANCIO — pagina temporanea (templates/public/home_lancio.html)
   Interfaccia pulita, quasi senza navigazione: tipografia Cormorant su
   fondi neutri e "specchiati". Due bozze sullo stesso markup:
     .lancio--a  Specchio   — chiara, fondo perla a bande speculari,
                              marchio riflesso sotto la linea d'orizzonte.
     .lancio--b  Flessione  — scura, testo argento con riflesso che scorre,
                              righe alternate attorno a un asse centrale.
   Vedi docs/home_lancio.md.
═══════════════════════════════════════════════════════════════ */

/* Font su :root (non su .lancio): così gli override per lingua di
   fonts-cjk.css (html[lang="ja"], più specifici) restano validi. */
:root {
  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Jost', system-ui, sans-serif;
}

.lancio {
  --l-bg: #EFEEEB;
  --l-text: #1A1A18;
  --l-text-soft: #5E5E5A;
  --l-line: rgba(20, 20, 18, 0.28);
  --l-gutter: clamp(16px, 5vw, 80px);

  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--l-bg);
  color: var(--l-text);
  font-family: var(--font-body);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

.lancio a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 0.5px; }

/* ─── Struttura ─── */
.lancio__top {
  display: flex;
  justify-content: flex-end;
  padding: 20px var(--l-gutter);
}
.lancio .lang-switcher__btn { color: var(--l-text-soft); }
.lancio .lang-switcher__btn:hover,
.lancio .lang-switcher__btn.is-active { color: var(--l-text); }

.lancio__main {
  flex: 1;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(32px, 8vh, 96px) var(--l-gutter) 64px;
  box-sizing: border-box;
  text-align: center;
}

/* ─── Marchio ─── */
.lancio__marchio {
  margin: 0 0 clamp(40px, 8vh, 88px);
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: clamp(3.4rem, 12vw, 8.5rem);
  line-height: 0.9;
  letter-spacing: 0.04em;
}
.lancio__marchio-testo,
.lancio__marchio-riflesso { display: block; }
.lancio__marchio-riflesso { display: none; }

/* ─── Manifesto ─── */
.lancio__manifesto {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: clamp(1.45rem, 3vw, 2.25rem);
  line-height: 1.3;
}
.lancio__riga { margin: 0 0 0.35em; }
.lancio__riga--forte {
  margin-top: 0.9em;
  font-size: 1.18em;
  font-weight: 400;
}
.lancio__riga--forte + .lancio__riga--forte { margin-top: 0; }
.lancio em { font-style: italic; }
html[lang="ja"] .lancio em,
html[lang^="zh"] .lancio em { font-style: normal; }

/* ─── Call to action newsletter ─── */
.lancio__cta {
  max-width: 520px;
  margin: clamp(64px, 14vh, 140px) auto 0;
}
.lancio__cta-titolo {
  margin: 0 0 12px;
  font-family: var(--font-heading);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.1;
}
.lancio__cta-testo {
  margin: 0 0 32px;
  color: var(--l-text-soft);
  font-size: 1rem;
  line-height: 1.6;
}
.lancio__nota {
  margin: 28px 0 0;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--l-text-soft);
}
.lancio__esito {
  margin: 0 0 24px;
  padding: 12px 16px;
  border: 0.5px solid var(--l-line);
  font-size: 0.9rem;
  line-height: 1.5;
}
.lancio__esito.is-err { border-color: #9B3B30; }
/* Esito chiudibile: × a destra, linea del timer che si accorcia sul bordo basso */
.lancio__esito {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  overflow: hidden;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.lancio__esito-testo { flex: 1; }
.lancio__esito-chiudi {
  flex: none;
  margin: -6px -6px -6px 0;
  padding: 4px 8px;
  background: none;
  border: 0;
  color: var(--l-text-soft);
  font: inherit;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}
.lancio__esito-chiudi:hover,
.lancio__esito-chiudi:focus-visible { color: var(--l-text); }
.lancio__esito.is-timer::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  height: 1px;
  width: 100%;
  background: currentColor;
  opacity: 0.45;
  transform-origin: left center;
  animation: lancio-esito-timer var(--durata, 7000ms) linear forwards;
}
.lancio__esito.is-timer:hover::after { animation-play-state: paused; }
.lancio__esito.is-chiuso { opacity: 0; transform: translateY(-6px); }
@keyframes lancio-esito-timer {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* Form condiviso (partials/newsletter_inline.html), riletto per la pagina */
.lancio .nl-form { text-align: left; }
.lancio .nl-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lancio .nl-form__label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
}
.lancio .nl-form__row {
  display: flex;
  align-items: stretch;
  border-bottom: 0.5px solid var(--l-text);
}
.lancio .nl-form__input {
  flex: 1;
  min-width: 0;
  padding: 14px 0;
  background: transparent;
  border: 0;
  color: var(--l-text);
  font: inherit;
  font-size: 1rem;
}
.lancio .nl-form__input::placeholder { color: var(--l-text-soft); opacity: 0.7; }
.lancio .nl-form__input:focus { outline: none; }
.lancio .nl-form__row:focus-within { border-bottom-width: 1px; }
.lancio .nl-form__submit {
  padding: 0 0 0 16px;
  background: none;
  border: 0;
  color: var(--l-text);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
}
.lancio .nl-form__consenso {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  margin-top: 16px;
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--l-text-soft);
  cursor: pointer;
}
.lancio .nl-form__consenso input { flex: none; margin: 0.2em 0 0; accent-color: var(--l-text); }

/* ─── Footer minimo ─── */
.lancio__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 24px var(--l-gutter) 32px;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--l-text-soft);
}
.lancio__footer a { text-decoration: none; }
.lancio__footer a:hover { color: var(--l-text); }

/* ─── Cookie notice (stesse classi della base pubblica) ─── */
.lancio .cookie-notice {
  position: fixed; left: var(--l-gutter); right: var(--l-gutter); bottom: 16px; z-index: 200;
  background: #141412; color: #CFCFCD; border: 0.5px solid #2A2A28;
  opacity: 0; transform: translateY(12px); transition: opacity 0.3s ease, transform 0.3s ease;
}
.lancio .cookie-notice.is-visible { opacity: 1; transform: none; }
.lancio .cookie-notice__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  max-width: 960px; margin: 0 auto; padding: 16px 24px;
}
.lancio .cookie-notice__text { margin: 0; font-size: 0.8rem; line-height: 1.5; }
.lancio .cookie-notice__btn {
  flex: none; padding: 0.7em 1.4em; background: none; color: #F0F0EE;
  border: 0.5px solid #5A5A56; font: inherit; font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; cursor: pointer;
}
@media (max-width: 640px) {
  .lancio .cookie-notice__inner { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ═══ BOZZA A — Specchio ═══════════════════════════════════════ */
.lancio--a {
  background-image: linear-gradient(115deg,
    #F6F5F2 0%, #E3E2DE 34%, #F9F9F7 48%, #E9E8E4 56%, #DAD9D5 72%, #F2F1EE 100%);
  background-attachment: fixed;
}
/* Linea d'orizzonte sotto il marchio (sul testo: il riflesso è capovolto) */
.lancio--a .lancio__marchio-testo {
  padding-bottom: 0.06em;
  border-bottom: 0.5px solid var(--l-line);
}
.lancio--a .lancio__marchio-riflesso {
  display: block;
  padding-top: 0.06em;
  transform: scaleY(-1);
  opacity: 0.32;
  -webkit-mask-image: linear-gradient(to bottom, transparent 15%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 15%, #000 100%);
}
.lancio--a .lancio__marchio { margin-bottom: clamp(16px, 4vh, 48px); }

/* ═══ BOZZA B — Flessione ══════════════════════════════════════ */
.lancio--b {
  --l-bg: #121211;
  --l-text: #ECECE8;
  --l-text-soft: #9C9C97;
  --l-line: rgba(236, 236, 232, 0.25);
  background-image: radial-gradient(ellipse at 50% 22%, #2B2B28 0%, #171716 45%, #0E0E0D 100%);
  background-attachment: fixed;
}
/* Asse verticale: la linea su cui la realtà "si flette" (solo nel manifesto) */
.lancio--b .lancio__manifesto::before {
  content: '';
  position: absolute;
  top: -48px; bottom: -48px; left: 50%;
  width: 0.5px;
  background: linear-gradient(to bottom, transparent, rgba(236, 236, 232, 0.18) 25%, rgba(236, 236, 232, 0.18) 75%, transparent);
  pointer-events: none;
}
/* Mobile: l'asse nasce quasi invisibile e cresce con lo scroll fino a superare
   il manifesto. --asse (0..1) lo scrive lancio.js; senza JS o con movimento
   ridotto vale 1 (linea intera, statica). */
@media (max-width: 640px) {
  .lancio--b .lancio__manifesto::before {
    bottom: auto;
    height: calc(100% + 48px + 12vh);
    background: linear-gradient(to bottom, transparent, rgba(236, 236, 232, 0.22) 12%, rgba(236, 236, 232, 0.22) 78%, transparent);
    transform-origin: top center;
    transform: scaleY(calc(0.06 + 0.94 * var(--asse, 1)));
    opacity: calc(0.08 + 0.92 * var(--asse, 1));
  }
}
.lancio--b .lancio__marchio,
.lancio--b .lancio__manifesto { position: relative; }
.lancio--b .lancio__marchio-testo,
.lancio--b .lancio__riga--forte,
.lancio--b .lancio__cta-titolo {
  background-image: linear-gradient(100deg,
    #8A8A85 0%, #F5F5F2 30%, #A3A39E 50%, #EDEDEA 70%, #8A8A85 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: lancio-riflesso 12s ease-in-out infinite alternate;
}
.lancio--b .lancio__marchio { letter-spacing: 0.12em; text-transform: uppercase; font-size: clamp(2.6rem, 9vw, 6.5rem); }
/* Logo a matita al posto della scritta (PNG chiaro su trasparente) */
.lancio--b .lancio__marchio--logo { line-height: 0; }
.lancio--b .lancio__marchio--logo img {
  display: block;
  width: min(100%, 380px);
  height: auto;
  margin: 0 auto;
  opacity: 0.94;
}
/* Mobile: impaginazione compatta (MIRARI largo quanto la M), marchio all'80%.
   M = 51.6% della versione larga e 73.1% della compatta → 0.8 × 51.6 / 73.1 ≈ 56.5% */
@media (max-width: 640px) {
  .lancio--b .lancio__marchio--logo img { width: min(56.5%, 215px); }
}
@keyframes lancio-riflesso {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}
/* Le righe si flettono ai due lati dell'asse, senza spezzarsi */
@media (min-width: 900px) {
  .lancio--b .lancio__riga:nth-child(odd):not(.lancio__riga--forte) { transform: translateX(-9%); }
  .lancio--b .lancio__riga:nth-child(even):not(.lancio__riga--forte) { transform: translateX(9%); }
}
@media (prefers-reduced-motion: reduce) {
  .lancio--b .lancio__marchio-testo,
  .lancio--b .lancio__riga--forte,
  .lancio--b .lancio__cta-titolo { animation: none; background-position: 50% 50%; }
}