/* caverzasio.ch: stile unico, senza classi. Misure copiate dal sito attuale. */

/* FH Dfaalt SemiBold (licenza in iCloud: Progetti/cvr_caverzasio-ch/branding/fonts) */
@font-face {
  font-family: "FH Dfaalt";
  src: url("fonts/FHDfaalt-SemiBold.woff") format("woff");
  font-weight: 600;
  font-display: swap;
}

:root {
  /* fondo #101010 come unstated.co, non nero pieno */
  --bg: #101010;
  --fg: #fff;
  --accent: #f44f05;
  --gap: 16px;
  /* due sole misure: il testo (tutto, anche nome, ora e menu) e l'h1. La gerarchia la danno bianco e grigio */
  /* 12px con interlinea al 110%, come il testo di unstated.co */
  --size: 12px;
  --line: 13.2px;
  --grey: .4;
  --grey-text: .5; /* i paragrafi grigi accanto a un titolo */
  /* icone: frecce stile Inter, tratto 1px, larghe 21px come il "+" del menu (il "+" e la X sono in CSS, sotto "menu").
     Usate in: galleria della home e del dettaglio, lightbox di photography, accordion, cursori del dettaglio */
  --icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='15' viewBox='0 0 21 15'%3E%3Cpath d='M0 7.5h20M13.5 1l6.5 6.5-6.5 6.5' fill='none' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E");
  --icon-arrow-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='15' viewBox='0 0 21 15'%3E%3Cpath d='M21 7.5H1M7.5 1L1 7.5 7.5 14' fill='none' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E");
  --icon-arrow-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='13' viewBox='0 0 11 13'%3E%3Cpath d='M5.5 0v12M1 7.5l4.5 4.5L10 7.5' fill='none' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E");
  --icon-cursor-next: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='30' viewBox='0 0 42 30'%3E%3Cg fill='none'%3E%3Cpath d='M10.5 15h20M24 8.5l6.5 6.5-6.5 6.5' stroke='%23000' stroke-opacity='.2' stroke-width='3'/%3E%3Cpath d='M10.5 15h20M24 8.5l6.5 6.5-6.5 6.5' stroke='%23fff' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E");
  --icon-cursor-prev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='30' viewBox='0 0 42 30'%3E%3Cg fill='none'%3E%3Cpath d='M31.5 15h-20M18 8.5L11.5 15l6.5 6.5' stroke='%23000' stroke-opacity='.2' stroke-width='3'/%3E%3Cpath d='M31.5 15h-20M18 8.5L11.5 15l6.5 6.5' stroke='%23fff' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E");
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { background: var(--bg); }
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: var(--gap);
  color: var(--fg);
  font: 600 var(--size)/var(--line) "FH Dfaalt", Arial, sans-serif;
  letter-spacing: -.01em; /* come unstated.co a 12px/110% */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img, iframe, video { display: block; width: 100%; border: 0; }
img { height: auto; }
ul, ol { list-style: none; }
h1 { font-weight: 600; font-size: 48px; line-height: 48px; letter-spacing: -.03em; }
/* titolo della pagina: fisso, centrato in verticale sulla linea del menu;
   sopra le immagini chiare si inverte (difference) */
h1 {
  position: fixed;
  top: 50%;
  left: var(--gap);
  transform: translateY(-50%);
  z-index: 96;
  mix-blend-mode: difference;
}
h2 { font: inherit; }

/* grana animata sopra tutto */
body::after {
  content: "";
  position: fixed;
  inset: -100% 0 0 -50%;
  width: 300%;
  height: 300%;
  background: url("img/noise.png");
  pointer-events: none;
  z-index: 9999;
  animation: grain 8s steps(10, end) infinite;
}
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-5%, -10%); }
  20% { transform: translate(-15%, 5%); }
  30% { transform: translate(7%, -25%); }
  40% { transform: translate(-5%, 25%); }
  50% { transform: translate(-15%, 10%); }
  60% { transform: translate(15%, 0); }
  70% { transform: translate(0, 15%); }
  80% { transform: translate(3%, 35%); }
  90% { transform: translate(-10%, 10%); }
}

/* elementi fissi: nome in alto; in basso l'orologio e, alla sua destra in grigio, Explore e Privacy */
header > a,
body > footer {
  position: fixed;
  left: var(--gap);
  z-index: 97;
}
header > a { top: var(--gap); }
body > footer { bottom: var(--gap); display: flex; gap: var(--gap); }
body > footer time { font-variant-numeric: tabular-nums; }
body > footer a { opacity: var(--grey); transition: opacity .22s; }
body > footer a:hover, body > footer a[aria-current] { opacity: 1; }

/* ---------- menu: cerchio al centro dello schermo ---------- */
nav {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 98;
}
nav button {
  position: absolute;
  width: 60px;
  height: 60px;
  margin: -30px;
  border: 0;
  border-radius: 50%;
  background: var(--fg);
  cursor: pointer;
  z-index: 1;
  transition: transform .35s;
}
/* il "+" disegnato con due linee (lo stesso, ruotato, chiude il lightbox) */
nav button::before,
nav button::after,
dialog button:nth-of-type(3)::before,
dialog button:nth-of-type(3)::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 21px;
  height: 1px;
  margin-left: -10.5px;
  background: var(--bg);
}
nav button::after, dialog button:nth-of-type(3)::after { transform: rotate(90deg); }
nav button[aria-expanded="true"] { transform: rotate(-45deg); }

nav div {
  position: absolute;
  width: 200px;
  height: 200px;
  margin: -100px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .95);
  opacity: 0;
  transform: scale(.8);
  pointer-events: none;
  transition: opacity .4s ease, transform .4s ease;
}
nav button[aria-expanded="true"] + div {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
/* le lettere girano lungo il cerchio; si fermano col mouse sopra */
nav ul {
  position: absolute;
  inset: 0;
  animation: spin 12s linear infinite;
}
nav div:hover ul { animation-play-state: paused; }
@keyframes spin { to { transform: rotate(360deg); } }
nav a { color: var(--bg); }
nav ul { font-size: 14px; letter-spacing: 0; }
nav span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: 0 0;
}
nav a span { transition: color .3s; }
nav a:hover span { color: var(--accent); }
nav a[aria-current] span { color: var(--bg); }

/* ---------- colonna destra: tutto parte a meta' pagina (griglia a 12 colonne, gap 16) ---------- */
main > * { margin-left: calc(50% + 8px); }
main > h1 { margin-left: 0; }

main > p + p,
details p + p { text-indent: 16px; }

main > p + div { margin-top: 64px; }
main > div:has(> h1:first-child) h1 { position: static; display: inline; font: inherit; letter-spacing: inherit; transform: none; mix-blend-mode: normal; }
main > div:has(> h1:first-child) p { display: inline; opacity: var(--grey-text); }
main > div p + p { margin-top: var(--line); }

/* ---------- lavori (selected works, projects) ---------- */
main > ol > li {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: var(--gap);
  margin-bottom: 48px;
  counter-increment: work;
}
/* numero del progetto, a destra della colonna vuota */
main > ol > li::before {
  content: counter(work, decimal-leading-zero);
  position: absolute;
  top: 0;
  right: calc(100% + var(--gap));
  opacity: var(--grey);
}
main > ol h2 { grid-column: span 2; }
main > ol li > div { grid-column: span 4; }

/* galleria: immagini (o video) sovrapposte in dissolvenza, la freccia occupa la meta' destra */
main > ol figure {
  grid-column: 1 / -1;
  display: grid;
  margin-bottom: 8px;
}
main > ol figure > img,
main > ol figure > video {
  grid-area: 1 / 1;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: opacity .5s ease;
}
main > ol figure > * + img { opacity: 0; }
main > ol figure button,
article > figure button {
  grid-area: 1 / 1;
  justify-self: end;
  width: 50%;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
}
/* freccia sottile, come il "+" del menu: tratto da 1px, larga 21px */
main > ol figure button::after,
article > figure button::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 28px;
  width: 21px;
  height: 15px;
  margin-top: -7.5px;
  background: var(--fg);
  -webkit-mask: var(--icon-arrow-right) center / contain no-repeat;
  mask: var(--icon-arrow-right) center / contain no-repeat;
}
main > ol li p { opacity: var(--grey-text); }
/* tutto il progetto e' cliccabile: il link del titolo copre la riga intera; la freccia della galleria resta sopra */
main > ol h2 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
main > ol figure button { z-index: 2; }
main > ol li p a { color: var(--accent); }
main > p a { color: var(--accent); }

/* ---------- accordion (discography, info) ---------- */
main > p + details { margin-top: 16px; }
details { margin-bottom: 16px; }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
summary time { display: block; opacity: var(--grey); }
summary::after { content: ""; display: inline-block; width: 11px; height: 13px; margin-left: 6px; background: currentColor; -webkit-mask: var(--icon-arrow-down) center / contain no-repeat; mask: var(--icon-arrow-down) center / contain no-repeat; transition: transform .3s; }
details[open] summary::after { transform: rotate(180deg); }
details > div { opacity: var(--grey); }
details ul { list-style: disc; padding-left: 24px; }
/* apertura animata dove il browser lo supporta */
details::details-content { height: 0; overflow: hidden; transition: height .4s ease, content-visibility .4s allow-discrete; }
details[open]::details-content { height: auto; }
:root { interpolate-size: allow-keywords; }

/* ---------- elenchi con anteprima al passaggio (archive, discography): foto o logo animato ---------- */
main > p + ul,
main > details + ul { margin-top: 64px; }
main > details:has(+ ul) { margin-bottom: 0; }
main > ul:has(time):not(:has(strong)) { margin-left: 0; display: flex; flex-direction: column; gap: 4px; }
main > ul:has(time):not(:has(strong)) > li { position: relative; transition: opacity .22s ease; }
main > ul:has(time):not(:has(strong)) a {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: var(--gap);
  margin-left: calc(50% + 8px);
}
main > ul:has(time):not(:has(strong)) a > span:first-child { grid-column: span 2; }
main > ul:has(time):not(:has(strong)) a > *:not(img, video) { position: relative; z-index: 2; }
main > ul:has(time):not(:has(strong)) time { opacity: var(--grey); }
/* l'anteprima appare a sinistra, all'altezza della riga */
main > ul:has(time):not(:has(strong)) :is(img, video) {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(33.55% - 8px);
  height: auto;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transition: opacity .3s ease;
}
/* nelle ultime righe l'anteprima cresce verso l'alto, cosi' non allunga la pagina */
main > ul:has(time):not(:has(strong)) > li:nth-last-child(-n+30) :is(img, video) { top: auto; bottom: 0; }
main > ul:has(time):not(:has(strong)):hover > li { opacity: .25; }
main > ul:has(time):not(:has(strong)) > li:hover { opacity: 1; }
main > ul:has(time):not(:has(strong)) > li:hover :is(img, video) { opacity: 1; }

/* ---------- video: elenco a destra, il video riempie lo schermo al passaggio ---------- */
main > ul:has(strong) {
  min-height: calc(100svh - 32px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: var(--gap);
  text-align: right;
}
main > ul:has(strong) a { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; transition: opacity .22s ease; }
/* unica eccezione al monosize: i titoli dei video restano grandi come nel sito di prima */
main > ul:has(strong) strong { font: inherit; font-size: 32px; line-height: 32px; letter-spacing: -.035em; }
main > ul:has(strong) time { opacity: var(--grey); }
main > ul:has(strong) video {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transition: opacity .3s ease;
}
/* video verticale: nella meta' sinistra, intero */
main > ul:has(strong) video[height] { width: 50%; padding: 16px 8px 16px 16px; object-fit: contain; }
main > ul:has(strong) li::after { content: ""; position: fixed; inset: 0; background: linear-gradient(#0000004d, #fff0 31%); opacity: 0; pointer-events: none; z-index: 1; }
main > ul:has(strong):hover a { opacity: .25; }
main > ul:has(strong) li:hover a { opacity: 1; }
main > ul:has(strong) li:hover video,
main > ul:has(strong) li:hover::after { opacity: 1; }

/* ---------- photography: griglia a 5 colonne, ogni foto apre la galleria ---------- */
main > section {
  margin: 64px 0 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: end;
  gap: 96px var(--gap);
}
main > section a { display: flex; flex-direction: column; gap: 8px; }
/* 4 formati che si alternano su un giro di 5: ogni colonna cambia; le righe sono allineate in basso,
   cosi' tutti i titoli stanno sulla stessa linea (niente masonry) */
main > section img { object-fit: cover; aspect-ratio: 4 / 5; }
main > section a:nth-child(5n + 1) img { aspect-ratio: 3 / 4; }
main > section a:nth-child(5n + 2) img { aspect-ratio: 2 / 3; }
main > section a:nth-child(5n + 3) img { aspect-ratio: 4 / 5; }
main > section a:nth-child(5n + 4) img { aspect-ratio: 1; }
main > section a:nth-child(5n) img { aspect-ratio: 3 / 4; }
main > section time { display: block; opacity: var(--grey); }
/* lightbox come quella di Webflow: fondo bianco al 95%, foto centrata, frecce e chiusura nere */
main > dialog,
dialog {
  position: fixed;
  inset: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  border: 0;
  background: rgba(255, 255, 255, .95);
  opacity: 0;
  transition: opacity .3s, display .3s allow-discrete, overlay .3s allow-discrete;
}
dialog[open] { opacity: 1; }
@starting-style { dialog[open] { opacity: 0; } }
dialog::backdrop { background: none; }
dialog img {
  position: absolute;
  inset: 0;
  margin: auto;
  width: auto;
  height: auto;
  max-width: 96vw;
  max-height: 84vh;
  transition: opacity .2s ease;
}
dialog button {
  position: absolute;
  top: 2vh;
  width: 136px;
  height: 96vh;
  border: 0;
  background: none;
  opacity: .7;
  cursor: pointer;
  transition: opacity .3s;
}
dialog button:nth-of-type(-n+2)::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 21px;
  height: 15px;
  background: var(--bg);
  -webkit-mask: var(--icon-arrow-right) center / contain no-repeat;
  mask: var(--icon-arrow-right) center / contain no-repeat;
}
dialog button:nth-of-type(1)::after { -webkit-mask-image: var(--icon-arrow-left); mask-image: var(--icon-arrow-left); }
dialog button:hover { opacity: 1; }
dialog button:focus:not(:focus-visible) { outline: none; }
dialog button:disabled { opacity: 0; cursor: default; }
dialog button:nth-of-type(1) { left: 0; }
dialog button:nth-of-type(2) { right: 0; }
/* chiudi: lo stesso cerchio bianco con la X del menu aperto */
dialog button:nth-of-type(3) {
  top: var(--gap);
  right: var(--gap);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--fg);
  opacity: 1;
  z-index: 1;
  transform: rotate(-45deg);
}

/* ---------- info ---------- */
main > img { aspect-ratio: 16 / 9; object-fit: cover; width: calc(50% - 8px); margin-bottom: 8px; }
main > address { margin-top: 64px; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); font-style: normal; }
main > address span { display: block; opacity: var(--grey); }

/* ---------- info: blocchi con etichetta piccola ---------- */
/* etichetta di sezione: piccola e grigia, con aria sopra */
main > h2 { margin-top: 128px; margin-bottom: var(--line); opacity: var(--grey); }
/* liste semplici: servizi e clienti in colonne */
main > ul:not(:has(time)) { columns: 3; column-gap: var(--gap); }
main > ul:not(:has(time)) li { break-inside: avoid; }
main > h2 + ul:not(:has(time)):has(> li:nth-child(10)) { columns: 4; }
main > h2 + address { margin-top: 0; }

/* ---------- dettaglio progetto ---------- */
article {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
}
/* testo e dati in alto a destra, poi l'immagine grande che parte all'altezza del menu */
article > header {
  grid-column: 2;
  min-height: calc(50vh - var(--gap) * 2);
}
/* dati del progetto: etichetta grigia, valore bianco, sulla griglia a 4 colonne del footer */
article > header dl { margin-top: calc(var(--line) * 2); display: grid; grid-template-columns: repeat(4, 1fr); column-gap: var(--gap); }
article > header dt { opacity: var(--grey); }
article > header dd { grid-column: span 3; }
article > header dd a { transition: opacity .22s; }
article > header dd a:hover { opacity: var(--grey); }
article > img,
article > video,
article > iframe {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
/* coppie affiancate, allineate in alto: ogni foto tiene le sue proporzioni, quindi una puo' essere piu' alta */
article > div {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: var(--gap);
}

/* pausa di testo tra le parti (print, digital): etichetta grigia e testo nella colonna destra */
article > section { grid-column: 2; margin: 48px 0; }
article > section h2 { opacity: var(--grey); }

/* galleria nel dettaglio (le zine): stesse regole della home, in 16:9 */
article > figure { grid-column: 1 / -1; display: grid; }
article > figure > img { grid-area: 1 / 1; aspect-ratio: 16 / 9; object-fit: cover; transition: opacity .5s ease; }
article > figure > * + img { opacity: 0; }
/* due meta': a sinistra indietro, a destra avanti */
article > figure button:first-of-type { justify-self: start; }
article > figure button:first-of-type::after { right: auto; left: 28px; -webkit-mask-image: var(--icon-arrow-left); mask-image: var(--icon-arrow-left); }
/* da tablet in su niente chevron: il cursore diventa una freccia bianca grande, verso il lato su cui sei */
@media (min-width: 768px) {
  article > figure button::after { display: none; }
  article > figure button:first-of-type { cursor: var(--icon-cursor-prev) 21 15, w-resize; }
  article > figure button:last-of-type { cursor: var(--icon-cursor-next) 21 15, e-resize; }
}

/* gli elementi delle griglie possono restringersi */
main li > *, article > * { min-width: 0; }

@media (max-width: 767px) {
  h1 { position: static; transform: none; margin: 64px 0 32px; mix-blend-mode: normal; }
  main > *, main > ul:has(time):not(:has(strong)) a { margin-left: 0; }
  main > img { width: 100%; }
  main > p:first-child { margin-top: 64px; }
  main > ol > li::before { position: static; grid-column: 1 / -1; margin-bottom: 8px; }
  main > ol h2, main > ol li > div { grid-column: 1 / -1; }
  main > ol h2 { margin-bottom: 16px; }
  main > ul:has(time):not(:has(strong)) :is(img, video) { display: none; }
  main > ul:has(strong) { min-height: 0; align-items: flex-start; text-align: left; }
  main > section { grid-template-columns: 1fr 1fr; }
  main > ul:not(:has(time)), main > h2 + ul:not(:has(time)):has(> li:nth-child(10)) { columns: 2; }
  article, article > div { grid-template-columns: 1fr; }
  article > header { grid-column: 1; min-height: 0; margin-top: 40px; }
  article > section { grid-column: 1; margin: 32px 0; }
  article > h1 { margin: 32px 0 0; }
}