/* ============ 07 · BRAND IDENTITY ============
   Facciamo anche il marchio, e l'esempio e' il nostro: la tavola dell'identita' di Alauda. Ogni foglio si
   scopre dietro una lama inclinata di 17°; poi la A si disegna con le sue misure, e dal suo taglio il
   giorno entra a strisce parallele, come il sole fra le lamelle. Da qui il sito e' in piena luce. */
#c-marchio{position:relative;height:840vh;margin-top:-100vh}
#c-marchio .bi-palco{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--notte);opacity:0}
#c-marchio .mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase}
/* 1 · il titolo */
#c-marchio .bi-testa{position:absolute;left:var(--m);right:var(--m);top:50%;transform:translateY(-50%);text-align:center;z-index:3}
#c-marchio .bi-occ{color:var(--nebbia);margin:0 0 22px}
#c-marchio .bi-tit{margin:0;font:400 clamp(2.6rem,min(1rem + 6.4vw,12svh),8.2rem)/.96 'Alauda Titoli','Mona Sans',sans-serif;text-transform:uppercase;color:var(--luce)}
#c-marchio .bi-tit .r{display:block;overflow:hidden;padding-bottom:.06em}
#c-marchio .bi-tit .r>span{display:block;transform:translateY(105%)}
#c-marchio .bi-tit .r.b>span{color:var(--nebbia)}
#c-marchio .bi-sotto{margin:28px auto 0;max-width:50ch;font-size:clamp(15px,1.2vw,18px);line-height:1.5;color:var(--calce);opacity:0}
/* 2 · la tavola di Alauda: sette pagine vere del manuale, impaginate come su un tavolo */
#c-marchio .bi-tavola{position:absolute;left:50%;top:55%;width:min(1180px,92vw,calc(70svh * 2.0777));aspect-ratio:1176.4/566.2;transform:translate(-50%,-50%);z-index:2}
#c-marchio .bi-f{position:absolute;margin:0;padding:0;background:#0B0B0B;border-radius:3px;overflow:hidden;
  visibility:hidden;will-change:transform}
/* il velo che scopre il foglio: nero come il fondo, col bordo inclinato di 17°, scivola via (lo muove la scheda grafica) */
#c-marchio .bi-f .velo{position:absolute;top:0;bottom:0;left:0;z-index:2;background:#0B0B0B;transform-origin:50% 50%;will-change:transform}
#c-marchio .bi-f img{display:block;width:100%;height:100%;object-fit:cover}
#c-marchio .f-a{left:0;top:0;width:50.32%;height:59.7%}
#c-marchio .f-b{left:51.34%;top:0;width:24.65%;height:28.81%}
#c-marchio .f-c{left:51.34%;top:30.93%;width:24.65%;height:28.81%}
#c-marchio .f-d{left:77.01%;top:0;width:22.99%;height:59.7%}
#c-marchio .f-e{left:0;top:61.82%;width:32.67%;height:38.18%}
#c-marchio .f-f{left:33.69%;top:61.82%;width:32.67%;height:38.18%}
#c-marchio .f-g{left:67.35%;top:61.82%;width:32.65%;height:38.18%}
/* 3 · la nostra A, con le sue misure: in differenza, cosi' quando entra il giorno si fa d'inchiostro */
#c-marchio .bi-a{position:absolute;inset:0;z-index:5;mix-blend-mode:difference;color:var(--calce);pointer-events:none}
#c-marchio .bi-a svg{position:absolute;left:50%;top:50%;width:min(62vw,84svh);height:auto;transform:translate(-62%,-50%);overflow:visible}
#c-marchio .bi-a .a-tratto{fill:none;stroke:currentColor;stroke-width:3;vector-effect:non-scaling-stroke}
#c-marchio .bi-a .a-pieno{fill:currentColor;opacity:0}
#c-marchio .bi-a .guida{fill:none;stroke:currentColor;stroke-width:1;stroke-dasharray:6 8;opacity:0;vector-effect:non-scaling-stroke}
#c-marchio .bi-a .arco{fill:none;stroke:currentColor;stroke-width:1.5;vector-effect:non-scaling-stroke}
#c-marchio .bi-a text{fill:currentColor;font:500 30px 'JetBrains Mono',monospace;letter-spacing:.08em;opacity:0}
#c-marchio .bi-a .gradi{font:400 64px 'Alauda Titoli','Mona Sans',sans-serif;letter-spacing:0}
#c-marchio .bi-a-testo{position:absolute;right:var(--m);top:50%;transform:translateY(-50%);width:min(34rem,38vw);text-align:left}
#c-marchio .bi-a-testo .mono{opacity:0;margin:0 0 18px}
#c-marchio .bi-a-testo h3{margin:0;font:400 clamp(2rem,min(1rem + 3vw,7svh),4rem)/.95 'Alauda Titoli','Mona Sans',sans-serif;text-transform:uppercase;opacity:0}
#c-marchio .bi-a-testo p{margin:22px 0 0;font-size:clamp(15px,1.25vw,19px);line-height:1.5;opacity:0}
#c-marchio .bi-a-testo p.poi{margin-top:12px}
/* 4 · il giorno a strisce */
#c-marchio .bi-giorno{position:absolute;inset:0;z-index:4;overflow:hidden;pointer-events:none}
#c-marchio .bi-giorno i{position:absolute;left:0;top:0;background:var(--calce);transform-origin:50% 50%;will-change:transform}
@media (max-width:899px){
  #c-marchio .bi-tavola{top:54%;width:92vw;aspect-ratio:100/115.4}
  #c-marchio .f-a{left:0;top:0;width:100%;height:48.74%}
  #c-marchio .f-b{left:0;top:50.48%;width:49%;height:23.88%}
  #c-marchio .f-c{left:51%;top:50.48%;width:49%;height:23.88%}
  #c-marchio .f-e{left:0;top:76.09%;width:49%;height:23.88%}
  #c-marchio .f-d{left:51%;top:76.09%;width:49%;height:23.88%}
  #c-marchio .f-d img{object-position:50% 86%}
  #c-marchio .f-f,#c-marchio .f-g{display:none}
  #c-marchio .bi-a svg{width:86vw;transform:translate(-50%,-78%)}
  #c-marchio .bi-a-testo{left:var(--m);right:var(--m);top:auto;bottom:10svh;transform:none;width:auto}
}