/* La pagina principale di hellofilo.app: una domenica intera in un solo scroll. Il cielo cambia con la parte della
   giornata (data-fase sul body), piatto come in Oggi: colori pieni, le forme di Filo, niente bagliori né sfumature. */
body.casa{--fg:#1F1B18;--fg2:#3E3A45;--oro:#E8C25A;background:#DFEEFA;color:var(--fg);overflow-x:hidden}
/* Il testo segue la sua scena, non il cielo: chiaro solo di notte. */
.scena[data-fase="notte"],.casa footer{--fg:#F3F1F6;--fg2:#C9C5D6;color:var(--fg)}
body.casa a{color:inherit}

/* La testa: una pillola che resta in alto. */
.barra{position:fixed;z-index:20;top:14px;left:50%;transform:translateX(-50%);width:min(680px,calc(100% - 24px));height:56px;border-radius:28px;background:#FFFFFF;color:#1F1B18;display:flex;align-items:center;gap:8px;padding:0 8px 0 14px;border:1px solid #ECEAF2}
.barra .marchio{color:#1F1B18;font-size:19px}
.barra .vuoto{flex:1}
.barra .lingua{color:#1F1B18;font-size:15px;font-weight:700;padding:0 10px;height:44px;display:flex;align-items:center;text-decoration:none}
.barra .entra{height:40px;border-radius:20px;background:#1F1B18;color:#FFFFFF;font-weight:800;font-size:15px;padding:0 16px;display:flex;align-items:center;text-decoration:none;white-space:nowrap}

/* Le scene: ognuna è almeno uno schermo; di notte stanno più vicine. */
.scena{position:relative;min-height:100vh;min-height:100svh;padding:120px 20px 80px;display:flex;flex-direction:column;justify-content:center}
.scena[data-fase="notte"]+.scena[data-fase="notte"]{min-height:auto;padding-top:40px}
.dentro{max-width:1080px;margin:0 auto;width:100%;position:relative;z-index:2}
.capitolo{font-size:14px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--fg2);margin:0 0 18px}
.grande{font-size:clamp(46px,9.5vw,132px);line-height:.98;letter-spacing:-.045em;font-weight:800;margin:0}
.medio{font-size:clamp(34px,6vw,76px);line-height:1.02;letter-spacing:-.035em;font-weight:800;margin:0}
.dire{font-size:clamp(18px,2.2vw,23px);line-height:1.5;color:var(--fg2);max-width:30em;margin:22px 0 0;font-weight:500}

/* Il cielo: un colore pieno che passa piano da un'ora all'altra mentre scorri (casa.js lo calcola a ogni fotogramma).
   Il sole scende dietro le scene, la luna sale la sera; nuvole di Filo, stelle che si accendono dopo le 21. */
.cielo{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:var(--sky,#DFEEFA)}
.sole,.luna{position:absolute;left:0;top:0;width:clamp(48px,8vw,104px);height:clamp(48px,8vw,104px);border-radius:50%;will-change:transform}
.sole{background:#F9E390}
.luna{background:#E9E2CC;transform:translate(80vw,120vh)}
.nuvola{position:absolute;background:var(--nuvola,#FFFFFF);border-radius:42% 58% 63% 37%/41% 44% 56% 59%;animation:deriva 60s linear infinite}
.nuvola.n1{width:220px;height:90px;top:16%;left:-10%}
.nuvola.n2{width:160px;height:66px;top:58%;left:70%;animation-duration:80s;animation-delay:-30s}
.nuvola.n3{width:120px;height:52px;top:80%;left:20%;animation-duration:70s;animation-delay:-50s}
@keyframes deriva{from{transform:translateX(-30vw)}to{transform:translateX(120vw)}}
.stelle{opacity:var(--stelle,0)}
.stelle i{position:absolute;border-radius:50%;background:#E9E2CC}

/* L'orologio della giornata, in basso: le ore scorrono con lo scroll. */
.ora{position:fixed;z-index:20;left:16px;bottom:16px;height:44px;border-radius:22px;background:#FFFFFF;color:#1F1B18;display:flex;align-items:center;gap:8px;padding:0 16px 0 12px;font-weight:800;font-size:16px;font-variant-numeric:tabular-nums;border:1px solid #ECEAF2}
.ora span{width:16px;height:16px;border-radius:50%;background:var(--astro,#F9E390);border:1.5px solid #1F1B18}

/* Filo: il corpo vivo (tre forme velate), gli occhi che seguono il dito o il cursore e ogni tanto battono. */
.filo-grande{position:relative;width:clamp(170px,26vw,280px);height:clamp(170px,26vw,280px);margin:0 0 28px;cursor:pointer}
.filo-grande .fb{position:absolute;border-radius:42% 58% 63% 37%/41% 44% 56% 59%;animation:morph 14s ease-in-out infinite,gira 46s linear infinite}
.filo-grande .fb:nth-child(1){inset:0;background:#FDBA74}
.filo-grande .fb:nth-child(2){left:23%;top:6%;width:75%;height:75%;background:#FFEDD5;opacity:.8;animation-direction:reverse,reverse}
.filo-grande .fb:nth-child(3){left:4%;top:31%;width:63%;height:63%;background:#FED7AA;opacity:.85}
.filo-grande .occhi{position:absolute;left:50%;top:44%;display:flex;gap:18%;width:36%;justify-content:center;transform:translate(calc(-50% + var(--ox,0px)),calc(-50% + var(--oy,0px)));transition:transform .25s cubic-bezier(.3,.8,.4,1)}
.filo-grande .occhi i{display:block;width:13%;min-width:12px;aspect-ratio:.72;border-radius:50%;background:#1F1B18;animation:batti 5.3s infinite}
.filo-grande.dorme .occhi i{aspect-ratio:2.6;border-radius:0 0 50% 50%;animation:none}
.filo-grande:active{transform:scale(1.06,.92);transition:transform .12s ease-out}
.filo-grande{transition:transform .45s cubic-bezier(.34,1.56,.64,1)}

/* Capitolo 1: il filo d'oro scende e infila i momenti del giorno, come foto stampate. */
.giorno{display:grid;gap:56px;margin-top:56px;position:relative}
.filo-oro{position:absolute;left:50%;top:-40px;bottom:-40px;width:4px;margin-left:-2px;background:var(--oro);transform-origin:top;border-radius:2px}
.js .filo-oro{transform:scaleY(0)}
.momento{position:relative;display:grid;grid-template-columns:1fr 96px 1fr;align-items:center}
.momento .foto{grid-column:1;grid-row:1;justify-self:end;width:min(380px,100%);background:#FFFFFF;padding:12px 12px 44px;border-radius:6px;transform:rotate(var(--r,-3deg));position:relative;margin:0}
.momento .foto svg{display:block;width:100%;height:auto;border-radius:3px}
.momento .foto figcaption{position:absolute;left:14px;bottom:12px;font-size:15px;font-weight:800;color:#5B5866}
.momento .perla{grid-column:2;grid-row:1;justify-self:center;width:26px;height:26px;border-radius:42% 58% 63% 37%/41% 44% 56% 59%;background:var(--perla,#F9E390);border:3px solid var(--oro);z-index:1}
.momento .cosa{grid-column:3;grid-row:1;max-width:380px;margin:0;font-size:clamp(17px,1.8vw,21px);line-height:1.45;color:var(--fg2)}
.momento:nth-of-type(even) .foto{grid-column:3;justify-self:start}
.momento:nth-of-type(even) .cosa{grid-column:1;justify-self:end;text-align:right}
.momento .cosa strong{display:block;font-size:clamp(26px,3.2vw,40px);line-height:1.05;letter-spacing:-.03em;color:var(--fg);margin-bottom:8px}
@media (max-width:700px){
  .filo-oro{left:28px;margin-left:-2px}
  .momento{display:flex;flex-direction:column;align-items:flex-start;gap:22px;padding-left:64px}
  .momento .perla{position:absolute;left:15px;top:40px}
  .momento .foto{width:92%}.momento .cosa,.momento:nth-of-type(even) .cosa{text-align:left}
}

/* Il rientro: le foto del giorno fanno un mucchietto, pronte per la sera. */
.rientro{min-height:80vh;min-height:80svh}
.mucchio{position:relative;width:min(300px,64vw);aspect-ratio:96/72;margin:0 0 48px}
.mucchio .foto{position:absolute;inset:0;background:#FFFFFF;padding:10px 10px 30px;border-radius:6px;transform:rotate(var(--r))}
.mucchio .foto svg{display:block;width:100%;height:auto;border-radius:3px}

/* Capitolo 2: alle 21 la pagina si scrive da sola, a matita; poi la tua riga, a penna. */
.foglio-sera{background:#FFFFFF;color:#1F1B18;border-radius:30px;padding:clamp(24px,4vw,48px);max-width:760px;margin-top:48px}
.foglio-sera .quando{font-size:14px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#5B5866}
.foglio-sera h3{font-size:clamp(26px,3.4vw,38px);letter-spacing:-.025em;line-height:1.1;margin:10px 0 18px;color:#6E6A7A}
.foglio-sera p{font-size:clamp(19px,2.2vw,25px);line-height:1.6;margin:0 0 14px}
.parola{color:#6E6A7A}
.js .parola{opacity:.12}
.penna{color:#1F1B18;font-weight:600;background:linear-gradient(#F9E390,#F9E390) no-repeat 0 92%/calc(var(--evidenzia,1) * 100%) 32%}
.js .penna{--evidenzia:0}
.js .penna span{opacity:0}
.legenda{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:22px;font-size:15px;font-weight:700;color:#5B5866}
.legenda b{color:#1F1B18}

/* Capitolo 3: il nodo, poi la collana dei giorni colorati da come stavi. */
.nodo-grande{display:inline-flex;align-items:center;gap:12px;height:64px;padding:0 28px;border-radius:32px;background:#F3F1F6;color:#121117;font-weight:800;font-size:21px;margin-top:36px;border:0;font-family:inherit;cursor:pointer}
.nodo-grande i{width:22px;height:22px;border-radius:42% 58% 63% 37%/41% 44% 56% 59%;background:#F9E390;border:2px solid #4C3300}
.collana{position:relative;margin-top:56px}
.collana svg{display:block;width:100%;height:auto;overflow:visible}
.collana svg.tel{display:none}
@media (max-width:700px){.collana svg.pc{display:none}.collana svg.tel{display:block}}
.collana .tratto{stroke:var(--oro);stroke-width:3;fill:none}
.umori{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:15px;font-weight:700;color:var(--fg2);margin-top:12px}
.umori span{display:inline-flex;align-items:center;gap:6px}
.umori i{width:14px;height:14px;border-radius:42% 58% 63% 37%/41% 44% 56% 59%}

/* Capitolo 4: tre promesse, grandi. */
.promessa{border-top:1.5px solid color-mix(in srgb,var(--fg) 22%,transparent);padding:40px 0;display:grid;gap:12px}
@media (min-width:860px){.promessa{grid-template-columns:1.1fr 1fr;align-items:end}}
.promessa .medio{font-size:clamp(34px,5.4vw,68px)}
.promessa p{font-size:clamp(18px,2vw,22px);line-height:1.5;color:var(--fg2);margin:0;max-width:26em}

/* La lista d'attesa, sotto le stelle. */
.lista-grande{display:flex;gap:8px;flex-wrap:wrap;margin-top:32px;max-width:620px}
.lista-grande input{flex:1 1 240px;min-width:0;height:60px;border-radius:30px;border:0;background:#FFFFFF;color:#1F1B18;font:inherit;font-size:18px;padding:0 24px}
.lista-grande button{height:60px;border-radius:30px;border:0;background:#FDBA74;color:#1F1B18;font:inherit;font-size:18px;font-weight:800;padding:0 28px;cursor:pointer}
.lista-grande button[disabled]{opacity:.6}
.esito{min-height:28px;font-weight:700;margin-top:12px}
.prezzo-riga{margin-top:28px;font-size:16px;color:var(--fg2);max-width:36em}
.casa footer{position:relative;z-index:2;max-width:1080px;margin:0 auto;padding:28px 20px 90px;border-top:1px solid color-mix(in srgb,var(--fg) 20%,transparent);color:var(--fg2)}
.casa footer a{color:var(--fg2)}

/* Entrano piano quando arrivano. */
.js .entra-su{opacity:0;transform:translateY(28px)}
.nascosto{position:absolute;left:-9999px}

/* I titoli entrano riga per riga (SplitText, con la maschera). */
.riga-mask{padding-bottom:.06em;margin-bottom:-.06em}

@media (prefers-reduced-motion:reduce){
  .nuvola,.filo-grande .fb,.filo-grande .occhi i{animation:none}
}