/* QUATTRO - la hero "metamorfosi".
 *
 * Tutto sta sotto .weevo-metamorphosis: niente di qui tocca il resto del sito.
 *
 * La scena e' in tre atti sovrapposti - il ramo col bruco, il ramo con la
 * crisalide, il paesaggio - piu' la farfalla e il primo piano. Ogni atto ha un "palco" in 16:9 che copre lo schermo come
 * farebbe una fotografia: dentro il palco le posizioni sono in percentuale
 * dell'immagine del ramo, cosi' il bruco poggia davvero sulla corteccia a
 * qualunque misura di schermo.
 *
 * La profondita' di campo e' fatta con la sfocatura: fondo e primo piano fuori
 * fuoco, il ramo nitido.
 *
 * Senza script, o con "riduci movimento", resta il paesaggio finale con tutti
 * i testi uno sotto l'altro: la storia si legge lo stesso.
 */

.weevo-metamorphosis{
  --wm-inchiostro:#0B2440;
  --wm-blu:#0072CE;
  --wm-palco-l:max(100vw,177.78vh);
  --wm-palco-a:max(56.25vw,100vh);
  position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;isolation:isolate;
  background:#0E150B;color:#FFFFFF;
  font-family:"IBM Plex Sans","Segoe UI",Roboto,Arial,sans-serif;
}
.weevo-metamorphosis *,.weevo-metamorphosis *::before,.weevo-metamorphosis *::after{box-sizing:border-box}
.weevo-metamorphosis img{max-width:none;display:block}

.weevo-metamorphosis .wm-scena{position:absolute;inset:0;overflow:hidden}
.weevo-metamorphosis .wm-atto{position:absolute;inset:0}
.weevo-metamorphosis .wm-atto--2,.weevo-metamorphosis .wm-atto--3{visibility:hidden}

/* Gli sfondi: a tutto schermo, fuori fuoco quanto serve. */
.weevo-metamorphosis .wm-fondo{position:absolute;inset:-4%;will-change:transform}
.weevo-metamorphosis .wm-fondo-img{width:100%;height:100%;object-fit:cover}
.weevo-metamorphosis .wm-a1-bosco{filter:blur(5px) saturate(.95)}
.weevo-metamorphosis .wm-a2-bosco{filter:blur(7px) brightness(.85)}
.weevo-metamorphosis .wm-albero,.weevo-metamorphosis .wm-ecosistema{inset:0;opacity:0}

/* Il palco: l'immagine del ramo, in 16:9, che copre lo schermo. */
.weevo-metamorphosis .wm-palco{position:absolute;left:50%;top:50%;width:var(--wm-palco-l);height:var(--wm-palco-a);
  margin-left:calc(var(--wm-palco-l) / -2);margin-top:calc(var(--wm-palco-a) / -2);will-change:transform}
.weevo-metamorphosis .wm-palco-img{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 30px 40px rgba(0,0,0,.35))}
.weevo-metamorphosis .wm-a1-palco{transform-origin:60% 42%;margin-top:calc(var(--wm-palco-a) / -2 + 36vh)}
/* Il ramo abbassato mostrerebbe il bordo alto dell'immagine, dove le foglie
   sono tagliate: lo si sfuma, e le foglie si perdono nel bosco sfocato. */
.weevo-metamorphosis .wm-a1-palco .wm-palco-img{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 17%);mask-image:linear-gradient(180deg,transparent 0,#000 17%)}
.weevo-metamorphosis .wm-a2-palco{transform-origin:38.3% 62%}

/* Il bruco: due pose, distesa e inarcata; lo script ne mostra una alla volta. */
/* Le pose sono ritagliate al contorno: il bordo di sotto sono le zampe, e il
   top e' calcolato perche' poggino sulla corteccia. */
.weevo-metamorphosis .wm-bruco{position:absolute;left:34%;top:38.1%;width:12.5%;aspect-ratio:900/562;transform-origin:50% 100%;z-index:2}
.weevo-metamorphosis .wm-bruco-posa{position:absolute;filter:drop-shadow(0 10px 8px rgba(20,14,4,.45))}
.weevo-metamorphosis .wm-bruco-posa--disteso{inset:0;width:100%;height:100%;opacity:0}
.weevo-metamorphosis .wm-bruco-posa--inarcato{left:0;bottom:0;width:100%;height:auto}

/* La crisalide: quattro stadi, uno sull'altro. Sta dietro al ramo, che ne
   nasconde l'attacco: il gambo esce dal nodo sotto il ramo (38.3%, 52% del
   palco), dove non pende nessuna foglia. */
.weevo-metamorphosis .wm-crisalide{position:absolute;left:32.4%;top:50.4%;width:12%;aspect-ratio:733/1100}
.weevo-metamorphosis .wm-stadio{position:absolute;inset:0;width:100%;height:100%;opacity:0;filter:drop-shadow(0 14px 18px rgba(0,0,0,.4))}
.weevo-metamorphosis .wm-stadio--1{opacity:1}

/* Il paesaggio: le reti delle relazioni si posano sopra, leggere. */
.weevo-metamorphosis .wm-rete--lontana-1{left:8vw;bottom:6vh;width:60vw;opacity:0;mix-blend-mode:screen}
.weevo-metamorphosis .wm-rete--lontana-2{right:-4vw;bottom:14vh;width:54vw;opacity:0;mix-blend-mode:screen}

/* La farfalla: una posa alla volta, e in un punto alla volta. */
.weevo-metamorphosis .wm-farfalla{position:absolute;left:64%;top:40%;width:clamp(150px,17vw,300px);aspect-ratio:3/2;opacity:0;will-change:transform;pointer-events:none}
.weevo-metamorphosis .wm-posa{position:absolute;inset:0;width:100%;height:100%;opacity:0;filter:drop-shadow(0 12px 14px rgba(0,0,0,.35))}

/* Il primo piano: vicinissimo, fuori fuoco. */
.weevo-metamorphosis .wm-davanti{position:absolute;inset:0;pointer-events:none}
.weevo-metamorphosis .wm-vicino{position:absolute;height:auto;will-change:transform}
.weevo-metamorphosis .wm-vicino--fogliame{left:-24vw;top:-46vh;width:58vw;filter:blur(7px) brightness(.8)}
.weevo-metamorphosis .wm-vicino--basso{right:-12vw;bottom:-30vh;width:52vw;filter:blur(10px) brightness(.72)}
.weevo-metamorphosis .wm-vicino--alto{right:-10vw;top:-24vh;width:40vw;transform:rotate(160deg);filter:blur(9px) brightness(.7);opacity:.9}

/* La foglia che passa davanti alla camera e fa da taglio. */
.weevo-metamorphosis .wm-velo{position:absolute;inset:0;pointer-events:none;transform:translateX(120vw)}
.weevo-metamorphosis .wm-velo-img{position:absolute;left:-40vw;top:-50vh;width:190vw;height:auto;transform:rotate(-10deg);filter:blur(5px) brightness(.72)}

/* La luce: un po' di vignettatura e di caldo; poi la grana, come la pellicola. */
.weevo-metamorphosis .wm-luce{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%,rgba(0,0,0,0) 55%,rgba(0,0,0,.45) 100%),linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,0) 26%,rgba(0,0,0,0) 66%,rgba(0,0,0,.42))}
.weevo-metamorphosis .wm-grana{position:absolute;inset:-50%;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  animation:wm-grana 1s steps(4) infinite}
@keyframes wm-grana{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-1%,-2%)}100%{transform:translate(0,0)}}

/* =========================================================================
   I testi: grandi, bianchi, tra i livelli della scena
   Come l'ora sullo sfondo del telefono: stanno davanti al fondo sfocato e
   dietro al soggetto - il ramo, il bruco, la crisalide, la farfalla - che ne
   copre un pezzo. La sezione isola i suoi livelli (isolation), e gli atti
   non ne creano di propri: basta lo z-index per infilare i testi in mezzo.
   ====================================================================== */
.weevo-metamorphosis .wm-fondo{z-index:1}
.weevo-metamorphosis .wm-testo,.weevo-metamorphosis .wm-parole{z-index:2}
.weevo-metamorphosis .wm-palco,.weevo-metamorphosis .wm-rete{z-index:3}
.weevo-metamorphosis .wm-farfalla{z-index:4}
.weevo-metamorphosis .wm-davanti{z-index:5}
.weevo-metamorphosis .wm-velo{z-index:6}
.weevo-metamorphosis .wm-luce{z-index:7}
.weevo-metamorphosis .wm-grana{z-index:8}
.weevo-metamorphosis .wm-etichetta,.weevo-metamorphosis .wm-scorri{z-index:9}
.weevo-metamorphosis .wm-rete{position:absolute;height:auto;pointer-events:none}

.weevo-metamorphosis .wm-testi{position:absolute;inset:0;pointer-events:none}
.weevo-metamorphosis .wm-etichetta{position:absolute;left:clamp(18px,4vw,56px);bottom:clamp(20px,4vh,40px);margin:0;
  font:500 11px/1.4 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.weevo-metamorphosis .wm-testo{position:absolute;left:50%;transform:translateX(-50%);width:94vw;margin:0;text-align:center;color:#FFFFFF;
  font-family:"Archivo","Arial Narrow",Arial,sans-serif;font-weight:800;letter-spacing:-.025em;line-height:.9;text-wrap:balance;opacity:0;
  text-shadow:0 2px 40px rgba(0,0,0,.28)}
.weevo-metamorphosis .wm-testo em{font-style:normal;color:rgba(255,255,255,.72)}
.weevo-metamorphosis .wm-riga{display:block;will-change:transform}
.weevo-metamorphosis .wm-riga--tenue{color:rgba(255,255,255,.78)}
/* Sul ramo il ramo sta piu' in basso (il palco del primo atto e' abbassato):
   sopra resta il bosco sfocato, e il titolo ci sta intero; le foglie e il
   bruco ne coprono il fondo. */
.weevo-metamorphosis .wm-testo--1{top:7%;font-size:clamp(60px,9.4vw,172px);text-transform:uppercase;letter-spacing:-.01em;line-height:.86;opacity:1}
.weevo-metamorphosis .wm-testo--2{top:11%;font-size:clamp(34px,7.4vw,136px);text-transform:uppercase;letter-spacing:-.01em;line-height:.88}
/* Dietro la crisalide che si apre: lei ne copre il centro. */
.weevo-metamorphosis .wm-testo--3{top:42%;font-size:clamp(30px,5vw,96px);text-transform:uppercase;letter-spacing:-.01em;line-height:.88}
/* "IA per le persone." a sinistra della crisalide, "non al posto delle
   persone." a destra, un po' piu' in basso. */
.weevo-metamorphosis .wm-testo--3 .wm-riga{position:absolute;top:0;width:36vw;text-wrap:balance}
/* Le due righe stanno ai lati della crisalide; a destra la farfalla uscita
   apre le ali, e la riga parte piu' in la' per non finirci sotto. */
.weevo-metamorphosis .wm-testo--3 .wm-riga:nth-child(1){right:calc(50% + 9vw);text-align:right}
.weevo-metamorphosis .wm-testo--3 .wm-riga:nth-child(2){left:calc(50% + 14vw);width:32vw;top:2.4em;text-align:left}
.weevo-metamorphosis .wm-testo--4{top:8%;font-size:clamp(44px,9vw,170px);text-transform:uppercase;letter-spacing:-.01em;line-height:.86}
/* Le tre parole, a scala ai lati della crisalide e dietro di lei:
   "persone" in alto a sinistra sotto il ramo, "sostenibilita'" a destra sotto
   le foglie, "intelligenza artificiale" in basso a sinistra su due righe.
   Stesso carattere degli altri testi. */
.weevo-metamorphosis .wm-parole{position:absolute;inset:0}
.weevo-metamorphosis .wm-parola{position:absolute;margin:0;font-family:"Archivo","Arial Narrow",Arial,sans-serif;font-weight:800;font-size:clamp(34px,5vw,96px);line-height:.88;
  letter-spacing:-.01em;text-transform:uppercase;color:#FFFFFF;opacity:0;text-shadow:0 2px 40px rgba(0,0,0,.28);will-change:transform}
.weevo-metamorphosis .wm-parola--1{right:calc(50% + 4vw);top:40%;text-align:right}
.weevo-metamorphosis .wm-parola--2{left:calc(50% + 7vw);top:57%;text-align:left}
.weevo-metamorphosis .wm-parola--3{right:calc(50% + 8vw);top:70%;width:min-content;text-align:right}
.weevo-metamorphosis .wm-scorri{position:absolute;right:clamp(18px,4vw,56px);bottom:clamp(20px,4vh,40px);margin:0;display:flex;align-items:center;gap:12px;
  font:500 11px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.weevo-metamorphosis .wm-scorri span{display:block;width:1.5px;height:34px;background:currentColor;transform-origin:top;animation:wm-scorri 1.8s ease-in-out infinite}
@keyframes wm-scorri{0%{transform:scaleY(0)}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* =========================================================================
   Telefono: la stessa storia, con meno strati; il palco si sposta per tenere
   in quadro il bruco, poi la crisalide.
   ====================================================================== */
/* Telefono, e tablet in verticale: la hero stretta. */
@media (max-width:767px),(orientation:portrait) and (max-width:1100px){
  .weevo-metamorphosis .wm-a1-palco{margin-left:calc(var(--wm-palco-l) * -.3)}
  .weevo-metamorphosis .wm-bruco{left:26%;top:37.5%}
  .weevo-metamorphosis .wm-a2-palco{margin-left:calc(var(--wm-palco-l) * -.383)}
  .weevo-metamorphosis .wm-vicino--basso,.weevo-metamorphosis .wm-rete--lontana-2{display:none}
  .weevo-metamorphosis .wm-vicino--fogliame{width:120vw;left:-50vw;top:-10vh}
  .weevo-metamorphosis .wm-vicino--alto{width:80vw;opacity:.4}
  /* Sul telefono il primo piano sfocato cade proprio sui titoli e li
     annebbia: lo si fa piu' leggero, e la luce scurisce un po' di piu' la
     parte alta, dove stanno le scritte. */
  .weevo-metamorphosis .wm-vicino--fogliame{opacity:.35}
  .weevo-metamorphosis .wm-luce{background:radial-gradient(120% 90% at 50% 45%,rgba(0,0,0,0) 55%,rgba(0,0,0,.45) 100%),linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.12) 34%,rgba(0,0,0,0) 50%,rgba(0,0,0,0) 66%,rgba(0,0,0,.42))}
  .weevo-metamorphosis .wm-a1-palco{margin-top:calc(var(--wm-palco-a) / -2 + 36vh)}
  .weevo-metamorphosis .wm-testo--1{top:13%;font-size:clamp(44px,14vw,80px)}
  .weevo-metamorphosis .wm-testo{text-shadow:0 2px 24px rgba(0,0,0,.45),0 1px 3px rgba(0,0,0,.35)}
  .weevo-metamorphosis .wm-testo--2{left:50%;width:94vw}
  /* In fondo, sotto la farfalla: a meta' la farfalla aperta la copriva, in
     alto le foglie in primo piano. */
  .weevo-metamorphosis .wm-testo--3{top:auto;bottom:3%;font-size:clamp(22px,6.4vw,44px)}
  .weevo-metamorphosis .wm-testo--4{top:11%;font-size:clamp(36px,12vw,70px)}
  /* :nth-child(n) per pesare quanto le righe del desktop, che altrimenti
     vincevano e portavano la frase fuori dallo schermo. */
  .weevo-metamorphosis .wm-testo--3 .wm-riga:nth-child(n){position:relative;left:auto;right:auto;top:auto;width:auto;display:block;text-align:center}
  .weevo-metamorphosis .wm-parole{inset:auto;left:50%;top:28%;width:94vw;transform:translateX(-50%);text-align:center}
  .weevo-metamorphosis .wm-parola{position:relative;left:auto;right:auto;top:auto;width:auto;display:block;text-align:center;font-size:clamp(28px,9vw,52px);white-space:nowrap}
  .weevo-metamorphosis .wm-parola--3{white-space:normal;width:auto}
  .weevo-metamorphosis .wm-etichetta{right:clamp(18px,4vw,56px);bottom:70px}
}

/* =========================================================================
   Meno movimento: resta il paesaggio finale, con tutte le sue parole.
   ====================================================================== */
@media (prefers-reduced-motion:reduce){
  .weevo-metamorphosis{height:auto;min-height:100svh;background:#E9F0F4 url("asset/ecosistema.webp") center/cover no-repeat}
  .weevo-metamorphosis .wm-scena,.weevo-metamorphosis .wm-scorri{display:none}
  .weevo-metamorphosis .wm-testi{position:relative;display:grid;gap:clamp(16px,2.4vw,30px);align-content:center;justify-items:center;min-height:100svh;
    padding:120px clamp(18px,4vw,56px) 90px;text-align:center;background:rgba(244,241,232,.74)}
  .weevo-metamorphosis .wm-testo,.weevo-metamorphosis .wm-etichetta{position:static;transform:none;opacity:1;width:auto;max-width:22ch;color:var(--wm-inchiostro);text-shadow:0 0 34px rgba(255,255,255,.95),0 0 12px rgba(255,255,255,.9)}
  .weevo-metamorphosis .wm-testo em{color:var(--wm-blu)}
  .weevo-metamorphosis .wm-testo--3 .wm-riga{position:static;width:auto;text-align:center}
  .weevo-metamorphosis .wm-parole{position:static;transform:none;width:auto;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px}
  .weevo-metamorphosis .wm-parola{position:static;transform:none;opacity:1;color:var(--wm-blu);text-shadow:none;font-size:clamp(18px,2.2vw,32px)}
  .weevo-metamorphosis .wm-testo--1,.weevo-metamorphosis .wm-testo--2,.weevo-metamorphosis .wm-testo--4{font-size:clamp(26px,4vw,64px)}
  .weevo-metamorphosis .wm-testo--3,.weevo-metamorphosis .wm-testo--5{font-size:clamp(20px,2.6vw,40px)}
  .weevo-metamorphosis .wm-grana{animation:none}
}