/* manifesto: il CSS delle composizioni, una parte per composizione (<variante>.php). Portato dagli <style> del sito Astro. */

/* pelo */
.manifesto-pelo { padding: clamp(96px, 22vh, 220px) var(--margine) clamp(48px, 10vh, 110px); display: grid; grid-template-columns: 1fr 2fr; align-items: end; gap: 24px; }
.manifesto-pelo .frase-blocco { grid-column: 2; }
.manifesto-pelo .frase { font: var(--peso-titoli) clamp(2.1rem, 5.2vw, 5.6rem)/1.02 var(--font-titoli); letter-spacing: -0.03em; color: var(--titoli); }
.manifesto-pelo .frase-blocco .pelo { display: block; width: 100%; height: 40px; margin-top: 28px; overflow: visible; }
.manifesto-pelo .frase-blocco .pelo path { fill: none; stroke: var(--extra-salvia); stroke-width: 2; vector-effect: non-scaling-stroke; }
.manifesto-pelo .firma-testo { grid-column: 1; grid-row: 1; }
@media (max-width: 700px) {
  .manifesto-pelo { grid-template-columns: 1fr; }
  .manifesto-pelo .frase-blocco, .manifesto-pelo .firma-testo { grid-column: 1; grid-row: auto; }
}

/* salute */
.salute svg { position: absolute; }
.salute .salute-scena {
  position: relative; height: 100svh; overflow: hidden;
  /* fisso: l'atmosfera con la superficie a metà è parte dell'effetto salute-bellezza (la linea dell'acqua coincide con --linea), non contenuto */
  background: #e8ebe3 url("../../assets/immagini/linea-acqua.webp") center / cover;
}
.salute .strato { position: absolute; inset: 0; }
.salute .sopra { clip-path: inset(0 0 calc(100% - var(--linea, 52%)) 0); }
.salute .sotto { clip-path: inset(var(--linea, 52%) 0 0 0); filter: url(#acqua-mossa); }
.salute .parola {
  position: absolute; left: 0; right: 0; text-align: center; white-space: nowrap; text-transform: uppercase;
  font: var(--peso-titoli) clamp(3.4rem, 13vw, 13rem)/.9 var(--font-titoli); letter-spacing: -0.04em; color: var(--fondo-scuro);
}
.salute .sotto .parola { color: #d7e3da; opacity: .85; }
.salute .parola.bellezza { top: 18%; }
.salute .parola.salute { top: 62%; }
/* Senza JS: ordine finale, come con movimento ridotto. */
@media (scripting: none) {
  .salute .parola.bellezza { top: 62%; }
  .salute .parola.salute { top: 18%; }
}

.salute .didascalia {
  position: absolute; left: var(--margine); right: var(--margine); bottom: 28px; z-index: 3;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px;
  color: var(--testo-su-scuro); font-size: var(--scala-1); font-weight: 600; line-height: 1.25;
}
.salute .didascalia strong { font-weight: inherit; }
.salute .didascalia .firma { color: var(--salvia-chiara); }
/* Il testo intero arriva a fine corsa: nascosto solo con JS e movimento pieno. Serve da subito, prima che parta il motore:
   l'effetto legge l'opacità di partenza quando crea la scena. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .salute .didascalia { opacity: 0; }
}
@media (max-width: 860px) {
  .salute .didascalia { right: calc(var(--margine) + 72px); bottom: 32px; }
}
@media (max-width: 700px) {
  /* fisso: la stessa atmosfera dell'effetto, in versione ridotta per il telefono */
  .salute .salute-scena { background-image: url("../../assets/immagini/linea-acqua-960.webp"); }
}