/* Anteprima del sito 058.works (dalla versione 2 del prototipo).
   Tema colore (sfondo, barre, testo) scelto da sito.js a ogni visita; qui i valori di ripiego. */
@font-face { font-family: N27; src: url(font/N27-Regular.otf) format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: N27; src: url(font/N27-RegularItalic.otf) format("opentype"); font-weight: 400; font-style: italic; font-display: swap; }

body {
  --bg: #f7f4fe; --bar: #c7b9e6; --ink: #957bd0; /* li sostituisce sito.js */
  --fs: 34px; --dur: 700ms; --cdur: 450ms; --overlap: .6;
}
@media (max-width: 699px) { body { --fs: 30px; } } /* a 34px ".works" non ci sta nel modulo del logo */

/* Il cambio pagina non lampeggia: il browser tiene l'ultima immagine finché la nuova è pronta */
@view-transition { navigation: auto; }
::view-transition-group(root) { animation-duration: 0s; }

* { box-sizing: border-box; }
/* Spazio della scrollbar sempre riservato: la griglia si misura una volta e non cambia quando compare */
html { scrollbar-gutter: stable;
       /* iOS ingrandisce da solo i testi quando si ruota il telefono: le fasce crescono e il
          layout salta. Le misure sono nostre, non le deve toccare. */
       -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; font-family: N27, system-ui, sans-serif; color: var(--ink); background: var(--bg); }
a { color: inherit; text-decoration: none; }

.page { position: relative; display: grid; isolation: isolate;
        grid-template-columns: repeat(8, var(--mw));
        grid-template-rows: repeat(var(--rows, 18), var(--rh)); grid-auto-rows: var(--rh); }

/* Pattern: un rettangolo del colore delle barre ritagliato da una maschera di gradienti (disegnati
   subito, a differenza di un'immagine SVG). ::before = righe dispari, ::after = righe pari. */
.page::before, .page::after, .pin::before, .pin::after {
  content: ""; position: absolute; inset: 0; z-index: -1; background-color: var(--bar);
  /* gradienti ripetuti, non piastrelle: vedi rowGradient in sito.js */
  --righe: repeating-linear-gradient(transparent 0 var(--row), #000 0 calc(var(--row) + var(--bh)),
                                     transparent 0 calc(var(--rh) * 2));
  -webkit-mask-image: var(--pat), var(--righe);
          mask-image: var(--pat), var(--righe);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
.page::before, .pin::before { --pat: var(--pat-a); --row: 0px; }
.page::after, .pin::after   { --pat: var(--pat-b); --row: var(--rh); }
/* pagina o galleria che comincia dall'altra riga del modulo (vedi FASE in sito.js) */
.page.odd::before, .pin.odd::before { --pat: var(--pat-b); }
.page.odd::after,  .pin.odd::after  { --pat: var(--pat-a); }

/* Finestra: cancella lo sfondo e ci rimette sopra barre vere, animabili */
.win { position: relative; background: var(--bg); cursor: pointer;
       translate: var(--shift-px, 0px) 0;               /* data-shift, calcolato in sito.js */
       /* 1px in più sopra e ai lati (sotto no: lì iniziano le barre della riga dopo): i bordi della fascia
          e quelli delle barre cadono su frazioni di pixel e vengono arrotondati in modo diverso */
       box-shadow: 0 -1px 0 1px var(--bg); }
.win.bars { grid-column: 1 / -1; justify-self: start; } /* posizionata in barre (--bl, --br, --bw, --bc) */
.content { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 max(10px, calc(var(--rh) * .2));
           opacity: 0; transform: translateY(8px);
           transition: opacity var(--cdur) ease, transform var(--cdur) ease; }
.win[data-fit] .content { justify-content: center; text-align: center; }
.slat { position: absolute; background: var(--bar); transform-origin: center; --a: 90deg;
        transition: transform var(--dur) cubic-bezier(.6,0,.3,1);
        transition-delay: calc(var(--cdur) + var(--i) * var(--stag)); } /* in chiusura aspetta il contenuto */
.win.open .content { opacity: 1; transform: none;
                     transition-delay: calc(var(--dur) * var(--overlap) + var(--maxi) * var(--stag)); }
.win.open .slat { transform: perspective(500px) rotateY(var(--a)); transition-delay: calc(var(--i) * var(--stag)); }
.win.open .slat.fisso { transform: none; }

/* Galleria: si aggancia allo schermo e scorrendo in verticale le foto vanno in orizzontale.
   .pin resta fermo (sticky) e ha il suo pattern; .band è la fascia chiara; .track scorre. */
.galleria { grid-column: 1 / -1; position: relative; }
.pin { position: sticky; top: 0; height: var(--pin-h); overflow: hidden; isolation: isolate; background: var(--bg); }
.band { position: absolute; left: var(--band-l); width: var(--band-w); top: var(--band-t); height: var(--band-h);
        background: var(--bg); overflow: hidden;
        box-shadow: 0 -1px 0 1px var(--bg);
        opacity: 0; transition: opacity var(--cdur) ease; }
.galleria.open .band { opacity: 1; }
/* niente will-change: con tante foto la striscia è larga migliaia di pixel e il livello grafico
   separato supera la dimensione massima di una texture: lo sfondo a fessure sfarfalla allo scroll */
.track { display: flex; gap: var(--gal-gap); height: 100%; }
.track img { height: 100%; width: auto; display: block; flex: none; }

@media (prefers-reduced-motion: reduce) {
  .slat, .content, .band { transition-duration: .01ms !important; transition-delay: 0s !important; }
}

/* Tipografia: un solo corpo e un solo peso per tutto, logo compreso */
.logo, .logo small, .txt, .meta, .title { font-size: var(--fs); font-weight: 400; line-height: 1.2; }
h1.content { margin: 0; font-weight: 400; }
.logo { color: var(--ink); text-align: center; }
.logo small { display: block; }
.content.logo-box { justify-content: center; padding: 0; }
a.win:hover .title, a.win:focus-visible .title { text-decoration: underline; text-underline-offset: .15em; }
a.win:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }